xiangqin/pages/activity/activityInfo.vue

<template>
	<view>
		<view class="swiperDom">
			<swiper :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image :src="info.show_image" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="u-flex u-row-between title">
				<text>{{info.title}}</text>
				<image src="../../static/activity/share@2x.png" mode="" @click="showShare=true"></image>
			</view>
			<view class="info">
				<view class="u-flex  item">
					<text class="left">报名时间</text>
					<text class="right">{{info.sig_statime}}-{{info.sig_endtime}}</text>
				</view>
				<view class="u-flex  item">
					<text class="left">活动时间</text>
					<text class="right">{{info.av_statime}}-{{info.av_endtime}}</text>
				</view>
				<view class="u-flex  item">
					<text class="left">活动地址</text>
					<text class="right">{{info.av_address}}</text>
				</view>
				<view class="u-flex  item">
					<text class="left">参与人数</text>
					<text class="right">{{info.av_number}}</text>
				</view>
				<view class="u-flex  item">
					<text class="left">参与单位</text>
					<text class="right">{{info.in_company}}</text>
				</view>
				<view class="u-flex  item">
					<text class="left">合作单位</text>
					<text class="right">{{info.co_company}}</text>
				</view>
				<view class="u-flex  item">
					<text class="left">活动门槛</text>
					<text class="right">{{info.age}}/{{info.education}}/{{info.nature}}</text>
				</view>
				<view class="u-flex " v-if="info.status==6">
					<text class="left">牵手人数</text>
					<text class="right">{{info.qianshou}}</text>
				</view>
			</view>
			<view class="content">
				<view class="content_title">
					活动内容
				</view>
				<view class="content_info">
					<rich-text :nodes="info.content"></rich-text>
				</view>
				<view class="btn">
					<u-button text="立即报名" shape="circle" color="linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%)"
						@click="baoming" v-if="info.is_sing!=1&&info.status==2"></u-button>
					<u-button :text="'已报名(报名号:'+info.sin_number+')'" shape="circle"
						color="linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%)"  v-if="info.is_sing==1&&info.status!=6"></u-button>
					<u-button text="报名结束" :disabled="true" shape="circle" color="black" v-if="info.status==4&&info.is_sing==2"></u-button>
					<u-button text="报名已满" :disabled="true" shape="circle" color="black" v-if="info.status==3&&info.is_sing==2"></u-button>
					<u-button text="活动未开始" :disabled="true" shape="circle" color="black" v-if="info.status==1&&info.is_sing==2"></u-button>
					<u-button text="活动进行中" :disabled="true" shape="circle" color="black" v-if="info.status==5&&info.is_sing==2"></u-button>
					<u-button text="活动已结束" :disabled="true" shape="circle" color="black" v-if="info.status==6"></u-button>
				</view>
			</view>
		</view>
		<u-popup :show="show1" @close="close" mode="center" :round="40">
			<view style="width: 650rpx;
height: 640rpx;
background: #FFFFFF;
border-radius: 20rpx;padding: 80rpx 86rpx;color: #222;box-sizing: border-box;" class="u-flex-col">
				<image src="../../static/activity/success.png" mode="" style="width: 64rpx;height: 64rpx;"></image>
				<text style="margin: 24rpx 0 32rpx 0;font-size: 44rpx;">报名成功</text>
				<view class="" style="width: 310rpx;
