mp-ui-user/src/packageGoods/goods/list.vue

<template>
	<view>
		<!-- #ifdef MP-ALIPAY -->
		<u-navbar :title="name" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff"  leftIconSize="0"/>
		<!-- #endif -->
		<!-- #ifndef MP-ALIPAY -->
		<u-navbar :title="name" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
		<!-- #endif -->
		<!-- 固定nav -->
		<view class="fixed-top">
			<!-- 搜索 -->
			<view class="fixed-top-search flex">
				<u-input v-model="title" @confirm="pageList()" confirmType="search" placeholder="请输入商品名称" border="none" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" />
			</view>
			<!-- 选择 -->
			<view class="fixed-top-choice flex">
				<view class="fixed-top-choice-item" :class="{ 'action': choiceIndex == 1 }" @click="changeChice(1)">
					<text>综合</text>
				</view>
				<view class="fixed-top-choice-item" :class="{ 'action': choiceIndex == 2 }" @click="changeChice(2)">
					<text>销量</text>
				</view>
				<view class="fixed-top-choice-item flex" :class="{ 'action': choiceIndex == 3 }" @click="changeChice(3)">
					<text>盲豆价格</text>
					<view class="icon flex" v-if="choiceIndex == 3">
						<image src="../static/list_up.png" mode="scaleToFill" v-if="priceShow" />
						<image src="../static/list_down.png" mode="scaleToFill" v-else />
					</view>
					<view class="icon flex" v-else>
						<image src="../static/list_null.png" mode="scaleToFill" />
					</view>
				</view>
			</view>
		</view>
		<view class="none"></view>
		<!-- 列表 -->
		<view class="goods">
			<view class="goods-list flex">
				<view class="goods-list-item flex" v-for="(item, index) in list" :key="index" @click="toGoodsDetail(item)">
					<view class="image-wrap flex">
						<image :src="item.picUrl" mode="aspectFit"></image>
					</view>
					<view class="content">
						<!-- #ifdef MP-ALIPAY -->
						<view class="content-titletwo">{{ item.title }}</view>
						<!-- #endif -->
						<!-- #ifndef MP-ALIPAY -->
						<view class="content-title ells-one">{{ item.title }}</view>
						<!-- #endif -->
						
						<view class="content-coin flex">
							<view class="content-coin__left flex">
								<image src="../../static/public/goods_coin.png" mode="scaleToFill"></image>
								<view class="num"><text>×</text>{{ item.exchangePrice }}</view>
							</view>
							<view class="content-coin__right" v-if="item.originPrice">{{ item.originPrice }}</view>
						</view>
						<view class="content-price">￥{{ $numberFormat(item.value) }}</view>
					</view>
				</view>
				<!-- <view class="goods-list-item"></view> -->
				<u-loadmore :line="true" v-if="list.length>5" :status="status" :loading-text="'努力加载中'" :nomore-text="'已经到低了'" />
			</view>
		</view>
		<view class="flex empty" v-if="!list.length">
			<view class="center">
				<image class="center-img" src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/nodata_3.png" mode="scaleToFill"></image>
				<view class="center-font">还没有商品</view>
			</view>
		</view>
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	export default {
		data() {
			return {
				status: 'nomore',//上拉刷新状态
				pageNum: 1,
				total: 0,
				list: [],
				title: '',
				name: '商品列表',
				tagIds: null,
				categoryId: null,
				choiceIndex: 1,
				priceSort: null,
				saleSort: null,
				priceShow: false
			};
		},
		
		onLoad(opthios) {
			this.title = opthios.title
			if(opthios.name) {
				this.name = opthios.name
				this.tagIds = opthios.tagIds
				this.categoryId = Number(opthios.categoryId)
			}
			this.pageList()
		},
		
		methods: {
			pageList() {
				this.pageNum = 1
				this.total = 0
				this.list = []
				this.getList()
			},
			
			// 商品列表
			getList() {
				uni.showLoading({
					title: '加载中'
				});
				let data = {
					goodsName: this.title,
					priceSort: this.priceSort,
					saleSort: this.saleSort,
					tagIds: this.tagIds,
					categoryId: this.categoryId,
					noToken: true
				}
				$http.post(`/api/v1/mp/user/exchange/goods/list?pageNum=${this.pageNum}&pageSize=20`,data).then(
					res => {
						uni.hideLoading();
						if (res.code == 0) {
							res.rows.forEach(item => {
								item.picUrl = env.filePublic + item.picUrl.split(',')[0] + '?imageView2/2/w/340'
							})
							this.total = res.total
							this.list = this.list.concat(res.rows)
						}
					}).catch(() => {
					uni.hideLoading();
				})
			},
			
			// 商品详情
			toGoodsDetail(item) {
				uni.navigateTo({
					url: `/packageGoods/goods/detail?id=${ item.goodsId }`
				})
			},
			
			// 筛选
			changeChice(num) {
				this.choiceIndex = num
				if(num == 1) {
					this.priceSort = null
					this.saleSort = null
				} else if (num == 2) {
					this.saleSort = 2
					this.priceSort = null
				} else if (num == 3) {
					this.saleSort = null
					this.priceShow = !this.priceShow
					this.priceSort = this.priceShow ? 1 : 2
				}
				this.pageList()
			},
		},
		
		onReachBottom() {
			if(this.total < this.pageNum * 20) return ;
			this.status = 'loading';
			// setTimeout(() => {
			++this.pageNum
			if(this.total < this.pageNum * 20) this.status = 'nomore';
				else this.status = 'loading';
			this.getList()
			// }, 2000)
		},
	}
