You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
680 lines
18 KiB
680 lines
18 KiB
<template>
|
|
<view class="content">
|
|
<view class="width100" v-if="flist ==''">
|
|
<view class="width100 height40 font14 padleft15 alijusstart"
|
|
style="background-color: #e7f2ea;color: #4e8a5c;">
|
|
<image class="icon20 paddtright5" mode="widthFix" src="../static/imgs/horn.png"></image>
|
|
营业时间{{starttime}}至{{endtime}}.
|
|
</view>
|
|
<view v-if="flist == '' " class="width100 mart60 fotct font14 fcor666">
|
|
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view scroll-y class="left-aside" v-if="flist !=''">
|
|
<view v-for="(item,index) in flist" :key="index" class="f-item" :class="{active: item.name == currentId}"
|
|
@click="tabtap(item)">
|
|
<view class="width100 fotct">
|
|
<image :src="item.imageUrl" mode="widthFix" class="icon45 height45" ></image>
|
|
</view>
|
|
<view class="width100 fotct" style="margin-top: -30px;">
|
|
{{item.name}}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
|
|
<scroll-view scroll-with-animation scroll-y class="right-aside" @scroll="asideScroll" :scroll-top="tabScrollTop"
|
|
v-if="flist !='' ">
|
|
<view v-for="(item,index) in slist" :key="index" :id="'main-'+item.kfcId">
|
|
<view class="s-item width90">
|
|
<text class="promotion_mixg1 backcor99" style="margin-right: -3px;"></text>
|
|
<text class="promotion_mixg1 backcor66" style="margin-right: -3px;"></text>
|
|
<text class="promotion_mixg1 backcor33 marglerig"></text>
|
|
{{item.name}}
|
|
</view>
|
|
<view v-if="titem.cateName == item.name" class="t-list mart10 paddbotm10" v-for="(titem,index) in tlist"
|
|
:key="index">
|
|
<view class="paddtop10 width94 font16 fcor333 fotrt fontwig6 text2">
|
|
{{titem.productName}}
|
|
</view>
|
|
<view class="width94 alijun mart5">
|
|
<image :src="titem.productImageUrl" mode="widthFix" class="qzgoodsimg"></image>
|
|
<view class="width50 fotrt">
|
|
<view class="width100 font12 colorc3">¥<text
|
|
class="font18 fontwig6 margle">{{titem.salePrice}}</text>
|
|
</view>
|
|
<view class="width100 font14 mart5 colorc3" v-if="titem.originalPrice != titem.salePrice">
|
|
已减¥{{(titem.originalPrice - titem.salePrice).toFixed(2)}}元</view>
|
|
<view class="width100 height20 font14 mart5 colorc3"
|
|
v-if="titem.originalPrice == titem.salePrice">
|
|
</view>
|
|
<view class="width100 font14 mart5 fcor999" v-if="titem.originalPrice != titem.salePrice"
|
|
style="text-decoration: line-through;">
|
|
原价¥{{titem.originalPrice}}
|
|
</view>
|
|
<view class="width100 height20 font14 mart5 fcor999"
|
|
v-if="titem.originalPrice == titem.salePrice" style="text-decoration: line-through;">
|
|
|
|
</view>
|
|
<view class="mart10 icon-click fotrt alijusend" v-if="titem.productId">
|
|
<image class="btn-reduce" mode="widthFix" src="../static/imgs/reduce.png"
|
|
v-if="titem.count > 0" @click="deletenums(titem)"></image>
|
|
<view class="num fcorfff" style="background: #d90209;" v-if="titem.count > 0">
|
|
{{titem.count}}
|
|
</view>
|
|
<image class="btn-plus" mode="widthFix" src="../static/imgs/plus.png"
|
|
@click="showPopups(titem)"></image>
|
|
</view>
|
|
|
|
<view class="mart10 icon-click fotrt alijusend" v-else>
|
|
<view class="num fcorfff font14" style="background: #d90209;"
|
|
@click="showPopups(titem)">
|
|
选规格
|
|
</view>
|
|
<view class="unibadge" v-if="titem.count > 0">
|
|
{{titem.count}}
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<shopcart v-if="flist !='' " :goods="shoppingcart" @add="addCart" @dec="decreaseCart" @delAll="delAll">
|
|
</shopcart>
|
|
|
|
|
|
<!-- 弹窗选择规格 -->
|
|
<wybPopup ref="popup" type="bottom" width="500" height="600" :scrollY="true" radius="6" :showCloseIcon="true">
|
|
<image mode="widthFix" class="width40w mart40" :src="kfcimgs"></image>
|
|
<view class="width100 line1 mart10"></view>
|
|
<view class="mart20 width90 font18 fontwig6 fcor333">{{kfcname}}</view>
|
|
<view class="width90 mart10">
|
|
<view class="fcor333 font16 fontwig6">可选套餐</view>
|
|
<view class="mart10 paddleft10 paddtright10 fotct height30 fcor666 font12 typecage"
|
|
v-for="(item,index) in kdjchangelist" :class="[productId == item.productId ? 'bocactive' : '']"
|
|
:key="index" @click="changetype(item)">
|
|
{{item.productName}}
|
|
</view>
|
|
</view>
|
|
<view class="height120"></view>
|
|
<view class="wybfot width100">
|
|
<view class="height50 pricefot alijusstart backcorfff">
|
|
<view class="width60 margle10">
|
|
¥<text class="font24 fontwig6 fcor333 margle">{{kfcprice}}</text>
|
|
</view>
|
|
<view class="icon-click alijusstart">
|
|
<image class="btn-reduce" mode="widthFix" @click="decreaseshopCart()"
|
|
src="../static/imgs/wreduce.png"></image>
|
|
<view class="num fcor333">{{nums}}</view>
|
|
<image class="btn-plus" mode="widthFix" @click="addshopCart()" src="../static/imgs/plus.png">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="width100 height50 fotct fcorfff" style="background-color: #c72a20;" @click="close()">
|
|
加入购物车</view>
|
|
</view>
|
|
</wybPopup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import shopcart from '../../components/shopcart.vue';
|
|
import wybPopup from '../../components/wyb-popup/wyb-popup.vue';
|
|
import {
|
|
listByStoreCode
|
|
} from '../../Utils/Api.js';
|
|
let app = getApp();
|
|
export default {
|
|
components: {
|
|
shopcart,
|
|
wybPopup
|
|
},
|
|
data() {
|
|
return {
|
|
sizeCalcState: false,
|
|
tabScrollTop: 0,
|
|
currentId: '',
|
|
flist: [],
|
|
slist: [],
|
|
tlist: [],
|
|
list: [],
|
|
storeCode: '', //门店编号
|
|
kdjchangelist: '', //选择的数据
|
|
nums: 1, //数量
|
|
shoppingcart: [], //购物车
|
|
productId: '', //商品id
|
|
kfcname: '', // 名字
|
|
kfcimgs: '', //图片
|
|
kfcprice: '', //价格
|
|
kfcoldprice: '', //原价
|
|
starttime: '', //开始时间
|
|
endtime: '', //结束时间
|
|
imagewxUrl: app.globalData.imageWxImg,
|
|
imgadres: 'storeClose.png',
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.storeCode = options.storeCode;
|
|
this.starttime = options.sttime;
|
|
this.endtime = options.entime;
|
|
this.listByStoreCode();
|
|
},
|
|
methods: {
|
|
//肯德基商品详情
|
|
listByStoreCode() {
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
})
|
|
let datas = {
|
|
storeCode: this.storeCode,
|
|
regionId: app.globalData.cityId
|
|
}
|
|
listByStoreCode(datas).then(res => {
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
}, 1000);
|
|
if (res.return_code == '000000') {
|
|
this.flist = res.return_data;
|
|
this.slist = res.return_data;
|
|
res.return_data.forEach(item => {
|
|
item.products.forEach(items => {
|
|
this.tlist.push(items);
|
|
})
|
|
})
|
|
this.currentId = res.return_data[0].name;
|
|
}
|
|
})
|
|
},
|
|
async loadData() {
|
|
this.flist.forEach(item => {
|
|
item.products.forEach(items => {
|
|
this.tlist.push(items);
|
|
})
|
|
})
|
|
},
|
|
|
|
//一级分类点击
|
|
tabtap(item) {
|
|
uni.showLoading({})
|
|
if (!this.sizeCalcState) {
|
|
this.calcSize();
|
|
}
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
this.currentId = item.name;
|
|
let index = this.slist.findIndex(sitem => sitem.name == item.name);
|
|
this.tabScrollTop = this.slist[index].top;
|
|
}, 1000);
|
|
},
|
|
//右侧栏滚动
|
|
asideScroll(e) {
|
|
if (!this.sizeCalcState) {
|
|
this.calcSize();
|
|
}
|
|
let scrollTop = e.detail.scrollTop;
|
|
let tabs = this.slist.filter(item => item.top <= scrollTop).reverse();
|
|
if (tabs.length > 0) {
|
|
this.currentId = tabs[0].name;
|
|
}
|
|
},
|
|
//计算右侧栏每个tab的高度等信息
|
|
calcSize() {
|
|
let h = 0;
|
|
this.slist.forEach(item => {
|
|
let view = uni.createSelectorQuery().select("#main-" + item.kfcId);
|
|
view.fields({
|
|
size: true
|
|
}, data => {
|
|
item.top = h;
|
|
h += data.height;
|
|
item.bottom = h;
|
|
}).exec();
|
|
})
|
|
this.sizeCalcState = true;
|
|
},
|
|
// 规格
|
|
addshopCart() {
|
|
this.nums = this.nums + 1;
|
|
},
|
|
decreaseshopCart() {
|
|
if (this.nums > 1) {
|
|
this.nums = this.nums - 1;
|
|
}
|
|
},
|
|
//购物车
|
|
addCart: function(item) {
|
|
if (item.num >= 0) {
|
|
item.num++
|
|
for (var i = 0; i < this.tlist.length; i++) {
|
|
if (this.tlist[i].productId && item.productId == this.tlist[i].productId) {
|
|
this.tlist[i].count = item.num;
|
|
}
|
|
|
|
if (!this.tlist[i].productId) {
|
|
for (var k = 0; k < this.tlist[i].specGroups.length; k++) {
|
|
if (item.productId == this.tlist[i].specGroups[k].productId) {
|
|
this.tlist[i].count = item.num
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
this.shoppingcart.forEach((good) => {
|
|
if (item.name == good.name)
|
|
good.num = item.num
|
|
})
|
|
|
|
} else {
|
|
this.shoppingcart.forEach((good) => {
|
|
if (item.name == good.name)
|
|
Vue.set(good, 'count', 1)
|
|
})
|
|
}
|
|
|
|
},
|
|
decreaseCart(item) {
|
|
if (item.num) {
|
|
item.num--
|
|
for (var i = 0; i < this.tlist.length; i++) {
|
|
if (this.tlist[i].productId && item.productId == this.tlist[i].productId) {
|
|
this.tlist[i].count = this.tlist[i].count - 1;
|
|
}
|
|
|
|
if (!this.tlist[i].productId) {
|
|
for (var k = 0; k < this.tlist[i].specGroups.length; k++) {
|
|
if (item.productId == this.tlist[i].specGroups[k].productId) {
|
|
this.tlist[i].count = this.tlist[i].count - 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
this.shoppingcart.forEach((good) => {
|
|
if (item.name == good.name)
|
|
good.num = item.num
|
|
})
|
|
}
|
|
},
|
|
// 清空购物车
|
|
delAll() {
|
|
this.shoppingcart.forEach((good) => {
|
|
if (good.num) {
|
|
good.num = 0
|
|
}
|
|
})
|
|
|
|
for (var i = 0; i < this.tlist.length; i++) {
|
|
this.tlist[i].count = 0;
|
|
}
|
|
this.shoppingcart = [];
|
|
app.globalData.qianzhulist = '';
|
|
},
|
|
|
|
//商品减
|
|
deletenums(item) {
|
|
if (item.count) {
|
|
item.count--
|
|
for (var i = 0; i < this.tlist.length; i++) {
|
|
if (this.tlist[i].productId && item.productId == this.tlist[i].productId) {
|
|
this.tlist[i].count = item.count;
|
|
}
|
|
}
|
|
this.shoppingcart.forEach((good) => {
|
|
if (item.productName == good.name)
|
|
good.num = item.count
|
|
})
|
|
}
|
|
},
|
|
//弹出弹窗
|
|
showPopups(item) {
|
|
let that = this;
|
|
that.nums = 1;
|
|
if (item.productId) {
|
|
that.productId = item.productId;
|
|
// that.kdjchangelist = item;
|
|
that.kfcimgs = item.productImageUrl;
|
|
that.kfcname = item.productName;
|
|
that.kfcprice = item.salePrice;
|
|
that.kfcoldprice = item.originalPrice;
|
|
if (that.shoppingcart.length == 0) {
|
|
let datas = {
|
|
"num": 1,
|
|
"storeCode": that.storeCode,
|
|
"productId": that.productId,
|
|
"name": that.kfcname,
|
|
"imgs": that.kfcimgs,
|
|
"price": that.kfcprice,
|
|
"oldprice": that.kfcoldprice
|
|
}
|
|
that.shoppingcart.push(datas);
|
|
uni.showLoading({
|
|
title: '添加中...'
|
|
})
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
}, 1000);
|
|
|
|
} else {
|
|
let indexs = 1;
|
|
for (var i = 0; i < that.shoppingcart.length; i++) {
|
|
if (that.shoppingcart[i].name == that.kfcname) {
|
|
indexs = 0;
|
|
that.shoppingcart[i].num = that.shoppingcart[i].num + 1;
|
|
}
|
|
}
|
|
if (indexs != 0) {
|
|
let datas = {
|
|
"num": 1,
|
|
"storeCode": that.storeCode,
|
|
"productId": item.productId,
|
|
"name": that.kfcname,
|
|
"imgs": that.kfcimgs,
|
|
"price": that.kfcprice,
|
|
"oldprice": that.kfcoldprice
|
|
}
|
|
that.shoppingcart.push(datas);
|
|
uni.showLoading({
|
|
title: '添加中...'
|
|
})
|
|
setTimeout(() => {
|
|
uni.hideLoading();
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < that.tlist.length; i++) {
|
|
if (that.tlist[i].productId && item.productId == that.tlist[i].productId) {
|
|
that.tlist[i].count = that.tlist[i].count + 1
|
|
}
|
|
}
|
|
} else {
|
|
that.kdjchangelist = item.specGroups;
|
|
that.kfcimgs = item.specGroups[0].productImageUrl;
|
|
that.productId = item.specGroups[0].productId;
|
|
that.kfcprice = item.specGroups[0].salePrice;
|
|
that.kfcname = item.specGroups[0].productName;
|
|
that.kfcoldprice = item.specGroups[0].originalPrice;
|
|
that.$refs.popup.show();
|
|
}
|
|
|
|
},
|
|
|
|
//选择类型
|
|
changetype(item) {
|
|
this.productId = item.productId;
|
|
this.kfcimgs = item.productImageUrl;
|
|
this.kfcname = item.productName;
|
|
this.kfcoldprice = item.originalPrice;
|
|
this.kfcprice = item.salePrice;
|
|
},
|
|
|
|
//关闭弹窗
|
|
close() {
|
|
if (this.shoppingcart.length == 0) {
|
|
let datas = {
|
|
"num": this.nums,
|
|
"storeCode": this.storeCode,
|
|
"productId": this.productId,
|
|
"name": this.kfcname,
|
|
"imgs": this.kfcimgs,
|
|
"price": this.kfcprice,
|
|
"oldprice": this.kfcoldprice
|
|
}
|
|
this.shoppingcart.push(datas);
|
|
for (var i = 0; i < this.tlist.length; i++) {
|
|
if (!this.tlist[i].productId) {
|
|
for (var k = 0; k < this.tlist[i].specGroups.length; k++) {
|
|
if (this.productId == this.tlist[i].specGroups[k].productId) {
|
|
this.tlist[i].count = this.tlist[i].count + this.nums
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
this.$refs.popup.hide();
|
|
return;
|
|
}
|
|
let indexs = 1;
|
|
for (var i = 0; i < this.shoppingcart.length; i++) {
|
|
if (this.shoppingcart[i].name == this.kfcname) {
|
|
indexs = 0;
|
|
this.shoppingcart[i].num = this.shoppingcart[i].num + this.nums;
|
|
for (var i = 0; i < this.tlist.length; i++) {
|
|
if (!this.tlist[i].productId) {
|
|
for (var k = 0; k < this.tlist[i].specGroups.length; k++) {
|
|
if (this.productId == this.tlist[i].specGroups[k].productId) {
|
|
this.tlist[i].count = this.tlist[i].count + this.nums
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (indexs != 0) {
|
|
let datas = {
|
|
"num": this.nums,
|
|
"storeCode": this.storeCode,
|
|
"productId": this.productId,
|
|
"name": this.kfcname,
|
|
"imgs": this.kfcimgs,
|
|
"price": this.kfcprice,
|
|
"oldprice": this.kfcoldprice
|
|
}
|
|
this.shoppingcart.push(datas);
|
|
for (var i = 0; i < this.tlist.length; i++) {
|
|
if (!this.tlist[i].productId) {
|
|
for (var k = 0; k < this.tlist[i].specGroups.length; k++) {
|
|
if (this.productId == this.tlist[i].specGroups[k].productId) {
|
|
this.tlist[i].count = this.tlist[i].count + this.nums
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
this.$refs.popup.hide();
|
|
},
|
|
//排除key对比
|
|
checinfo(item, item1) {
|
|
const keys1 = Object.keys(item);
|
|
const keys2 = Object.keys(item1);
|
|
if (keys1.length !== keys2.length) {
|
|
return false;
|
|
}
|
|
for (let index = 0; index < keys1.length; index++) {
|
|
const val1 = item[keys1[index]];
|
|
const val2 = item1[keys2[index]];
|
|
if (keys2[index] !== 'num') {
|
|
if (val1 !== val2) {
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
|
|
return true;
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page,
|
|
.content {
|
|
height: 100%;
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
bottom: 55px;
|
|
}
|
|
|
|
.heads {
|
|
position: absolute;
|
|
}
|
|
|
|
.icon20 {
|
|
width: 20px;
|
|
}
|
|
|
|
.icon15 {
|
|
width: 15px;
|
|
}
|
|
|
|
.icon45 {
|
|
width: 45px;
|
|
}
|
|
|
|
|
|
.left-aside {
|
|
flex-shrink: 0;
|
|
width: 80px;
|
|
height: 100%;
|
|
// margin-top: 85px;
|
|
padding-bottom: 55px;
|
|
box-sizing: border-box;
|
|
background-color: #fff;
|
|
}
|
|
|
|
|
|
.f-item {
|
|
display: grid;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 180upx;
|
|
padding: 10px 0px;
|
|
font-size: 24upx;
|
|
color: #666666;
|
|
position: relative;
|
|
|
|
&.active {
|
|
background: #f8f8f8;
|
|
}
|
|
}
|
|
|
|
.right-aside {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
// margin-top: 85px;
|
|
padding-left: 20upx;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.s-item {
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
display: flex;
|
|
height: 70upx;
|
|
// padding-top: 8upx;
|
|
font-size: 28upx;
|
|
color: #333333;
|
|
|
|
.promotion_mixg1 {
|
|
width: 12px;
|
|
height: 2px;
|
|
border-radius: 18px;
|
|
transform: rotate(125deg);
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.t-list {
|
|
width: 96%;
|
|
border-radius: 15px;
|
|
background: #fff;
|
|
min-height: 150px;
|
|
|
|
&:after {
|
|
content: '';
|
|
flex: 99;
|
|
height: 0;
|
|
}
|
|
|
|
}
|
|
|
|
.qzgoodsimg {
|
|
// margin-top: -10px;
|
|
height: 100px;
|
|
width: 120px;
|
|
}
|
|
|
|
.icon-click {
|
|
// position: absolute;
|
|
height: 28px;
|
|
right: 6%;
|
|
}
|
|
|
|
.btn-reduce {
|
|
// position: absolute;
|
|
// left: 0px;
|
|
// top: 0;
|
|
width: 28px;
|
|
height: 28px;
|
|
// z-index: 1;
|
|
|
|
}
|
|
|
|
.btn-plus {
|
|
// position: absolute;
|
|
// right: 0px;
|
|
// top: 0;
|
|
width: 28px;
|
|
height: 28px;
|
|
// z-index: 1;
|
|
}
|
|
|
|
.num {
|
|
padding: 0px 20px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
font-weight: 600;
|
|
border-radius: 18px;
|
|
}
|
|
|
|
.typecage {
|
|
margin-left: 2.5%;
|
|
border-radius: 3px;
|
|
border: 1px solid #333333;
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
.pricefot {
|
|
border-radius: 15px 15px 0 0;
|
|
box-shadow: 0px 5px 20px #333333;
|
|
}
|
|
|
|
.bocactive {
|
|
background-color: #eaf0ec;
|
|
color: #00713e;
|
|
}
|
|
|
|
.wybfot {
|
|
position: fixed;
|
|
bottom: 0px;
|
|
}
|
|
|
|
.unibadge {
|
|
background: #000;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
font-size: 9px;
|
|
color: #fff;
|
|
line-height: 20px;
|
|
text-align: center;
|
|
position: absolute;
|
|
margin-top: -25px;
|
|
margin-right: -5px;
|
|
}
|
|
</style>
|
|
|