IHG/pages/index/vote-detail/index.vue

<template>
	<view class="vote-detail">
		<!-- 分享海报 -->
		<!-- <hch-poster ref="hchPoster" @cancel="handleCancel" :posterData.sync="posterData" @previewImage='previewImage' /> -->
		<!-- 活动查询 -->
		<view class="title">
			<image style="width: 158rpx;height: 158rpx;border-radius: 50%; " :src="voteDetail.logo" mode="">
			</image>
			<text class="title-text">{{voteDetail.project_name}}</text>
			<text class="title-btn">{{voteDetail.activity.title}}</text>
		</view>
		<!-- 分割线 -->
		<view style="width: 92%; height: 2rpx; background-color:#F0F0F0;margin: 40rpx auto;  "></view>
		<!-- 排名 -->
		<view class="rank">
			<view class="vote-detail-btn">
				<view class="vote-detail-btn-item">
					<text class="vote-detail-btn-item-num">{{voteDetail.project_no}}</text>
					<text class="vote-detail-btn-item-text">编号</text>
				</view>
				<view style="width: 2rpx;height: 52rpx;background-color: #ccc;"></view>
				<view class="vote-detail-btn-item">
					<text class="vote-detail-btn-item-num"
						v-if="voteDetail.ticket_num>=0">{{voteDetail.ticket_num + voteDetail.virtual_ticket_num}}</text>
					<text class="vote-detail-btn-item-text">票数</text>
				</view>
				<view style="width: 2rpx;height: 52rpx;background-color: #ccc;"></view>
				<view class="vote-detail-btn-item">
					<text class="vote-detail-btn-item-num">{{voteDetail.rank}}</text>
					<text class="vote-detail-btn-item-text">排名</text>
				</view>
				<view style="width: 2rpx;height: 52rpx;background-color: #ccc;"></view>
				<view class="vote-detail-btn-item">
					<text class="vote-detail-btn-item-num">{{voteDetail.next_rank_ticket_num}}</text>
					<text class="vote-detail-btn-item-text">距上名</text>
				</view>
			</view>
		</view>
		<!-- 轮播图 -->
		<view style="background-color: #f9f9f9;">
			<view class="swiper">
				<view class="home-swiper">
					<uni-swiper-dot :mode="mode" :info="info" :current="current1" :dots-styles="dotsStyles">
						<swiper class="swiper-box" @change="change1" circular>
							<swiper-item v-for="(item ,index) in info" :key="index" v-if="resource_type == 1 ">
								<view class="swiper-item">
									<image style="width: 100%;height:576rpx; border-radius: 12rpx; " :src="item.img"
										mode="aspectFill"></image>
								</view>
							</swiper-item>
							<swiper-item v-if="resource_type == 2 ">
								<view class="swiper-item">
									<video id="myVideo" ref="myVideo"
										style="width: 100%; height: 576rpx;border-radius: 12rpx; " :src="video_url"
										controls :enable-progress-gesture="false">
									</video>
								</view>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>
			</view>
			<!-- 投票 -->
			<view class="btn" @click="goVote(activity_project_id)">
				<view v-if="spending || isStart" class="btn-vote"
					:class="spending?'btn-vote': isStart?'btn-vote-fasle' :'' ">
					<text>投票</text>
				</view>
				<view class="btn-vote-fasle" v-if="isEnd">
					<text>投票结束</text>
				</view>
			</view>
			<!-- 帮我拉票 -->
			<view class="help">
				<!-- <view class="help-btn" @click="getPoster">
					<text>帮我拉票</text>
				</view> -->
				<view class="help-btn" @click="showPoster">
					<text>帮我拉票</text>
				</view>

			</view>

			<movable-area class="movableArea">
				<movable-view class="movableView" direction="all" x="630rpx" y="700rpx">
					<view class="img-IHg" @click="goJoin">
						<image style="width: 64rpx; height: 58rpx; " src="/static/icon/vip.png" mode=""></image>
					</view>
				</movable-view>
			</movable-area>


			<!-- 分割线 -->
			<view style="width: 92%; height: 2rpx; background-color:#F0F0F0;margin: 64rpx auto;  "></view>
			<!-- 介绍 -->
			<view class="introduce">
				<view class="introduce-title">
					<text>参赛介绍</text>
				</view>
				<view class="introduce-text" v-html="voteDetail.intro"></view>
			</view>

			<!-- 预约 -->
			<view class="reserve">
				<view class="reserve-left" @click="goSwiperSmall">
					<image style="width: 36rpx;height: 36rpx; margin-right: 10rpx;" src="/static/icon/reserve02.png"
						mode=""></image>
					<text>预约</text>
				</view>
				<view class="reserve-right" @click="goJoin">
					<image style="width: 60rpx;height: 56rpx; margin-right: 4rpx; " src="/static/icon/reserve01.png"
						mode=""></image>
					<text>加入IHG会员</text>
				</view>
			</view>
		</view>

		<!-- 弹出层 -->
		<uni-popup ref="popup" type="center">
			<view class="pop">
				<view class="title"><text>投票成功</text></view>
				<view class="img" v-if="is_prize==0">
					<image :src="voteDetail.activity.success_img"></image>
				</view>
				<view class="img" v-if="is_prize==1">
					<image :src="voteDetail.activity.success_img"></image>
				</view>
				<view class="textfont">
					<text v-if="!isVoteNum && is_prize==0">今日投票数已用完
						点击 加入IHG会员 可享受额外{{vipRewardTicketNum}}票数</text>
					<text v-if="isVoteNum && is_prize==0 ">今日投票数还有 {{userCanVoteNum}} 次
						点击再次投票可再次为本项目投票也可为其他项目投票</text>
					<text v-if="is_prize==1">恭喜你中奖了！
						获得了{{prizeProduct}}的奖品，请尽快领取</text>
				</view>
				<view class="btn">
					<view v-if="is_prize==0" class="cancel"
						@click="isVoteNum?voteAgain(activity_project_id):closeVote()">
						<text>{{isVoteNum?'再次投票':'关闭'}}</text>
					</view>
					<view v-if="is_prize==0" class="download" @click="isVoteNum?goOtherItem():goJoin()">
						<text>{{isVoteNum?'其他项目':'加入IHG会员'}}</text>
					</view>

					<view v-if="is_prize==1" class="cancel" @click="closeVote">
						<text>关闭</text>
					</view>
					<view v-if="is_prize==1" class="download" @click="goConvert">
						<text>去兑换</text>
					</view>
				</view>
			</view>
		</uni-popup>


		<!-- <canvas :style="{height: pupopHeight + 'px',width: pupopWidth + 'px'}" canvas-id="myCanvas"></canvas>
		<uni-popup ref="popup" type="center">
			<view class="popup-wrap">
				<view class="popup-head">
					生成海报
					<view @click="close_popup()" class="close_icon"></view>
				</view>
				<image :src="posterImg" mode=""></image>
				<view class="popup-footer">
					<button class="save-btn" @click="saveToLocal()" type="default">保存到相册</button>
					<view class="tips">保存图片到相册，你就可以分享啦！</view>
				</view>
			</view>
		</uni-popup>
 -->
		
		<Poster ref="poster" :name="voteDetail.project_name" :title="voteDetail.activity.title"/>
		
	</view>
