<template>
<div class="mallBox">
<div class="mask" v-show="showShopcart" @click="toggleShopcart"></div>
<div class="maskForCode" v-show="showMealCode" @click="closeMealCode"></div>
<!-- 主页面模块-->//底部不再需要绝对定位 防止出现闪屏
<flexbox orient="vertical" :gutter="0">
<flexbox-item>
<div class="flex-demo">
<scroller lock-x height="-120px" >
<div class="scrollBox">
<div class="swiperBox">
<swiper :options="swiperHeader">
<swiper-slide v-for="item in carouselList ">
<div class="swiperBox_img">
<img :src="item.url" alt="">
</div>
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
<div class="userBox" @click="personal">
<icon name="user" scale="3"></icon>
</div>
<div class="positionBox" @click="selectStore">
<span class="positionBox_icon"><icon name="position" scale="2"></icon></span>
<span class="positionBox_store">{{storeName.name}}</span>
</div>
<div class="foodBox">
<div v-for="item in foodList">
<divider>{{item.name}}</divider>
<swiper :options="swiperOption">
<swiper-slide v-for="i in item.data ">
<div class="swiper-box">
<div class="swiper-box_img" @click="showDetail(i)">
<img :src="i.url[0]" alt="">
</div>
<div class="food_height" @click="showDetail(i)">
<span>{{i.name}}</span>
</div>
<div>
<span class="food-font_color">￥</span>
<span class="food-font food-font_color">{{i.price}}</span>
<span class="food_unit">/份</span>
<span class="shopCart_add" @click="cartAdd(i)">+</span>
</div>
<div class="soldOut" v-show="i.count==0">
<img src="../../images/u229.png" alt="">
<span class="countEmpty">售罄</span>
</div>
</div>
</swiper-slide>
</swiper>
</div>
</div>
</div>
</scroller>
</div>
</flexbox-item>
<flexbox-item>
<div class="flex-demo menu-bottom" >
<flexbox :gutter="0">
<flexbox-item :span="9">
<div class="flex-demo menu-box" @click="toggleShopcart">
<span><icon name="cart" :scale="3"></icon></span>
<badge :text="shopCart.num" ></badge>
<span class="menu-box_money">￥{{shopCart.totalMoney}}</span>
</div>
</flexbox-item>
<flexbox-item>
<div class="flex-demo goPay" @click="goToPay">
<span>去结算</span>
</div>
</flexbox-item>
</flexbox>
<div class="date-box">
<checker v-model="mallDate" radio-required default-item-class="demo1-item" selected-item-class="demo1-item-selected">
<checker-item v-for="item in dateList" :value="item.key" @on-item-click="changeDate">
<div>{{item.label}}</div>
<div>{{item.date}}</div>
</checker-item>
</checker>
</div>
</div>
</flexbox-item>
</flexbox>
<!--取餐图片模块-->
<div class="takeMealImg" @click="getMealCode">
<div class="takeMealImg_img">
<img src="../../images/u617.png" alt="">
</div>
<div class="takeMealImg_bgImg">
<img src="../../images/u618.png" alt="">
<span>取餐啦</span>
</div>
</div>
<!--取餐码模块-->
<div class="takeMealCode" v-show="showMealCode">
<span class="cancelCode" @click="closeMealCode"><icon name="cancel" :scale="4"></icon></span>
<div class="takeMealCode_header">
<span>目前可取</span>
</div>
<div class="takeMealCode_scoll">
<scroller lock-x height="300px">
<div class="scollCodeBox">
<div class="detailCodeBox" v-for="item in codeList">
<flexbox>
<flexbox-item :span="5" >
<div class="codeName">
{{item.codeName}}
</div>
</flexbox-item>
<flexbox-item :span="7" >
<div class="codeName codeColor">
<div>
<span>取餐码:</span>
<span class="codeColor_font">{{item.codeNum}}</span>
</div>
<div>
<span>机柜号:</span>
<span class="codeColor_font">{{item.cabinetNum}}</span>
</div>
</div>
</flexbox-item>
</flexbox>
</div>
</div>
</scroller>
</div>
<div class="takeMealCode_footer" @click="refreshCode">
<span>{{refreshTime}}秒</span>
</div>
</div>
<!--购物车详情模块 -->
<shopcart v-show="showShopcart" >
<template v-for="list of shopCart.items">
<shopcart-item :good=item v-for="item of list"></shopcart-item>
</template>
</shopcart>
//shopcart.vue 注意写入<slot></slot> 
<!--商品详情页模块-->
<div v-show="showDetailFood">
<mall-detail ></mall-detail>
</div>
</div>
</template>
<script>
import { mapGetters } from ‘vuex‘
import {Shopcart,ShopcartItem} from "../shopcart"
import MallDetail from "../malldetail/malldetail.vue"
import {Divider,Scroller,Checker, CheckerItem,Flexbox, FlexboxItem,Badge } from ‘vux‘
import { swiper, swiperSlide } from ‘vue-awesome-swiper‘
export default {
data() {
return {
storeName:{},
codeList:[
{"codeName":‘黄焖鸡米饭1‘,"codeNum":‘112365‘,"cabinetNum":"1235"},
{"codeName":‘黄焖鸡米饭2‘,"codeNum":‘212365‘,"cabinetNum":"2235"},
{"codeName":‘黄焖鸡米饭3‘,"codeNum":‘312365‘,"cabinetNum":"3235"},
{"codeName":‘黄焖鸡米饭4‘,"codeNum":‘412365‘,"cabinetNum":"4235"},
],
refreshTime:60,
showMealCode:false,
dateList:[],
mallDate:‘‘,
carouselList:"",
foodList:[],
swiperOption: {
slidesPerView:2.2,
spaceBetween: 0,
},
swiperHeader: {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false
},
pagination: {
el: ‘.swiper-pagination‘,
clickable: true
},
},
}
},
computed:{
...mapGetters([
‘shopCart‘,
"showShopcart",
"showDetailFood",
"cartStyle"
]),
},
created(){
this.getImg()
this.getProduct()
this.getStore()
this.getStorage()
},
methods: {
getStorage(){
let cartStorage = JSON.parse(window.sessionStorage.getItem(‘shopCart‘))
if(cartStorage){
this.$store.commit("saveShopCart",cartStorage)
}
},
getStore(){
this.$http.get(‘/shop/api/get-mall-device-data‘).then((response) => {
let res = response.data;
if (res.status == 1) {
this.storeName=res.data[0]
this.$store.dispatch("storageStore",res.data[0])
}
else{
this.$vux.toast.show({
text: res.message,
type: ‘cancel‘
})
}
}).catch((error)=>{
this.$vux.toast.show({
text: "网络异常",
type:‘cancel‘
})
})
},
getProduct(){
this.$http.get(‘/shop/api/get-mall-data‘,{
params: {
date:this.mallDate,
type:‘new‘,
}
}).then((response) => {
let res = response.data;
if (res.status == 1) {
this.mallDate=res.data.oldDate
this.foodList=res.data.productArr
this.dateList=res.data.date
}
else{
this.$vux.toast.show({
text: res.message,
type: ‘cancel‘
})
}
}).catch((error)=>{
this.$vux.toast.show({
text: "网络异常",
type:‘cancel‘
})
})
},
getImg(){
this.$http.get(‘/shop/api/get-img-arr‘).then((response) => {
let res = response.data;
if (res.status == 1) {
this.carouselList=res.data
}
else{
this.$vux.toast.show({
text: res.message,
type: ‘cancel‘
})
}
}).catch((error)=>{
this.$vux.toast.show({
text: "网络异常",
type:‘cancel‘
})
})
},
selectStore(){
},
toggleShopcart(){
if(this.shopCart.num==0){
this.showShopcart=false
return
}
this.$store.dispatch("showCart")
if(this.cartStyle=="2"){
document.getElementById("all-order").setAttribute(‘style‘,‘bottom:60px‘)
}else{
document.getElementById("all-order").setAttribute(‘style‘,‘bottom:120px‘)
}
},
closeMealCode(){
this.showMealCode=false
},
times(){
var IntervalName= setInterval(() => {
this.time--;
if(this.time<1){
this.refreshTime=60
}
}, 1000)
},
getMealCode(){
this.showMealCode=true
this.refreshTime=60
},
refreshCode(){
},
showDetail(item){
this.$store.commit(‘controlCartStyle‘,"2")
this.$store.dispatch("watchDetail", item)
this.$store.dispatch("showDetailFood")
},
cartMinus(item){
this.$store.dispatch("minusCart", item)
},
cartAdd(item,module){
if(module==2&&item.count==0){
return
}
if(item.count==0){
this.$vux.alert.show({
content: ‘商品已售罄‘,
})
return
}
this.$store.dispatch("addCart", item)
this.$vux.toast.show({
text: "商品已加进购物车",
time:"1000",
type:‘text‘
})
},
goToPay(){
let $this=this
if(this.shopCart.num==0){
this.$vux.toast.show({
text: "请选择商品",
type:‘warn‘
})
return
}
this.$router.push({path:‘/account‘})
},
personal(){
this.$router.push({ path: ‘personal‘ });
},
changeDate(value){
if(value==this.mallDate){
return
}
this.mallDate=value
this.getProduct()
}
},
components: {
MallDetail,
Shopcart,ShopcartItem,
Divider,
swiper,
swiperSlide,
Scroller,
Checker, CheckerItem
,Flexbox, FlexboxItem,Badge
}
}
</script>
<style lang="less">
/* 公共样式*/
.demo1-item {
width: 14.28%;
box-sizing: border-box;
text-align: center;
div{
height: 30px;
line-height: 30px;
font-size: 16px;
}
}
.demo1-item-selected {
background: orangered;
color:white;
}
.menu-box{
height:60px;
padding:10px 12px;
font-size: 18px;
line-height: 60px;
background: transparent;
position: relative;
box-sizing: border-box;
text-align: left;
&_money{
position: absolute;
top:-8px;
left:60px;
color: red;
font-size: 18px;
}
.vux-badge{
position: absolute;
top:14px;
left:30px;
}
}
.goPay{
background:#0c6;
height: 60px;
line-height: 60px;
font-size: 18px;
text-align: center;
color: white;
}
.mallBox{
position: relative;
img{
width: 100%;
height: 100%;
display: block;
}
.mask{
height: 100%;
width: 100%;
position: absolute;
bottom:120px;
left:0;
z-index:5;
background: rgba(0,0,0,0.5);
}
.maskForCode{
height: 100%;
width: 100%;
position: absolute;
top: 0;
left:0;
z-index:888;
background: rgba(0,0,0,0.5);
}
.food_unit{
color:#c0c0c0;
position: relative;
top:-1px;
}
.food-font_color{
color:red;
}
.food-font{
font-size: 20px;
}
.inner-box{
.meal-detial{
font-weight: 600;
}
.money{
color: orangered;
}
}
.food-box{
border-bottom: 1px solid #cccccc;
}
.disables{
color: #ccc;
.rightButton{
color:#ccc;
}
.leftButton{
color:#ccc;
}
}
}
/*取餐 样式*/
.takeMealImg{
position: absolute;
bottom:150px;
right:25px;
z-index: 3;
&_img{
width:70px;
}
&_bgImg{
position: relative;
width: 80px;
height: 35px;
top:-12px;
right:5px;
transform:rotate(7deg);
span{
position: absolute;
color: white;
top: 3px;
left: 15px;
}
}
}
/*取餐码样式*/
.takeMealCode{
z-index:999;
height:400px;
width:90%;
position: absolute;
background: #fff0f0;
margin-left:5%;
top:50%;
margin-top:-200px;
.cancelCode{
position: absolute;
top: -50px;
right:0;
}
&_header{
font-size: 20px;
padding: 8px;
text-align: center;
color: white;
background: rgba(241, 99, 61, 1);
}
&_footer{
background:rgba(215, 215, 215, 1);
box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.349019607843137);
padding: 10px;
text-align: center;
font-size: 20px;
color:#fff;
}
.scollCodeBox{
padding:10px;
.detailCodeBox{
padding:10px;
height: 100px;
margin-bottom: 10px;
box-shadow:1px 2px 18px #ccc;
.codeName{
padding:10px;
color:#999;
height: 80px;
overflow: hidden;
}
.codeColor{
background: #666666;
color:#fff;
div{
padding: 10px 0;
.codeColor_font{
font-size: 18px;
float:right;
}
}
}
}
}
}
/*购物车样式--*/
#all-order{
max-height:350px;
position: fixed;
z-index: 6;
bottom: 120px;
left: 0;
background: #ffffff;
.menuDetailBox{
.menu-header{
font-size: 18px;
position: relative;
background: mediumseagreen;
display: inline-block;
width: 30%;
height: 100%;
text-align: center;
&_top{
position: relative;
top:3px;
}
}
.menu_address{
padding:10px;
box-sizing: border-box;
border-bottom: 1px solid darkgray;
.menu-font{
font-size: 20px;
color:gray;
}
}
}
.vux-flexbox #menu_empty{
text-align: center;
span{
position: relative;
top:4px;
}
}
}
/* 商品详情样式*/
/*底部下单样式*/
.mall_bottom{
height: 84px;
z-index: 7;
.myMenu{
background: transparent;
.go-pay{
background: transparent;
width:30%;
right:0;
&_icon{
position: relative;
top: 2px;
}
&_img{
height:100%;
img{
width: 100%;
height:100%;
}
}
}
}
.box {
background: white;
}
}
/*主页面下单样式 &&商品详情样式*/
.scrollBox{
position: relative;
.detail_box{
height: 40px;
}
.swiper-pagination{
text-align: left;
}
.foodBox{
.swiper-slide{
box-sizing: border-box;
min-width: 145px;
padding: 8px;
}
.vux-divider{
margin: auto;
font-size: 20px;
}
.vux-divider:after, .vux-divider:before{
width: 43%;
}
}
.swiperBox_img{
height: 150px;
}
.userBox{
display: inline;
position: absolute;
top: 20px;
right: 20px;
z-index: 2;
}
.positionBox{
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
background:rgba(222, 216, 216, 0.43);
min-width: 85px;
padding: 0 5px;
border-radius:20px;
&_icon{
position: relative;
top:3px;
}
&_store{
position: relative;
font-size:16px;
color:white;
}
}
.swiper-box{
position: relative;
padding: 10px;
min-width: 117px;
max-width: 150px;
box-shadow:1px 2px 18px #ccc;
&_img{
min-width: 117px;
max-width: 150px;
height: 100px;
}
.food_height{
height: 50px;
}
.soldOut{
position: absolute;
top:-2px;
right:-9px;
color: #fff;
width: 60px;
text-align: center;
transform:rotate(-1deg);
padding: 1px 10px;
.countEmpty{
position: absolute;
top: 7px;
right: 11px;
transform: rotate(48deg);
}
}
.shopCart_add{
float: right;
display: inline-block;
width: 20px;
height: 20px;
font-size: 18px;
border-radius:50%;
border: 1px solid red;
line-height: 18px;
text-align: center;
margin-top:8px;
color: red;
}
}
}
</style>
原文地址：https://www.cnblogs.com/MR-cui/p/8918869.html
时间： 2024-10-10 10:17:01