new-88live/pages/user/collect.vue

<template>
	<view class="collect-container">
		<view class="collect-container__head bg-white" :style="{ height: headHeight + 'px' }">
			<view :style="{ height: headHeight + 'px', paddingTop: headTop + 'px' }">
				<view class="navigater flex align-center justify-between">
					<view class="back" :style="{height: headHeight + 'px', lineHeight: headHeight + 'px'}"
						@tap="handleBack">
						<text class="wlIcon-fanhui1"></text>
					</view>
					<scroll-view scroll-x class="nav text-center">
						<view v-for="(item, index) in navList" :key="index" class="cu-item flex-sub"
							:class="currentItemId === item.type ? 'text-orange cur' : ''"
							@tap="handleSelect(item.type, index)">
							<text class="text-30">{{item.type_text}}</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<swiper class="collect-container__main" :current-item-id="currentItemId"
			:style="{ height: windowHeight + 'px' }" @change="changeCurrent" @animationfinish="animationFinish">
			<swiper-item v-for="(data, keys) in navList" :key="keys" :item-id="data.type">
				<wanl-empty :text="$t('collect.empty')" src="collect_default3x" v-if="data.dataList.length === 0 && data.loaded" />
				<scroll-view class="content" scroll-y @scrolltolower="loadData">
					<view class="item margin-bj padding-sm bg-white radius-bock" v-for="(item, index) in data.dataList"
						:key="index" @click="handleGoods(item.id)">
						<view class="cu-avatar margin-right-bj radius"
							:style="{backgroundImage: `url(${$appKit.oss(item.image, 88, 88)})`}"></view>
						<view class="subject">
							<view class="text-sm wanl-gray-dark text-cut-2">
								<view v-if="currentItemId === 'groups'" class="cu-tag sm bg-gradual-red radius margin-right-xs">
									{{ item.is_ladder === 1 ? $t('collect.ladder') : $t('collect.groupTag', [item.people_num]) }}
								</view>
								{{item.title}}
							</view>
							<view class="text-price text-red text-df"> {{item.price}} </view>
							<view class="menu">
								<view class="wanl-gray-light text-sm">
									<text class="margin-right-sm">{{ $t('collect.likes', [item.like]) }}</text>
									<text v-if="currentItemId === 'goods'">{{ $t('collect.payment', [item.payment]) }}</text>
									<text v-if="currentItemId === 'groups'">{{ $t('collect.grouped', [0]) }}</text>
								</view>
								<view class="button text-bold text-30">
									<text class="wlIcon-lajitong" @click.stop="loadFollow(item.id, index)"></text>
									<text class="wlIcon-dianpu1" @click.stop="onShop(item.shop_id)"></text>
								</view>
							</view>
						</view>
					</view>
					<uni-load-more :status="data.loadingType" :content-text="contentText" />
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { pullCollectList, postCollectFollow } from '@/features/mall/mall-gateway'
export default {
	data() {
		return {
			headHeight: 0,
			windowHeight: 0,
			headTop: 0,
			currentId: 0,
			currentItemId: 'goods',
			navList: [],
			contentText: {
				contentdown: ' ',
				contentrefresh: '',
				contentnomore: ''
			}
		}
	},
	onLoad() {
		const sysInfo = uni.getSystemInfoSync()
		const statusBarHeight = sysInfo.statusBarHeight || 0
		this.headTop = statusBarHeight
		this.headHeight = statusBarHeight + uni.upx2px(90)
		this.windowHeight = sysInfo.windowHeight - uni.upx2px(90)
		this.navList = [{
			type: 'goods',
			type_text: this.$t('collect.goods'),
			dataList: [],
			loadingType: 'more',
			current_page: 1
		}, {
			type: 'groups',
			type_text: this.$t('collect.groups'),
			dataList: [],
			loadingType: 'more',
			current_page: 1
		}]
		this.contentText.contentrefresh = this.$t('collect.loading')
		this.loadData()
	},
	methods: {
		async loadData(source) {
			let navItem = this.navList[this.currentId]
			if (!navItem) return
			if (navItem.loadingType == 'noMore') return
			if (source === 'tabChange' && navItem.loaded === true) return
			if (navItem.loadingType === 'loading') return
			navItem.loadingType = 'loading'
			try {
				const res = await pullCollectList({
					type: navItem.type,
					page: navItem.current_page
				})
				navItem.current_page = res.current_page
				if (res.last_page === res.current_page) {
					navItem.loadingType = 'noMore'
				} else {
					navItem.loadingType = 'more'
					navItem.current_page++
				}
				res.data.forEach(item => {
					navItem.dataList.push(item.goods)
				})
				this.$set(navItem, 'loaded', true)
			} catch (e) {
				navItem.loadingType = 'more'
				console.error('[collect] load failed:', e)
			}
		},
		async loadFollow(id, index) {
			try {
				await postCollectFollow({
					type: this.currentItemId,
					id: id
				})
				this.$delete(this.navList[this.currentId].dataList, index)
				this.$store.commit('statistics/dynamic', {
					collection: this.$store.state.statistics.dynamic.collection - 1
				})
			} catch (e) {
				console.error('[collect] unfollow failed:', e)
			}
		},
		handleSelect(id, index) {
			this.currentItemId = id
			this.currentId = index
		},
		animationFinish(e) {
			this.changeCurrent(e)
		},
		changeCurrent(e) {
			this.currentItemId = e.detail.currentItemId
			this.currentId = e.detail.current
			this.loadData('tabChange')
		},
		handleBack() {
			uni.navigateBack({ delta: 1 })
		},
		handleGoods(id) {
			if (this.currentItemId === 'goods') {
				uni.navigateTo({ url: `/pages/product/goods?id=${id}` })
			} else if (this.currentItemId === 'groups') {
				uni.navigateTo({ url: `/pages/apps/groups/goods?id=${id}` })
			}
		},
		onShop(shop_id) {
			if (shop_id) {
				uni.navigateTo({ url: `/pages/shop/index?id=${shop_id}` })
			}
		}
	}
}
</script>

<style lang="scss">
	.collect-container {
		&__head {
			.navigater {
				position: relative;
				.back {
					position: absolute;
					left: 25rpx;
					z-index: 9999;
					text {
						font-size: 36rpx;
						font-weight: bold;
					}
				}
			}
		}
		&__main {
			position: relative;
			z-index: 99;
			.content {
				height: 100%;
				.item {
					display: flex;
					.cu-avatar {
						height: 160rpx;
						width: 160rpx;
						flex-shrink: 0;
					}
					.subject {
						display: flex;
						flex: 1;
						flex-wrap: wrap;
						align-content: space-between;
						&>view {
							width: 100%;
						}
						.menu {
							display: flex;
							justify-content: space-between;
							.button {
								&>text + text{
									margin-left: 60rpx;
									margin-right: 10rpx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>