|
|
@ -13,7 +13,8 @@ |
|
|
|
<template v-if="options.categoryId"> |
|
|
|
<template v-if="options.categoryId"> |
|
|
|
<view class="goodsban" v-if="tabbar && tabbar.length > 0"> |
|
|
|
<view class="goodsban" v-if="tabbar && tabbar.length > 0"> |
|
|
|
<scroll-view class="typeList" scroll-x="true"> |
|
|
|
<scroll-view class="typeList" scroll-x="true"> |
|
|
|
<view v-for="(item,index) in tabbar" :key="index" class="bandsImg" @click="onChage(item,1,index)" |
|
|
|
<view v-for="(item,index) in tabbar" :key="index" class="bandsImg" |
|
|
|
|
|
|
|
@click="onChage(item,1,index)" |
|
|
|
:style="{'color':item.category_id==isBanrdActive?'#F43B21':'#5A5A5A','border':item.category_id==isBanrdActive?'1rpx solid #F22029':'1rpx solid #E7E7E7'}"> |
|
|
|
:style="{'color':item.category_id==isBanrdActive?'#F43B21':'#5A5A5A','border':item.category_id==isBanrdActive?'1rpx solid #F22029':'1rpx solid #E7E7E7'}"> |
|
|
|
<image :src="item.image?item.image.external_url:''" mode="aspectFill"></image> |
|
|
|
<image :src="item.image?item.image.external_url:''" mode="aspectFill"></image> |
|
|
|
<view class="typeItem">{{item.name}}</view> |
|
|
|
<view class="typeItem">{{item.name}}</view> |
|
|
@ -35,7 +36,8 @@ |
|
|
|
<view class="sort-item" :class="{ active: sortType === 'all' }" @click="handleSortType('all')"> |
|
|
|
<view class="sort-item" :class="{ active: sortType === 'all' }" @click="handleSortType('all')"> |
|
|
|
<text>综合</text> |
|
|
|
<text>综合</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="sort-item" :class="{ active: sortType === 'sales' }" @click="handleSortType('sales')"> |
|
|
|
<view class="sort-item" :class="{ active: sortType === 'sales' }" |
|
|
|
|
|
|
|
@click="handleSortType('sales')"> |
|
|
|
<text>销量</text> |
|
|
|
<text>销量</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="sort-item sort-item-price" :class="{ active: sortType === 'price' }" |
|
|
|
<view class="sort-item sort-item-price" :class="{ active: sortType === 'price' }" |
|
|
@ -44,7 +46,8 @@ |
|
|
|
<view class="price-arrow"> |
|
|
|
<view class="price-arrow"> |
|
|
|
<view class="icon up" :class="{ active: sortType === 'price' && !sortPrice }"> |
|
|
|
<view class="icon up" :class="{ active: sortType === 'price' && !sortPrice }"> |
|
|
|
<u-icon name="arrow-up-fill" |
|
|
|
<u-icon name="arrow-up-fill" |
|
|
|
:color="!sortPrice&&sortType === 'price'?'#F43B21':'#3C3C3C'" size="17"></u-icon> |
|
|
|
:color="!sortPrice&&sortType === 'price'?'#F43B21':'#3C3C3C'" size="17"> |
|
|
|
|
|
|
|
</u-icon> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="icon down" :class="{ active: sortType === 'price' && sortPrice }"> |
|
|
|
<view class="icon down" :class="{ active: sortType === 'price' && sortPrice }"> |
|
|
|
<u-icon name="arrow-down-fill" |
|
|
|
<u-icon name="arrow-down-fill" |
|
|
@ -52,8 +55,9 @@ |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
|
|
<view class="sort-item" :class="{ active: sortType === 'city' }" @click="handleSortType('city')"> |
|
|
|
<view class="sort-item" :class="{ active: sortType === 'city' }" |
|
|
|
|
|
|
|
@click="handleSortType('city')"> |
|
|
|
<picker mode="selector" @change="multiChange" value="{{multiIndex}}" :range="multiArray" |
|
|
|
<picker mode="selector" @change="multiChange" value="{{multiIndex}}" :range="multiArray" |
|
|
|
range-key="name"> |
|
|
|
range-key="name"> |
|
|
|
<text>类型</text> |
|
|
|
<text>类型</text> |
|
|
@ -336,25 +340,32 @@ |
|
|
|
if (res.data.list.length > 0) { |
|
|
|
if (res.data.list.length > 0) { |
|
|
|
that.tabbar = res.data.list; |
|
|
|
that.tabbar = res.data.list; |
|
|
|
that.isBanrdActive = 0 |
|
|
|
that.isBanrdActive = 0 |
|
|
|
that.list= []; |
|
|
|
that.list = []; |
|
|
|
that.onChage(that.tabbar[0], 1,0) |
|
|
|
if (this.options.categoryId) { |
|
|
|
|
|
|
|
that.onChage(that.tabbar[0], 1, 0) |
|
|
|
|
|
|
|
}else{ |
|
|
|
|
|
|
|
this.$refs.uWaterfall1.clear(); |
|
|
|
|
|
|
|
this.list.data = [] |
|
|
|
|
|
|
|
this.list = [] |
|
|
|
|
|
|
|
this.mescroll.resetUpScroll() |
|
|
|
|
|
|
|
} |
|
|
|
// res.data.list.forEach(item => { |
|
|
|
// res.data.list.forEach(item => { |
|
|
|
// item.children.forEach(item_1 => { |
|
|
|
// item.children.forEach(item_1 => { |
|
|
|
// that.goodsType.push(item_1) |
|
|
|
// that.goodsType.push(item_1) |
|
|
|
// }) |
|
|
|
// }) |
|
|
|
// }); |
|
|
|
// }); |
|
|
|
// console.log(that.goodsType, that.tabbar) |
|
|
|
// console.log(that.goodsType, that.tabbar) |
|
|
|
}else{ |
|
|
|
} else { |
|
|
|
that.upCallback(1) |
|
|
|
that.upCallback(1) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
.catch(reject) |
|
|
|
.catch(reject) |
|
|
|
}) |
|
|
|
}) |
|
|
|
}, |
|
|
|
}, |
|
|
|
onChage(item, type,index) { |
|
|
|
onChage(item, type, index) { |
|
|
|
if (type == 1) { |
|
|
|
if (type == 1) { |
|
|
|
if(this.tabbar && this.tabbar[index].children && this.tabbar[index].children.length > 0){ |
|
|
|
if (this.tabbar && this.tabbar[index].children && this.tabbar[index].children.length > 0) { |
|
|
|
this.goodsType= this.tabbar[index].children; |
|
|
|
this.goodsType = this.tabbar[index].children; |
|
|
|
} |
|
|
|
} |
|
|
|
this.isActive = ''; |
|
|
|
this.isActive = ''; |
|
|
|
this.keyName2 = '' |
|
|
|
this.keyName2 = '' |
|
|
@ -366,7 +377,6 @@ |
|
|
|
this.keyName1 = item.name |
|
|
|
this.keyName1 = item.name |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (type == 2) { |
|
|
|
if (type == 2) { |
|
|
|
if (item.category_id == this.isActive) { |
|
|
|
if (item.category_id == this.isActive) { |
|
|
|
this.isActive = ''; |
|
|
|
this.isActive = ''; |
|
|
@ -548,7 +558,8 @@ |
|
|
|
::v-deep .u-empty { |
|
|
|
::v-deep .u-empty { |
|
|
|
padding: 100rpx 0; |
|
|
|
padding: 100rpx 0; |
|
|
|
} |
|
|
|
} |
|
|
|
.head{ |
|
|
|
|
|
|
|
|
|
|
|
.head { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
|
background-color: #fff; |
|
|
|
background-color: #fff; |
|
|
@ -557,9 +568,11 @@ |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
left: 0; |
|
|
|
left: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
.blank{ |
|
|
|
|
|
|
|
|
|
|
|
.blank { |
|
|
|
height: 416rpx; |
|
|
|
height: 416rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 页面头部 |
|
|
|
// 页面头部 |
|
|
|
.header { |
|
|
|
.header { |
|
|
|
background-color: #fff; |
|
|
|
background-color: #fff; |
|
|
@ -591,6 +604,7 @@ |
|
|
|
.store-sort { |
|
|
|
.store-sort { |
|
|
|
color: #000; |
|
|
|
color: #000; |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
|
|
|
|
|
|
|
|
.store-box { |
|
|
|
.store-box { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
padding: 20rpx 0; |
|
|
|
padding: 20rpx 0; |
|
|
@ -732,8 +746,8 @@ |
|
|
|
background: #FFFFFF; |
|
|
|
background: #FFFFFF; |
|
|
|
box-sizing: border-box; |
|
|
|
box-sizing: border-box; |
|
|
|
margin: 20rpx 14rpx 0rpx 0; |
|
|
|
margin: 20rpx 14rpx 0rpx 0; |
|
|
|
border-radius:8rpx; |
|
|
|
border-radius: 8rpx; |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.goods-image { |
|
|
|
.goods-image { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
@ -756,7 +770,7 @@ |
|
|
|
left: 0; |
|
|
|
left: 0; |
|
|
|
-o-object-fit: cover; |
|
|
|
-o-object-fit: cover; |
|
|
|
object-fit: cover; |
|
|
|
object-fit: cover; |
|
|
|
border-radius: 8rpx; |
|
|
|
border-radius: 8rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
@ -788,7 +802,8 @@ |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
margin-bottom: 16rpx; |
|
|
|
margin-bottom: 16rpx; |
|
|
|
|
|
|
|
|
|
|
|
image { |
|
|
|
image { |
|
|
|
width: 28rpx; |
|
|
|
width: 28rpx; |
|
|
|
height: 28rpx; |
|
|
|
height: 28rpx; |
|
|
@ -869,7 +884,7 @@ |
|
|
|
justify-content: space-between; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
margin-top: 18rpx; |
|
|
|
margin-top: 18rpx; |
|
|
|
|
|
|
|
|
|
|
|
.sendLeft { |
|
|
|
.sendLeft { |
|
|
|
width: 120rpx; |
|
|
|
width: 120rpx; |
|
|
|
border: 1rpx solid #F21A1C; |
|
|
|
border: 1rpx solid #F21A1C; |
|
|
@ -878,7 +893,7 @@ |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
|
|
|
|
|
|
|
|
.left_1 { |
|
|
|
.left_1 { |
|
|
|
height: 100%; |
|
|
|
height: 100%; |
|
|
|
width: 48rpx; |
|
|
|
width: 48rpx; |
|
|
@ -889,7 +904,7 @@ |
|
|
|
color: #F21A1C; |
|
|
|
color: #F21A1C; |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.left_2 { |
|
|
|
.left_2 { |
|
|
|
height: 100%; |
|
|
|
height: 100%; |
|
|
|
width: 72rpx; |
|
|
|
width: 72rpx; |
|
|
@ -904,7 +919,7 @@ |
|
|
|
text-transform: none; |
|
|
|
text-transform: none; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.sendRight { |
|
|
|
.sendRight { |
|
|
|
height: 32rpx; |
|
|
|
height: 32rpx; |
|
|
|
background: #FDEDED; |
|
|
|
background: #FDEDED; |
|
|
|