height: 64rpx;line-height: 64rpx;text-align: center;font-size: 26rpx;
border-radius: 8rpx;
border: 2rpx solid;
border-image: linear-gradient(270deg, rgba(178, 148, 246, 1), rgba(248, 172, 182, 1)) 2 2;">
					报名号 {{num}}
				</view>
				<text
					style="font-size: 24rpx;color: #888888;margin: 24rpx 0 60rpx 0;">恭喜您，报名成功，可在个人中心-我的活动中查看具体详情</text>
				<u-button text="我知道了" shape="circle" color="linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%)"
					@click="closeShow"></u-button>
			</view>
		</u-popup>
		<u-popup :show="showShare" @close="close" bgColor='transparent' mode="center" :round="40">
			<view style="width: 650rpx;
				height: 972rpx;
				
				border-radius: 28rpx;color: #222;box-sizing: border-box;overflow: hidden;" class="u-flex-col">
				<view class="" style="width: 650rpx;height: 368rpx;">
					<image :src="info.show_image" mode="" style="width: 650rpx;height: 368rpx;"></image>
				</view>
				<view class="" style="width: 650rpx;height: 432rpx;border-radius: 0 0 28rpx 28rpx;background-color: #fff;padding: 32rpx 40rpx;box-sizing: border-box;">
					<view class="" style="font-size: 32rpx;color: #222;font-weight: 600;margin-bottom: 180rpx;">
						{{info.title}}
					</view>
					<view class="u-flex u-row-between">
						<image :src="userInfo.headimg" mode="" style="width: 96rpx;height: 96rpx;border-radius: 50%;"></image>
						<view class="u-flex u-row-right">
							<view class="" style="font-size: 20rpx;color: #666;margin-right: 20rpx;">
								扫码参加<br> 遇见更多美好
							</view>
							<image :src="info.sing_img" mode="" style="width: 136rpx;height: 136rpx;"></image>
							<!-- <image src="../../static/test.png" mode="" style="width: 136rpx;height: 136rpx;"></image> -->
						</view>
					</view>
				</view>
				<view class="u-flex u-row-between" style="margin-top: 80rpx;width: 100%;">
					<view class="" style="width: 230rpx;">
						<u-button text="保存图片" :plain="true" shape="circle" color="linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%)"
							@click="storageImg"></u-button>
					</view>
					<view class=""  style="width: 390rpx;">
						<u-button text="马上邀请好友" open-type="share" shape="circle" color="linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%)"
							@click="showShare=false"></u-button>
					</view>
				</view>

				
			</view>
		</u-popup>
		<u-popup :show="showrenzheng" @close="close" mode="center" :round="40">
					<view style="width: 650rpx;
		height: 560rpx;
		background: #FFFFFF;
		border-radius: 20rpx;padding: 0 146rpx;color: #222;box-sizing: border-box;" class="u-flex-col">
						<image src="../../static/activity/weirenzheng.png" mode="" style="width: 320rpx;height: 320rpx;margin-top: -90rpx;"></image>
						<text style="margin: 24rpx 0 52rpx 0;font-size: 32rpx;font-weight: 600;">您还未认证成为正式会员 请先认证后再参与</text>
						
						
						<u-button text="立即认证" @click="gorenzheng" shape="circle" color="linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%)"
							></u-button>
					</view>
				</u-popup>
				<u-popup :show="showmanzu" @close="close" mode="center" :round="40">
							<view style="width: 650rpx;
				height: 560rpx;
				background: #FFFFFF;
				border-radius: 20rpx;padding: 0 146rpx;color: #222;box-sizing: border-box;" class="u-flex-col">
								<image src="../../static/activity/weirenzheng.png" mode="" style="width: 320rpx;height: 320rpx;margin-top: -90rpx;"></image>
								<text style="margin: 24rpx 0 52rpx 0;font-size: 32rpx;font-weight: 600;">您未满足报名条件
