BlockChainH5/pages/goods/lists.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">
				<template #statistics="good">
					<view class="goods-pv">
						<block v-if="good.value.price.pv > 0">
							+ {{good.value.price.pv}}
							<image class="goods-pv-icon" src="/static/icons/crystal-icon.png" mode="widthFix" />
						</block>
					</view>
				</template>
			</goods-list>
		</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;
	}
	
	// 加水晶
	.goods-pv{
		.goods-pv-icon{
			width: 28rpx;
			vertical-align: middle;
			margin-left: 5rpx;
			margin-bottom: 5rpx;
		}
	}
</style>