yangjie
/
high-mini
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
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.
269 Commits
7 Branches
0 Tags
16 MiB
 
 
 
 
Tag: Branch: Tree: 3fbcbb518c
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '3fbcbb518c'
${ noResults }
high-mini/qianzhu-KFC/menu-list/menu-list.vue

719 lines
18 KiB
Raw Blame History

<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" 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 colorc3" v-if="typeid == 1">¥<text
class="font18 fontwig6 margle">{{titem.salesTallPrice}}</text>
</view>
<view class="width100 font12 color2f6f43" v-if="typeid == 2">¥<text
class="font18 fontwig6 margle">{{titem.salesTallPrice}}</text>
</view>
<view class="width100 font14 mart5 colorc3" v-if="typeid == 1">
已减¥{{(titem.marketTallPrice - titem.salesTallPrice).toFixed(2)}}元</view>
<view class="width100 font14 mart5 color2f6f43" v-if="typeid == 2">
已减¥{{(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" v-if="typeid == 1" @click="showPopup()"
src="../static/imgs/plus.png"></image>
<image class="btn-plus" mode="widthFix" v-if="typeid == 2" @click="showPopup()"
src="../static/imgs/blueplus.png"></image>
</view>
<!--
<view class="mart10 icon-click fotrt" v-if="typeid == 2">
<image class="btn-plus" mode="widthFix" @click="showPopup()"
src="../static/imgs/blueplus.png"></image>
</view> -->
</view>
</view>
</view>
</view>
</scroll-view>
<shopcart :goods="goods" @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="../static/imgs/prod1.png"></image>
<view class="width100 line1 mart10"></view>
<view class="mart20 width90 font18 fontwig6 fcor333">产品名字</view>
<view class="width90 mart10">
<view class="fcor333 font16 fontwig6">杯型</view>
<view class="mart10 width30 fotct height30 fcor666 font12 typecage" v-for="(item,index) in list"
:key="index">
中杯
</view>
</view>
<view class="width90 mart10">
<view class="fcor333 font16 fontwig6">温度</view>
<view class="mart10 width30 fotct height30 fcor666 font12 typecage" v-for="(item,index) in list"
:key="index">
特别热
</view>
</view>
<view class="width90 mart10">
<view class="fcor333 font16 fontwig6">牛奶</view>
<view class="mart10 width30 fotct height30 fcor666 font12 typecage" v-for="(item,index) in list"
:key="index">
燕麦奶
</view>
</view>
<view class="height30"></view>
<view class="wybfot width100">
<view class="height50 pricefot alijusstart ">
<view class="width50 margle10">
¥<text class="font24 fontwig6 fcor333 margle">35.9</text>
</view>
<view class="icon-click">
<image class="btn-reduce" mode="widthFix" src="../static/imgs/wreduce.png"></image>
<view class="num fcor333">1</view>
<image class="btn-plus" mode="widthFix" v-if="typeid == 1" @click="showPopup()"
src="../static/imgs/plus.png"></image>
<image class="btn-plus" mode="widthFix" v-if="typeid == 2" @click="showPopup()"
src="../static/imgs/blueplus.png"></image>
</view>
</view>
<view class="width100 height50 fotct fcorfff" style="background-color: #c72a20;" v-if="typeid == 1"
@click="close()">
加入购物车</view>
<view class="width100 height50 backcorf2f6 fotct fcorfff" v-if="typeid == 2" @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: [],
goods: [{
"name": "热销",
"foods": [{
"name": "南瓜粥",
"price": 9.22,
"oldPrice": "",
"description": "食材：大米，南瓜",
"sellCount": 229,
"img": '../../static/nanguaz.jpg'
}, {
"name": "小米粥",
"price": 9.8,
"oldPrice": "",
"description": "食材：小米",
"sellCount": 239,
"count": 1,
"img": '../../static/xiaomi.jpg'
},
{
"name": "油条",
"price": 1.88,
"oldPrice": "",
"description": "食材：油条",
"sellCount": 229,
"count": 1,
"img": '../../static/youtiao.jpg'
}
]
},
{
"name": "折扣",
"foods": [{
"name": "油条1只",
"price": 1.88,
"oldPrice": "",
"description": "食材：油条",
"sellCount": 229,
"img": '../../static/youtiao.jpg'
}, {
"name": "艇仔粥",
"price": 9.9,
"oldPrice": "",
"description": "食材：瘦肉，干贝，花生等",
"sellCount": 239,
"img": '../../static/tingzaiz.jpg'
}],
},
{
"name": "套餐",
"foods": [{
"name": "油条2只",
"price": 1.88,
"oldPrice": "",
"description": "食材：油条",
"sellCount": 229,
"img": '../../static/youtiao.jpg'
}, {
"name": "艇仔粥2",
"price": 9.9,
"oldPrice": "",
"description": "食材：瘦肉，干贝，花生等",
"sellCount": 239,
"img": '../../static/tingzaiz.jpg'
}],
},
{
"name": "套餐2",
"foods": [{
"name": "油条3只",
"price": 1.88,
"oldPrice": "",
"description": "食材：油条",
"sellCount": 229,
"img": '../../static/youtiao.jpg'
}, {
"name": "艇仔粥3",
"price": 9.9,
"oldPrice": "",
"description": "食材：瘦肉，干贝，花生等",
"sellCount": 239,
"img": '../../static/tingzaiz.jpg'
}],
},
{
"name": "热销2",
"foods": [{
"name": "南瓜粥1",
"price": 9.22,
"oldPrice": "",
"description": "食材：大米，南瓜",
"sellCount": 229,
"img": '../../static/nanguaz.jpg'
}, {
"name": "小米粥1",
"price": 9.8,
"oldPrice": "",
"description": "食材：小米",
"sellCount": 239,
"img": '../../static/xiaomi.jpg'
}]
},
{
"name": "折扣2",
"foods": [{
"name": "油条4只",
"price": 1.88,
"oldPrice": "",
"description": "食材：油条",
"sellCount": 229,
"img": '../../static/youtiao.jpg'
}, {
"name": "艇仔粥4",
"price": 9.9,
"oldPrice": "",
"description": "食材：瘦肉，干贝，花生等",
"sellCount": 239,
"img": '../../static/tingzaiz.jpg'
}],
},
{
"name": "套餐3",
"foods": [{
"name": "油条5只",
"price": 1.88,
"oldPrice": "",
"description": "食材：油条",
"sellCount": 229,
"img": '../../static/youtiao.jpg'
}, {
"name": "艇仔粥5",
"price": 9.9,
"oldPrice": "",
"description": "食材：瘦肉，干贝，花生等",
"sellCount": 239,
"img": '../../static/tingzaiz.jpg'
}],
},
{
"name": "套餐4",
"foods": [{
"name": "油条6只",
"price": 1.81,
"oldPrice": "",
"description": "食材：油条",
"sellCount": 229,
"img": '../../static/youtiao.jpg'
}, {
"name": "艇仔粥6",
"price": 9.91,
"oldPrice": "",
"description": "食材：瘦肉，干贝，花生等",
"sellCount": 239,
"img": '../../static/tingzaiz.jpg'
}],
},
{
"name": "热销3",
"foods": [{
"name": "南瓜粥3",
"price": 9.21,
"oldPrice": "",
"description": "食材：大米，南瓜",
"sellCount": 229,
"img": '../../static/nanguaz.jpg'
}, {
"name": "小米粥3",
"price": 9.78,
"oldPrice": "",
"description": "食材：小米",
"sellCount": 239,
"img": '../../static/xiaomi.jpg'
}]
},
{
"name": "折扣3",
"foods": [{
"name": "油条7只",
"price": 1.88,
"oldPrice": "",
"description": "食材：油条",
"sellCount": 229,
"img": '../../static/youtiao.jpg'
}, {
"name": "艇仔粥7",
"price": 9.9,
"oldPrice": "",
"description": "食材：瘦肉，干贝，花生等",
"sellCount": 239,
"img": '../../static/tingzaiz.jpg'
}],
},
{
"name": "套餐6",
"foods": [{
"name": "油条8只",
"price": 1.88,
"oldPrice": "",
"description": "食材：油条",
"sellCount": 229,
"img": '../../static/youtiao.jpg'
}, {
"name": "艇仔粥8",
"price": 9.9,
"oldPrice": "",
"description": "食材：瘦肉，干贝，花生等",
"sellCount": 239,
"img": '../../static/tingzaiz.jpg'
}],
},
{
"name": "套餐7",
"foods": [{
"name": "油条9只",
"price": 1.88,
"oldPrice": "",
"description": "食材：油条",
"sellCount": 229,
"img": '../../static/youtiao.jpg'
}, {
"name": "艇仔粥9",
"price": 9.9,
"oldPrice": "",
"description": "食材：瘦肉，干贝，花生等",
"sellCount": 239,
"img": '../../static/tingzaiz.jpg'
}],
},
{
"name": "热销4",
"foods": [{
"name": "南瓜粥4",
"price": 9.22,
"oldPrice": "",
"description": "食材：大米，南瓜",
"sellCount": 229,
"img": '../../static/nanguaz.jpg'
}, {
"name": "小米粥4",
"price": 9.8,
"oldPrice": "",
"description": "食材：小米",
"sellCount": 239,
"img": '../../static/xiaomi.jpg'
}]
},
{
"name": "折扣4",
"foods": [{
"name": "油条10只",
"price": 1.88,
"oldPrice": "",
"description": "食材：油条",
"sellCount": 229,
"img": '../../static/youtiao.jpg'
}, {
"name": "艇仔粥10",
"price": 9.9,
"oldPrice": "",
"description": "食材：瘦肉，干贝，花生等",
"sellCount": 239,
"img": '../../static/tingzaiz.jpg'
}],
},
],
cateList: [],
typeid: app.globalData.distinguishid, //区分类型
list: [1, 2, 3, 4, 5]
}
},
onLoad() {
this.getStarbucksProducts();
},
methods: {
//查询商品
getStarbucksProducts() {
uni.showLoading({
title: '加载中...'
})
getStarbucksProducts().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) {
if (!this.sizeCalcState) {
this.calcSize();
}
this.currentId = item.id;
let index = this.slist.findIndex(sitem => sitem.id == item.id);
this.tabScrollTop = this.slist[index].top;
// if(this.tabScrollTop == undefined ){
// this.tabScrollTop = 1420;
// }
},
//右侧栏滚动
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 => {
let a = 20;
item.top = h;
h += data.height;
item.bottom = h;
}).exec();
})
this.sizeCalcState = true;
},
addCart(item) {
},
decreaseCart(item) {
},
showPopup() {
this.$refs.popup.show();
},
inputCart(item) {},
// 清空购物车
delAll() {
},
//关闭弹窗
close() {
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 35px;
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;
}
.wybfot {
position: fixed;
bottom: 0px;
}
</style>