|
|
|
|
@ -1,18 +1,21 @@ |
|
|
|
|
<template> |
|
|
|
|
<view class="content_box"> |
|
|
|
|
<view class="content_box" :style="{marginTop: navBarHeight+'px'}"> |
|
|
|
|
<view class="u-flex u-col-center wrapper-box"> |
|
|
|
|
<view class="scroll-box" style="background-color: #F6F6F6;"> |
|
|
|
|
<scroll-view class="left u-flex-col u-col-center" enable-back-to-top scroll-y> |
|
|
|
|
<view class="type-list u-ellipsis-1" :class="[{ 'list-active': listId == index }]" v-for="(item, index) in categoryData" :key="index" @tap="onType(index)"> |
|
|
|
|
<view class="line" :class="[{ 'line-active': listId == index }]"></view> |
|
|
|
|
<view class="type-list u-ellipsis-1" :class="[{ 'list-active': listId == index }]" v-for="(item, index) in categoryData" :key="index" @tap="onType(index,item)"> |
|
|
|
|
<!-- <view class="line" :class="[{ 'line-active': listId == index }]"></view> --> |
|
|
|
|
{{ item.name }} |
|
|
|
|
</view> |
|
|
|
|
<view class="hack-tabbar"></view> |
|
|
|
|
</scroll-view> |
|
|
|
|
</view> |
|
|
|
|
<view style="height: 100%;width: 100%;"> |
|
|
|
|
<view style="height: 100%;width:calc(100% - 200upx);"> |
|
|
|
|
<view class="subtitle"> |
|
|
|
|
{{item.name}} |
|
|
|
|
</view> |
|
|
|
|
<scroll-view scroll-y class="scroll-box" enable-back-to-top scroll-with-animation> |
|
|
|
|
<view class="right" v-if="categoryData.length"> |
|
|
|
|
<!-- <view class="right" v-if="categoryData.length"> |
|
|
|
|
<image class="type-img" v-if="categoryData[listId].image" :src="categoryData[listId].image" mode="aspectFill"></image> |
|
|
|
|
|
|
|
|
|
<view class="item-list" v-for="(list, index1) in categoryData[listId].children" :key="index1"> |
|
|
|
|
@ -31,13 +34,40 @@ |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<!-- 缺省页 --> |
|
|
|
|
|
|
|
|
|
<shopro-empty |
|
|
|
|
v-show="!categoryData[listId].children.length" |
|
|
|
|
:image="$IMG_URL + '/imgs/empty/empty_goods.png'" |
|
|
|
|
tipText="暂无该商品，还有更多好货等着你噢~" |
|
|
|
|
></shopro-empty> |
|
|
|
|
<view class="hack-tabbar"></view> |
|
|
|
|
</view> --> |
|
|
|
|
<view class="shopList"> |
|
|
|
|
<view class="shopItem" v-for="(item,index) in shopList" :key="index"> |
|
|
|
|
<view class="shopImg"> |
|
|
|
|
<image :src="item.img" mode="widthFix"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="infoBox"> |
|
|
|
|
<view class="shopTitle"> |
|
|
|
|
<image src="/static/images/xinp.png" mode="widthFix"></image> |
|
|
|
|
<text>{{item.title}}</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="progress"> |
|
|
|
|
<u-line-progress active-color="#F0D2A0" |
|
|
|
|
:show-percent="false" height="20" |
|
|
|
|
style="flex:1" |
|
|
|
|
inactive-color="#F6EEE6" :percent="70"></u-line-progress> |
|
|
|
|
<text>已售{{item.num}}套</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="price"> |
|
|
|
|
<view class="priceInfo"> |
|
|
|
|
<text class="mainPrice">￥{{item.mainprice}}</text> |
|
|
|
|
<text class="subPrice">￥{{item.subprice}}</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="btn">去抢购</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</scroll-view> |
|
|
|
|
</view> |
|
|
|
|
@ -52,7 +82,40 @@ export default { |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
listId: 0, |
|
|
|
|
categoryData: {} |
|
|
|
|
categoryData: {}, |
|
|
|
|
navBarTop:0, |
|
|
|
|
navBarHeight:0, |
|
|
|
|
shopList:[ |
|
|
|
|
{ |
|
|
|
|
img:'/static/images/shopdesc.png', |
|
|
|
|
title:'SK-II 熬夜肌肤“重启”秘籍 熬夜肌SK-II 熬夜肌肤“重启”秘籍 熬夜肌', |
|
|
|
|
num:288, |
|
|
|
|
mainprice:389.00, |
|
|
|
|
subprice:999.00 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
img:'/static/images/shopdesc.png', |
|
|
|
|
title:'SK-II 熬夜肌肤“重启”秘籍 熬夜肌SK-II 熬夜肌肤“重启”秘籍 熬夜肌', |
|
|
|
|
num:288, |
|
|
|
|
mainprice:389.00, |
|
|
|
|
subprice:999.00 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
img:'/static/images/shopdesc.png', |
|
|
|
|
title:'SK-II 熬夜肌肤“重启”秘籍 熬夜肌SK-II 熬夜肌肤“重启”秘籍 熬夜肌', |
|
|
|
|
num:288, |
|
|
|
|
mainprice:389.00, |
|
|
|
|
subprice:999.00 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
img:'/static/images/shopdesc.png', |
|
|
|
|
title:'SK-II 熬夜肌肤“重启”秘籍 熬夜肌SK-II 熬夜肌肤“重启”秘籍 熬夜肌', |
|
|
|
|
num:288, |
|
|
|
|
mainprice:389.00, |
|
|
|
|
subprice:999.00 |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
item:{} |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
computed: {}, |
|
|
|
|
@ -63,9 +126,15 @@ export default { |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
async created() { |
|
|
|
|
let statuBar = uni.getSystemInfoSync().statusBarHeight; |
|
|
|
|
let menuButtonInfo = uni.getMenuButtonBoundingClientRect(); |
|
|
|
|
|
|
|
|
|
this.navBarTop = menuButtonInfo.top; |
|
|
|
|
this.navBarHeight = menuButtonInfo.height; |
|
|
|
|
console.log('%c当前分类：三级分类', 'color:green;background:yellow'); |
|
|
|
|
await this.getCategory(); |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
methods: { |
|
|
|
|
getCategory() { |
|
|
|
|
this.$http('category.detail', { |
|
|
|
|
@ -73,10 +142,12 @@ export default { |
|
|
|
|
}).then(res => { |
|
|
|
|
if (res.code === 1) { |
|
|
|
|
this.categoryData = res.data.children; |
|
|
|
|
this.item = this.categoryData[0] |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
onType(id) { |
|
|
|
|
onType(id,item) { |
|
|
|
|
this.item=item |
|
|
|
|
this.listId = id; |
|
|
|
|
}, |
|
|
|
|
// 路由跳转 |
|
|
|
|
@ -100,7 +171,8 @@ export default { |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
overflow: hidden; |
|
|
|
|
height: 100%; |
|
|
|
|
height: calc(100% - 88upx); |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.wrapper-box { |
|
|
|
|
@ -112,18 +184,18 @@ export default { |
|
|
|
|
.scroll-box { |
|
|
|
|
height: 100%; |
|
|
|
|
flex: 1; |
|
|
|
|
background: #fff; |
|
|
|
|
background: #21222B; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.left { |
|
|
|
|
width: 200upx; |
|
|
|
|
height: 100%; |
|
|
|
|
flex: 1; |
|
|
|
|
|
|
|
|
|
background: #1A1A22; |
|
|
|
|
.list-active { |
|
|
|
|
background: #fff; |
|
|
|
|
color: #333333 !important; |
|
|
|
|
font-weight: bold !important; |
|
|
|
|
background: #21222B; |
|
|
|
|
color: #FFFFFF !important; |
|
|
|
|
// font-weight: bold !important; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.line-active { |
|
|
|
|
@ -134,11 +206,12 @@ export default { |
|
|
|
|
height: 84upx; |
|
|
|
|
position: relative; |
|
|
|
|
width: 200rpx; |
|
|
|
|
padding-left: 16rpx; |
|
|
|
|
padding-left: 25rpx; |
|
|
|
|
line-height: 84rpx; |
|
|
|
|
font-size: 28upx; |
|
|
|
|
font-weight: 400; |
|
|
|
|
color: rgba(102, 102, 102, 1); |
|
|
|
|
color:#808292; |
|
|
|
|
// color: rgba(102, 102, 102, 1); |
|
|
|
|
|
|
|
|
|
.line { |
|
|
|
|
width: 10upx; |
|
|
|
|
@ -206,4 +279,93 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.subtitle{ |
|
|
|
|
font-size: 30upx; |
|
|
|
|
font-family: Alibaba PuHuiTi; |
|
|
|
|
font-weight: 400; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
margin:20upx; |
|
|
|
|
} |
|
|
|
|
.shopList{ |
|
|
|
|
padding-bottom: 35rpx; |
|
|
|
|
|
|
|
|
|
.shopItem{ |
|
|
|
|
// height: 650px; |
|
|
|
|
margin:0 22upx; |
|
|
|
|
margin-bottom: 24upx; |
|
|
|
|
background: #FFFFFF; |
|
|
|
|
box-shadow: 0upx 6upx 16upx 0upx rgba(25,25,25,0.05); |
|
|
|
|
border-radius: 20upx; |
|
|
|
|
overflow: hidden; |
|
|
|
|
.shopImg{ |
|
|
|
|
width:100%; |
|
|
|
|
background: #D3D3D3; |
|
|
|
|
box-shadow: 0upx 6upx 16upx 0upx rgba(25,25,25,0.05); |
|
|
|
|
border-radius: 20upx 20upx 0upx 0upx; |
|
|
|
|
image{ |
|
|
|
|
height:auto; |
|
|
|
|
|
|
|
|
|
width:100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.infoBox{ |
|
|
|
|
margin-top: 20upx; |
|
|
|
|
.shopTitle{ |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
image{ |
|
|
|
|
width:180upx; |
|
|
|
|
height:auto |
|
|
|
|
} |
|
|
|
|
text{ |
|
|
|
|
font-size: 34upx; |
|
|
|
|
color: #333333; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
overflow: hidden; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
margin-left: 22upx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.progress{ |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
padding:0 20upx; |
|
|
|
|
margin: 25upx 0; |
|
|
|
|
text{ |
|
|
|
|
margin-left: 24upx; |
|
|
|
|
font-size: 24upx; |
|
|
|
|
color: #333333; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.price{ |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
padding:0 30upx; |
|
|
|
|
margin-bottom: 30upx; |
|
|
|
|
.mainPrice{ |
|
|
|
|
font-size: 34upx; |
|
|
|
|
color: #111111; |
|
|
|
|
font-weight: bold; |
|
|
|
|
} |
|
|
|
|
.subPrice{ |
|
|
|
|
font-size: 24upx; |
|
|
|
|
text-decoration: line-through; |
|
|
|
|
color: #C4BFBC; |
|
|
|
|
margin-left:20upx; |
|
|
|
|
} |
|
|
|
|
.btn{ |
|
|
|
|
padding:20upx 45upx; |
|
|
|
|
background: #111111; |
|
|
|
|
border: 1px solid #EAEAEA; |
|
|
|
|
border-radius: 33px; |
|
|
|
|
font-size: 30upx; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
liudan
2 years ago