|
|
|
@ -1,74 +1,74 @@ |
|
|
|
<template> |
|
|
|
<view class="page"> |
|
|
|
<!-- 导航栏 --> |
|
|
|
<navbar title="商品列表" |
|
|
|
leftClick |
|
|
|
@leftClick="$utils.navigateBack" |
|
|
|
bgColor="#E3441A" |
|
|
|
color="#fff" /> |
|
|
|
<navbar title="商品" class="nav-bar" |
|
|
|
leftClick |
|
|
|
@leftClick="$utils.navigateBack" |
|
|
|
bgColor="#E3441A" |
|
|
|
color="#fff" |
|
|
|
/> |
|
|
|
|
|
|
|
<!-- 搜索栏 --> |
|
|
|
<view class="search"> |
|
|
|
<uv-search placeholder="搜你喜欢的产品" bgColor="#fff" |
|
|
|
@search="search" |
|
|
|
@change="search" |
|
|
|
@custom="search" |
|
|
|
v-model="queryParams.title"></uv-search> |
|
|
|
<uv-search |
|
|
|
v-model="queryParams.title" |
|
|
|
placeholder="搜索项目名称" |
|
|
|
bgColor="#F5F5F5" |
|
|
|
inputAlign="center" |
|
|
|
:showAction="false" |
|
|
|
@search="search" |
|
|
|
@change="search" |
|
|
|
@custom="search" |
|
|
|
></uv-search> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 商品列表 --> |
|
|
|
<view style="position: 20rpx;" |
|
|
|
v-if="queryParams.title"> |
|
|
|
<productList :list="list" /> |
|
|
|
<view v-if="queryParams.title" > |
|
|
|
<productCard v-for="item in list" :data="item" :key="item.id"></productCard> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 分类商品列表 --> |
|
|
|
<view class="category" |
|
|
|
v-else> |
|
|
|
|
|
|
|
<view class="tabs"> |
|
|
|
<uv-tabs |
|
|
|
<!-- todo: check chain? --> |
|
|
|
<view v-else class="" > |
|
|
|
|
|
|
|
<uv-vtabs |
|
|
|
:list="category" |
|
|
|
:activeStyle="{color : '#f00', fontWeight : 600}" |
|
|
|
lineColor="#f00" |
|
|
|
:inactiveStyle="{color: 'rgba(0,0,0,.8)'}" |
|
|
|
lineHeight="8rpx" |
|
|
|
lineWidth="50rpx" |
|
|
|
keyName="name" |
|
|
|
:current="current" |
|
|
|
@click="clickTabs"></uv-tabs> |
|
|
|
</view> |
|
|
|
|
|
|
|
<uv-vtabs |
|
|
|
:list="category[current].children" |
|
|
|
:current="currentChildren" |
|
|
|
keyName="name" |
|
|
|
:chain="false" |
|
|
|
@change="change"> |
|
|
|
<!-- <view class="list"> --> |
|
|
|
<!-- <template v-for="(item, index) in category[current].children"> |
|
|
|
<uv-vtabs-item :index="index" :key="index"> |
|
|
|
<view class="category-item"> |
|
|
|
<view class="category-title"> |
|
|
|
{{ item.name }} |
|
|
|
</view> |
|
|
|
|
|
|
|
<productItem :item="pro" |
|
|
|
v-for="(pro, i) in item.shopList" :key="i" |
|
|
|
@click="$utils.navigateTo(`/pages_order/product/productDetail?id=${pro.id}`)" /> |
|
|
|
</view> |
|
|
|
</uv-vtabs-item> |
|
|
|
</template> --> |
|
|
|
<!-- </view> --> |
|
|
|
:chain="true" |
|
|
|
@change="change" |
|
|
|
|
|
|
|
<uv-vtabs-item> |
|
|
|
<view class="category-item"> |
|
|
|
<productItem :item="pro" |
|
|
|
v-for="(pro, i) in categoryList.shopList" :key="i" |
|
|
|
@click="$utils.navigateTo(`/pages_order/product/productDetail?id=${pro.id}`)" /> |
|
|
|
|
|
|
|
<uv-empty v-if="categoryList.shopList.length == 0" text="还没有呢"/> |
|
|
|
</view> |
|
|
|
</uv-vtabs-item> |
|
|
|
barWidth="177rpx" |
|
|
|
barBgColor="#F5F5F5" |
|
|
|
:barItemStyle="{ |
|
|
|
color: '#000000', |
|
|
|
fontSize: '28rpx', |
|
|
|
fontWeight: 700, |
|
|
|
}" |
|
|
|
:barItemActiveStyle="{ |
|
|
|
color: '#84A73F', |
|
|
|
backgroundColor: '#FFFFFF', |
|
|
|
}" |
|
|
|
:barItemActiveLineStyle="{ |
|
|
|
backgroundImage: 'linear-gradient(#84A73F, #D8FF8F)', |
|
|
|
margin: '25rpx 3rpx', |
|
|
|
}" |
|
|
|
> |
|
|
|
<template v-for="(item, index) in category"> |
|
|
|
<uv-vtabs-item :index="index" :key="item.id"> |
|
|
|
<template v-if="item.childrens.length"> |
|
|
|
<productCard |
|
|
|
v-for="product in item.childrens" |
|
|
|
:key="product.id" |
|
|
|
:data="product" |
|
|
|
direction="vertical" |
|
|
|
></productCard> |
|
|
|
</template> |
|
|
|
<template v-else> |
|
|
|
<uv-empty text="还没有呢"/> |
|
|
|
</template> |
|
|
|
</uv-vtabs-item> |
|
|
|
</template> |
|
|
|
</uv-vtabs> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -78,6 +78,8 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import productCard from '@/components/product/productCard.vue' |
|
|
|
|
|
|
|
import productItem from '@/components/product/productItem.vue'; |
|
|
|
import mixinsList from '@/mixins/list.js' |
|
|
|
import { |
|
|
|
@ -88,22 +90,20 @@ |
|
|
|
export default { |
|
|
|
mixins: [mixinsList], |
|
|
|
components: { |
|
|
|
productItem, |
|
|
|
productCard, |
|
|
|
tabber, |
|
|
|
|
|
|
|
productItem, |
|
|
|
productList, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
mixinsListApi: 'getClassShopPageList', |
|
|
|
mixinsListApi: 'queryItemList', |
|
|
|
current : 0, |
|
|
|
currentChildren : 0, |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState(['category']), |
|
|
|
categoryList(){ |
|
|
|
return this.category[this.current].children[this.currentChildren] |
|
|
|
}, |
|
|
|
}, |
|
|
|
onLoad({ |
|
|
|
search, |
|
|
|
@ -127,11 +127,7 @@ |
|
|
|
methods: { |
|
|
|
change(e) { |
|
|
|
// this.queryParams.classId = this.category[e].id |
|
|
|
this.currentChildren = e |
|
|
|
}, |
|
|
|
clickTabs({index}){ |
|
|
|
this.current = index |
|
|
|
this.currentChildren = 0 |
|
|
|
this.current = e |
|
|
|
}, |
|
|
|
search(){ |
|
|
|
for(let i = 0;i < 10;i++){ |
|
|
|
@ -146,39 +142,55 @@ |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.page { |
|
|
|
/deep/ .uv-vtabs { |
|
|
|
height: calc(100vh - 600rpx) !important; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .uv-vtabs__bar { |
|
|
|
height: calc(100vh - 600rpx) !important; |
|
|
|
} |
|
|
|
background-color: #FFFFFF; |
|
|
|
|
|
|
|
/deep/ .uv-vtabs__content { |
|
|
|
height: calc(100vh - 600rpx) !important; |
|
|
|
/deep/ .nav-bar__view { |
|
|
|
background-image: linear-gradient(#84A73F, #D8FF8F); |
|
|
|
} |
|
|
|
|
|
|
|
.search { |
|
|
|
position: relative; |
|
|
|
background: #FFFFFF; |
|
|
|
margin: 20rpx; |
|
|
|
background: #F5F5F5; |
|
|
|
margin: 15rpx 30rpx; |
|
|
|
border-radius: 41rpx; |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .uv-search__action { |
|
|
|
background-color: $uni-color; |
|
|
|
color: #FFFFFF; |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
border-radius: 30rpx; |
|
|
|
} |
|
|
|
$search-height: 108rpx; |
|
|
|
$list-height: calc(#{$body-height} - #{$search-height}); |
|
|
|
|
|
|
|
/deep/ .uv-vtabs, |
|
|
|
/deep/ .uv-vtabs__bar, |
|
|
|
/deep/ .uv-vtabs__content { |
|
|
|
height: $list-height !important; |
|
|
|
} |
|
|
|
|
|
|
|
&::v-deep .uv-vtabs__content { |
|
|
|
background: transparent !important; |
|
|
|
/deep/ .uv-vtabs { |
|
|
|
background-color: #F5F5F5; |
|
|
|
overflow: hidden; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .uv-vtabs__bar { |
|
|
|
// box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16); |
|
|
|
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .uv-vtabs__content { |
|
|
|
margin-left: 6px; |
|
|
|
margin-right: 10rpx; |
|
|
|
} |
|
|
|
|
|
|
|
/deep/ .uv-vtabs__bar-item { |
|
|
|
padding: 25rpx 0 !important; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
&::v-deep .uv-vtabs__content { |
|
|
|
background: #F5F5F5 !important; |
|
|
|
// overflow: hidden; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.category { |
|
|
|
|
