fission-star-applet-250304/pages_order/sharing/personal.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 || '' }}</text>

			<template v-if="isLocked">
				<button class="btn" type="success" @click="onAdd">添加</button>
			</template>
			<view v-else class="flex flex-column qr-popup">
				<text class="tips">长按识别二维码，了解更多内容！</text>
				<image class="qr" :src="detail.wxCodeImage" :show-menu-by-longpress="true"></image>
			</view>
		</view>

		<popupUnlock ref="popupUnlock" src="../static/sharing/unlock-user.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,
					userId: null,
					headImage: null,
					headTitle: null,
					indexImage: null,
					num: 0,
					wxCodeImage: null,
					textDetails: 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()
		},
		onShareAppMessage(res) {
			const {
				textDetails,
				indexImage,
			} = this.detail

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

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

			shareLog.insert(this.id)

			return o
		},
		methods: {
			async fetchDetails() {
				try {
					this.detail = await this.$fetch('getShareInfo', {
						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;
	}

	.btn,
	.qr-popup {
		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;
	}

	.qr-popup {
		width: 100vw;
		bottom: 269rpx;

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

	.qr {
		margin-top: 40rpx;
		width: 350rpx;
		height: 350rpx;
	}
</style>