activitys-uniapp/pages/activity/activityDetail.vue

<template>
	<view :style="vuex_skin">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :custom-back="customBack" :is-back="true" title="作品详情"></u-navbar>
		<!-- #endif -->

		<view class="" v-show="!loading" style="padding-bottom: 250rpx;">
			<video v-if="activity.activeType == 'VIDEO_TEXT'" class="works-video" @error="videoError"
				:poster="activity.imgUrl" :src="activity.videoUrl"></video>
			<image v-else class="works-video" @click="$util.preview(activity.imgUrl)" :src="activity.imgUrl"
				mode="widthFix">
			</image>
			<view style="padding: 20rpx 30rpx 50rpx 30rpx;background: white;">
				<view class="title" style="border-bottom: 1rpx solid #EEEEEE ;">
					<span class="bg-base work-no"> {{activity.productNo}}号</span>
					<span class="work-title">{{activity.title}}</span>
					<view class="work-info-box" style="display: flex;">
						<view class="center">
							<text class="cuIcon-hotfill text-base" style="font-size: 36rpx;"></text>
						</view>
						<view class="vote-count">{{activity.voteCount}}</view>
						<view class="center" style="justify-content: flex-start;">
							<view class="cu-tag round sm bg-tag" style="font-size: 22rpx;">
								<text>排行榜第{{activity.rank}}名</text>
							</view>
						</view>
						<!-- <view class="work-rank" style="background-color: rgba(102, 73, 239,.2);">排行榜第{{activity.rank}}名</view> -->
					</view>
				</view>
				<view style="font-size: 24rpx;color: #888888;padding: 30rpx 10rpx 20rpx 10rpx;">
					<u-parse :html="content"></u-parse>
				</view>
			</view>

			<view @click="showShare" class="bg-white padding-30 margin-top-30 flex">
				<view class="center margin-left-20">
					<view class="bg-base cu-btn round cuIcon" style="width: 70rpx;height: 70rpx;">
						<text class="cuIcon-forwardfill"></text>
					</view>
					<!-- <image style="width: 84rpx;height: 84rpx;" src="../../static/icon/ic_zhuanfa.png"></image> -->
				</view>
				<view class="basis-lg flex flex-direction" style="margin-left: 30rpx;">
					<view style="font-size: 28rpx;color: #353535;">为TA拉票</view>
					<view style="font-size: 22rpx;color: #AEACAF;padding-top: 10rpx;">
						<!-- <text>成功邀请一位好友投票，获得{{vuex_active_setting.voteAndHeatRate}}热力值</text> -->
						<text>转发邀请好友为该作品助力</text>
					</view>
				</view>
				<view class="flex justify-center align-center"
					style="color: #666666;flex-basis: 20%;font-size: 26rpx;font-family: PingFang-SC-Medium;">去邀请 >
				</view>
			</view>

			<view class="footer-bar" style="z-index: 1;">
				<u-button @click="goVote" shape="circle" :custom-style="btnText=='给ta投票'?customStyle:disabledStyle">
					{{btnText}}
				</u-button>
			</view>
		</view>
		<login ref="login" @signIn="signIn" @phoneSuccess="showVote"></login>
		<toast ref="toast"></toast>
		<!-- #ifdef MP-WEIXIN -->
		<loading ref="loading" type="3" theme="2" />
		<!-- #endif -->

		<vote-popup ref="votePopup" @toVote="toVote"></vote-popup>
		<!-- 海报 -->
		<poster v-if="$isNotEmpty(posetrParams.activeId)" ref="poster" :avatar="posetrParams.avatar"
			:activeId="posetrParams.activeId" :title="posetrParams.title" :subTitle="posetrParams.subTitle"></poster>
		<share-popup ref="sharePopup" @confirm="shareConfirm"></share-popup>
		<timeline-popup ref="timelinePopup"></timeline-popup>
		<sms-alert ref="smsAlert" @exchange="cmccVote"></sms-alert>
		<vote-success ref="voteSuccess" @support="skipShop"></vote-success>
		<home-btn></home-btn>
	</view>
</template>

