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