parent
3fbcbb518c
commit
2f4239aba2
@ -0,0 +1,28 @@ |
|||||||
|
<template> |
||||||
|
<view> |
||||||
|
<image src="../static/union5.jpg" mode="widthFix" class="width90 mart20" v-for="(item,index) in choicelist" :key="index" @click="jumprechangeVip()"> |
||||||
|
</image> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
choicelist: [1, 2, 3, 4, 5, 6] |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
//跳转充值 |
||||||
|
jumprechangeVip(){ |
||||||
|
uni.navigateTo({ |
||||||
|
url:'../home/home' |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
|
||||||
|
</style> |
After Width: | Height: | Size: 72 KiB |
@ -0,0 +1,540 @@ |
|||||||
|
<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,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"> |
||||||
|
<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" @click="showPopups(titem)"> |
||||||
|
<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"> |
||||||
|
已减¥{{(titem.originalPrice - titem.salePrice).toFixed(2)}}元</view> |
||||||
|
<view class="width100 font14 mart5 fcor999" style="text-decoration: line-through;"> |
||||||
|
原价¥{{titem.originalPrice}} |
||||||
|
</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/plus.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="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="height30"></view> |
||||||
|
<view class="wybfot width100"> |
||||||
|
<view class="height50 pricefot alijusstart "> |
||||||
|
<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: '' //原价 |
||||||
|
} |
||||||
|
}, |
||||||
|
onLoad(options) { |
||||||
|
this.storeCode = options.storeCode; |
||||||
|
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; |
||||||
|
}, 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].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++ |
||||||
|
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 |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
//弹出弹窗 |
||||||
|
showPopups(item) { |
||||||
|
this.nums = 1; |
||||||
|
if (item.productId) { |
||||||
|
this.productId = item.productId; |
||||||
|
this.kdjchangelist = item; |
||||||
|
this.kfcimgs = item.productImageUrl; |
||||||
|
this.kfcname = item.productName; |
||||||
|
this.kfcprice = item.salePrice; |
||||||
|
this.kfcoldprice = item.originalPrice; |
||||||
|
if (this.shoppingcart.length == 0) { |
||||||
|
let datas = { |
||||||
|
"num": 1, |
||||||
|
"storeCode": this.storeCode, |
||||||
|
"productId": this.productId, |
||||||
|
"name": this.kfcname, |
||||||
|
"imgs": this.kfcimgs, |
||||||
|
"price": this.kfcprice, |
||||||
|
"oldprice": this.kfcoldprice |
||||||
|
} |
||||||
|
this.shoppingcart.push(datas); |
||||||
|
this.$refs.popup.hide(); |
||||||
|
} else { |
||||||
|
this.shoppingcart.forEach((good) => { |
||||||
|
if (this.kfcname == good.name) { |
||||||
|
good.num = good.num + this.nums; |
||||||
|
} else { |
||||||
|
let datas = { |
||||||
|
"num": 1, |
||||||
|
"storeCode": this.storeCode, |
||||||
|
"productId": this.productId, |
||||||
|
"name": this.kfcname, |
||||||
|
"imgs": this.kfcimgs, |
||||||
|
"price": this.kfcprice, |
||||||
|
"oldprice": this.kfcoldprice |
||||||
|
} |
||||||
|
this.shoppingcart.push(datas); |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
return; |
||||||
|
} |
||||||
|
this.kdjchangelist = item.specGroups; |
||||||
|
this.kfcimgs = item.specGroups[0].productImageUrl; |
||||||
|
this.productId = item.specGroups[0].productId; |
||||||
|
this.kfcprice = item.specGroups[0].salePrice; |
||||||
|
this.kfcname = item.specGroups[0].productName; |
||||||
|
this.kfcoldprice = item.specGroups[0].originalPrice; |
||||||
|
this.$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); |
||||||
|
this.$refs.popup.hide(); |
||||||
|
return; |
||||||
|
} |
||||||
|
this.shoppingcart.forEach((good) => { |
||||||
|
if (this.kfcname == good.name) { |
||||||
|
good.num = good.num + this.nums; |
||||||
|
} else { |
||||||
|
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); |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
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> |
After Width: | Height: | Size: 847 B |
After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in new issue