<script>
	import voteSuccess from "@/components/alert/voteSuccess.vue"
	import sharePopup from "@/components/alert/sharePopup.vue"
	import timelinePopup from "@/components/alert/timelinePopup.vue"
	import votePopup from '@/components/alert/votePopup.vue'
	import poster from "@/components/poster/poster.vue"
	import smsAlert from "@/components/alert/smsAlert.vue"
	export default {
		components: {
			voteSuccess,
			smsAlert,
			sharePopup,
			timelinePopup,
			votePopup,
			poster,
		},
		async onLoad(props) {
			// #ifdef MP-WEIXIN
			uni.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			this.isCustomBack = props.isCustomBack || true
			this.showLoading()
			//作品id
			this.id = props.id;
			//获取详情
			await this.fetchData()
			//处理授权结果
			this.handelAuthResult(props)

			// #ifdef MP-WEIXIN
			//处理创建订单结果
			this.handelOrderResult(props)
			// #endif

			// #ifdef H5
			this.h5CreateOrder()
			// #endif

			//处理海报参数
			this.handelShareParams()
			//隐藏loading
			setTimeout(() => {
				this.hideLoading()
			}, 20)

			this.getActivitySetting();
		},
		computed: {
			content() {
				return decodeURIComponent(this.activity.content)
			},
			btnText: {
				get() {
					let now = new Date().getTime()
					let startTime = this.$dateTime.getTime(this.activity.activeStartTime)
					let endTime = this.$dateTime.getTime(this.activity.activeEndTime)

					if (now < startTime) {
						return "活动未开始"
					}
					if (now > endTime) {
						return "活动已结束"
					}
					return "给ta投票"
				}
			}
		},
		data() {
			return {
				count: 0,

				//是否自定义返回，防止授权时返回到webview页面
				isCustomBack: true,
				defaultAvatar: 'https://vote.guosen-fumao.cn/obsfile/446d9e043f3748e4a47ea4d0de81b140-3b748fea4150c469b8eb66f98cd29e2.png',
				loading: false,
				//作品id
				id: '',
				//订单结果
				orderResult: {},
				//授权结果
				authResult: {},
				//分享
				qrCodeImg: '',
				//选中的道具
				selectGoods: {},
				mpShare: {},
				posetrParams: {
					avatar: '',
					title: '我是普法帮帮代言人',
					subTitle: '邀请您为888号作品投票！',
					activeId: ''
				},
				activity: {},
				customStyle: {
					color: 'white',
					background: "#E72226",
					fontSize: '32rpx',
					width: '500rpx',
					margin: '25rpx auto'
				},
				disabledStyle: {
					background: "#f1f1f1",
					fontSize: '32rpx',
					width: '500rpx',
					margin: '25rpx auto'
				},
				//活动设置
				activitySetting: {},
			}
		},
		onShareAppMessage(res) {
			return {
				title: `${this.$isNotEmpty(this.activitySetting.pullVoteParam) ? `【${this.activitySetting.pullVoteParam.sponsor}】` : ``}${this.mpShare.title}`,
				path: this.mpShare.path,
				imageUrl: this.mpShare.imageUrl
			}
		},
		onShareTimeline(res) {
			return {
				title: `${this.$isNotEmpty(this.activitySetting.pullVoteParam) ? `【${this.activitySetting.pullVoteParam.sponsor}】` : ``}${this.mpShare.title}`,
				path: this.mpShare.path,
				imageUrl: this.mpShare.imageUrl
			}
		},
		methods: {
			goVote() {
				if (this.btnText == '给ta投票') {
					this.login()
					return
				}
				this.$refs.toast.error(this.btnText)
			},
			showLoading() {
				// #ifdef MP-WEIXIN
				this.$refs.loading.showLoading()
				// #endif

				// #ifndef MP-WEIXIN
				this.$dialog.showLoading()
				// #endif
			},

			videoError(e) {
				console.log(e, "error");
			},
			hideLoading() {
				// #ifdef MP-WEIXIN
				this.$refs.loading.hide()
				// #endif

				// #ifndef MP-WEIXIN
				uni.hideLoading()
				// #endif

				this.loading = false
			},
			async fetchData() {
				this.activity = (await this.$api.activity.getWorksDetail(this.id)).data.data
			},
			async handelShareParams() {
				let title = await this.getPosetrParamsTitle();
				const userInfo = uni.getStorageSync("userInfo");
				/**
				 * 海报分享参数
				 * avatar: 显示优先级：作品封面 >>> 用户头像 >>> 默认头像
				 * title: 显示优先级：平台自定义标题 >>> 我是第X号大赛代言人！>>> 我是普法帮帮代言人！
				 */
				this.posetrParams = {
					avatar: this.activity.imgUrl || userInfo.avatar || this.defaultAvatar,
					title: this.activitySetting.pullVoteParam.title || title,
					subTitle: '邀请您为' + this.activity.productNo + '号作品投票！',
					activeId: this.activity.activeId
				}
				let userId = this.vuex_userId || '000000' //游客
				let sharePath = '/pages/activity/activityDetail?id=' + this.activity.id + '&userId=' + userId
				let encodePath = encodeURIComponent(sharePath)
				/**
				 * 小程序分享参数
				 * title：【主办方名字】 || '' + 用户自定义标题 || 我是第X号大赛代言人！+ 邀请您为《XXX》投票！
				 */
				this.mpShare = {
					title: `${this.activitySetting.pullVoteParam.title || title} , 邀请您为《${this.activity.title}》投票！`,
					path: '/pages/index/home?path=' + encodePath,
					imageUrl: this.activity.imgUrl
				}
				this.h5share()
			},
			async h5share() {
				// #ifdef H5
				/**
				 * H5分享参数
				 * title：【主办方名字】 || '' + 用户自定义标题 || 我是第X号大赛代言人！|| 我是普法帮帮代言人！+ 邀请您为《XXX》投票！
				 */
				let shareParam = {
					title: `${this.$isNotEmpty(this.activitySetting.pullVoteParam.sponsor) ? `【${this.activitySetting.pullVoteParam.sponsor}】` : ``}${this.posetrParams.title}`,
					desc: `邀请您为《${this.activity.title}》投票！`,
					imgUrl: this.activity.imgUrl,
					link: window.location.href
				}
				this.$shareConfig.H5Share(shareParam);
				// #endif
			},
			async getPosetrParamsTitle() {
				let title = "我是普法帮帮代言人"
				if (this.$isEmpty(this.vuex_phone)) {
					return title
				}
				let params = {
					activeId: this.activity.activeId,
					phone: this.vuex_phone
				}
				let res = await this.$api.activity.getPromoteNum(params)
				if (this.$isNotEmpty(res.data) && this.$isNotEmpty(res.data.data.index)) {
					let index = res.data.data.startIndex
					title = `我是第${index}位大赛代言人！`
				}
				return title
			},
			handelAuthResult(options) {
				if (options.authResult == undefined) {
					return
				}
				this.authResult = JSON.parse(options.authResult)
				if (this.authResult.resultCode == '0000') {
					//授权成功,直接弹出礼物框
					this.hideLoading()
					this.showVote()
					return
				}
				// #ifdef MP-WEIXIN
				if (this.authResult.resultCode == '9999') {
					//授权失败
					this.$refs.toast.error(this.authResult.message)
					return
				}
				// #endif
			},
			handelOrderResult(options) {
				if (options.orderPass && this.$cache.get('orderResult')) {
					this.orderResult = this.$cache.get('orderResult')
					this.createOrder()
				}
			},
			async showVote() {
				this.$refs.votePopup.showVote(this.vuex_phone, this.id, this.activity.activeId);
			},
			init() {
				if (this.vuex_phone) {
					this.showVote()
				}
			},
			//去投票
			toVote(item) {
				if (this.$cache.get('orderResult')) {
					this.orderResult = this.$cache.get('orderResult')
					this.orderResult.goodsId = item.id
					this.$cache.put('orderResult', this.orderResult, 1 * 60 * 60)
				}
				this.selectGoods = item
				if (item.point == 0) {
					//免费投票
					this.freeVote()
					return
				}
				this.$refs.votePopup.hideVote()
				//移动积分投票，创建订单
				if (this.$cache.get('orderResult')) {
					this.createOrder()
					return
				}
				// #ifdef MP-WEIXIN
				let params = {
					url: 'https://vote.guosen-fumao.cn/order.html',
					goodsId: this.selectGoods.id
				}
				this.$jump('/pages/webview/createOrder' + this.$u.queryParams(params))
				// #endif
			},
			//移动积分创建订单
			async createOrder() {
				if (this.$isEmpty(this.orderResult.fingerprint) ||
					this.$isEmpty(this.orderResult.sessionId) ||
					this.$isEmpty(this.orderResult.goodsId)) {
					this.$refs.toast.error('创建订单失败')
					return
				}
				let params = {
					fingerprint: this.orderResult.fingerprint,
					helpGoodsId: this.orderResult.goodsId,
					sessionId: this.orderResult.sessionId,
					num: 1,
					phone: this.vuex_phone,
					userId: this.vuex_userId
				}
				let res = await this.$api.order.create(params)
				if (res.data.success) {
					console.log("orderResult", this.orderResult);
					this.orderResult.outOrderId = res.data.data
					this.orderResult.mobile = this.vuex_phone
					this.$refs.smsAlert.showSmsAndSend(this.orderResult)
				} else {
					this.$refs.toast.error(res.data.msg)
				}
			},
			async cmccVote(item) {
				this.$refs.smsAlert.hideSms()
				let params = {
					...item,
					machinetype: 'phone',
					productId: this.id,
					helpGoodsId: this.orderResult.goodsId,
					userId: this.vuex_userId,
					num: 1,
				}
				let res = await this.$api.order.exchange(params)
				if (res.data.success) {
					this.voteSuccess()
					this.$refs.smsAlert.hideSms()
				} else {
					this.$refs.toast.error(res.data.msg)
				}
			},
			voteSuccess() {
				try {
					let avatar = this.$cache.get('userInfo').avatar || this.defaultAvatar
					let activeVote = this.selectGoods.votePointRate 
					this.$refs.voteSuccess.showSuccess(avatar, activeVote)
				} catch (e) {
					this.$refs.toast.info('助力成功')
				}
			},
			async freeVote() {
				let params = {
					helpGoodsId: this.selectGoods.id,
					userId: this.vuex_userId,
					num: 1,
					productId: this.activity.id,
				}
				let res = await this.$api.order.exchange(params)
				if (res.data.success) {
					this.$refs.votePopup.hideVote()
					this.fetchData()

					let avatar = this.$cache.get('userInfo').avatar
					let voteCount = this.selectGoods.votePointRate
					let pointNum = this.vuex_active_setting.voteAndPointRate
					setTimeout(() => {
						this.voteSuccess()
					}, 200)
				} else {
					this.$refs.votePopup.hideVote()
					setTimeout(() => {
						this.$refs.toast.error(res.data.msg)
					}, 200)
				}
			},
			customBack() {
				if (this.isCustomBack == true) {
					uni.switchTab({
						url: '/pages/index/home'
					})
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			//分享
			showPoster() {
				this.$refs.poster.showCanvas()
			},
			async shareConfirm(item) {
				if (item.name == '海报') {
					this.showPoster()
					return
				}
				if (item.name == '好友') {
					// #ifdef H5
					this.$refs.timelinePopup.PopupTyPe = 'friend';
					this.$refs.timelinePopup.show()
					// #endif
					return
				}
				if (item.name == '朋友圈') {
					this.$refs.timelinePopup.PopupTyPe = 'friendsCircle';
					this.$refs.timelinePopup.show()
				}
			},
			async showShare() {
				await this.handelShareParams()
				this.$refs.sharePopup.show()
			},
			skipShop() {
				uni.setStorageSync('isWorksSkip', true)
				uni.switchTab({
					url: '/pages/shop/shop'
				})
			},
			// h5 创建订单 begin
			h5CreateOrder() {
				if (this.$cache.get('orderResult')) {
					this.orderResult = this.$cache.get('orderResult')
					return
				}
				//初始化js脚本
				this.initScript()
				//获取Fmopt
				this.fetchFmopt()
				//获取sessionId
				this.loadScriptFunc("", this.fetchSessionId())
				//打印数据
				this.cacheOrderData()
			},
			cacheOrderData() {
				let _this = this
				setTimeout(() => {
					_this.$nextTick(function() {
						try {
							_this.count++
							console.log("sessionId:" + window.sessionId);
							console.log("fingerprint:" + _fmOpt.getinfo());
							console.log("获取成功啦");
							_this.pushInCache(_fmOpt.getinfo(), window.sessionId)
						} catch (e) {
							console.log(_this.count);
							if (_this.count < 10) {
								_this.cacheOrderData()
							}
						}
					})
				}, 20)
			},
			pushInCache(fingerprint, sessionId) {
				this.orderResult = {
					fingerprint: encodeURIComponent(fingerprint),
					sessionId,
					goodsId: this.selectGoods.id
				}
				this.$cache.put('orderResult', this.orderResult)
			},
			initScript() {
				let monitorURL = "https://static.tongdun.net/monitor/monitor.js"
				this.loadScript(monitorURL)
				let tfdURL = "https://j.changyoyo.com/static/js/common/tfd.js"
				this.loadScript(tfdURL)
				let jqueryURL = "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"
				this.loadScript(jqueryURL)
			},

			fetchFmopt() {
				window._fmOpt = {
					partner: 'changyou',
					appName: 'changyou_web',
					token: 'changyou' + "-" + new Date().getTime() + "-" +
						Math.random().toString(16).substr(2),
					fmb: true,
					success: function(data) {
						console.log('blackbox:	', data)
					},
					fpHost: "https://fp.tongdun.net"
				};
				var cimg = new Image(1, 1);
				cimg.onload = function() {
					_fmOpt.imgLoaded = true;
				};
				cimg.src =
					"https://fp.tongdun.net/fp/clear.png?partnerCode=changyou&appName=changyou_web&tokenId=" +
					_fmOpt.token;
				var fm = document.createElement('script');
				fm.type = 'text/javascript';
				fm.async = true;
				fm.src = ('https:' == document.location.protocol ? 'https://' : 'http://') +
					'static.tongdun.net/v3/fm.js?ver=0.1&t=' + (new Date().getTime() / 3600000).toFixed(0);
				var s = document.getElementsByTagName('script')[0];
				s.parentNode.insertBefore(fm,
					s);
			},
			loadScript(src) {
				var script = document.createElement('script');
				script.src = src;
				document.body.appendChild(script);
			},
			loadScriptFunc(url, callback) {
				callback = typeof callback === 'function' ? callback : function() {};
				var head = document.getElementsByTagName('head')[0];
				var script = document.createElement('script');
				script.type = 'text/javascript';
				script.src = url;
				script.onreadystatechange = function() {
					if (this.readyState == "loaded" || this.readyState == "complete") {
						callback();
					}
				}
				script.onload = callback;
				head.appendChild(script);
			},
			fetchSessionId() {
				var url, ts, sessionId, appId, appkey;
				url = "tfd.changyoyo.com";
				appId = "5308e20b";
				appkey = "3daf27ea2fe840ada6af8e1ec0d7b760";
				ts = new Date().getTime();
				sessionId = "changyo-pc-" + ts + "-" + Math.random().toString(16).substr(2);
				window.sessionId = sessionId;
				[document.getElementsByTagName('script')[0].parentNode.appendChild(document.createElement('script')).src =
					"http://" +
					url + "/did/js/dp.js?appId=" + appId + "&appkey=" + appkey + "&sessionId=" + sessionId +
					"&ts=" +
					ts
				][0];
			},
			//h5 创建订单end

			//获取活动参数
			async getActivitySetting() {
				// if (this.$isNotEmpty(this.vuex_active_setting)) { //有缓存直接从缓存获取
				// 	this.activitySetting = this.vuex_active_setting;
				// 	return;
				// }

				let params = {
					activeId: this.activity.activeId,
					platformSettingEnum: 'ACTIVE_SETTING'
				}
				let activeSetting = JSON.parse((await this.$api.platform.getPlatformValue(params)).data.data);
				this.$config.setTheme(activeSetting.theme, this);
				this.customStyle.background = this.vuex_theme.bgColor;
				this.activitySetting = activeSetting;
				activeSetting.defaultActiveId = this.activity.activeId
				this.$u.vuex('vuex_active_setting', activeSetting);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.works-video {
		width: 100vw;
		height: 422rpx;
	}

	.title {
		padding: 20rpx;

		.work-no {
			padding: 5rpx 10rpx 5rpx 10rpx;
			border-radius: 7rpx;
		}

		.work-title {
			padding: 0 0 0 20rpx;
			color: #353535;
			font-size: 32rpx;
			font-weight: 800;
		}
	}

	.work-info-box {
		padding: 30rpx 0 15rpx 10rpx;

		.remen-icon {
			width: 30rpx;
			height: 30rpx;
		}

		.vote-count {
			padding: 0 20rpx 0 10rpx;
			font-size: 40rpx;
			color: #353535;
			font-weight: 800;
		}

		.work-rank {
			margin-left: -10rpx;
			color: #353535;
			background: #FDEBEC;
			border-radius: 21px 21px 21px 21px;
			font-size: 22rpx;
			padding: 8rpx 15rpx 8rpx 15rpx;
		}
	}

	.footer-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 170rpx;
		background-color: white;
	}

	.canvas-hide {
		position: fixed;
		right: 100vw;
		bottom: 100vh;
		z-index: -9999;
		opacity: 0;
	}
</style>