</script>

<style lang="scss" scoped>
	// 固定
	.fixed-top {
		position: fixed;
		width: 100%;
		background-color: #fff;
		padding: 34rpx;
		z-index: 100;
		box-shadow: 0 5rpx 5rpx #ececec;
		
		// 搜索
		&-search {
			height: 72rpx;
			background: #F7F7F7;
			border-radius: 34px;
			padding-left: 24rpx;
			margin-bottom: 32rpx;
		}
		
		// 选择
		&-choice {
			justify-content: space-around;
			
			&-item {
				color: #666;
				
				.icon {
					flex-direction: column;
					
					image {
						width: 18rpx;
						height: 20rpx;
						margin-left: 6rpx;
					}
				}
			}
			
			.action {
				color: #FA822C;
			}
		}
	}
	
	.none {
		height: 240rpx;
	}
	
	// 列表
	.goods {
		padding: 0 34rpx;
		
		&-list {
			width: 100%;
			justify-content: space-between;
			flex-wrap: wrap;
			
			&-item {
				flex-direction: column;
				justify-content: flex-start;
				width: 48%;
				padding-bottom: 36rpx;
				background: #FFFFFF;
				box-shadow: 0px 0px 3px 0px rgba(100, 100, 100, 0.1);
				border-radius: 16rpx;
				margin-bottom: 32rpx;
				
				.image-wrap {
					width: 100%;
					height: 320rpx;
					margin-bottom: 16rpx;
					
					image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx 16rpx 0 0;
					}
				}
				
				.content {
					width: 100%;
					padding: 0 22rpx;
					
					&-title {
						height: 28rpx;
						font-size: 28rpx;
						line-height: 28rpx;
						font-weight: bold;
					}
					&-titletwo {
						height: 28rpx;
						font-size: 28rpx;
						line-height: 32rpx;
						font-weight: bold;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					
					&-coin {
						height: 34rpx;
						font-size: 24rpx;
						justify-content: space-between;
						margin-top: 30rpx;
						margin-bottom: 24rpx;
						
						&__left {
							margin-right: 24rpx;
							font-size: 28rpx;
							font-weight: bold;
							
							text {
								font-weight: normal;
							}
							
							image {
								width: 34rpx;
								height: 34rpx;
							}
						}
						
						&__right {
							color: #666666;
							text-decoration: line-through;
						}
					}
					
					&-price {
						font-size: 24rpx;
						line-height: 24rpx;
						color: #666666;
					}
				}
			}
			
			&-item:last-child {
				box-shadow: none;
				background: none;
			}
		}
	}
	
	.empty {
		height: 50vh;
		
		.center {
			text-align: center;
		
			&-img {
				width: 228rpx;
				height: 320rpx;
			}
		
			&-font {
				font-size: 30rpx;
				font-weight: 400;
				color: #999999;
				margin-bottom: 250rpx;
			}
		}
	}
</style>