activitys-uniapp/pages/activity/activityDetail.vue

<template>
	<view :style="vuex_skin">
		<u-navbar :custom-back="customBack" :is-back="true" title="作品详情"></u-navbar>
		<view class="" v-show="!loading">
			<video class="works-video" @error="videoError" :poster="activity.imgUrl" :src="activity.videoUrl"></video>
			<view style="padding: 20rpx 30rpx 50rpx 30rpx;background: white;">
				<view class="title" style="border-bottom: 1rpx solid #EEEEEE ;">
					<span class="bg-red work-no"> {{activity.productNo}}号</span>
					<span class="work-title">{{activity.title}}</span>
					<view class="work-info-box">
						<image class="remen-icon" src="../../static/icon/remen.png"></image>
						<span class="vote-count">{{activity.voteCount}}</span>
						<span class="work-rank">排行榜第{{activity.rank}}名</span>
					</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="basis-xs">
					<image style="width: 84rpx;height: 84rpx;" src="../../static/icon/ic_zhuanfa.png"></image>
				</view>
				<view class="basis-lg flex flex-direction" style="margin-left: -20rpx;">
					<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="login" shape="circle" :custom-style="customStyle">给ta投票</u-button>
			</view>
		</view>
		<login ref="login" @signIn="signIn" @phoneSuccess="showVote"></login>
		<toast ref="toast"></toast>
		<loading ref="loading" type="3" theme="2" />
		<vote-popup ref="votePopup" @toVote="toVote"></vote-popup>
		<!-- 海报 -->
		<poster ref="poster" :avatar="posetrParams.avatar" :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="showShare"></vote-success>
	</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) {
			uni.showShareMenu({
				menus:['shareAppMessage','shareTimeline']
			})
			this.isCustomBack = props.isCustomBack || true
			this.$refs.loading.showLoading()
			//作品id
			this.id = props.id;
			//获取详情
			await this.fetchData()
			//处理授权结果
			this.handelAuthResult(props)
			//处理创建订单结果
			this.handelOrderResult(props)
			//处理海报参数
			this.handelShareParams()
			//隐藏loading
			setTimeout(() => {
				this.hideLoading()
			}, 20)
		},
		computed: {
			content() {
				return decodeURIComponent(this.activity.content)
			}
		},

		data() {
			return {
				//是否自定义返回，防止授权时返回到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号作品投票！'
				},

				activity: {},
				customStyle: {
					color: 'white',
					background: "#E72226",
					fontSize: '32rpx',
					width: '500rpx',
					margin: '25rpx auto'
				},

			}
		},
		onShareAppMessage(res) {
			return {
				title: this.mpShare.title,
				path: this.mpShare.path,
				imageUrl: this.mpShare.imageUrl
			}
		},
		onShareTimeline(res) {
			return {
				title: this.mpShare.title,
				path: this.mpShare.path,
				imageUrl: this.mpShare.imageUrl
			}
		},
		methods: {
			videoError(e){
				console.log(e,"error");
			},
			hideLoading() {
				this.$refs.loading.hide()
				this.loading = false
			},
			async fetchData() {
				this.activity = (await this.$api.activity.getWorksDetail(this.id)).data.data
			},
			async handelShareParams() {
				let title= await this.getPosetrParamsTitle()
				this.posetrParams = {
					avatar: this.defaultAvatar,
					title: title,
					subTitle: '邀请您为' + this.activity.productNo + '号作品投票！'
				}
				let userId = this.vuex_userId || '000000' //游客
				let sharePath = '/pages/activity/activityDetail?id=' + this.activity.id + '&userId=' + userId
				let encodePath = encodeURIComponent(sharePath)
				this.mpShare = {
					title: title +','+this.posetrParams.subTitle,
					path: '/pages/index/home?path=' + encodePath,
					imageUrl: this.activity.imgUrl
				}
			},
			async getPosetrParamsTitle(){
				let title="我是普法帮帮代言人"
				if (this.$isEmpty(this.vuex_phone)) {
					return title
				}
				let params={
					activeId:this.vuex_active_setting.defaultActiveId,
					phone:this.vuex_phone
				}
				let res=await this.$api.activity.getPromoteNum(params)
				let index=res.data.data.index
				if (this.$isNotEmpty(index)) {
					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
				}
				if (this.authResult.resultCode == '9999') {
					//授权失败
					this.$refs.toast.error(this.authResult.message)
					return
				}
			},
			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);
			},
			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
				}
				let params = {
					url: 'https://vote.guosen-fumao.cn/order.html',
					goodsId: this.selectGoods.id
				}
				this.$jump('/pages/webview/createOrder' + this.$u.queryParams(params))
			},
			//移动积分创建订单
			async createOrder() {
				console.log("123456");
				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) {
					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.activeVote
					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 == '好友') {
					return
				}
				if (item.name == '朋友圈') {
					this.$refs.timelinePopup.show()
				}
			},
			async showShare() {
				await this.handelShareParams()
				this.$refs.sharePopup.show()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.works-video {
		width: 100%;
		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 40rpx 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: absolute;
		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>