199 lines
4.7 KiB
Vue
199 lines
4.7 KiB
Vue
<template>
|
||
<view class="Goods-LISTS">
|
||
<!-- <image :src="`${config.apiUrls}images/baodan-banner.png`" mode="widthFix" /> -->
|
||
<view class="tabs">
|
||
<view class="tabs-item" @click="onType" v-if="goodsType.length>0">
|
||
{{goodsType[goodsTypeIndex].name}}
|
||
<image class="tabs-item-arrow" src="@/static/icons/search_row.png" mode="" />
|
||
</view>
|
||
<!-- <view class="tabs-item" :class="{'show': tabIndex == 0}" @click="onTabs" data-index="0">最新</view> -->
|
||
<view class="tabs-item" :class="{'show': tabIndex == 1 && marketType !== ''}" @click="onTabs" data-index="1">
|
||
价格
|
||
<image class="icon" mode="widthFix"
|
||
:src="require(marketType == 'asc' ? '@/static/icons/market_icon_low.png': marketType === ''? '@/static/icons/market_icon_null.png':'@/static/icons/market_icon_high.png')" />
|
||
</view>
|
||
<view class="tabs-item" :class="{'show': tabIndex == 2 && pvType !== ''}" @click="onTabs" data-index="2">
|
||
贡献值
|
||
<image class="icon" mode="widthFix"
|
||
:src="require(pvType == 'asc' ? '@/static/icons/market_icon_low.png': pvType === ''? '@/static/icons/market_icon_null.png':'@/static/icons/market_icon_high.png')" />
|
||
</view>
|
||
</view>
|
||
<view class="lists">
|
||
<goods-list :list="goods" priceType="CNY" @on-goods="onGoods" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
list,shopself
|
||
} from '@/apis/interfaces/goods'
|
||
import goodsList from '@/components/goods-list/goods-list'
|
||
import {
|
||
config
|
||
} from '@/apis/index.js'
|
||
export default {
|
||
name: 'Goods-LISTS',
|
||
data() {
|
||
return {
|
||
tabIndex: 0,
|
||
marketType: '',
|
||
goods: [],
|
||
page: 1,
|
||
has_more: true,
|
||
isBaoDan: false, // 是否是报单，默认有id不是报单，无id是报单
|
||
goodsType: [],
|
||
goodsTypeIndex: 0,
|
||
pvType:''
|
||
};
|
||
},
|
||
onReachBottom() {
|
||
if (this.has_more) {
|
||
this.page = this.page + 1
|
||
this.getList()
|
||
} else {
|
||
uni.showToast({
|
||
title: '我是有底线的~',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
created() {
|
||
this.getShopSelf()
|
||
},
|
||
onShow() {
|
||
if (this.$Route.query.type === 'baodan') {
|
||
this.isBaoDan = true
|
||
uni.setNavigationBarTitle({
|
||
title: '报单通证'
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
getShopSelf(){
|
||
shopself().then(res => {
|
||
this.goodsType = res
|
||
this.getList()
|
||
})
|
||
},
|
||
// 筛选自营和合作企业等条件
|
||
onType(e) {
|
||
uni.showActionSheet({
|
||
itemList: this.goodsType.map((item) => item.name),
|
||
success: e => {
|
||
if(this.goodsTypeIndex !== e.tapIndex){
|
||
this.goodsTypeIndex = e.tapIndex
|
||
this.has_more = true
|
||
this.page = 1
|
||
this.goods = []
|
||
// this.tabIndex = ''
|
||
// this.pvType = ''
|
||
// this.marketType = ''
|
||
this.getList()
|
||
}
|
||
}
|
||
});
|
||
},
|
||
onTabs(e) {
|
||
let index = e.target.dataset.index
|
||
if (index == 0 ) {
|
||
this.marketType = ''
|
||
this.pvType = ''
|
||
return
|
||
}
|
||
if (index == 1 ) {
|
||
this.marketType = this.marketType == 'asc' ? 'desc' : 'asc'
|
||
this.pvType = ''
|
||
}
|
||
if (index == 2 ) {
|
||
this.pvType = this.pvType === 'asc'? 'desc' : 'asc'
|
||
this.marketType = ''
|
||
}
|
||
|
||
this.tabIndex = index
|
||
this.has_more = true
|
||
this.page = 1
|
||
this.goods = []
|
||
this.getList()
|
||
},
|
||
|
||
onGoods(e) {
|
||
uni.navigateTo({
|
||
url: '/pages/goods/details?id=' + e.goods_id
|
||
})
|
||
// this.$Router.push({
|
||
// name: 'goodsDetails',
|
||
// params: {
|
||
// id: e.goods_id
|
||
// }
|
||
// })
|
||
},
|
||
getList() {
|
||
let data = {
|
||
order_by: this.tabIndex == 1 ? this.marketType : '',
|
||
pv: this.tabIndex == 2 ? this.pvType : '',
|
||
page: this.page,
|
||
is_self:this.goodsType[this.goodsTypeIndex].id
|
||
}
|
||
if (this.$Route.query.type === 'id') {
|
||
data.category_id = this.$Route.query.id
|
||
} else if (this.$Route.query.type === 'baodan') {
|
||
// 报单加个条件筛选
|
||
data.is_allow_values = 1
|
||
} else {
|
||
data.category_cid = this.$Route.query.id
|
||
}
|
||
list(data).then(res => {
|
||
this.goods = this.goods.concat(res.data)
|
||
this.has_more = res.page.has_more
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tabs {
|
||
position: fixed;
|
||
top: 0;
|
||
//#ifdef H5
|
||
top: 90rpx;
|
||
//#endif
|
||
left: 0;
|
||
z-index: 9;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
background: white;
|
||
height: 70rpx;
|
||
line-height: 70rpx;
|
||
text-align: center;
|
||
|
||
.tabs-item {
|
||
font-size: $title-size-m;
|
||
color: $text-gray;
|
||
display: flex;
|
||
align-items: center;
|
||
.tabs-item-arrow{
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
}
|
||
.icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
vertical-align: middle;
|
||
margin-left: $margin / 3;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
&.show {
|
||
color: $mian-color;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 列表
|
||
.lists {
|
||
padding-top: 70rpx;
|
||
}
|
||
</style>
|