fission-star-applet-250304/pages_order/sharing/group.vue

<template>
	<view class="page">
		<navbar leftClick @leftClick="$utils.navigateBack" />

		<view class="content">
			<image class="avatar" :src="detail.headImage"></image>
			<text class="nick-name">{{ `${detail.headTitle || ''}（${detail.memberNum || 0}）` }}</text>

			<template v-if="isLocked">
				<button class="btn" type="success" @click="onAdd">加入</button>
			</template>
			<view v-else class="group-info flex">
				<text>扫一扫，加群主审核进群</text>
				<image class="qr" :src="detail.wxCodeImage" :show-menu-by-longpress="true"></image>
			</view>
		</view>

		<popupUnlock ref="popupUnlock" src="../static/sharing/unlock-group.png"></popupUnlock>

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import shareLog from '@/utils/shareLog'

	import popupUnlock from '../components/popupUnlock.vue'

	export default {
		components: {
			popupUnlock,
		},
		data() {
			return {
				id: null,
				detail: {
					id: null,
					avatarUrl: null,
					nickName: null,
					imageUrl: null,
					times: 0,
					qrCode: null,
					description: null,
				},
				isLocked: true,
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		onShow() {
			// if (this.id && uni.getStorageSync('token')) {
			//   this.detail.id ? this.refreshLockStatus() : this.fetchDetails()
			// }

			if (this.detail.id) { // 转发后返回页面的场景
				this.refreshLockStatus()
			}
		},
		onLoad(option) {
			const {
				id,
				state,
				shareId
			} = option

			if (shareId) {
				uni.setStorageSync('shareId', shareId)
			}

			if (state) {
				uni.setStorageSync('state', state)
			}

			if (id) {
				uni.setStorageSync('id', id)
			}

			this.id = id

			// if (uni.getStorageSync('token')) {
			//   this.fetchDetails()
			// } else {
			//   uni.navigateTo({
			//     url: '/pages_order/auth/wxLogin'
			//   })
			// }

			this.fetchDetails()
			
			shareLog.clear()

		},
		onShareAppMessage(res) {
			const {
				textDetails,
				indexImage,
			} = this.detail

			let o = {
				title: textDetails,
				imageUrl: indexImage,
				query: `id=${this.id}&state=2&shareId=${this.userInfo.id}`,
			}

			//调用增加分享次数的方法
			const params = {
				id: this.id,
				state: "2",
			}
			// this.$fetch('addLogShareInfo', params)

			shareLog.insert(this.id)

			return o
		},
		methods: {
			async fetchDetails() {
				try {
					this.detail = await this.$fetch('getGroupShareInfo', {
						id: this.id
					})
				} catch (err) {

				}
			},
			async fetchCheckShare() {
				try {
					return await shareLog.check(this.id, this.detail.num)
				} catch (err) {
					return {}
				}
			},
			async refreshLockStatus() {
				const result = await this.fetchCheckShare()
				const {
					title,
					open
				} = result

				console.log('--open', open)

				this.$refs.popupUnlock.close();

				if (open) {
					this.isLocked = false
					return
				}

				title && uni.showToast({
					title,
					icon: 'none',
					duration: 3000
				})
			},
			openPopup() {
				this.$refs.popupUnlock.open();
			},
			async onAdd() {

				const result = await this.fetchCheckShare()
				const {
					open,
					need_num,
					num
				} = result

				console.log('--open', open)

				if (open) { // 转发已达标
					this.isLocked = false
					return
				}

				uni.showToast({
					title: `还需转发${need_num - num}次`,
					icon: 'none',
				})

				this.openPopup()
			}
		},
	}
</script>

<style scoped lang="scss">
	.page {
		position: relative;
		height: 100vh;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.avatar {
		width: 180rpx;
		height: 180rpx;
		margin-top: 127rpx;
	}

	.nick-name {
		color: #1B1B1B;
		font-size: 32rpx;
		margin-top: 30rpx;
	}

	.desc {
		margin-top: 30rpx;
	}

	.btn,
	.group-info {
		position: absolute;
	}

	.btn {
		width: calc(100% - 60rpx*2);
		height: auto;
		left: 60rpx;
		bottom: 292rpx;

		background-color: #07C160;
		border: none;
		color: #FFFFFF;
		font-size: 28rpx;
		line-height: 1;
		border-radius: 45rpx;
		padding: 25rpx 0;
		box-sizing: border-box;
	}

	.group-info {
		bottom: 269rpx;

		flex-direction: column;

		color: #1B1B1B;
		font-size: 32rpx;
	}

	.qr {
		margin-top: 40rpx;

		width: 350rpx;
		height: 350rpx;
	}
</style>