Skip to content

M
ming-order
Commit 103a8eab by fengzhaoyu
Options

项目第一次提交

parents
Showing with 544 additions and 0 deletions
.idea/ming-order.iml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
.idea/misc.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" />
</component>
</project>
\ No newline at end of file
.idea/modules.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/ming-order.iml" filepath="$PROJECT_DIR$/.idea/ming-order.iml" />
</modules>
</component>
</project>
\ No newline at end of file
.idea/order.iml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
.idea/vcs.xml 0 → 100644
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
</component>
</project>
\ No newline at end of file
css/index.css 0 → 100644
* {
font-family: 'PingFangSC-Regular';
font-size: 22px;
color: #000000;
margin: 0;
padding: 0;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
li {
list-style: none;
}
::-webkit-scrollbar{
display: none;
width: 0;
height: 0;
}
[v-cloak] {
display: none;
}
#order {
display: flex;
background: #ECECEC;
height: 678px;
overflow: hidden;
}
/*菜单分类*/
.category {
background: #ffffff;
width: 160px;
height: 678px;
overflow: hidden;
}
.category ul {
width: 100%;
height: 598px;
margin-top: 20px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.category li {
cursor: pointer;
width: 155px;
height: 64px;
text-align: center;
line-height: 64px;
border-right: 5px solid #ffffff;
}
/*点菜*/
.menu {
width: 820px;
height: 678px;
overflow: hidden;
}
.menu ul {
width: 820px;
height: 658px;
margin-top: 20px;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
.menu li:nth-child(-n +4) {
margin-top: 0;
}
.menu li {
width: 180px;
height: 186px;
float: left;
margin: 35px 0 0 20px;
background: #ffffff;
border-radius: 4px;
}
.imgContainer {
width: 100%;
height: 102px;
}
.menu img {
width: 100%;
height: 102px;
vertical-align: center;
}
.menu .name {
margin: 9px 0 5px 10px;
height: 30px;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.menu .price {
height: 30px;
margin-left: 10px;
line-height: 30px;
font-size: 20px;
color: #E60012;;
}
/*支付模块*/
.payment {
width: 366px;
height: 628px;
background: white;
position: relative;
margin-top: 20px;
border-radius: 4px;
overflow: hidden;
}
.title {
font-family: PingFangSC-Medium;
width: 100%;
height: 64px;
line-height: 64px;
text-align: center;
border-bottom: 1px solid #ECECEC;
position: relative;
}
.title span {
line-height: 30px;
width: 90px;
height: 30px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -15px;
margin-left: -45px;
}
.clear {
text-align: center;
background: #E60012;
border-radius: 4px;
width: 78px;
height: 40px;
line-height: 40px;
float: right;
margin-right: 10px;
margin-top: 12px;
color: #ffffff;
font-size: 20px;
cursor: pointer;
}
.payment .scroll3 {
width: 100%;
height: 350px;
overflow: hidden;
}
.payment ul {
width: 100%;
height: 350px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.payment li {
width: 100%;
height: 58px;
border-bottom: 1px solid #ECECEC;
position: relative;
}
.payment .name{
text-align: left;
position: absolute;
width: 134px;
height: 30px;
line-height: 30px;
font-size: 18px;
top: 50%;
left: 10px;
margin-top: -15px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.num {
height: 30px;
position: absolute;
top: 50%;
left: 157px;
margin-top: -15px;
}
.num>div {
text-align: center;
line-height: 30px;
width: 30px;
height: 30px;
float: left;
border-radius: 50%;
color: #A6A6A6;
cursor: pointer;
}
.reduce {
background: url("../img/reduce.png") center /100% 100%;
}
.add {
background: url("../img/add.png") center /100% 100%;
}
.num span {
float: left;
font-family: 'PingFangSC-Medium';
text-align: center;
display: inline-block;
width: 38px;
height: 30px;
line-height: 30px;
vertical-align: top;
}
.money {
font-size: 20px;
height: 30px;
line-height: 30px;
position: absolute;
top: 50%;
margin-top: -15px;
right: 10px;
color: #E60012;
}
.allPrice {
font-family: 'PingFangSC-Medium';
width: 100%;
height: 30px;
display: flex;
font-size: 20px;
line-height: 30px;
position: absolute;
bottom: 125px;
}
.allName {
font-family: 'PingFangSC-Medium';
margin-right: 70px;
margin-left: 10px;
}
.allMoney {
position: absolute;
height: 30px;
top: 50%;
right: 10px;
margin-top: -15px;
color: #E60012 ;
}
.checkout {
font-family: 'PingFangSC-Medium';
width: 345px;
height: 65px;
text-align: center;
line-height: 65px;
background: #E60012;
border-radius: 4px;
color: #ffffff;
font-size: 24px;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -172px;
cursor: pointer;
}
\ No newline at end of file
img/add.png 0 → 100644
img/add.png

902 Bytes

img/reduce.png 0 → 100644
img/reduce.png

830 Bytes

js/axios.min.js 0 → 100644
This diff is collapsed. Click to expand it.
js/vue.js 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
menu.html 0 → 100644
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点餐中心</title>
<!-- 引入主界面的样式-->
<link rel="stylesheet" href="css/index.css">
<!-- 引入vue-->
<script src="js/vue.js"></script>
<!-- 引入axios-->
<script src="js/axios.min.js"></script>
</head>
<body>
<div id="order" >
<!-- 菜单分类-->
<div class="category">
<ul>
<li v-cloak
v-for=" (category, index) in categorys" :key="category.productCategoryId"
@click="selectClass(category,index)"
:style = 'selectIndex == index ? selectStyle: "" '>
{{category.productCategoryName}}
</li>
</ul>
</div>
<!-- 点菜-->
<div class="menu" >
<ul >
<li v-for="(menu,index) in defaultProduct" :key="menu.productId" @click="addCar(menu,index)" v-cloak>
<div class="imgContainer">
<img :src='menu.productIcon' alt="">
</div>
<div class="name">{{menu.productName}}</div>
<div class="price">¥{{menu.productPrice}}</div>
</li>
</ul>
</div>
<!-- 支付-->
<div class="payment">
<div class="title">
<span>已选菜单</span>
<div class="clear" @click="clearCar()" >清空</div>
</div>
<div class="scroll3">
<ul>
<li v-for="(item, index) in carList" :key="item.productId" v-cloak>
<div class="name">{{item.productName}}</div>
<div class="num">
<div @click="reduce(index)" class="reduce"></div>
<span>{{item.count}}</span>
<div @click="add(index)" class="add"></div>
</div>
<div class="money">￥{{item.count * (item.productPrice*100)/100}}</div>
</li>
</ul>
</div>
<div class="allPrice">
<div class="allName">总计金额:</div>
<div class="allNum" v-cloak>{{allNum}}份</div>
<div class="allMoney" v-cloak>￥{{allPrice}}</div>
</div>
<div class="checkout" @click ='checkout'>结账</div>
</div>
</div>
</body>
<script>
// 获取orgId
var orgId = window.android.getOrgId()
localStorage.setItem('orgId',orgId)
// localStorage.setItem('orgId','ding9ddd48137390507735c2f4657eb6378f')
// axios.defaults.baseURL = 'http://192.168.1.101:9999/mingpay-phone' // 本地钱
axios.defaults.baseURL = 'http://139.224.55.14:9999/mingpay-phone' // beta环境
const $http = {
request: (url,method,data) => {
return new Promise(((resolve, reject) => {
axios({
method: method,
url: url,
data: data,
}).then(res => {
return resolve(res)
}).catch(err => {
return reject(res)
});
}))
}
}
Vue.prototype.$http = $http
var order = new Vue({
el: '#order',
data: {
categorys: [], // 菜单分类
defaultProduct: [], // 默认展示的菜
selectIndex: '0', // 左侧选中类别的index,用来做选项卡判断
selectStyle: {
'font-family': 'PingFangSC-Medium',
'border-right': '5px solid red',
'background-color':' #FFEDED',
'color': ' #E60012'
}, //左侧菜单分类列表选中时的样式
carList: [],// 所有加入购物车的列表数据
allNum: 0, // 购物车里商品总数
allPrice: 0 ,// 购物车里商品总价格
isDisplay: true, // 菜品分类是否展示隐藏 默认展示
isUp: true, //菜品是否上架 菜品上架
},
created() {
let data = {
orgId: localStorage.getItem('orgId')
}
this.$http.request('/v1/product/list_product_category','POST',data).then(res => {
// 左侧分类是否展示
res.data.data.forEach((item) => {
if(item.isDisplay == "DISPLAY") {
this.categorys.push(item)
}
})
console.log(this.categorys,33333333333333333)
return this.$http.request('/v1/product/list_product','post',{ productCategoryId: this.categorys[0].productCategoryId })
}).then(e => {
e.data.data.forEach((product) => {
// 菜品是否展示
if(product.productStatus == 'UP') {
this.defaultProduct.push(product)
}
})
})
},
mounted() {
window.clearCar = this.clearCar
},
methods:{
// 选菜的类别的点击事件
selectClass:function (menu,index) {
this.selectIndex = index
this.defaultProduct = []
this.$http.request('/v1/product/list_product','post',{productCategoryId: menu.productCategoryId})
.then(res => {
res.data.data.forEach(product => {
if(product.productStatus == 'UP') {
this.defaultProduct.push(product)
}
})
})
.catch(err => {
console.log(err)
})
},
// 点击加入购物车列表e
addCar:function (e) {
// 假设在购物车中没有找到商品
var flag = false
let gooodinfo = {
productId: e.productId,
productName: e.productName,
productPrice: e.productPrice,
count: 0
}
// 判断购物车里是否已经存在商品
this.carList.some(item => {
if(gooodinfo.productId == item.productId ) {
item.count += parseInt(gooodinfo.count) + 1
flag = true
return
}
})
// 购物车不存在这个商品新加一条数据
if (!flag) {
gooodinfo.count = 1
this.carList.push(gooodinfo)
}
//计算总数量 总价格
console.log(typeof(gooodinfo.productPrice))
var num1 = 270.72*10000
var num2 = 45.12*10000
console.log( (num1 + num2 )/10000)
console.log( num1)
console.log( num2)
this.allNum = this.allNum + 1
console.log(this.allPrice )
this.allPrice = ((this.allPrice*100 + gooodinfo.productPrice*100)/100).toFixed(2)
},
// 清空购物车
clearCar:function() {
this.carList = [];
this.allNum = 0
this.allPrice = 0
},
// 减少购物车的数量
reduce:function(index) {
this.allPrice = ((this.allPrice*100 - this.carList[index].productPrice*100)/100).toFixed(2)
this.carList[index].count = this.carList[index].count - 1
// 购物车里的商品数量减少到小于等于0时，从购物车里删除这条信息
if(this.carList[index].count <= 0) {
this.carList.splice(index,1)
}
this.allNum = this.allNum - 1
},
// 增加购物车的数量
add:function(index) {
this.carList[index].count = this.carList[index].count + 1
this.allNum = this.allNum + 1
this.allPrice = ((this.allPrice*100 + this.carList[index].productPrice*100)/100).toFixed(2)
},
// 结账
checkout: function () {
let setData = []
this.carList.forEach(item => {
setData.push({
productId: item.productId,
productQuantity: item.count
})
})
// 向设备端发送详情账单
window.android.pay(JSON.stringify(setData),this.allPrice)
}
}
})
</script>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment