2023-06-14 19:51:41 +08:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui" >
< title > 美团< / title >
< link rel = "icon" href = "images/favicon.ico" >
<!-- 不同屏幕尺寸根字体设置 -->
< script src = "./js/base.js" > < / script >
<!-- element - ui的样式 -->
< link rel = "stylesheet" href = "../backend/plugins/element-ui/index.css" / >
<!-- 引入vant样式 -->
< link rel = "stylesheet" href = "styles/vant.min.css" / >
<!-- 引入样式 -->
< link rel = "stylesheet" href = "styles/index.css" / >
<!-- 本页面内容的样式 -->
< link rel = "stylesheet" href = "styles/main.css" / >
< / head >
< body >
< div id = "main" class = "app" >
< div class = "divHead" >
< img src = "./images/user.png" @ click = "toUserPage" / >
< / div >
< div class = "divTitle" >
< div class = "divStatic" >
< img src = "./images/logo.png" class = "logo" / >
< div class = "divDesc" >
< div class = "divName" > 美团美食< / div >
< div class = "divSend" >
< span > < img src = "./images/time.png" / > 距离1.5km< / span >
< span > < img src = "./images/money.png" / > 配送费6元< / span >
< span > < img src = "./images/location.png" / > 预计时长12min< / span >
< / div >
< / div >
< / div >
< div class = "divDesc" >
简介: 美团中餐厅是美团点餐的独立的品牌，定位“大众 化的美食外送餐饮”，旨为顾客打造专业美食。
< / div >
< / div >
< div class = "divBody" >
< div class = "divType" >
< ul >
< li v-for = "(item,index) in categoryList" :key = "index" @ click = "categoryClick(index,item.id,item.type)" :class = "{active:activeType === index}" > {{item.name}}< / li >
< / ul >
< / div >
< div class = "divMenu" >
< div >
< div class = "divItem" v-for = "(item,index) in dishList" :key = "index" @ click = "dishDetails(item)" >
< el-image :src = "imgPathConvert(item.image)" >
< div slot = "error" class = "image-slot" >
< img src = "./images/noImg.png" / >
< / div >
< / el-image >
< div >
< div class = "divName" > {{item.name}}< / div >
< div class = "divDesc" > {{item.description}}< / div >
< div class = "divDesc" > {{'月销' + (item.saleNum ? item.saleNum : 0) }}< / div >
< div class = "divBottom" > < span > ￥< / span > < span > {{item.price/100}}< / span > < / div >
< div class = "divNum" >
< div class = "divSubtract" v-if = "item.number > 0" >
< img src = "./images/subtract.png" @ click . prevent . stop = "subtractCart(item)" / >
< / div >
< div class = "divDishNum" > {{item.number}}< / div >
< div class = "divTypes" v-if = "item.flavors && item.flavors.length > 0 && !item.number " @ click . prevent . stop = "chooseFlavorClick(item)" > 选择规格< / div >
< div class = "divAdd" v-else >
< img src = "./images/add.png" @ click . prevent . stop = "addCart(item)" / >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "divLayer" >
< div class = "divLayerLeft" > < / div >
< div class = "divLayerRight" > < / div >
< / div >
< div class = "divCart" v-if = "categoryList.length > 0" >
< div :class = "{imgCartActive: cartData && cartData.length > 0, imgCart:!cartData || cartData.length<1}" @ click = "openCart" > < / div >
< div :class = "{divGoodsNum:1===1, moreGoods:cartData && cartData.length > 99}" v-if = "cartData && cartData.length > 0" > {{ goodsNum }}< / div >
< div class = "divNum" >
< span > ￥< / span >
2023-06-14 21:31:39 +08:00
< span > {{goodsPrice/100}}< / span >
2023-06-14 19:51:41 +08:00
< / div >
< div class = "divPrice" > < / div >
< div :class = "{btnSubmitActive: cartData && cartData.length > 0, btnSubmit:!cartData || cartData.length<1}" @ click = "toAddOrderPage" > 去结算< / div >
< / div >
< van-dialog v-model = "dialogFlavor.show" :show-confirm-button = "false" class = "dialogFlavor" ref = "flavorDialog" >
< div class = "dialogTitle" > {{dialogFlavor.name}}< / div >
< div class = "divContent" >
< div v-for = "flavor in dialogFlavor.flavors" :key = "flavor.id" >
< div class = "divFlavorTitle" > {{flavor.name}}< / div >
< span v-for = "item in JSON.parse(flavor.value)"
:key="item"
@click="flavorClick(flavor,item)"
:class="{spanActive:flavor.dishFlavor === item}"
>{{item}}< / span >
< / div >
< / div >
< div class = "divBottom" >
< div > < span class = "spanMoney" > ￥< / span > {{dialogFlavor.price/100}}< / div >
< div @ click = "dialogFlavorAddCart" > 加入购物车< / div >
< / div >
< div class = "divFlavorClose" @ click = "dialogFlavor.show = false" >
< img src = "./images/close.png" / >
< / div >
< / van-dialog >
< van-popup v-model = "cartDialogShow" position = "bottom" :style = "{ height: '50%' }" class = "dialogCart" >
< div class = "divCartTitle" >
< div class = "title" > 购物车< / div >
< div class = "clear" @ click = "clearCart" >
< i class = "el-icon-delete" > < / i > 清空
< / div >
< / div >
< div class = "divCartContent" >
< div v-for = "item in cartData" :key = "item.id" class = "divCartItem" >
< el-image :src = "imgPathConvert(item.image)" >
< div slot = "error" class = "image-slot" >
< img src = "./images/noImg.png" / >
< / div >
< / el-image >
< div class = "divDesc" >
< div class = "name" > {{item.name}}< / div >
< div class = "price" >
2023-06-14 21:31:39 +08:00
< span class = "spanMoney" > ￥< / span > {{item.amount/100}}< / div >
2023-06-14 19:51:41 +08:00
< / div >
< div class = "divNum" >
< div class = "divSubtract" >
< img src = "./images/subtract.png" @ click = "cartNumberSubtract(item)" / >
< / div >
< div class = "divDishNum" > {{item.number}}< / div >
< div class = "divAdd" >
< img src = "./images/add.png" @ click = "cartNumAdd(item)" / >
< / div >
< / div >
< div class = "divSplit" > < / div >
< / div >
< / div >
< / van-popup >
< van-dialog v-model = "detailsDialog.show"
:show-confirm-button="false"
class="detailsDialog"
ref="detailsDialog"
v-if="detailsDialog.show"
>
< div class = "divContainer" >
< el-image :src = "imgPathConvert(detailsDialog.item.image)" >
< div slot = "error" class = "image-slot" >
< img src = "./images/noImg.png" / >
< / div >
< / el-image >
< div class = "title" > {{detailsDialog.item.name}}< / div >
< div class = "content" > {{detailsDialog.item.description}}< / div >
< / div >
< div class = "divNum" >
< div class = "left" >
< span > ￥< / span > < span > {{detailsDialog.item.price/100}}< / span >
< / div >
< div class = "right" >
< div class = "divSubtract" v-if = "detailsDialog.item.number > 0" >
< img src = "./images/subtract.png" @ click = "subtractCart(detailsDialog.item)" / >
< / div >
< div class = "divDishNum" > {{detailsDialog.item.number}}< / div >
< div class = "divTypes" v-if = "detailsDialog.item.flavors && detailsDialog.item.flavors.length > 0 && !detailsDialog.item.number " @ click = "chooseFlavorClick(detailsDialog.item)" > 选择规格< / div >
< div class = "divAdd" v-else >
< img src = "./images/add.png" @ click = "addCart(detailsDialog.item)" / >
< / div >
< / div >
< / div >
< div class = "detailsDialogClose" @ click = "detailsDialog.show = false" >
< img src = "./images/close.png" / >
< / div >
< / van-dialog >
< van-dialog v-model = "setMealDialog.show"
:show-confirm-button="false"
class="setMealDetailsDialog"
ref="setMealDetailsDialogd"
v-if="setMealDialog.show"
>
< div class = "divContainer" >
< div class = "title" > {{setMealDialog.item.name}}< / div >
< div class = "item" v-for = "(item,index) in setMealDialog.item.list" :key = "index" >
< el-image :src = "imgPathConvert(item.image)" >
< div slot = "error" class = "image-slot" >
< img src = "./images/noImg.png" / >
< / div >
< / el-image >
< div class = "divSubTitle" > {{item.name + '(' + item.copies + '份)' }}
< div class = "divPrice" >
< span > ￥< / span > < span > {{item.price/100}}< / span >
< / div >
< / div >
< div class = "content" > {{item.description}}< / div >
< / div >
< / div >
< div class = "divNum" >
< div class = "left" >
< span > ￥< / span > < span > {{setMealDialog.item.price/100}}< / span >
< / div >
< div class = "right" >
< div class = "divSubtract" v-if = "setMealDialog.item.number > 0" >
< img src = "./images/subtract.png" @ click = "subtractCart(setMealDialog.item)" / >
< / div >
< div class = "divDishNum" > {{setMealDialog.item.number}}< / div >
< div class = "divAdd" v-if = "setMealDialog.item.number" >
< img src = "./images/add.png" @ click = "addCart(setMealDialog.item)" / >
< / div >
< div class = "addCart" @ click = "addCart(setMealDialog.item)" v-if = "!setMealDialog.item.number" > 加入购物车< / div >
< / div >
< / div >
< div class = "detailsDialogClose" @ click = "setMealDialog.show = false" >
< img src = "./images/close.png" / >
< / div >
< / van-dialog >
< / div >
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
< script src = "../backend/plugins/vue/vue.js" > < / script >
<!-- 引入组件库 -->
< script src = "../backend/plugins/element-ui/index.js" > < / script >
<!-- 引入vant样式 -->
< script src = "./js/vant.min.js" > < / script >
<!-- 引入axios -->
< script src = "../backend/plugins/axios/axios.min.js" > < / script >
< script src = "./js/request.js" > < / script >
< script src = "./js/common.js" > < / script >
< script src = "./api/main.js" > < / script >
< / body >
< script >
new Vue({
el:'#main',
data(){
return {
//左边菜品类别index
activeType:0,
categoryList:[],
categoryId:undefined,
dishList:[],
cartData:[],
dialogFlavor:{
name:'',
flavors:[],
dishId:undefined,
price:undefined,
show:false,
image:''
},
cartDialogShow:false,
detailsDialog:{
show:false,
item:{image:''}
},
setMealDialog:{
show:false,
item:{}
},
}
},
computed:{
goodsNum(){
let num = 0
this.cartData.forEach(item=>{
num += item.number
})
if(num < 99 ) {
return num
}else{
return '99+'
}
},
goodsPrice(){
let price = 0
this.cartData.forEach(item=>{
price += (item.number * item.amount)
})
return price
}
},
created(){
},
watch:{
'dialogFlavor.show'(flag){
if(flag){
document.querySelector('.divCart').style.zIndex = 1
}else{
document.querySelector('.divCart').style.zIndex = 3000
}
},
},
mounted(){
this.initData()
},
methods:{
//初始化数据
initData(){
Promise.all([categoryListApi(),cartListApi({})]).then(res=>{
//获取分类数据
if(res[0].code === 1){
this.categoryList = res[0].data
if(Array.isArray(res[0].data) & & res[0].data.length > 0){
this.categoryId = res[0].data[0].id
if(res[0].data[0].type === 1){
this.getDishList()
}else{
this.getSetmealData()
}
}
}else{
this.$notify({ type:'warning', message:res[0].msg});
}
//获取菜品数据
if(res[1].code === 1){
this.cartData = res[1].data
}else{
this.$notify({ type:'warning', message:res[1].msg});
}
})
},
//分类点击
categoryClick(index,id,type){
this.activeType = index
this.categoryId = id
if(type === 1){//菜品
this.getDishList()
}else{
this.getSetmealData()
}
},
//获取菜品数据
async getDishList(){
if(!this.categoryId){
return
}
const res = await dishListApi({categoryId:this.categoryId,status:1})
if(res.code === 1){
let dishList = res.data
const cartData = this.cartData
if(dishList.length > 0 & & cartData.length > 0){
dishList.forEach(dish=>{
cartData.forEach(cart=>{
if(dish.id === cart.dishId){
dish.number = cart.number
}
})
})
}
this.dishList = dishList
}else{
this.$notify({ type:'warning', message:res.msg});
}
},
//获取套餐数据setmealId
async getSetmealData(){
if(!this.categoryId){
return
}
const res = await setmealListApi({categoryId:this.categoryId,status:1})
if(res.code === 1){
let dishList = res.data
const cartData = this.cartData
if(dishList.length > 0 & & cartData.length > 0){
dishList.forEach(dish=>{
cartData.forEach(cart=>{
if(dish.id === cart.setmealId){
dish.number = cart.number
}
})
})
}
this.dishList = dishList
}else{
this.$notify({ type:'warning', message:res.msg});
}
},
//获取购物车数据
async getCartData(){
const res = await cartListApi({})
if(res.code === 1){
this.cartData = res.data
}else{
this.$notify({ type:'warning', message:res.msg});
}
},
//菜单中往购物车中添加商品
async addCart(item){
let params = {
2023-06-14 21:31:39 +08:00
amount:item.price,//金额
2023-06-14 19:51:41 +08:00
dishFlavor:item.dishFlavor,//口味 如果没有传undefined
dishId:undefined,//菜品id
setmealId:undefined,//套餐id
name:item.name,
image:item.image
}
if(Array.isArray(item.flavors)){//表示是菜品
params.dishId = item.id
}else{//表示套餐 套餐没有口味
params.setmealId = item.id
}
const res = await addCartApi(params)
if(res.code === 1){
this.dishList.forEach(dish=>{
if(dish.id === item.id){
dish.number = res.data.number
}
})
if(this.setMealDialog.show){
item.number = res.data.number
}
this.getCartData()
}else{
this.$notify({ type:'warning', message:res.msg});
}
},
//菜单中减少选中的商品
async subtractCart(item){
let params = {
dishId:item.id,
}
if(!Array.isArray(item.flavors)){
params = {
setmealId:item.id,
}
}
const res = await updateCartApi(params)
if(res.code === 1){
this.dishList.forEach(dish=>{
if(dish.id === item.id){
dish.number = (res.data.number === 0 ? undefined : res.data.number)
}
})
if(this.setMealDialog.show){
item.number = (res.data.number === 0 ? undefined : res.data.number)
}
this.getCartData()
}else{
this.$notify({ type:'warning', message:res.msg});
}
},
//展开购物车
openCart(){
if(this.cartData.length > 0){
this.cartDialogShow = true
}
},
//购物车中增加商品数量
async cartNumAdd(item){
let params = {
amount:item.amount,//金额
dishFlavor:item.dishFlavor,//口味 如果没有传undefined
dishId:item.dishId,//菜品id
setmealId:item.setmealId,//套餐id
name:item.name,
image:item.image
}
const res = await addCartApi(params)
if(res.code === 1){
this.dishList.forEach(dish=>{
if(dish.id === (item.dishId || item.setmealId)){
dish.number = res.data.number
}
})
console.log(this.dishList)
this.getCartData()
}else{
this.$notify({ type:'warning', message:res.msg});
}
},
//购物车中减少商品数量
async cartNumberSubtract(item){
let params = {
dishId:item.dishId,
setmealId:item.setmealId,
}
const res = await updateCartApi(params)
if(res.code === 1){
this.dishList.forEach(dish=>{
if(dish.id === (item.dishId || item.setmealId)){
dish.number = (res.data.number === 0 ? undefined : res.data.number)
}
})
this.getCartData()
}else{
this.$notify({ type:'warning', message:res.msg});
}
},
//修改商品列表中的数据number
changeDishList(item){
for(let ele of this.dishList){
if(ele.id === (item.setmealId || item.dishId)){
ele.number = item.number
}
}
},
//清空购物车
async clearCart(){
const res = await clearCartApi()
if(res.code === 1){
for(let ele of this.dishList){
ele.number = undefined
}
this.cartData = []
this.cartDialogShow = false
}else{
this.$notify({ type:'warning', message:res.msg});
}
},
//点击选择规格
chooseFlavorClick(item){
this.dialogFlavor = {
name:'',
flavors:[],
dishId:undefined,
price:undefined,
show:false
}
this.dialogFlavor={
name:item.name,
flavors:item.flavors,
dishId:item.id,
price:item.price,
show:true,
image:item.image
}
},
flavorClick(flavor,item){
flavor.dishFlavor = item
//强制刷新dialog的dom
this.dialogFlavor.show = false
this.dialogFlavor.show = true
},
//选择规格加入购物车
dialogFlavorAddCart(){
const dialogFlavor = this.dialogFlavor
let flag = true
let dishFlavor = []
dialogFlavor.flavors.forEach(item=>{
if(item.dishFlavor){
dishFlavor.push(item.dishFlavor)
}else{
flag = false
Notify({ type: 'warning', message: '请选择'+ item.name });
}
})
if(flag){
this.addCart({
price:dialogFlavor.price,
dishFlavor:dishFlavor.join(","),
id:dialogFlavor.dishId,
flavors:[],
image:dialogFlavor.image,
name:dialogFlavor.name
})
this.dialogFlavor.show = false
}
},
//网络图片路径转换
imgPathConvert(path){
return imgPath(path)
},
//跳转到去结算界面
toAddOrderPage(){
if(this.cartData.length > 0){
window.requestAnimationFrame(()=>{
window.location.href ='/front/page/add-order.html'
})
}
},
toUserPage(){
window.requestAnimationFrame(()=>{
window.location.href= '/front/page/user.html'
})
},
async dishDetails(item){
//先清除对象数据，
this.detailsDialog.item = {}
this.setMealDialog.item = {}
if(Array.isArray(item.flavors)){
this.detailsDialog.item = item
this.detailsDialog.show = true
}else{
//显示套餐的数据
const res = await setMealDishDetailsApi(item.id)
if(res.code === 1){
this.setMealDialog.item = {...item,list:res.data}
this.setMealDialog.show = true
}else{
this.$notify({ type:'warning', message:res.msg});
}
}
}
}
})
< / script >
< / html >