不可报名活动</text>
								
								
								<u-button text="我知道了" shape="circle" color="linear-gradient(270deg, #A890FE 0%, #FFAEAE 100%)"
								@click="showmanzu=false"></u-button>
							</view>
						</u-popup>
						<canvas canvas-id="shareCanvas" style="width: 650px;height: 800px;position: fixed;top: -1000px;left: 1000px;z-index: 99;"></canvas>
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			uni.$u.mpShare.path='/pages/index/index'
			this.id=option.id
			this.getInfo(option.id)
		},
		data() {
			return {
				info:{},
				id:'',
				showrenzheng:false,
				show1: false,
				showShare: false,
				showmanzu:false,
				num:'',
				userInfo:JSON.parse(uni.getStorageSync('userInfo')),
				canvas: null,
			}
		},
		methods: {
			storageImg(){
					
					this.drawCanvas()
			},
			 // 封装的下载图片函数
			    downLoadImage(url) {
			      return new Promise((resolve, reject) => {
			        wx.getImageInfo({
			          src: url,
			          success(res) {
			            resolve(res.path)
			          },
			          fail(err) {
			            reject(err)
			          },
			          complete() {
			            console.log('complete')
			          }
			        })
			      })
			    },
				drawCircular(ctx,width, height, x, y, url) {
				  var avatarurl_width = width;
				  var avatarurl_heigth = height;
				  var avatarurl_x = x;
				  var avatarurl_y = y;
				  ctx.save();
				  ctx.beginPath();
				  ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
				  ctx.clip();
				  ctx.drawImage(url, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
				  ctx.restore();
				},
				//第一个参数：创建的画布对象
				//第二个参数：矩形的宽
				//第三个参数：矩形的高
				//第四个参数：矩形左上角x轴坐标点，
				//第五个参数：矩形左上角y轴坐标点，
				//第六个参数：绘制的图片的URL
			drawCanvas(){
				uni.showLoading({
					
				})
				var that=this
					      let ctx = wx.createCanvasContext('shareCanvas', this)
						  // let titleImage = this.downLoadImage('https://dhy.danheyou.com/image/main/haibaoy.png');
						  // let productImage = this.downLoadImage('https://dhy.danheyou.com/image/main/haibaoy.png');
						  // let erCodeImage = this.downLoadImage('https://dhy.danheyou.com/image/main/haibaoy.png');
						  let titleImage = this.downLoadImage(this.userInfo.headimg);
						  let productImage = this.downLoadImage(this.info.show_image);
					      let erCodeImage = this.downLoadImage(this.info.sing_image);
					      Promise.all([titleImage, productImage, erCodeImage]).then(imgs => {
					        console.log('imgs', imgs)
					        // 全部图片下载成功
					        let bgWidth = 650;
					        let bgHeight = 800;
					        // 绘制白底背景
					        ctx.setFillStyle('#fff')
					        ctx.fillRect(0, 0, bgWidth, bgHeight)
					        console.log('全部图片下载成功')
					       
					        // 绘制产品图片
					        let productOffLeft = 0;
					        let productOffTop = 0;
					        let productWidth = 650;
					        let productHeight = 368;
					        ctx.drawImage(imgs[1], productOffLeft, productOffTop, productWidth, productHeight)
					        
					        console.log('imgs', imgs[2])
					        ctx.drawImage(imgs[2], 474 , 616, 136, 136)
							ctx.setFillStyle('#333')
							ctx.setFontSize(32)
							ctx.fillText(this.info.title, 40, 420)
							ctx.setFillStyle('#666')
							ctx.setFontSize(20)
							ctx.fillText('扫码参加', 352, 732)
							ctx.fillText('遇见更多美好', 315, 752)
							// ctx.drawImage(imgs[0], 40 , 656, 96, 96)
							that.drawCircular(ctx,96, 96,40 , 656,imgs[0])
					        ctx.draw(true, () => {
					          wx.hideLoading();
					          // wx.showLoading({
					          //   title: '保存中',
					          //   icon: 'none'
					          // })
					          let _this = this;
					          wx.canvasToTempFilePath({
					            x: 0,
					            y: 0,
					            canvasId: 'shareCanvas',
					            quality: 1.0,
					            fileType: 'jpg',
					            success(res) {
					              console.log('生成图片成功')
					              console.log('res', res.tempFilePath)
								  that.saveImage(res.tempFilePath)
					              wx.hideLoading()
					            },
					            fail(err) {
					              console.log('err', err)
					              wx.showToast({
					                title: '图片生成失败',
					                icon: 'none',
					              })
					            },
					            complete() {
					              
					            }
					          }, _this)
					        })
					      }).catch(err => {
					        console.log(err)
					      })
					    },
					    
					    // 保存图片
					    saveImage(url) {
					      let _this = this;
					      // let tempFilePath = this.data.tempFilePath;
					      if (!url) {
					        wx.showToast({
					          title: '图片生成失败',
					          icon: 'none',
					        })
					        return;
					      }
					      wx.saveImageToPhotosAlbum({
					        filePath: url,
					        success() {
								_this.showShare=false
					          wx.showToast({
					            title: '已保存到相册，您可将图片分享到朋友圈',
					            icon: 'none'
					          })
					        },
					        fail() {
					          wx.showToast({
					            title: '图片保存失败',
					            icon: 'none',
					          })
					        },
					        complete() {
					          // wx.hideLoading();
					        }
					      })
			},
			closeShow(){
					this.show1=false
			},
			gorenzheng(){
					uni.switchTab({
						url:'../auth/auth'
					})
			},
			getInfo(id){
				uni.$u.http.post('/api/Activity/activity',{id:id}).then(res => {
					this.info=res.data
				})
			},
			baoming() {
				if(this.userInfo.vip_level==0){
					this.$u.toast('您暂未认证')
					return
				}
				if(this.userInfo.vip_level==2){
					this.$u.toast('经用户反馈，您账户存在违规行为，暂不支持使用该功能')
					return
				}
				if(this.userInfo.vip_level==3){
									this.$u.toast('您的账户已注销，暂不支持使用该功能')
									return
								}
				uni.$u.http.post('/api/Activity/sign_up',{aid:this.info.id}).then(res => {
					if(res.code==1){
						if(res.data.status==3){
							this.num=res.data.number
							this.show1=true
							this.getInfo(this.id)
						}
						else if(res.data.status==2){
							this.showmanzu=true
						}else if(res.data.status==1){
							this.showrenzheng=true
						}
					}
				})
				// this.showmanzu = true
			},
			close() {
				this.show1 = false
				this.showShare = false
				this.showrenzheng = false
				this.showmanzu = false
				// console.log('close');
			},
			
		}
	}
</script>

<style lang="scss">
	.btn {
		width: 650rpx;
		position: fixed;
		bottom: 58rpx;
	}

	.content {
		padding: 30rpx;
		background-color: #fff;

		.content_title {
			font-size: 28rpx;
			color: #222222;
			font-weight: 600;
		}

		.content_info {
			margin-top: 24rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 34rpx;
			padding-bottom: 200rpx;
		}
	}

	.item {
		margin-bottom: 36rpx;
	}

	.item:nth-child(8) {
		margin-bottom: 0;
	}

	.info {
		background-color: #fff;
		padding: 30rpx;
		margin: 20rpx 0;

		.left {
			font-size: 24rpx;
			color: #888888;
			margin-right: 52rpx;
		}

		.right {
			font-size: 24rpx;
			color: #222;
		}
	}

	.title {
		background-color: #fff;
		height: 108rpx;
		line-height: 108rpx;
		padding: 0 30rpx;

		text {
			font-size: 32rpx;
			color: #222222;
			font-weight: 600;
		}

		image {
			width: 44rpx;
			height: 72rpx;
			vertical-align: middle;
		}
	}

	page {
		background-color: #F6F2FD;
	}

	swiper {
		width: 750rpx;
		height: 400rpx;
	}

	.swiper-item {
		overflow: hidden;
		width: 750rpx;
		height: 400rpx;

		image {
			width: 750rpx;
			height: 400rpx;
		}
	}
</style>