JIALDemo/target/classes/front/index.html

604 lines
23 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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/favico.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>
<span>{{goodsPrice}}</span>
</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">
<span class="spanMoney"></span>{{item.amount}}</div>
</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 = {
amount:item.price/100,//金额
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){
//先清除对象数据如果不行的话dialog使用v-if
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>