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.
574 lines
15 KiB
574 lines
15 KiB
<template>
|
|
<view class="content">
|
|
<!-- <view class="width100 height85 backcorfff heads">
|
|
<view class="paddtop10 width90 alijusstart">
|
|
<view class="width80p font16 fcor333 fontwig6">
|
|
<image mode="widthFix" class="icon15 marRight10" src="../static/imgs/shop.png"></image>时代天街
|
|
</view>
|
|
<view class="width20 fotrt">
|
|
<image mode="widthFix" class="icon20" src="../static/imgs/nocollection.png"></image>
|
|
<image mode="widthFix" class="icon20" src="../static/imgs/collection.png"></image>
|
|
</view>
|
|
</view>
|
|
<view class="width90 mart5 font12 fcor999">前门西大街正阳市场1号楼中部</view>
|
|
</view> -->
|
|
|
|
<scroll-view scroll-y class="left-aside">
|
|
<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">
|
|
<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" @click="showPopup(titem)">
|
|
<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.salesTallPrice}}</text>
|
|
</view>
|
|
<view class="width100 font14 mart5 color2f6f43">
|
|
已减¥{{(titem.marketTallPrice - titem.salesTallPrice).toFixed(2)}}元</view>
|
|
<view class="width100 font14 mart5 fcor999" style="text-decoration: line-through;">
|
|
原价¥{{titem.marketTallPrice}}
|
|
</view>
|
|
<view class="mart10 icon-click fotrt">
|
|
<!-- <image class="btn-reduce" mode="widthFix" src="../static/imgs/reduce.png"></image> -->
|
|
<!-- <view class="num fcorfff" style="background: #d90209;">1</view> -->
|
|
<image class="btn-plus" mode="widthFix" src="../static/imgs/blueplus.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<shopcart :goods="shoppingcart" @add="addCart" @dec="decreaseCart" @input="inputCart" @delAll="delAll">
|
|
</shopcart>
|
|
|
|
|
|
<!-- 弹窗选择规格 -->
|
|
<wybPopup ref="popup" type="bottom" width="500" height="1000" scrollY="true" radius="6" :showCloseIcon="true">
|
|
<image mode="widthFix" class="width40w mart40" :src="cbkchangelist.defaultImage"></image>
|
|
<view class="width100 line1 mart10"></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="height30"></view>
|
|
<view class="wybfot width100">
|
|
<view class="height70 pricefot alijusstart backcorfff">
|
|
<view class="width60 margle10">
|
|
<view class="width100">
|
|
¥<text class="font24 fontwig6 color2f6f43 margle">{{cbkchangelist.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: '', //门店编号
|
|
cupSize: '', //杯型数据
|
|
cupSizeid: '', //杯型id
|
|
temperature: '', //温度数据
|
|
temperatureid: '', //温度id
|
|
cream: '', //奶油数据
|
|
creamid: '', //奶油id
|
|
espresso: '', //浓缩数据
|
|
espressoid: '', //浓缩id
|
|
milk: '', //牛奶数据
|
|
milkid: '', //牛奶id
|
|
milkBubble: '', //奶泡数据
|
|
milkBubbleid: '', //奶泡id
|
|
cbkchangelist: '', //选择的数据
|
|
nums: 1, //数量
|
|
shoppingcart: [], //购物车
|
|
productId: '', //商品id
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.storeCode = options.storeCode;
|
|
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;
|
|
}, 200);
|
|
},
|
|
//右侧栏滚动
|
|
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) {
|
|
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--
|
|
this.shoppingcart.forEach((good) => {
|
|
if (item.name == good.name)
|
|
good.num = item.num
|
|
})
|
|
}
|
|
},
|
|
inputCart: function(item) {
|
|
if (item.num >= 0) {
|
|
item.num++
|
|
this.shoppingcart.forEach((good) => {
|
|
if (item.name == good.name)
|
|
good.num = item.num + -1
|
|
})
|
|
|
|
} else {
|
|
this.shoppingcart.forEach((good) => {
|
|
if (item.name == good.name)
|
|
Vue.set(good, 'count', 1)
|
|
})
|
|
}
|
|
|
|
},
|
|
// 清空购物车
|
|
delAll() {
|
|
this.shoppingcart.forEach((good) => {
|
|
if (good.num) {
|
|
good.num = 0
|
|
}
|
|
})
|
|
},
|
|
//弹出弹窗
|
|
showPopup(item) {
|
|
this.nums = 1;
|
|
this.cbkchangelist = item;
|
|
if (item.cupSize) {
|
|
this.cupSize = item.cupSize.split(',');
|
|
this.cupSizeid = this.cupSize[0];
|
|
}
|
|
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 (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.id,
|
|
"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.cbkchangelist.salesTallPrice,
|
|
"oldprice": this.cbkchangelist.marketTallPrice
|
|
}
|
|
|
|
this.shoppingcart.push(datas);
|
|
this.$refs.popup.hide();
|
|
},
|
|
//跳转详情
|
|
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;
|
|
|
|
&:after {
|
|
content: '';
|
|
flex: 99;
|
|
height: 0;
|
|
}
|
|
|
|
}
|
|
|
|
.qzgoodsimg {
|
|
margin-top: -10px;
|
|
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;
|
|
|
|
}
|
|
|
|
.footbtn {
|
|
height: 50px;
|
|
background-color: #000000;
|
|
display: flex;
|
|
bottom: 0px;
|
|
}
|
|
|
|
.pricefot {
|
|
border-radius: 15px 15px 0 0;
|
|
box-shadow: 0px 5px 20px #333333;
|
|
}
|
|
|
|
.bocactive {
|
|
background-color: #eaf0ec;
|
|
color: #00713e;
|
|
}
|
|
|
|
.wybfot {
|
|
position: fixed;
|
|
bottom: 0px;
|
|
}
|
|
</style>
|
|
|