<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"></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="700" 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="height150"></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; }, //跳转详情 navToList() { uni.navigateTo({ url: '../kfc-details/kfc-details' }) } } } </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; margin-bottom: 55px; 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; min-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>