new-88live/pages/shop/info.vue

<!-- 店鋪信息页 -->
<template>
	<view class="wanlshop-info-container">
		<view class="edgeInsetTop"></view>
		<view class="wanlshop-info-container__main bg-white">
			<view class="margin-left-bj shopuser">
				<view class="cu-avatar round margin-right-bj" :style="{backgroundImage: 'url(' + $appKit.oss(shopData.avatar, 52, 52) + ')'}"></view>
				<view>
					<view class="text-df text-cut" style="width: 320rpx;">
						<text>{{ shopData.shopname || $t('common.loading') }}</text>
					</view>
					<view class="wanl-gray text-min">{{ $t('mall.fans') }} {{ shopData.find_user.fans }}</view>
					<view class="wanl-gray text-min">{{ shopData.city }}</view>
				</view>
			</view>
			<view class="margin-right-bj">
				<button v-if="shopData.isFollow === 0" class="cu-btn radius-bock text-sm" @click.stop="handleFollow">
					<text class="wlIcon-tianjia margin-right-xs text-bold"></text>{{ $t('mall.shop.follow') }}
				</button>
				<button v-else class="cu-btn radius-bock text-sm" @click.stop="handleFollow">
					<text class="wlIcon-31xuanze margin-right-xs text-bold"></text>{{ $t('mine.followed') }}
				</button>
			</view>
		</view>
		<view class="shop_info bg-white margin-top-bj padding-lr-bj">
			<view class="padding-tb-bj solid-bottom">{{ $t('mall.shop.shopIntro') }}</view>
		</view>
		<view class="bg-white padding-bj">
			<rich-text :nodes="shopData.bio"></rich-text>
		</view>
	</view>
</template>

<script>
import { pullMallShopInfo } from '@/features/mall/mall-gateway'

export default {
	data() {
		return {
			shopData: {
				id: 0,
				avatar: '',
				shopname: '',
				state: 0,
				islive: 0,
				isself: 0,
				isFollow: 0,
				find_user: {
					user_no: '',
					fans: 0
				}
			}
		}
	},
	onLoad(option) {
		this.loadData(option.id)
	},
	methods: {
		async loadData(shop_id) {
			try {
				const res = await pullMallShopInfo(shop_id)
				if (res.bio) {
					res.bio = res.bio.replace(/<img/g, "<img style='display: block;'")
				}
				this.shopData = res
			} catch (e) {
				console.error('[shop info] loadData', e)
			}
		},
		async handleFollow() {
			const isLogin = this.$store.state.user.isLogin
			if (!isLogin) {
				uni.navigateTo({ url: '/pages/passport/lobby' })
				return
			}
			try {
				await uni.request({
					url: '/wanlshop/find/user/setFindUser',
					method: 'POST',
					data: {
						id: this.shopData.find_user.user_no,
						type: 'follow'
					},
					success: res => {
						let concern = this.$store.state.statistics.dynamic.concern
						if (res.data.data === 0) {
							concern -= 1
							this.shopData.find_user.fans -= 1
						} else {
							concern += 1
							this.shopData.find_user.fans += 1
						}
						this.$store.commit('statistics/dynamic', { concern })
						this.shopData.isFollow = res.data.data
					}
				})
			} catch (e) {
				console.error('[shop info] handleFollow', e)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.wanlshop-info-container {
	&__main {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 200rpx;
		.cu-avatar {
			width: 120rpx;
			height: 120rpx;
		}
		.shopuser {
			display: flex;
			align-items: center;
		}
	}
}
.wanl-gray { color: #667085; }
</style>