fish-uniapp/pages/goods/index.vue

<template>
	<view class="content_index">
		<search_bar @toPage="toList"></search_bar>
		<view class="tabs">
			<tabs activeColor="#FE5353" :tabList="tabList" :tabIndex="swiperIndex" @change="swiperChange"></tabs>
		</view>
		<view class="swiper_view" :style="'height:'+screenHeight+'px'">
			<swiper :duration="1000" :current="swiperIndex" @change="swiperChange">
				<swiper-item>
					<view class="goods_list">
						<scroll-view style="width: 100%;height: 100%;" scroll-y="true" @scrolltolower="loadData">
							<view class="menu_view">
								<div class="menu_view_item" @click="menu(item)" v-for="(item,index) in menus"
									:key="index">
									<img class="menu_view_item_img" :src="item.imgUrl" />
									<text class="menu_view_item_text">{{item.name}}</text>
								</div>
							</view>
							<view class="menu_view_title">实时热销榜</view>
							<view class="goods_list_item" v-for="(item,index) in recommentList.obj" :key="index">
								<good :search_id="search_id" :data="item" :pid="pid"></good>
							</view>
							<uni-load-more :status="recommentList.moreStatus" color="#FE5353"></uni-load-more>
						</scroll-view>
					</view>
				</swiper-item>
				<swiper-item v-for="(ite,inde) in goodList" :key="inde">
					<view class="goods_list">
						<scroll-view style="width: 100%;height: 100%;" scroll-y="true" @scrolltolower="loadData">
							<view class="goods_list_item" v-for="(item,index) in ite.obj" :key="index">
								<good :search_id="search_id" :data="item" :pid="pid"></good>
							</view>
							<uni-load-more :status="ite.obj.moreStatus" color="#FE5353"></uni-load-more>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	import good from './good_com/good.vue'
	import tabs from './good_com/tabs.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,
			tabs,
			search_bar,
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				swiperIndex: 0,
				PageScrollTop: 0,
				screenHeight: 100,
				search_id: '',
				goodList: [],
				recommentList: {
					obj: [],
					page: 1,
					pageSize: 20,
					moreStatus: ''
				},
				pid: '',
				tabList: [{
						id: '',
						name: '推荐'
					}, {
						id: 1,
						name: '食品'
					},
					{
						id: 743,
						name: '男装'
					},
					{
						id: 14,
						name: '女装'
					},
					{
						id: 18,
						name: '电器'
					},
					{
						id: 1281,
						name: '鞋包'
					},
					{
						id: 1282,
						name: '内衣'
					},
					{
						id: 16,
						name: '美妆'
					},

					{
						id: 13,
						name: '水果'
					},
					{
						id: 818,
						name: '家纺'
					},
					{
						id: 2478,
						name: '文具'
					},
					{
						id: 1451,
						name: '运动'
					},

					{
						id: 15,
						name: '百货'
					},
					{
						id: 4,
						name: '母婴'
					},
					{
						id: 2048,
						name: '汽车'
					},
					{
						id: 1917,
						name: '家装'
					},
					{
						id: 2974,
						name: '家具'
					}
				],
				menus: [{
						imgUrl: 'static/ddk/image/miaosha.png',
						name: '限时秒杀',
						id: 4
					},
					{
						imgUrl: 'static/ddk/image/butie.png',
						name: '百亿补贴',
						id: 39996
					},
					{
						imgUrl: 'static/ddk/image/lingquan.png',
						name: '领券中心',
						id: 40000
					},
					{
						imgUrl: 'static/ddk/image/chongzhi.png',
						name: '充值中心',
						id: 39997
					},

				]
			}
		},

		onLoad(e) {
			this.pid = e.p_id
			this.initList();
			uni.getSystemInfo({
				success: res => {
					this.screenHeight = res.screenHeight - uni.upx2px(220) //将px 转换rpx
				}
			});
		},
		watch: {
			swiperIndex(val) {
				if (val > 0) {
					if (this.goodList[val - 1].obj.length == 0) {
						this.goodList[val - 1].page = 1;
					}
				} else {
					if (this.recommentList.obj.length == 0) {
						this.recommentList.page = 1;
					}
					this.recommentList.page = 1;
				}
				this.loadData()
			}
		},
		methods: {
			menu(item) {
				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.doMenu(item)
					}
				})
			},
			doMenu(item) {
				pddApi.pindao_resource(item.id, this.pid).then(res => {
					let data = res.data.resource_url_response
					uni.setStorageSync('webUrl', data.single_url_list.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
				})
			},
			initList() {
				for (let i = 1; i < this.tabList.length; i++) {
					this.goodList.push({
						obj: [],
						page: 1,
						pageSize: 20,
						moreStatus: ''
					})
				}
				this.loadData()
			},
			loadData(e) {
				if (this.swiperIndex === 0) {
					if (this.recommentList.moreStatus === 'loading' ||
						this.recommentList.moreStatus === 'refreshing') {
						return;
					}

					pddApi.goodsRecommend('', '', this.pid, this.recommentList.obj.length).then(res => {
						let list = []
						list = res.data.goods_basic_detail_response.list
						this.recommentList.obj.concat(list)
						this.search_id = res.data.goods_basic_detail_response.search_id
						if (list.length == 0) {
							this.this.recommentList.moreStatus = 'noMore'
							return
						}
						this.recommentList.moreStatus = ''
						this.recommentList.page++;
						this.recommentList.obj = this.recommentList.obj.concat(list);
					}).catch((res) => {
						this.goodList[this.swiperIndex].moreStatus = 'error'
					});
				} else {
					if (this.goodList[this.swiperIndex - 1].moreStatus === 'loading' ||
						this.goodList[this.swiperIndex - 1].moreStatus === 'refreshing') {
						return;
					}

					pddApi.goodsSearch('', '', this.tabList[this.swiperIndex].id, this.pid,
						this.goodList[this.swiperIndex - 1].page,
						this.goodList[this.swiperIndex - 1].pageSize).then(res => {
						let list = []
						list = res.data.goods_search_response.goods_list
						this.search_id = res.data.goods_search_response.search_id
						if (list.length == 0) {
							this.goodList[this.swiperIndex - 1].moreStatus = 'noMore'
							return
						}
						this.goodList[this.swiperIndex - 1].moreStatus = ''
						this.goodList[this.swiperIndex - 1].page++;
						this.goodList[this.swiperIndex - 1].obj = this.goodList[this.swiperIndex - 1].obj.concat(
							list);
					}).catch((res) => {
						this.goodList[this.swiperIndex - 1].moreStatus = 'error'
					});
				}
			},
			toList(e) {
				let url = '/uni_modules/aliea-goods/pages/goods/goodList?key_word=' + e.keyword
				if (this.pid) {
					url += '&p_id=' + this.pid
				}
				uni.navigateTo({
					url: url
				})
			},
			swiperChange(e) {
				this.swiperIndex = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">
	.content_index {
		width: 100%;
		height: 100%;

		.tabs {
			width: 100%;
		}

		.swiper_view {
			position: fixed;
			background-color: antiquewhite;
			width: 100%;

			uni-swiper {
				width: 100%;
				height: 100%;

				.goods_list {
					height: 100%;

					.goods_list_item {
						width: 355rpx;
						display: inline-block;
						margin: 10rpx;
						border-radius: 20rpx;
					}

					.menu_view {

						width: 750rpx;
						padding: 10rpx;
						// margin-top: 10rpx;
						border-radius: 20rpx;

						.menu_view_item {
							background-color: #fff;
							display: inline-block;
							text-align: center;
							width: 162.5rpx;
							padding: 20rpx 10rpx;

							.menu_view_item_img {
								width: 90rpx;
								height: 90rpx;
							}

							.menu_view_item_text {
								display: block;
							}
						}
					}

					.menu_view_title {
						padding: 15rpx;
						font-weight: bold;
						background-color: #fff;
					}
				}
			}

		}
	}
</style>