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

<template>
	<view>
		<view class="content">
			<view class="title">{{ detail.headTitle || '' }}</view>

			<view class="desc">{{ detail.createTime ? `发布于${detail.createTime}` : '' }}</view>

			<editor id="editor" class="editor" :read-only="true" @ready="onEditorReady"></editor>
		</view>

		<uv-overlay :show="true" :opacity="0" zIndex="998">
			<navbar leftClick @leftClick="$utils.navigateBack" />

			<button class="btn" type="success" @click="onJoin">查看更多</button>

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

			<popupQrCode ref="popupQrCode" :src="detail.wxCodeImage"></popupQrCode>

		</uv-overlay>

	</view>
</template>

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

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

	export default {
		components: {
			popupUnlock,
			popupQrCode,
		},
		data() {
			return {
				id: null,
				detail: {
					id: null,
					userId: null,
					headImage: null,
					headTitle: 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.initData()
			// }

			if (this.detail.id) { // 转发后返回页面的场景
				this.refreshLockStatus()
			}
		},
		async 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.initData()
			// } else {
			//   uni.navigateTo({
			//     url: '/pages_order/auth/wxLogin'
			//   })
			// }

			this.initData()
		},
		onShareAppMessage(res) {
			const {
				headTitle,
				headImage,
			} = this.detail

			let o = {
				title: headTitle,
				imageUrl: headImage,
				query: `id=${this.id}&state=3&shareId=${this.userInfo.id}`,
			}

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

			shareLog.insert(this.id)

			return o
		},
		methods: {
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			initEditor(html) {
				if (!this.editorCtx) {
					setTimeout(() => {
						this.initEditor(html)
					}, 200)

					return
				}

				this.editorCtx.setContents({
					html
				})
			},
			async fetchDetails(id) {
				try {
					this.detail = await this.$fetch('getArticleShareInfo', {
						id
					})
				} catch (err) {

				}
			},
			async initData() {
				await this.fetchDetails(this.id)
				this.initEditor(this.detail.textDetails)
			},
			async fetchCheckShare() {
				try {
					return 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
					this.$refs.popupQrCode.open()
					return
				}

				title && uni.showToast({
					title,
					icon: 'none',
					duration: 3000
				})
			},
			async onJoin() {
				if (!this.isLocked) {
					this.$refs.popupQrCode.open()
					return
				}

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

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

				if (open) { // 转发已达标
					this.isLocked = false
					this.$refs.popupQrCode.open()
				} else {
					uni.showToast({
						title: `还需转发${need_num - num}次`,
						icon: 'none',
					})
					this.$refs.popupUnlock.open();
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 40rpx 20rpx;
		padding-top: calc(#{$navbar-height} + var(--status-bar-height) + 20rpx + 40rpx);
	}

	.title {
		color: #474747;
		font-size: 36rpx;
		font-weight: 700;
	}

	.desc {
		color: #A2A2A2;
		font-size: 24rpx;
		margin-top: 6rpx;
	}

	.editor {
		margin-top: 22rpx;
		height: 40vh;
	}

	.btn {
		position: absolute;
		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;
	}
</style>