fish-uniapp/pages/goods/goodList.vue

<template>
	<view class="content">
		<search_bar @toPage="toList"></search_bar>
		<view class="paixu">
			<view class="select">
				<picker mode="selector" :value="sort_type" :range="sort_list" range-key="text" @change="paixu">
					<view>{{sort_text}}</view>
				</picker>
			</view>
		</view>
		<view class="paixuzw"></view>
		<view class="list_item" v-for="(item,index) in list.obj" :key="index">
			<good :search_id="search_id" :data="item" :pid="pid"></good>
		</view>
		<uni-load-more :status="list.moreStatus" color="#FE5353"></uni-load-more>
	</view>
</template>

<script>
	import good from './good_com/good.vue'
	import search_bar from './good_com/search_bar.vue'

	import {
		checkAuthority
	} from './utils/util.js'

	const pddApi = uniCloud.importObject('pdd-serve')

	export default {
		components: {
			good,
			search_bar
		},
		onLoad(options) {
			this.key_word = options.key_word;
			this.pid = options.p_id
			uni.setNavigationBarTitle({
				title: options.key_word
			})
			this.search_key();
		},
		data() {
			return {
				list: {
					obj: [],
					page: 1,
					pageSize: 20,
					moreStatus: 'more'
				},
				pid: '',
				search_id: '',
				list_id: '',
				sort_text: '排序',
				sort_type: 0,
				sort_list: [{
					id: 0,
					text: "综合排序"
				}, {
					id: 3,
					text: "价格由低到高"
				}, {
					id: 9,
					text: "券后价由低到高"
				}, {
					id: 10,
					text: "券后价由高到低"
				}, {
					id: 6,
					text: "销量由高到低"
				}, {
					id: 8,
					text: "优惠券金额由高到低"
				}]

			};
		},
		onReachBottom() {
			if (this.list.moreStatus != 'noMore') {
				this.list.page++
				this.loadData()
			}
		},
		methods: {
			paixu(e) {
				this.list.obj = []
				this.list.page = 1
				this.list.moreStatus = 'more'
				this.sort_type = this.sort_list[e.detail.value].id
				this.sort_text = this.sort_list[e.detail.value].text
				this.loadData()
			},
			search_key() {
				checkAuthority(this.pid).then(res => {
					if (res.mobile_url) {
						uni.setStorageSync('webUrl', res.mobile_url)
						// #ifndef MP
						uni.navigateTo({
							url: '/uni_modules/aliea-goods/pages/webview/webview'
						})
						// #endif

						// #ifdef MP
						uni.navigateToMiniProgram({
							appId: data.we_app_info.app_id,
							path: data.we_app_info.page_path
						})
						// #endif
					} else {
						this.loadData()
					}
				})
			},
			loadData() {
				this.list.moreStatus = 'loading'
				pddApi.goodsSearch(this.key_word, this.list_id, '', this.pid, this.list.page, this.list.pageSize, this
						.sort_type)
					.then((
						res) => {
						let list = res.data.goods_search_response.goods_list
						this.search_id = res.data.goods_search_response.search_id
						this.list_id = res.data.goods_search_response.list_id
						if (list.length == 0) {
							this.list.moreStatus = 'noMore'
						}
						this.list.obj = this.list.obj.concat(list);
					})
			},
			toList(e) {
				let url = '/uni_modules/aliea-goods/pages/goods/goodList?key_word=' + e.keyword
				if (this.pid) {
					url += '&p_id=' + this.pid
				}
				uni.redirectTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		background-color: antiquewhite;

		.paixu {
			position: fixed;
			width: 100%;
			background-color: rgb(250 235 208);
			border-bottom: #dfdfdf 5rpx solid;
			z-index: 100;

			.select {
				display: inline-block;
				width: 100%;
				line-height: 70rpx;
				color: #f80000;
				padding-left: 20rpx;
			}
		}

		.paixuzw {
			width: 100%;
			height: 70rpx;
		}

		.list_item {
			width: 335rpx;
			display: inline-block;
			margin: 20rpx 15rpx;
		}
	}
</style>