<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 in flist" :key="item.id" class="f-item" :class="{active: item.id === currentId}" @click="tabtap(item)"> <view class="width100 fotct"> <image :src="item.ext2" 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 in slist" :key="item.id" :id="'main-'+item.id"> <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.ext1 == item.id" class="t-list mart10 paddbotm10" v-for="titem in tlist" :key="titem.id"> <view class="paddtop10 width94 font16 fcor333 fotrt fontwig6 text2"> {{titem.name}} </view> <view class="width94 alijun mart5"> <image :src="titem.defaultImage" mode="widthFix" class="qzgoodsimg"></image> <view class="width50 fotrt"> <view class="width100 font12 color2f6f43">¥<text class="font18 fontwig6 margle">{{titem.showPrice}}</text> </view> <view class="width100 font14 mart5 color2f6f43" v-if="titem.marketTallPrice != titem.salesTallPrice"> 已减¥{{(titem.marketTallPrice - titem.salesTallPrice).toFixed(2)}}元</view> <view class="width100 height20 font14 mart5 color2f6f43" v-if="titem.marketTallPrice == titem.salesTallPrice"> </view> <view class="width100 font14 mart5 fcor999" v-if="titem.marketTallPrice != titem.salesTallPrice" style="text-decoration: line-through;"> 原价¥{{titem.marketTallPrice}} </view> <view class="width100 height20 font14 mart5 fcor999" v-if="titem.marketTallPrice == titem.salesTallPrice" style="text-decoration: line-through;"> </view> <view class="mart10 icon-click fotrt alijusend"> <!-- <image class="btn-reduce" mode="widthFix" src="../static/imgs/wreduce.png" @click="deletenums(titem)" v-if="titem.count > 0"></image> --> <view class="num fcorfff font14" style="background: #4e8a5c;" @click="showPopup(titem)"> 选规格 </view> <view class="unibadge" v-if="titem.count > 0"> {{titem.count}}</view> <!-- <image class="btn-plus" mode="widthFix" src="../static/imgs/blueplus.png" @click="showPopup(titem)"></image> --> </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="cbkchangelist.defaultImage"></image> <view class="width100 line1"></view> <view class="mart20 width90 font18 fontwig6 fcor333">{{cbkchangelist.name}}</view> <view class="width90 mart10"> <view class="fcor333 font16 fontwig6">杯型</view> <view class="mart10 width30 fotct height30 fcor666 font12 typecage" :class="[cupSizeid == item ? 'bocactive' : '']" v-for="(item,index) in cupSize" :key="index" @click="changetype(1,item)"> {{item}} </view> </view> <view class="width90 mart10"> <view class="fcor333 font16 fontwig6">温度</view> <view class="mart10 width30 fotct height30 fcor666 font12 typecage" :class="[temperatureid == item ? 'bocactive' : '']" v-for="(item,index) in temperature" @click="changetype(2,item)" :key="index"> {{item}} </view> </view> <view class="width90 mart10" v-if="cream"> <view class="fcor333 font16 fontwig6">奶油</view> <view class="mart10 width30 fotct height30 fcor666 font12 typecage" :class="[creamid == item ? 'bocactive' : '']" v-for="(item,index) in cream" @click="changetype(3,item)" :key="index"> {{item}} </view> </view> <view class="width90 mart10" v-if="espresso"> <view class="fcor333 font16 fontwig6">浓缩咖啡</view> <view class="mart10 width30 fotct height30 fcor666 font12 typecage" :class="[espressoid == item ? 'bocactive' : '']" v-for="(item,index) in espresso" @click="changetype(4,item)" :key="index"> {{item}} </view> </view> <view class="width90 mart10" v-if="milk"> <view class="fcor333 font16 fontwig6">牛奶</view> <view class="mart10 width30 fotct height30 fcor666 font12 typecage" :class="[milkid == item ? 'bocactive' : '']" v-for="(item,index) in milk" @click="changetype(5,item)" :key="index"> {{item}} </view> </view> <view class="width90 mart10" v-if="milkBubble"> <view class="fcor333 font16 fontwig6">奶泡</view> <view class="mart10 width30 fotct height30 fcor666 font12 typecage" :class="[milkBubbleid == item ? 'bocactive' : '']" v-for="(item,index) in milkBubble" @click="changetype(6,item)" :key="index"> {{item}} </view> </view> <view class="height150"></view> <view class="wybfot width100"> <view class="height70 pricefot alijusstart backcorfff"> <view class="width60 margle10"> <view class="width100"> ¥<text class="font24 fontwig6 color2f6f43 margle">{{salesTallPrice}}</text> </view> <view class="width100 font12 fcor999"> <text>{{cupSizeid}}</text><text>,{{temperatureid}}</text><text v-if="creamid">,{{creamid}}</text><text v-if="espressoid">,{{espressoid}}</text><text v-if="milkid">,{{milkid}}</text><text v-if="milkBubbleid">,{{milkBubbleid}}</text> </view> </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/blueplus.png"> </image> </view> </view> <view class="width100 height50 backcorf2f6 fotct fcorfff" @click="close()">加入购物车 </view> </view> </wybPopup> </view> </template> <script> import shopcart from '../../components/shopcart.vue'; import wybPopup from '../../components/wyb-popup/wyb-popup.vue'; import { getStarbucksProducts } from '../../Utils/Api.js'; let app = getApp(); export default { components: { shopcart, wybPopup }, data() { return { sizeCalcState: false, tabScrollTop: 0, currentId: 1, flist: [], //一级 slist: [], //二级 tlist: [], //商品 cateList: [], storeCode: '25477', //门店编号 cupSize: '', //杯型数据 cupSizeid: '', //杯型id temperature: '', //温度数据 temperatureid: '', //温度id cream: '', //奶油数据 creamid: '', //奶油id espresso: '', //浓缩数据 espressoid: '', //浓缩id milk: '', //牛奶数据 milkid: '', //牛奶id milkBubble: '', //奶泡数据 milkBubbleid: '', //奶泡id cbkchangelist: '', //选择的数据 nums: 1, //数量 shoppingcart: [], //购物车 productId: '', //商品id salesTallPrice: '', //新价格 marketTallPrice: '', // 老价格 starttime: '', //开始时间 endtime: '', //结束时间 imagewxUrl: app.globalData.imageWxImg, imgadres: 'storeClose.png', } }, onLoad(options) { this.storeCode = options.storeCode; this.starttime = options.sttime; this.endtime = options.entime; this.getStarbucksProducts(); }, methods: { //星巴克查询商品 getStarbucksProducts() { uni.showLoading({ title: '加载中...' }) let datas = { regionId: app.globalData.cityId } getStarbucksProducts(datas).then(res => { uni.hideLoading(); if (res.return_code == '000000') { this.cateList = res.return_data; this.loadData(); } }) }, async loadData() { let list = await this.cateList; list.forEach(item => { if (!item.categoryName) { this.flist.push(item); //pid为父级id, 没有pid或者n=0是一级分类 } if (!item.defaultImage) { this.slist.push(item); //没有图的是2级分类 } if (item.categoryName && item.defaultImage) { this.tlist.push(item); //3级分类 } }) this.currentId = this.flist[0].id; }, //一级分类点击 tabtap(item) { uni.showLoading({}) if (!this.sizeCalcState) { this.calcSize(); } setTimeout(() => { uni.hideLoading(); this.currentId = item.id; let index = this.slist.findIndex(sitem => sitem.id == item.id); this.tabScrollTop = this.slist[index].top; }, 500); }, //右侧栏滚动 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].id; } }, //计算右侧栏每个tab的高度等信息 calcSize() { let h = 0; this.slist.forEach(item => { let view = uni.createSelectorQuery().select("#main-" + item.id); 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) { for (var i = 0; i < this.tlist.length; i++) { if (item.productId == this.tlist[i].goodsId) { this.tlist[i].count = this.tlist[i].count + 1; } } this.shoppingcart.forEach((good) => { if (JSON.stringify(item) == JSON.stringify(good)) { item.num++ 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 (item.productId == this.tlist[i].goodsId) { this.tlist[i].count = this.tlist[i].count - 1; } } this.shoppingcart.forEach((good) => { if (this.checinfo(good, item) === true) { 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 = []; }, //弹出弹窗 showPopup(item) { this.nums = 1; this.cbkchangelist = item; if (item.cupSize) { this.cupSize = item.cupSize.split(','); this.cupSizeid = this.cupSize[0]; if (this.cupSizeid == '中杯') { this.salesTallPrice = this.cbkchangelist.salesTallPrice; app.globalData.salesTallPrice = this.cbkchangelist.salesTallPrice; this.marketTallPrice = this.cbkchangelist.marketTallPrice; } if (this.cupSizeid == '大杯') { this.salesTallPrice = this.cbkchangelist.salesGrandePrice; app.globalData.salesTallPrice = this.cbkchangelist.salesGrandePrice; this.marketTallPrice = this.cbkchangelist.marketGrandePrice; } if (this.cupSizeid == '超大杯') { this.salesTallPrice = this.cbkchangelist.salesVentiPrice; app.globalData.salesTallPrice = this.cbkchangelist.salesVentiPrice; this.marketTallPrice = this.cbkchangelist.marketVentiPrice; } } if (item.temperature) { this.temperature = item.temperature.split(','); this.temperatureid = this.temperature[0]; } if (item.cream) { this.cream = item.cream.split(','); this.creamid = this.cream[0]; } if (item.espresso) { this.espresso = item.espresso.split(','); this.espressoid = this.espresso[0]; } if (item.milk) { this.milk = item.milk.split(','); this.milkid = this.milk[0]; } if (item.milkBubble) { this.milkBubble = item.milkBubble.split(','); this.milkBubbleid = this.milkBubble[0]; } this.$refs.popup.show(); }, //选择类型 changetype(item, item1) { if (item == 1) { this.cupSizeid = item1; if (item1 == '中杯') { this.salesTallPrice = this.cbkchangelist.salesTallPrice; app.globalData.salesTallPrice = this.cbkchangelist.salesTallPrice; this.marketTallPrice = this.cbkchangelist.marketTallPrice; } if (item1 == '大杯') { this.salesTallPrice = this.cbkchangelist.salesGrandePrice; app.globalData.salesTallPrice = this.cbkchangelist.salesGrandePrice; this.marketTallPrice = this.cbkchangelist.marketGrandePrice; } if (item1 == '超大杯') { this.salesTallPrice = this.cbkchangelist.salesVentiPrice; app.globalData.salesTallPrice = this.cbkchangelist.salesVentiPrice; this.marketTallPrice = this.cbkchangelist.marketVentiPrice; } } if (item == 2) { this.temperatureid = item1 } if (item == 3) { this.creamid = item1 } if (item == 4) { this.espressoid = item1 } if (item == 5) { this.milkid = item1 } if (item == 6) { this.milkBubbleid = item1 } }, //关闭弹窗 close() { let datas = { "num": this.nums, "storeCode": this.storeCode, "productId": this.cbkchangelist.goodsId, "cupSize": this.cupSizeid, "temperature": this.temperatureid, "milk": this.milkid, "cream": this.creamid, "espresso": this.espressoid, "milkBubble": this.milkBubbleid, "name": this.cbkchangelist.name, "imgs": this.cbkchangelist.defaultImage, "price": this.salesTallPrice, "oldprice": this.marketTallPrice } let istue = 0; if (this.shoppingcart.length != 0) { this.shoppingcart.forEach((good) => { if (this.checinfo(good, datas) === true) { good.num = good.num + this.nums; for (var i = 0; i < this.tlist.length; i++) { if (this.cbkchangelist.goodsId == this.tlist[i].goodsId) { this.tlist[i].count = this.tlist[i].count + this.nums } } istue = 1; } }) if (istue == 0) { this.shoppingcart.push(datas); for (var i = 0; i < this.tlist.length; i++) { if (this.cbkchangelist.goodsId == this.tlist[i].goodsId) { this.tlist[i].count = this.tlist[i].count + this.nums } } } } else { for (var i = 0; i < this.tlist.length; i++) { if (this.cbkchangelist.goodsId == this.tlist[i].goodsId) { this.tlist[i].count = this.tlist[i].count + this.nums } } this.shoppingcart.push(datas); } 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; 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; width: 120px; min-height: 100px; } .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>