</template>

<script>
	// import HchPoster from "@/components/hch-poster/hch-poster.vue"
	import Poster from "./poster.vue";
	
	export default {
		components:{Poster},
		data() {
			return {
				pageControl:{
					isPosterShow:false,
				},
				pupopWidth: 590,
				pupopHeight: 788,
				//一定要注意像素密度的问题，这里使用的固定数值
				pixelRatio: 3, //屏幕像数密度
				inviteQR: '', //动态二维码
				posterImg: '', //最后生成的海报
				//二维码
				codeImg: '',
				//投票是否中奖,1中奖,0未中奖
				is_prize: '',
				//中奖礼物
				prizeProduct: '',
				//banner视频路径
				video_url: '',
				//banner图展示视频或者图片
				resource_type: '',
				//跳转h5和小程序
				jump_type: '',
				jump_config: '',
				//跳转vip小程序获得投票数
				vipRewardTicketNum: '',
				//活动id
				sourceId: '',
				//活动可以使用的投票数
				userCanVoteNum: '',
				isVoteNum: false,
				//判断活动是否正在进行中
				spending: false,
				//判断活动是否开始
				isStart: false,
				//判断活动是否结束
				isEnd: false,
				//活动开始时间
				startTime: '',
				//活动结束时间
				endTime: "",
				// 活动项目id
				activity_project_id: '',
				// 活动项目详情
				voteDetail: '',
				//轮播图
				info: [],
				dotsStyles: {
					backgroundColor: 'rgba(255, 255, 255, .3)',
					border: '1px rgba(255, 255, 255, .3) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
					selectedBorder: '1px rgba(255, 255, 255, 1) solid'
				},
				//指示点显示位置
				current1: 0,
				mode: 'dot'

			}
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		onLoad(op) {
			this.activity_project_id = op.id
			this.getDetail(op.id)
			this.admin = this.$store.getters.userInfo
			console.log(this.admin);
			// //海报
			// this.pupopWidth = this.pupopWidth * this.pixelRatio
			// this.pupopHeight = this.pupopHeight * this.pixelRatio


		},
		watch: {
			vipRewardTicketNum: {
				handler(newName, oldName) {
					console.log(newName, '--->监听')
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			shareing() {
				uni.showLoading({
					title: "海报生成中...",
					mask: true
				})
				// this.inviteQR = this.codeImg
				// this.createPoster();
			},

			//去兑换页面
			goConvert() {
				uni.navigateTo({
					url: '/pages/my/prize/prize',
					fail:(err)=>{
						console.log(err)
					}
				})
			},

			//视频自动播放
			openVideoPlay() {
				this.videoContext.play()
			},
			//隐藏
			handleCancel() {
				console.log('取消审生成海报');
			},
			//生产海报
			getPoster() {
				this.$refs.hchPoster.posterShow()
			},
			// 切换轮播图指示点
			change1(e) {
				this.current1 = e.detail.current;
			},
			getDetail(id) {
				this.$api.active.getActiveProjectDetail({
					activity_project_id: id
				}).then(res => {
					console.log(res, "detail")
					if (res.code == 0) {
						this.voteDetail = res.data
						console.log(this.voteDetail)
						this.startTime = res.data.activity.start_time.replace(/-/g, "/")
						// “yyyy-MM-dd-hh-mm-ss”.replace(/-/g,"/")
						this.endTime = res.data.activity.end_time.replace(/-/g, "/")
						console.log(this.startTime, this.endTime);
						this.cancelTime(this.startTime, this.endTime)
						//活动可以使用的投票数
						this.userCanVoteNum = res.data.user_can_vote_num
						if (this.userCanVoteNum > 0) {
							this.isVoteNum = true
						} else {
							this.isVoteNum = false
						}
						this.sourceId = res.data.id
						//跳转vip小程序获得投票数
						this.vipRewardTicketNum = res.data.activity.vip_reward_ticket_num
						// this.info =JSON.parse( res.data.img_urls)
						this.info = JSON.parse(res.data.img_urls).map(item => {
							return {
								img: item
							}
						})
						//跳转h5和小程序
						this.jump_type = res.data.jump_type,
							this.jump_config = res.data.jump_config
						//banner展示视频或者图片
						this.resource_type = res.data.resource_type
						this.video_url = res.data.video_url
						console.log(this.resource_type, this.video_url, '--->this.video_url');
						//视频自动播放
						this.openVideoPlay()
						//海报图片
						// this.posterData.mainImg = res.data.share_img
						// this.codeImg = res.data.qrcode_url

					}
				})
			},

			//轮播图跳转h5或者小程序和内部页面
			goSwiperSmall() {
				//跳转h5
				if (this.jump_type == 1) {
					const url = this.jump_config; // 跳转的外链
					const navtitle = 'H5'; // 这个标题是你自己可以设置的
					uni.navigateTo({
						// 跳转到webview页面
						url: `/pages/webview/webview?url=${url}&nav=${navtitle}`,
						success: () => {
							console.log('成功')
						},
						fail: (e) => {
							console.log(e, "失败")
						}
					});
				} else if (this.jump_type == 2) {
					let obj = JSON.parse(this.jump_config);
					wx.navigateToMiniProgram({
						appId: `${obj.appid}`, //appid
						path: `${obj.path}`, //path
						extraData: { //参数
							foo: 'bar'
						},
						// envVersion: 'develop', //开发版develop 开发版 trial   体验版 release 正式版 
						success(res) {
							console.log('成功')
							// 打开成功
						},
						fail(e) {
							console.log(e, '失败')
						}
					})
				} else if (this.jump_type == 4) {
					let obj = this.jump_config
					uni.switchTab({
						url: `${obj}`,
						success: function(e) { //跳转成功后刷新页面
							var page = getCurrentPages().pop();
							if (page == undefined || page == null) return;
							page.onLoad();
						}
					})
				}
			},
			cancelTime(i, j) {
				let nowtime = new Date() //获取当前时间
				let startime = new Date(i) //活动开始时间
				let endtime = new Date(j); //活动结束时间
				let lefttime = endtime.getTime() - nowtime.getTime() //距离结束时间的毫秒数
				let spendtime = nowtime.getTime() - startime.getTime() //距离结束时间的毫秒数
				console.log(lefttime, '---->lefttime');
				console.log(spendtime, '---->spendtime');
				if (lefttime > 0 && spendtime > 0) {
					//活动进行中
					this.spending = true
				} else if (lefttime < 0) {
					//活动结束
					this.isEnd = true
				} else if (spendtime < 0) {
					//活动未开始
					this.isStart = true
				}

			},
			// 打开弹出层
			openVote() {
				this.$refs.popup.open()
			},
			// 关闭弹出层
			closeVote() {
				this.$refs.popup.close()
			},
			//再次投票
			voteAgain(id) {
				this.goVote(id)
			},

			//跳转其他项目
			goOtherItem() {
				uni.navigateBack()
			},

			//获取当前页面路径
			getPageUrl() {
				const pages = getCurrentPages();
				console.log(pages, '--------->pages')
				if (pages.length == 1) {
					const currentPage = pages[0];
					let pageUrl = `/${currentPage.route}`;
					return pageUrl
					console.log('当前页面url：', pageUrl);
				} else {
					const currentPage = pages[pages.length - 1];
					let pageUrl = `/${currentPage.route}`;
					return pageUrl
					console.log('当前页面url：', pageUrl);
				}
			},

			// 跳转其他小程序
			goJoin() {
				let _this = this
				wx.navigateToMiniProgram({
					appId: 'wx255b58f0992b3c53', //appid
					path: 'newUIMain/enrollment/enrollment', //path
					extraData: { //参数
						foo: 'bar'
					},
					// envVersion: 'develop', //开发版develop 开发版 trial   体验版 release 正式版 
					success(res) {
						let page = _this.getPageUrl()
						let user_id = ''
						if (_this.admin != null) {
							user_id = _this.admin.id
						} else {
							user_id = 0
						}
						console.log('成功', page)
						_this.$api.my.userMemberAdd({
							user_id,
							page,
						}).then(res => {
							console.log(res.data);
						})
						
						//增加票数
						_this.$api.my.userJoinVip({
							source_type: 1,
							source_id: _this.sourceId
						}).then(res => {
							console.log('-->res', res)
						})
						// 打开成功
					},
					fail(e) {
						console.log(e, '失败')
					}
				})
			},
			// 投票
			goVote(id) {
				this.$api.active.vote({
					activity_project_id: id
				}).then(res => {
					console.log(res, '投票')
					if (res.code == 0) {
						
						/**
						 * 中奖用例
						 * 数据由接口文档提供
						 *
						 * 
						res = {
							data: {
								"is_prize": 1,
								"integral": 0,
								"product": {
									"id": 1,
									"type": 1,
									"hotel_id": 1,
									"cover_img": "",
									"banners": "",
									"name": "测试产品",
									"category_id": 1,
									"details": "测试产品",
									"price": 10,
									"integral": 0,
									"stock": 0,
									"attr_group": "[{\"attr_group_id\":1,\"attr_group_name\":\"口味\",\"attr_list\":[{\"attr_id\":1,\"attr_name\":\"五仁\",\"icon\":\"url1\"},{\"attr_id\":2,\"attr_name\":\"豆沙\",\"icon\":\"url2\"}]},{\"attr_group_id\":2,\"attr_group_name\":\"重量\",\"attr_list\":[{\"attr_id\":3,\"attr_name\":\"100g\",\"icon\":\"url3\"},{\"attr_id\":4,\"attr_name\":\"200g\",\"icon\":\"url4\"}]}]",
									"created_at": "2022-11-23 18:09:06",
									"updated_at": "2022-11-23 23:35:26"
								}
							}
						}
						 */
					   
						this.is_prize = res.data.is_prize
						if (this.is_prize == 1) {
							this.prizeProduct = res.data.product.name
						}
						this.openVote()
						this.getDetail(this.activity_project_id)
					} else {
						if (res.msg.length > 7) {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						} else {
							uni.showToast({
								icon: 'error',
								title: res.msg
							})
						}

					}
				}).catch(err => {
					console.log(err)
					uni.showToast({
						icon: 'none',
						title: '投票失败'
					})
				})
			},
			
			//帮我拉票
			showPoster(){
				/**
				 * 注意这里的图片接口好像有问题 .activity.cover_img信息
				 * 报错内容：{"errMsg":"getImageInfo:fail invalid"}
				 * 可能是图片域名不在微信开发者白名单
				 * 添加不校验规则依然报错
				 * 核实后取消下方注释即可
				 */
				this.$refs.poster.show({
					name: this.voteDetail.project_name,
					title: this.voteDetail.activity.title,
					imgUrl: this.voteDetail.share_img,
					qrcodeUrl: this.voteDetail.qrcode_url,
				})
				console.log(this.voteDetail)
			}
		}
	}
</script>

<style lang="scss" scoped>
	$pageColor:#F9F9F9;
	$bgColor:#FFFFFF;

	@mixin flexlayout {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	page {
		height: 100% !important;
		background: #F9F9F9 !important;
	}

	.vote-detail {
		height: 100%;
		background: #F9F9F9;
	}

	.reserve {
		// position: fixed;
		// bottom: 0;
		width: 100%;
		height: 148rpx;
		padding: 0 30rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 30rpx;
		color: #fff;
		font-weight: bold;

		.reserve-left {
			width: 204rpx;
			height: 92rpx;
			background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.reserve-right {
			width: 466rpx;
			height: 92rpx;
			background: linear-gradient(270deg, #FF6200 0%, #FF9342 100%);
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}



	.introduce {
		padding: 0 30rpx;
		margin-bottom: 102rpx;

		.introduce-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.introduce-text {
			margin-top: 44rpx;
			// line-height: 40rpx;
			color: #333333;
			// font-size: 28rpx;
		}
	}


	.help {
		padding: 0 30rpx;
		margin-top: 30rpx;
		position: relative;

		.help-btn {
			height: 108rpx;
			background: #F9F9F9;
			border-radius: 14rpx;
			border: 2rpx solid #FF6200;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FF6200;
			font-weight: bold;
			font-size: 30rpx;
		}

		.img-IHg {
			width: 84rpx;
			height: 84rpx;
			background-color: #fff;
			box-shadow: 0px 8rpx 24rpx 0px rgba(220, 222, 229, 0.4);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			// top: -28rpx;
			// right: 14rpx;
			top: 1030rpx;
			right: 30rpx;
			z-index: 99;

		}
	}



	.btn {
		padding: 0 30rpx;
		margin-top: 48rpx;

		.btn-vote {
			height: 108rpx;
			background: linear-gradient(338deg, #FF6200 0%, #FF9D4F 100%);
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 30rpx;
			font-weight: bold;
		}

		.btn-vote-fasle {
			height: 108rpx;
			background: #CCCCCC;
			border-radius: 12rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 30rpx;
			font-weight: bold;
		}
	}




	.swiper {
		padding: 0 30rpx;
		margin-top: 64rpx;
	}

	.home-swiper {
		height: 576rpx;

		.swiper-box {
			height: 576rpx;
		}
	}

	.title {
		padding-top: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.title-text {
			margin: 32rpx 0 16rpx;
			font-size: 40rpx;
			font-weight: bold;
			color: #333;
		}

		.title-btn {
			color: #FF6200;
			font-size: 28rpx;
		}
	}

	.rank {
		padding: 0 30rpx;
	}

	.vote-detail-btn {
		height: 190rpx;
		background-color: #fff;
		box-shadow: 0px 20rpx 40rpx 0px rgba(220, 222, 229, 0.4);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;

		.vote-detail-btn-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #333;

			.vote-detail-btn-item-num {
				font-size: 44rpx;
				font-weight: bold;
			}

			.vote-detail-btn-item-text {
				margin-top: 20rpx;
			}
		}
	}

	.pop {
		width: 640rpx;
		height: 740rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding-top: 32rpx;
		box-sizing: border-box;

		.title {
			@include flexlayout();
			margin-bottom: 32rpx;

			text {
				font-size: 34rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FF7119;
			}
		}

		.img {
			margin-left: 48rpx;
			width: 544rpx;
			height: 306rpx;
			background: $bgColor;
			border-radius: 12rpx;
			@include flexlayout();
			margin-bottom: 32rpx;

			image {
				width: 544rpx;
				height: 306rpx;
				border-radius: 12rpx;
			}
		}

		.textfont {
			margin-left: 30rpx;
			margin-bottom: 40rpx;
			@include flexlayout();
			width: 572rpx;
			height: 106rpx;

			text {
				text-align: center;
				font-size: 34rpx;
				font-weight: 400;
				color: #828282;
			}
		}

		.btn {
			width: 100%;
			height: 110rpx;
			display: flex;
			align-items: center;

			.cancel {
				@include flexlayout();
				width: 50%;
				height: 100%;
				border-top: #E5E5E5 solid 1rpx;
				border-right: #E5E5E5 solid 1rpx;

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}

			.download {
				border-top: #E5E5E5 solid 1rpx;
				// border-left:#E5E5E5 solid 0.3rpx;
				@include flexlayout();
				height: 100%;
				width: 50%;

				text {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FF7119;
				}
			}
		}
	}

	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素

		.movableView {
			pointer-events: auto; //可以点击
			width: 84rpx;
			height: 84rpx;
			padding: 0 30rpx;

			.img-IHg {
				width: 84rpx;
				height: 84rpx;
				background-color: #fff;
				box-shadow: 0px 8rpx 24rpx 0px rgba(220, 222, 229, 0.4);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	
	
</style>