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

<template>
	<view class="wanlfind-follow-container">
		<view class="edgeInsetTop"></view>
		<wanl-empty src="find_default3x" :text="$t('follow.empty')" v-if="dataList.length === 0 && status !== 'loading'"/>
		<view v-if="dataList.length > 0" class="wanlfind-follow-container__list">
			<view class="item padding-bj margin-bj bg-white radius-bock" v-for="(item, index) in dataList"
				:key="item.id" @click="handleUser(item.user_no)">
				<view class="cu-avatar margin-right-bj round"
					:style="{backgroundImage: `url(${$appKit.oss(item.shop.avatar, 88, 88)})`}"></view>
				<view class="subject">
					<view class="info">
						<view v-if="item.shop.isself == 1">
							<view class="cu-tag sm wanl-bg-redorange radius margin-right-xs">{{ $t('search.shopTag') }}</view>
							{{item.shop.shopname}}
						</view>
						<view class="text-cut-2 margin-bottom-xs" v-else>
							<view class="cu-tag sm bg-gray radius margin-right-xs" v-if="item.shop.state == 0">{{ $t('mall.product.personal') }}</view>
							<view class="cu-tag sm wanl-bg-blue radius margin-right-xs" v-if="item.shop.state == 1">{{ $t('mall.product.enterprise') }}</view>
							<view class="cu-tag sm wanl-bg-orange radius margin-right-xs" v-if="item.shop.state == 2">{{ $t('mall.product.flagship') }}</view>
							{{item.shop.shopname}}
						</view>
						<view class="wanl-gray-light text-sm text-cut">
							<text>{{item.shop.city}}</text>
						</view>
					</view>
					<view class="menu">
						<button class="cu-btn wlIcon margin-right-sm" @click.stop="onShop(item.shop.id)">
							<text class="wlIcon-31dianpu"></text>
						</button>
						<button v-if="item.isFollow === 0" class="cu-btn wlIcon" @click.stop="handleFollow(index)">
							<text class="wlIcon-tianjia"></text>
						</button>
						<button v-else class="cu-btn radius-bock text-sm" @click.stop="handleFollow(index)">
							<text class="wlIcon-31guanbi margin-right-xs text-bold"></text>{{ $t('mall.shop.unfollow') }}
						</button>
					</view>
				</view>
			</view>
		</view>
		<view class="edgeInsetBottom"></view>
		<!-- 加载更多 -->
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
import { pullFollowShopList, postFollowShop } from '@/features/mall/mall-gateway'
export default {
	data() {
		return {
			dataList: [],
			reload: false,
			current_page: 1,
			last_page: 1,
			status: 'loading',
			contentText: {
				contentdown: '',
				contentrefresh: '',
				contentnomore: ''
			}
		}
	},
	onLoad() {
		this.contentText.contentrefresh = this.$t('follow.loading')
		this.loadData()
	},
	onPullDownRefresh() {
		this.current_page = 1
		this.reload = true
		this.loadData()
	},
	onReachBottom() {
		if (this.current_page >= this.last_page) {
			this.status = 'noMore'
		} else {
			this.reload = false
			this.current_page = this.current_page + 1
			this.status = 'loading'
			this.loadData()
		}
	},
	methods: {
		async loadData() {
			try {
				const res = await pullFollowShopList({ page: this.current_page })
				uni.stopPullDownRefresh()
				this.dataList = this.reload ? res.data : this.dataList.concat(res.data)
				this.current_page = res.current_page
				this.last_page = res.last_page
				this.status = res.total == 0 ? 'noMore' : 'more'
			} catch (e) {
				uni.stopPullDownRefresh()
				console.error('[follow] load failed:', e)
			}
		},
		async handleFollow(index) {
			let data = this.dataList[index]
			try {
				const result = await postFollowShop({ id: data.user_no, type: 'follow' })
				let concern = this.$store.state.statistics.dynamic.concern
				if (result.data === 0) {
					concern -= 1
				} else {
					concern += 1
				}
				this.$store.commit('statistics/dynamic', { concern })
				data.isFollow = result.data
			} catch (e) {
				console.error('[follow] follow action failed:', e)
			}
		},
		handleUser(user_no) {
			uni.navigateTo({ url: `/pages/apps/find/user?id=${user_no}` })
		},
		onShop(shop_id) {
			if (shop_id) {
				uni.navigateTo({ url: `/pages/shop/index?id=${shop_id}` })
			}
		}
	}
}
</script>

<style lang="scss">
	.wanlfind-follow-container {
		&__list {
			.item {
				display: flex;
				align-items: center;
				.cu-avatar {
					width: 100rpx;
					height: 100rpx;
					flex-shrink: 0;
					background-color: #f9f9f9;
				}
				.subject {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex: 1;
					.info {
						max-width: 250rpx;
					}
					.menu {
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
</style>