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.
824 lines
17 KiB
824 lines
17 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="../static/imgs/menu1.png" mode="widthFix" class="icon45"></image>
|
|
</view>
|
|
<view class="width100" 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 @click="navToList(item.id, titem.id)" v-if="titem.pid === item.id" class="t-list mart10"
|
|
v-for="titem in tlist" :id="'main-'+item.id" :key="titem.id">
|
|
<view class="paddtop10 width94 font16 fcor333 fotrt fontwig6 text2">
|
|
香辣鸡腿堡
|
|
</view>
|
|
<view class="width94 alijun mart5">
|
|
<view class="width60">
|
|
<image src="../static/imgs/prod1.png" mode="widthFix" class="width100"></image>
|
|
</view>
|
|
<view class="width40 fotrt">
|
|
<view class="width100 font12 colorc3">¥<text class="font18 fontwig6 margle">16.8</text>
|
|
</view>
|
|
<view class="width100 font14 mart5 colorc3">已减¥1.7元</view>
|
|
<view class="width100 font14 mart5 fcor999" style="text-decoration: line-through;">原价¥18.5
|
|
</view>
|
|
<view class="mart10 icon-click fotrt">
|
|
<image class="btn-reduce" mode="widthFix" src="../static/imgs/reduce.png"></image>
|
|
<view class="num">1</view>
|
|
<image class="btn-plus" mode="widthFix" src="../static/imgs/plus.png"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<shopcart :goods="goods" @add="addCart" @dec="decreaseCart" @input="inputCart" @delAll="delAll"></shopcart>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import shopcart from '../../components/shopcart.vue';
|
|
export default {
|
|
components: {
|
|
shopcart
|
|
},
|
|
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: [{
|
|
id: 1,
|
|
name: '手机数码'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '礼品鲜花'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '男装女装'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: '母婴用品'
|
|
},
|
|
{
|
|
id: 5,
|
|
pid: 1,
|
|
name: '手机通讯'
|
|
},
|
|
{
|
|
id: 6,
|
|
pid: 1,
|
|
name: '运营商'
|
|
},
|
|
{
|
|
id: 8,
|
|
pid: 5,
|
|
name: '全面屏手机',
|
|
picture: '/static/temp/cate2.jpg'
|
|
},
|
|
{
|
|
id: 9,
|
|
pid: 5,
|
|
name: '游戏手机',
|
|
picture: '/static/temp/cate3.jpg'
|
|
},
|
|
{
|
|
id: 10,
|
|
pid: 5,
|
|
name: '老人机',
|
|
picture: '/static/temp/cate1.jpg'
|
|
},
|
|
{
|
|
id: 11,
|
|
pid: 5,
|
|
name: '拍照手机',
|
|
picture: '/static/temp/cate4.jpg'
|
|
},
|
|
{
|
|
id: 12,
|
|
pid: 5,
|
|
name: '女性手机',
|
|
picture: '/static/temp/cate5.jpg'
|
|
},
|
|
{
|
|
id: 14,
|
|
pid: 6,
|
|
name: '合约机',
|
|
picture: '/static/temp/cate1.jpg'
|
|
},
|
|
{
|
|
id: 15,
|
|
pid: 6,
|
|
name: '选好卡',
|
|
picture: '/static/temp/cate4.jpg'
|
|
},
|
|
{
|
|
id: 16,
|
|
pid: 6,
|
|
name: '办套餐',
|
|
picture: '/static/temp/cate5.jpg'
|
|
},
|
|
{
|
|
id: 17,
|
|
pid: 2,
|
|
name: '礼品',
|
|
},
|
|
{
|
|
id: 18,
|
|
pid: 2,
|
|
name: '鲜花',
|
|
},
|
|
{
|
|
id: 19,
|
|
pid: 17,
|
|
name: '公益摆件',
|
|
picture: '/static/temp/cate7.jpg'
|
|
},
|
|
{
|
|
id: 20,
|
|
pid: 17,
|
|
name: '创意礼品',
|
|
picture: '/static/temp/cate8.jpg'
|
|
},
|
|
{
|
|
id: 21,
|
|
pid: 18,
|
|
name: '鲜花',
|
|
picture: '/static/temp/cate9.jpg'
|
|
},
|
|
{
|
|
id: 22,
|
|
pid: 18,
|
|
name: '每周一花',
|
|
picture: '/static/temp/cate10.jpg'
|
|
},
|
|
{
|
|
id: 23,
|
|
pid: 18,
|
|
name: '卡通花束',
|
|
picture: '/static/temp/cate11.jpg'
|
|
},
|
|
{
|
|
id: 24,
|
|
pid: 18,
|
|
name: '永生花',
|
|
picture: '/static/temp/cate12.jpg'
|
|
},
|
|
{
|
|
id: 25,
|
|
pid: 3,
|
|
name: '男装'
|
|
},
|
|
{
|
|
id: 26,
|
|
pid: 3,
|
|
name: '女装'
|
|
},
|
|
{
|
|
id: 27,
|
|
pid: 25,
|
|
name: '男士T恤',
|
|
picture: '/static/temp/cate13.jpg'
|
|
},
|
|
{
|
|
id: 28,
|
|
pid: 25,
|
|
name: '男士外套',
|
|
picture: '/static/temp/cate14.jpg'
|
|
},
|
|
{
|
|
id: 29,
|
|
pid: 26,
|
|
name: '裙装',
|
|
picture: '/static/temp/cate15.jpg'
|
|
},
|
|
{
|
|
id: 30,
|
|
pid: 26,
|
|
name: 'T恤',
|
|
picture: '/static/temp/cate16.jpg'
|
|
},
|
|
{
|
|
id: 31,
|
|
pid: 26,
|
|
name: '上装',
|
|
picture: '/static/temp/cate15.jpg'
|
|
},
|
|
{
|
|
id: 32,
|
|
pid: 26,
|
|
name: '下装',
|
|
picture: '/static/temp/cate16.jpg'
|
|
},
|
|
{
|
|
id: 33,
|
|
pid: 4,
|
|
name: '奶粉',
|
|
},
|
|
{
|
|
id: 34,
|
|
pid: 4,
|
|
name: '营养辅食',
|
|
},
|
|
{
|
|
id: 35,
|
|
pid: 4,
|
|
name: '童装',
|
|
},
|
|
{
|
|
id: 39,
|
|
pid: 4,
|
|
name: '喂养用品',
|
|
},
|
|
{
|
|
id: 36,
|
|
pid: 33,
|
|
name: '有机奶粉',
|
|
picture: '/static/temp/cate17.jpg'
|
|
},
|
|
{
|
|
id: 37,
|
|
pid: 34,
|
|
name: '果泥/果汁',
|
|
picture: '/static/temp/cate18.jpg'
|
|
},
|
|
{
|
|
id: 39,
|
|
pid: 34,
|
|
name: '面条/粥',
|
|
picture: '/static/temp/cate20.jpg'
|
|
},
|
|
{
|
|
id: 42,
|
|
pid: 35,
|
|
name: '婴童衣橱',
|
|
picture: '/static/temp/cate19.jpg'
|
|
},
|
|
{
|
|
id: 43,
|
|
pid: 39,
|
|
name: '吸奶器',
|
|
picture: '/static/temp/cate21.jpg'
|
|
},
|
|
{
|
|
id: 44,
|
|
pid: 39,
|
|
name: '儿童餐具',
|
|
picture: '/static/temp/cate22.jpg'
|
|
},
|
|
{
|
|
id: 45,
|
|
pid: 39,
|
|
name: '牙胶安抚',
|
|
picture: '/static/temp/cate23.jpg'
|
|
},
|
|
{
|
|
id: 46,
|
|
pid: 39,
|
|
name: '围兜',
|
|
picture: '/static/temp/cate24.jpg'
|
|
},
|
|
]
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.loadData();
|
|
},
|
|
methods: {
|
|
async loadData() {
|
|
let list = await this.cateList;
|
|
list.forEach(item => {
|
|
if (!item.pid) {
|
|
this.flist.push(item); //pid为父级id, 没有pid或者pid=0是一级分类
|
|
} else if (!item.picture) {
|
|
this.slist.push(item); //没有图的是2级分类
|
|
} else {
|
|
this.tlist.push(item); //3级分类
|
|
}
|
|
})
|
|
},
|
|
//一级分类点击
|
|
tabtap(item) {
|
|
if (!this.sizeCalcState) {
|
|
this.calcSize();
|
|
}
|
|
|
|
this.currentId = item.id;
|
|
let index = this.slist.findIndex(sitem => sitem.pid == item.id);
|
|
this.tabScrollTop = this.slist[index].top;
|
|
},
|
|
//右侧栏滚动
|
|
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].pid;
|
|
}
|
|
},
|
|
//计算右侧栏每个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;
|
|
},
|
|
addCart(item) {
|
|
|
|
},
|
|
decreaseCart(item) {
|
|
|
|
},
|
|
inputCart(item) {},
|
|
// 清空购物车
|
|
delAll() {
|
|
|
|
}
|
|
}
|
|
}
|
|
</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;
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
}
|
|
|
|
.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;
|
|
color: #fff;
|
|
background: #d90209;
|
|
border-radius: 18px;
|
|
}
|
|
|
|
.footbtn {
|
|
height: 50px;
|
|
background-color: #000000;
|
|
display: flex;
|
|
bottom: 0px;
|
|
}
|
|
</style>
|
|
|