<template>
<div class="mallBox">
<div class="mask" v-show="showShopcart" @click="toggleShopcart"></div>
<div class="store-mask" v-show="whetherSame"></div>
<!-- 主页面模块-->
<flexbox orient="vertical" :gutter="0">
<flexbox-item>
<div class="flex-demo">
<scroller lock-x height="-102px" >
<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">
<span class="user-icon">
<icon name="user" scale="3"></icon>
</span>
</div>
<div class="positionBox" @click="selectStore">
<span class="positionBox_icon"><icon name="position" scale="2"></icon></span>
<span class="positionBox_store">{{storeName.title}}</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 food-font">/份</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" class="border-top">
<flexbox-item :span="7">
<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="store-dialog" v-if="whetherSame">
<div class="store-dialog_header">
<span>请选择订餐门店</span>
<span class="store-close" @click="choseStore('1')">×</span>
</div>
<div v-for="item in usedList" class="store-dialog_store" @click="choseStore('2',item)">
<span>{{item.title}}</span>
</div>
<div class="store-dialog_bgcolor">
</div>
<div class="store-dialog_header">
<span>当前位置</span>
</div>
<div class="store-dialog_store" @click="choseStore('1')">
{{localStore.title}}
</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>
<!--商品详情页模块-->
<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 {
localStore:{},
usedList:[],
whetherSame:false,
storeLocation:"麦金地集团",
dateList:[],
mallDate:'',
carouselList:"",
foodList:[],
swiperOption: {
slidesPerView:2.5,
spaceBetween: 0,
},
latitude:'',
longitude:'',
swiperHeader: {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false
},
pagination: {
el: '.swiper-pagination',
clickable: true
},
},
}
},
computed:{
...mapGetters([
'shopCart',
"showShopcart",
"showDetailFood",
"cartStyle",
"storeName"
]),
},
beforeRouteEnter(to, from, next){
next(vm => {
if (to.path === '/goodDetail') {
vm.$store.dispatch('showDetailFood', true)
} else {
vm.$store.dispatch('showDetailFood', false)
}
})
},
created(){
this.wechatConfig()
this.$wechat.ready(()=>{
this.getLocation()
})
this.getImg()
this.getProduct()
this.getStorage()
},
methods: {
wechatConfig() {
let urls = location.href.split('#')[0]
let postData={
url:urls,
mallId:_global.mallId
}
this.$http.post('/shop/api/js-sdk-config', postData).then((response) => {
if (response.status === 200 && response.data.status === 1) {
this.$wechat.config(JSON.parse(response.data.data))
} else {
this.$vux.toast.show({
text: '微信参数错误',
type: 'cancel'
})
}
}).catch(() => {
this.$vux.toast.show({
text: "网络异常",
type: 'cancel'
})
})
},
getLocation(){
let $this= this
this.$wechat.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
success: function (res) {
$this.latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
$this.longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
console.log( $this.latitude)
console.log( $this.longitude)
$this.getStoreList()
$this.$store.commit("saveLocation",res)
}
});
},
getStoreList(){
this.$http.get('/shop/api/last-store',{
params: {
latitude:this.latitude,
longitude:this.longitude,
userId:_global.customerId,
mallId:_global.mallId,
}
}).then((response) => {
let res = response.data;
if (res.status == 1) {
this.usedList=res.data.lastCheckStoreLog
this.localStore=res.data.minDistanceStore
let storeStorage = JSON.parse(window.sessionStorage.getItem('storeName'))
if(storeStorage){
this.$store.dispatch("storageStore",storeStorage)
return
}else{
if(res.data.isSame){
this.whetherSame=false
this.$store.dispatch("storageStore",res.data.minDistanceStore)
}else{
this.whetherSame=true
return
}
}
}
else{
this.$vux.toast.show({
text: res.message,
type: 'cancel'
})
}
}).catch((error)=>{
this.$vux.toast.show({
text: "网络异常",
type:'cancel'
})
})
},
choseStore(arg,last){
if(arg=='1'){
this.whetherSame=false
this.$store.dispatch("storageStore",this.localStore)
}else{
this.whetherSame=false
// this.storeName=last
this.$store.dispatch("storageStore",last)
}
},
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.localStore=res.data[0]
let storeStorage = JSON.parse(window.sessionStorage.getItem('storeName'))
if(storeStorage){
return
}
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(){
this.$router.push({path:"/store"})
},
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:50px')
}else{
document.getElementById("all-order").setAttribute('style','bottom:100px')
}
},
getMealCode(){
this.showMealCode=true
this.refreshTime=60
},
showDetail(item){
this.$router.push({path: '/goodDetail'})
this.$store.commit('controlCartStyle',"2")
this.$store.dispatch("watchDetail", item)
this.$store.dispatch("showDetailFood", true)
},
cartMinus(item){
this.$store.dispatch("minusCart", item)
},
cartAdd(item,module){
if(item.count==0){
this.$vux.toast.show({
text: "商品已售罄",
type:'cancel'
})
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;
background: #434343;
color: white;
div{
height: 25px;
line-height: 25px;
font-size: 14px;
}
}
.demo1-item-selected {
background: orangered;
color:white;
}
.menu-box{
height:50px;
padding:10px 12px;
font-size: 18px;
line-height: 50px;
background: transparent;
position: relative;
box-sizing: border-box;
text-align: left;
&_money{
position: absolute;
top:1px;
left:71px;
color: red;
font-size: 20px;
}
.vux-badge{
position: absolute;
top:5px;
left:30px;
}
}
.goPay{
background:#EE492B;
height: 50px;
line-height: 50px;
font-size: 18px;
text-align: center;
color: white;
}
.mallBox{
position: relative;
img{
width: 100%;
height: 100%;
display: block;
}
.store-mask{
height: 100%;
width: 100%;
position: absolute;
left:0;
z-index:8;
background: rgba(0,0,0,0.5);
}
.mask{
height: 100%;
width: 100%;
position: absolute;
bottom:120px;
left:0;
z-index:5;
background: rgba(0,0,0,0.5);
}
.food_unit{
color:#c0c0c0;
position: relative;
top:-1px;
}
.food-font_color{
color:#EB3D3D;
}
.food-font{
font-size: 12px;
}
.inner-box{
.meal-detial{
font-weight: 600;
}
.money{
color: orangered;
}
}
.food-box{
border-bottom: 1px solid #cccccc;
}
}
/*门店弹框样式*/
.store-dialog{
position: absolute;
border: 1px solid darkgray;
background: white;
z-index: 9;
width:70%;
left:15%;
top:30%;
&_header{
border-bottom: 1px solid #ccc;
font-weight: 700;
font-size: 18px;
height: 35px;
line-height:35px;
padding: 0 15px;
.store-close{
float: right;
font-size: 38px;
}
}
&_bgcolor{
height: 30px;
background:#bcbcbc;
}
&_store{
border-bottom: 1px solid #ccc;
padding: 5px 15px;
}
}
/*购物车样式--*/
#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;
}
}
}
/* 商品详情样式*/
/*底部下单样式*/
.border-top{
border-top:2px solid #D7D7D7;
box-shadow: 0 5px 5px #ccc;
}
.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;
background: #f2f2f2;
.detail_box{
height: 40px;
}
.swiper-pagination-bullet-active{
background:#EE492B;
}
.foodBox{
.swiper-slide{
box-sizing: border-box;
min-width:90px;
padding: 8px;
}
.vux-divider{
margin: auto;
font-size: 20px;
}
.vux-divider:after, .vux-divider:before{
width: 43%;
}
}
.swiperBox_img{
height: 150px;
overflow: hidden;
img{
width: 100%;
height: auto;
}
}
.userBox{
display: inline;
position: absolute;
top: 20px;
right: 20px;
width: 27px;
height: 27px;
border-radius: 15px;
background: black;
opacity: 0.5;
z-index: 2;
.user-icon{
position: relative;
}
}
.positionBox{
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
background: black;
opacity: 0.5;
min-width: 120px;
height: 30px;
line-height: 30px;
padding-left: 10px;
border-radius: 15px;
&_icon{
position: relative;
top:3px;
}
&_store{
position: relative;
font-size:14px;
color:white;
opacity:0.9;
}
}
.swiper-box{
position: relative;
padding: 10px;
/*min-width: 90px;*/
/*max-width: 130px;*/
border-radius:7.5px;
background: white;
height: 130px;
box-shadow:1px 2px 18px #ccc;
&_img{
min-width: 90px;
/*max-width: 130px;*/
height:80px;
}
.food_height{
height: 30px;
color: #333333;
font-size: 12px;
}
.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: 17px;
height: 17px;
font-size: 18px;
border-radius: 50%;
border: 1px solid red;
line-height: 15px;
text-align: center;
margin-top: 3px;
color: red;
}
}
}
</style>
浙公网安备 33010602011771号