Huanyuyuehui/pages/activity/registrate_activity/index.vue

<template>
	<view :style="'background-color: '+activityData.color">
		<form v-if="!posterStatus" @submit="formSubmit">
			<view v-if="activityData.activity_name" class='personal-data' :style="viewColor">
				<view class='list'>
					<!--活动背景图-->
					<view class="activity-pic">
						<image :src="activityData.pic" class="image" mode="widthFix"></image>
					</view>
					<view class="wrapper">
						<view class="text-info">
							<view class="acea-row activity-name">
								<view class="title line2">{{activityData.activity_name}}</view>
								<view class="share" @click="listenerActionSheet">
									<i class="iconfont icon-fenxiang4"></i>
									分享
								</view>
							</view>
							<view class="activity-item">
								<view class="iconfont icon-huodong-shijian"></view>
								<view v-if="activityData.start_time&&activityData.end_time" class="info">
									{{formatDate(new Date(activityData.start_time))}} - {{formatDate(new Date(activityData.end_time))}}
								</view>
							</view>
								<view class="activity-item">
									<view class="iconfont icon-huodong-renshu"></view>
									<view class="info">{{activityData.count == 0 ? '不限人数' : activityData.count+'人'}}</view>
								</view>
								<view class="activity-item">
									<view class="iconfont icon-huodong-renshu"></view>
									<view class="info info-theme">
										{{activityData.total}}人
									</view>
								</view>
								<view class="acea-row">
									<view class="iconfont icon-huodong-jianjie"></view>
									<view class="info acea-info">{{activityData.info}}</view>
								</view>
							</view>
						</view>		
					<view class='wrapper' :class="{'form-wrapper' : disabled}" v-if="formData.length">
					  <view class='item acea-row row-between-wrapper' :class="{on:(item.name=='radios' || item.name=='checkboxs'),on2:item.name == 'dateranges',on3:item.name == 'citys'}" v-for="(item,index) in formData" :key="index">
					    <view class="name">
					      {{ item.titleConfig.value }}
								<span class="asterisk" v-if="item.titleShow.val">*</span>
					    </view>
							<!-- radio -->
							<view v-if="item.name=='radios'" class="discount">
								<radio-group @change="radioChange($event, index, item)" class="acea-row row-middle row-right item-select" :class="disabled == 1 ? 'disabled' : ''">
									<label class="radio" v-for="(j,jindex) in item.wordsConfig.list" :key="jindex">
										<view class="acea-row row-middle">
											<!-- #ifndef MP -->
											<radio :value="jindex.toString()" :checked='j.show'/>
											<!-- #endif -->
											<!-- #ifdef MP -->
											<radio :value="jindex" :checked='j.show'/>
											<!-- #endif -->
											<view>{{j.val}}</view>
										</view>
									</label>
								</radio-group>
							</view>
							<!-- checkbox -->
							<view v-if="item.name=='checkboxs'" class="discount">
								<checkbox-group @change="checkboxChange($event, index, item)" class="acea-row row-middle row-right item-select" :class="disabled == 1 ? 'disabled' : ''">
									<label class="radio" v-for="(j,jindex) in item.wordsConfig.list" :key="jindex">
										<view class="acea-row row-middle">
											<!-- #ifndef MP -->
											<checkbox :value="jindex.toString()" :checked="j.show" style="transform:scale(0.9)" />
											<!-- #endif -->
											<!-- #ifdef MP -->
											<checkbox :value="jindex" :checked="j.show" style="transform:scale(0.9)" />
											<!-- #endif -->
											<view>{{j.val}}</view>
										</view>
									</label>
								</checkbox-group>
							</view>
							<!-- text -->
							<view v-if="item.name=='texts' && item.valConfig.tabVal == 0" class="discount">
								<input type="text" :placeholder="item.tipConfig.value" placeholder-class="placeholder" v-model="item.value" :disabled="disabled"/>
							</view>
							<!-- number -->
							<view v-if="item.name=='texts' && item.valConfig.tabVal == 4" class="discount">
								<input type="number" :placeholder="item.tipConfig.value" placeholder-class="placeholder" v-model="item.value" :disabled="disabled"/>
							</view>
							<!-- email -->
							<view v-if="item.name=='texts' && item.valConfig.tabVal == 3" class="discount">
								<input type="text" :placeholder="item.tipConfig.value" placeholder-class="placeholder" v-model="item.value" :disabled="disabled"/>
							</view>
							<!-- date -->
							<view v-if="item.name=='dates'" class="discount">
								<picker mode="date" :value="item.value" @change="bindDateChange($event,index)" :class="item.value.length ? '' : 'placeholder'">
									<view class="acea-row row-between-wrapper">
										<view v-if="item.value == ''">{{item.tipConfig.value}}</view>
										<view v-else>{{item.value}}</view>
										<text class='iconfont icon-jiantou'></text>
									</view>
								</picker>
							</view>
							<!-- dateranges -->
							<view v-if="item.name=='dateranges'" class="discount" :class="item.value.length ? '' : 'placeholder'">
								<uni-datetime-picker v-model="item.value" type="daterange" @maskClick="maskClick" :class="disabled == 1 ? 'disabled' : ''">
									{{item.value.length?item.value[0]+' - '+item.value[1]:item.tipConfig.value}}
								<text class='iconfont icon-jiantou'></text>
								</uni-datetime-picker>
							</view>
							<!-- time -->
							<view v-if="item.name=='times'" class="discount" :class="item.value.length ? '' : 'placeholder'">
								<picker mode="time" :value="item.value" @change="bindTimeChange($event,index)"
									:placeholder="item.tipConfig.value" :class="disabled == 1 ? 'disabled' : ''">
									<view class="acea-row row-between-wrapper">
										<view v-if="item.value == ''">{{item.tipConfig.value}}</view>
										<view v-else>{{item.value}}</view>
										<text class='iconfont icon-jiantou'></text>
									</view>
								</picker>
							</view>
							<!-- timeranges -->
							<view v-if="item.name=='timeranges'" class="discount acea-row row-between-wrapper" @click="getTimeranges(index)" :class="item.value.length ? '' : 'placeholder'">
								<view v-if="item.value">{{item.value}}</view>
								<view v-else>{{item.tipConfig.value}}</view>
								<text class='iconfont icon-jiantou'></text>
							</view>
							<!-- select -->
							<view v-if="item.name=='selects'" class="discount">
								<picker :value="item.value" :range="item.wordsConfig.list" @change="bindSelectChange($event,index,item)" range-key="val" :class="disabled ? 'disabled' : ''">
									<view class="acea-row row-between-wrapper">
										<view v-if="item.value">{{item.value}}</view>
										<view v-else class="placeholder">请选择</view>
										<text class='iconfont icon-jiantou'></text>
									</view>
								</picker>
							</view>
							<!-- city -->
							<view v-if="item.name=='citys'" class="discount" @click="changeRegion(index)" :class="disabled ? 'disabled' : ''">
								<view class="acea-row row-middle row-right">
									<view class="city" v-if="item.value == ''">{{item.tipConfig.value}}</view>
									<view class="city item-select" v-else>{{item.value}}</view>
									<text class='iconfont icon-jiantou'></text>
								</view>
							</view>
							<!-- id -->
							<view v-if="item.name=='texts' && item.valConfig.tabVal == 2" class="discount">
								<input type="idcard" :placeholder="item.tipConfig.value" placeholder-class="placeholder" v-model="item.value" :disabled="disabled" />
							</view>
							<!-- phone -->
							<view v-if="item.name=='texts' && item.valConfig.tabVal == 1" class="discount">
								<input type="number" :placeholder="item.tipConfig.value" placeholder-class="placeholder" v-model="item.value" :disabled="disabled" />
							</view>
							<!-- img -->
							<view v-if="item.name=='uploadPicture'" class="confirmImg" style="padding-bottom: 0;">
								<view class='upload acea-row row-middle'>
									<view class='pictrue' v-for="(items,indexs) in item.value" :key="indexs">
										<image :src='items' mode="aspectFill"></image>
										<view v-if="!disabled" class="close acea-row row-center-wrapper" @tap='DelPic(index,indexs)'>
											<view class="iconfont icon-guanbi5"></view>
										</view>
									</view>
									<view class='pictrue acea-row row-center-wrapper row-column' @tap.stop='uploadpic(index)'
										v-if="item.value.length < item.numConfig.val && !disabled">
										<text class='iconfont icon-icon25201'></text>
										<view>上传图片</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="footer">
					<button v-if="activityData.time_status==-1" class='modifyBnt disabled'>已结束</button>
					<button v-else-if="activityData.count==activityData.total && activityData.count!=0" class='modifyBnt disabled'>已报满</button>
					<button v-else-if="disabled && activityData.time_status==1" class='modifyBnt' @click="listenerActionSheet">分享好友</button>
					<block v-else>
						<button v-if="activityData.time_status==1" class='modifyBnt' formType="submit">提交报名</button>
						<button v-else-if="activityData.time_status==0" class='modifyBnt disabled'>未开始</button>
					</block>	
				</view>	
			</view>
		</form>
		<timeranges :isShow='isShow' :time='timeranges' @confrim="confrim" @cancel="cancels"></timeranges>
		<!--提交成功弹窗-->
		<view class="success" v-if="isShowbox">
			<view class="bg" @click="isShowbox=false"></view>
			<view class="con">
				<image :src="domain+'/static/images/sign_success.png'" mode=""></image>
				<view class="title">报名成功</view>
				<view class="text">感谢参与，您已完成报名！</view>
				<view class="foot">
					<navigator url="/pages/activity/my_registrate/index" hover-class='none' class="btn">查看详情</navigator>
					<view class="btn" @click="listenerActionSheet">分享报名</view>
				</view>
			</view>
		</view>
		<!-- 分享按钮 -->
		<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
			<!-- #ifndef MP -->
			<button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' v-if="weixinStatus === true" @click="H5ShareBox=true;posters=false;">
				<view class="iconfont icon-weixin3"></view>
				<view class="">发送给朋友</view>
			</button>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<button class="item" :class="weixinStatus ? 'item3' : ''" open-type="share" hover-class='none' @click="goFriend">
				<view class="iconfont icon-weixin3"></view>
				<view class="">发送给朋友</view>
			</button>
			<!-- #endif -->
			<button class="item" :class="weixinStatus ? 'item3' : ''" hover-class='none' @tap="goPoster">
				<view class="iconfont icon-haibao"></view>
				<view class="">生成海报</view>
			</button>
		</view>
		<view class="mask" v-if="posters" @click="listenerActionClose"></view>
		<!-- 发送给朋友图片 -->
		<view class="share-box" v-if="H5ShareBox">
			<image :src="`${domain}/static/images/share-info.png`" @click="H5ShareBox=false;"></image>
		</view>
		<areaWindow ref="areaWindow" :display="display" :address='addressInfoArea' :cityShow='cityShow' @submit="OnAreaAddress" @changeClose="changeAddressClose"></areaWindow>	
		<!--分享海报-->
		<view class='distribution-posters' v-if="posterStatus">
			<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration"
			 @change="bindchange" previous-margin="40px" next-margin="40px">
				<block v-for="(item,index) in spreadData" :key="index" class="img-list">
					<swiper-item class="aaa">
						<div class="box" ref="bill" :class="swiperIndex == index ? 'active' : 'quiet'">
							<view class="user-msg">
								<view class="user-code">
									<image class="canvas" :style="{height:hg+'px'}" :src="posterImage[index]"
										v-if="posterImage[index]"></image>
									<canvas class="canvas" :style="{height:hg+'px'}" :canvas-id="'myCanvas'+ index"
										v-else></canvas>				
								</view>
							</view>
						</div>
						<!-- <image :src="item.wap_poster" class="slide-image" :class="swiperIndex == index ? 'active' : 'quiet'" mode='aspectFill' /> -->
					</swiper-item>
				</block>
			</swiper>
			<!-- #ifndef H5  -->
			<view class='keep b-color' @click='savePosterPath(posterImage[swiperIndex])' :style="viewColor">保存海报</view>
			<!-- #endif -->
		</view>
	</view>
</template>
<script>
	 
	const CACHE_CITY = {};
	import { registrateDetail, registrateCreate, registrateRecordDetail, 
		registratePoster, imgToBase  } from '@/api/user.js';
	import shareScence from '@/libs/spread';
	import { switchH5Login, getCity } from '@/api/api.js';
	import { mapGetters } from "vuex";
	import { toLogin } from '@/libs/login.js';
	import { HTTP_REQUEST_URL } from '@/config/app';
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	import areaWindow from '@/components/areaWindow';
	import timeranges from '@/components/timeranges';
	export default {
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				userInfo: {},
				activityData: {},
				formData: {},
				loginType: 'h5', //app.globalData.loginType
				activity_id: "",
				isShowbox: false,
				selectIndex:0,
				timerangesIndex:0,
				newImg: [],
				display: false,
				cityShow: 2,
				addressInfoArea: [],
				timeranges: [],
				mp_is_new: this.$Cache.get('MP_VERSION_ISNEW') || false,
				posters: false,
				weixinStatus: false,
				posterStatus: false,
				H5ShareBox: false,
				disabled: false,
				isShow:false,
				imgUrls: [],
				indicatorDots: false,
				posterImageStatus: true,
				circular: false,
				autoplay: false,
				interval: 3000,
				duration: 500,
				swiperIndex: 0,
				spreadList: [],
				spid: "",
				poster: '',
				spreadData: [{}], //新海报数据
				nickName: "",
				siteName: "",
				mpUrl: "",
				canvasImageUrl: '',
				posterImage: [],
				//二维码参数
				codeShow: false,
				cid: '1',
				ifShow: true,
				val: "", // 要生成的二维码值
				size: 200, // 二维码大小
				unit: 'upx', // 单位
				background: '#FFF', // 背景色
				foreground: '#000', // 前景色
				pdground: '#32dbc6', // 角标色
				icon: '', // 二维码图标
				iconsize: 40, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				codeSrc: "",
				wd: 225,
				hg: 500
			};
		},
		components: {
			areaWindow,
			timeranges,
		},
		computed:{
			...mapGetters(['isLogin','viewColor','keyColor']),
		},
		watch: {
	
		},
		onLoad(option) {
			this.activity_id = option.id	
			this.spid = option.spid
			let current = (dayjs(new Date(Number(new Date().getTime()))).format('HH:mm')).split(':');
			let currentArray = current;
			currentArray.push(0);
			let arrayNew = [];
			[...currentArray,...current].forEach(item=>{
			 arrayNew.push(Number(item)) 
			})	
			this.timeranges = arrayNew;
			if (this.isLogin) {
				this.registrateDetail();
				shareScence(this.spid,this.isLogin)
			}else{
				toLogin()
			}
		},
		onShow() {
			
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			let that = this;
			that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
			return {
				title: that.activityData.activity_name || '',
				imageUrl: that.activityData.pic || '',
				path: '/activity/registrate_activity/index?id=' + that.activity_id + '&spid=' + that.uid,
			}
		},
		onShareTimeline: function() {
			let that = this;
			that.$set(that, 'actionSheetHidden', !that.actionSheetHidden);
			return {
				title: that.activityData.activity_name || '',
				query: {
					id: that.activity_id,
					spid: that.uid
				},
				imageUrl: that.activityData.pic || ''
			}
		},
		// #endif
		methods: {
			/*判断时间大小*/
			compareTime(time) {
			  var date1 = new Date(time);
			  var date2 = new Date();
			  if (date1 > date2) {
			    return true;
			  } else if (date1 <= date2) {
			    return false;
			  }
			},
			formatDate(date){
				let year = date.getFullYear();
				let month = date.getMonth()+1;  
				let day = date.getDate();
				let H = date.getHours(); 
				let M = date.getMinutes();
				let S = date.getSeconds();  
				month = month < 10 ?'0'+ month : month;  
				day = day < 10 ?'0'+ day : day; 
				H = H < 10 ?'0'+ H : H;
				M = M < 10 ?'0'+ M : M;
				S = S < 10 ?'0'+ S : S;
				return year+'.'+month+'.'+day +'.'+H +':'+M;
			},
			/**
			 * 获取表单数据详情
			 */
			registrateDetail: function() {
				let that = this;
				uni.showLoading()
				registrateDetail(that.activity_id).then(res => {
					uni.hideLoading()
					let data = res.data;
					if(data.activity_related_id){	
						that.disabled = true
						that.getRecordDetail(data.activity_related_id)
					}else{
						that.$set(that, 'activityData', data);
						that.disabled = that.compareTime(data.end_time) ? false : true
						if(that.disabled){
							return this.$util.Tips({
								title: '活动已结束'
							}, {
								tab: 3,
								url: 1
							})
						}
						if(data.systemForm&&data.systemForm.value){
							let formData = that.objToArr(data.systemForm.value)
							that.filterData(formData)
						}else{
							return this.$util.Tips({
								title: '关联表单已被删除'
							}, {
								tab: 3,
								url: 1
							})
						}
					}	
				}).catch(err => {
					uni.hideLoading();
					return this.$util.Tips({
						title: err
					}, {
						tab: 3,
						url: 1
					})
				})
			},
			getRecordDetail(id){
				let that = this
				registrateRecordDetail(id).then(res => {
					uni.hideLoading()
					let data = res.data;
					that.$set(that, 'activityData', data.activity);
					let formData = that.objToArr(data.form_value)
					formData.forEach((item, index)=>{
						for(var i in data.value){
							if(item['key'] == i){
								item.value = data.value[i]
								if(item['name']=='checkboxs' || item['name']=='radios'){
									let valueList = data.value[i].split(',')
									item['wordsConfig']['list'].forEach((list,idx)=>{
										valueList.forEach((val,i)=>{
											if(list['val'] == val){
												item['wordsConfig']['list'][idx]['show'] = true
											}
										})
									})
								}
							}
						}
					})
					function sortNumber(a, b) {
						return a.timestamp - b.timestamp;
					}
					formData.sort(sortNumber);
					that.$set(that, 'formData', formData);
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					}, {
						tab: 3,
						url: 1
					})
				})
			},
			filterData(formData){
				let that = this;
				formData.forEach((item, index, arr)=>{
					that.$set(item, 'value', "");
					CACHE_CITY[index] = ''; //清空省市区
					if(item.name == 'texts'){
					  if(item.defaultValConfig.value){
						  item.value = item.defaultValConfig.value
					  }else{
						  item.value = ''
					  }
					}else if(item.name == 'radios'){
						item.value = item.wordsConfig.list[0].val
					}else if(item.name == 'uploadPicture'){
					  item.value = [];
					}else if(item.name == 'dateranges'){
						if(item.valConfig.tabVal==0){
						  if(item.valConfig.tabData==0){
							 let obj = dayjs(new Date(Number(new Date().getTime()))).format('YYYY-MM-DD');
							 item.value = [obj,obj]
						  }else{
							  let data1 = dayjs(new Date(Number(new Date(item.valConfig.specifyDate[0]).getTime()))).format('YYYY-MM-DD');
							  let data2 = dayjs(new Date(Number(new Date(item.valConfig.specifyDate[1]).getTime()))).format('YYYY-MM-DD');
						      item.value = [data1,data2];
						  }
						}else{
						  item.value = [];  
						}
					}else{
						if(['times','dates','timeranges'].indexOf(item.name) != -1){
						  if(item.valConfig.tabVal==0){
							  if(item.valConfig.tabData==0){
									if(item.name == 'times'){
										item.value = dayjs(new Date(Number(new Date().getTime()))).format('HH:mm');
									}else if(item.name == 'dates'){
										item.value = dayjs(new Date(Number(new Date().getTime()))).format('YYYY-MM-DD');
									}else{
										let current = dayjs(new Date(Number(new Date().getTime()))).format('HH:mm');
										item.value = current+' - '+current;
									}
									}else{
									if(item.name == 'times' || item.name == 'dates'){
										item.value = item.valConfig.specifyDate;
									}else{
										item.value = item.valConfig.specifyDate[0]+' - '+item.valConfig.specifyDate[1];
									}
							  }
						  }else{
								item.value = '';  
						  }
						}else if(item.name == 'city'){
							item.value = '';
						}else{
						  item.value = '';
						}
					}
				})
				function sortNumber(a, b) {
					return a.timestamp - b.timestamp;
				}
				formData.sort(sortNumber);
				that.$set(that, 'formData', formData);
			},
			// 对象转数组
			objToArr(data) {
				let obj = Object.keys(data);
				let m = obj.map(key => data[key]);
				return m;
			},
			// 单选
			radioChange(e, index, item){
				this.formData[index].value = item.wordsConfig.list[e.detail.value].val
			},
			clickTextArea() {
				this.$refs.textarea.focus()
			},
			bindDateChange(e, index) {
				this.formData[index].value = e.target.value
				this.$forceUpdate()
			},
			bindTimeChange(e, index) {	
				this.formData[index].value = e.target.value
			},
			bindSelectChange(e, index, item) {
				this.$set(this.formData[index], 'value', item.wordsConfig.list[e.detail.value].val);
			},
			getTimeranges(index){
				this.isShow = true
				this.timerangesIndex = index
			},
			confrim(e){
			  this.isShow = false;
			  this.formData[this.timerangesIndex].value = e.time;
				let arrayNew = [];
				e.val.forEach(item=>{
					arrayNew.push(Number(item))
				})
				this.timeranges = arrayNew;
			},
			cancels(){
				this.isShow = false;
			},
			// 多选
			checkboxChange(e, index, item){
				let obj = e.detail.value;
				let val = '';
				item.wordsConfig.list.forEach((j,jindex)=>{
				  obj.forEach(x=>{
					  if(jindex == x){
					  	val = val +(val?',':'') + j.val;	  
					  }
				  })
				})
				this.formData[index].value = val
			},
			OnAreaAddress(address){
			  let addr = '';
				addr = address.map(v=>v.name).join('/');
			  this.formData[this.timerangesIndex].value = addr;
			  CACHE_CITY[this.timerangesIndex] = address;
			},
			changeRegion(index){
			 if(!this.formData[index].value){
				this.addressInfoArea = [];
			 }
			 this.timerangesIndex = index;
			 this.cityShow = Number(this.formData[index].valConfig.tabVal) + 1;
			 this.display = true;
			 if(CACHE_CITY[index]){
				this.addressInfoArea = CACHE_CITY[index];  
			 }
			},
			// 关闭地址弹窗；
			changeAddressClose: function() {
				this.display = false;
			},
			/**上传文件*/
			uploadpic: function(index) {
			  let that = this;
			  this.$util.uploadImageOne('upload/image', function(res) {
			    that.newImg.push(res.data.path);

			    that.$set(that.formData[index], 'value', that.newImg);
			  });
			},
			/**
			 * 删除图片
			 * 
			 */
			DelPic: function(index, indexs) {
			  let that = this,
			    pic = this.formData[index].value;
			  that.formData[index].value.splice(indexs, 1);
			  that.$set(that.formData[index], 'value', that.formData[index].value);
			},
			/**
			 * 提交修改
			 */
			formSubmit: function(e) {
				let that = this,parmas={};
				if(!that.isLogin){
					toLogin()
				}else{
					for (var i = 0; i < that.formData.length; i++) {
					  let data = that.formData[i]
					  if (['radios'].indexOf(data.name) == -1 && (data.titleShow.val || (['uploadPicture','dateranges'].indexOf(data.name) == -1 && data.value && data.value.trim()))) {
					    if ((data.name === 'texts' && data.valConfig.tabVal == 0) || ['dates','times','selects','citys','checkboxs'].indexOf(data.name) != -1) {
								if (!data.value || (data.value && !data.value.trim())) {
					        return that.$util.Tips({
					          title: `请选择${data.titleConfig.value}`
					        });
					      }
					    }
						if(data.name === 'timeranges'){
							if(!data.value){
								return that.$util.Tips({
								  title: `请选择${data.titleConfig.value}`
								});
							}
						}
						if (data.name === 'dateranges') {
						  if (!data.value.length) {
						    return that.$util.Tips({
						      title: `请选择${data.titleConfig.value}`
						    });
						  }
						}
					    if (data.name === 'texts' && data.valConfig.tabVal == 4) {
					      if (data.value <= 0) {
					        return that.$util.Tips({
					          title: `请填写大于0的${data.titleConfig.value}`
					        });
					      }
					    }
					    if (data.name === 'texts' && data.valConfig.tabVal == 3) {
					      if (!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(data.value)) {
					        return that.$util.Tips({
					          title: `请填写正确的${data.titleConfig.value}`
					        });
					      }
					    }
					    if (data.name === 'texts' && data.valConfig.tabVal == 1) {
					      if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(data.value)) {
					        return that.$util.Tips({
					          title: `请填写正确的${data.titleConfig.value}`
					        });
					      }
					    }
					    if (data.name === 'texts' && data.valConfig.tabVal == 2) {
					      if (!
					        /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/i
					        .test(data.value)) {
					        return that.$util.Tips({
					          title: `请填写正确的${data.titleConfig.value}`
					        });
					      }
					    }
					    if (data.name === 'uploadPicture') {
					      if (!data.value.length) {
					        return that.$util.Tips({
					          title: `请上传${data.titleConfig.value}`
					        });
					      }
					    }
					  }
						parmas[data.key]=data.value
					}	
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				});
				registrateCreate(that.activity_id,parmas).then(res => {
					uni.hideLoading();
					that.isShowbox = true;
				}).catch(err => {
					uni.hideLoading();
					return that.$util.Tips({
						title: err
					});
				});
			},
			/**
			 * 分享打开
			 *
			 */
			listenerActionSheet: function() {
				if (this.isLogin == false) {
					toLogin()
				} else {
					// #ifdef H5
					if (this.$wechat.isWeixin() === true) {
						this.weixinStatus = true;
					}
					// #endif
					this.posters = !this.posters;
				}
			},
			// 分享关闭
			listenerActionClose: function() {
				this.posters = false;
			},
			bindchange(e) {
				this.swiperIndex = e.detail.current;
			},
			async goPoster() {
				var that = this;
				that.posters = false;
				that.posterStatus = true;
				this.isShowbox = false;
				this.$nextTick(() => {
					let selector = uni.createSelectorQuery().select('.aaa');
					selector.fields({
						size: true
					}, data => {
						console.log(data)
						this.wd = data.width
						this.hg = data.height
					}).exec();
				})
				await this.getPosters()
			},
			//获取图片
			async getPosters() {
				let that = this
				let rqData = {
					id: that.activityData.activity_id,
					// #ifdef MP
					type: 'routine',
					// #endif
					// #ifndef MP
					type: 'h5',
					// #endif
				}
				let res = await registratePoster(that.activityData.activity_id)
				that.spreadData = res.data.poster
				that.nickName = res.data.nickname
				// #ifdef MP || APP-PLUS
				let mpUrl = await that.downloadFilestoreImage(res.data.qrcode)
				// #endif
				// #ifdef H5 || APP-PLUS
				let qrCode = await that.imgToBase(res.data.qrcode)
				// #endif
				uni.showLoading({
					title: '海报生成中',
					mask: true
				});
				for (let i = 0; i < res.data.poster.length; i++) {
					let arr2
					// #ifdef MP || APP-PLUS	
					arr2 = [mpUrl, await that.downloadFilestoreImage(res.data.poster[i])]
					// #endif
					// #ifdef H5
					let img = await that.imgToBase(res.data.poster[i])
					arr2 = [qrCode, img]			
					// #endif
					that.$util.userPosterCanvas(arr2, res.data.nickname, res.data.mark, i, that.wd, that.hg, (tempFilePath) => {
						that.$set(that.posterImage, i, tempFilePath);
					});
					uni.hideLoading();
				}		
			},
			async imgToBase(url) {
				let res = await imgToBase({
					image: url
				})
				return res.data.image
			},
			//图片转符合安全域名路径
			downloadFilestoreImage(url) {
				return new Promise((resolve, reject) => {
					let that = this;
					uni.downloadFile({
						url: url,
						success: function(res) {
							resolve(res.tempFilePath);
						},
						fail: function() {
							return that.$util.Tips({
								title: ''
							});
						}
					});
				})
			},
			savePosterPath(url) {
				let that = this;
				// #ifdef MP
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									uni.saveImageToPhotosAlbum({
										filePath: url,
										success: function(res) {
											that.$util.Tips({
												title: '保存成功',
												icon: 'success'
											});
										},
										fail: function(res) {
											that.$util.Tips({
												title: '保存失败'
											});
										}
									});
								}
							});
						} else {
							uni.saveImageToPhotosAlbum({
								filePath: url,
								success: function(res) {
									that.$util.Tips({
										title: '保存成功',
										icon: 'success'
									});
								},
								fail: function(res) {
									that.$util.Tips({
										title: '保存失败'
									});
								}
							});
						}
					}
				});
				// #endif
				// #ifdef APP-PLUS
				uni.saveImageToPhotosAlbum({
					filePath: url,
					success: function(res) {
						that.$util.Tips({
							title: '保存成功',
							icon: 'success'
						});
					},
					fail: function(res) {
						that.$util.Tips({
							title: '保存失败'
						});
					}
				});
				// #endif
			},
			// 小程序关闭分享弹窗；
			goFriend: function() {
				this.posters = false;
				// this.H5ShareBox = true
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/radio .wx-radio-input.wx-radio-input-checked,
	/deep/uni-radio .uni-radio-input.uni-radio-input-checked {
	 border: 1px solid var(--view-theme)!important;
	 background-color: var(--view-theme)!important;
	}
	/deep/checkbox .uni-checkbox-input.uni-checkbox-input-checked,
	/deep/checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	  border: 1px solid var(--view-theme)!important;
	  background-color: var(--view-theme)!important;
	  color: #fff!important;
	}
	.personal-data{
		padding-bottom: 150rpx;
		padding-bottom: calc(150rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		min-height: 100vh;
	}
	.personal-data .activity-pic{
		display: flex;
		align-items: center;
		justify-content: center;
		.image{
			width: 100%;
		}	
	}
	.personal-data .wrapper {
		background-color: #fff;
		width: 710rpx;
		border-radius: 16rpx;
		margin: 0 auto;
		position: relative;
		top: -20rpx;
		+.wrapper{
			margin-top: 20rpx;
		}
	}
	.form-wrapper{
		pointer-events: none;
	}
	.personal-data .wrapper .text-info{
		padding: 30rpx;
		>view{
			+view{
				margin-top: 30rpx;
			}
		}
		.activity-name{
			justify-content: space-between;
			.title{
				width: 580rpx;
				color: #282828;
				font-size: 32rpx;
				font-weight: bold;
			}
		}
		.share{
			text-align: center;
			color: #666666;
			font-size: 18rpx;
			cursor: pointer;
			.icon-fenxiang4{
				display: block;
				color: #282828;
				font-size: 34rpx;
				margin: 0 0 3rpx 0;
			}
		}
		.iconfont{
			margin-right: 17rpx;
		}
		.activity-item{
			display: flex;
			align-items: center;
		}
	}
	.personal-data .wrapper .text-info .iconfont{
		color: #666666;
	}
	.personal-data .wrapper .text-info .info{
		color: #282828;
		&.info-theme{
			color: var(--view-theme);
		}
	}
	.personal-data .wrapper .text-info .acea-info{
		width: 600rpx;
		text-align: justify;
		word-break: break-all;
	}
	.personal-data .wrapper .item .name {
	  position: relative;
		width: 190rpx;
	}
	.personal-data .wrapper .item {
	  padding: 27rpx 30rpx;
	  font-size: 28rpx;
	  color: #282828;
	  position: relative;
		&::after{
			content: "";
			width: 670rpx;
			border-bottom: 1px solid #eee;
			position: absolute;
			bottom: 0;
		}
	}
	.personal-data .wrapper .disabled{
		pointer-events: none;
	}
	.personal-data .wrapper .item.on{
		padding: 16rpx 30rpx;
		align-items: baseline;
	}
	.personal-data .wrapper .item.on3{
		align-items: baseline;  
	}
	.personal-data .wrapper .item .discount {
	  color: #282828;
		font-size: 30rpx;
	}
	.personal-data .wrapper .item.on .discount,
	.personal-data .wrapper .item.on3 .discount{
		width: 460rpx;
		text-align: right;
	}
	.personal-data .wrapper .item .item-select{
		color: #282828;
	}
	.personal-data .wrapper .item.on3 .discount .city{
		width: 400rpx;
		color: #ccc;
		&.item-select{
			color: #282828;
		}
	}
	.personal-data .wrapper .item .discount input {
	  text-align: right;
	  width: 450rpx;
	}
	.personal-data .wrapper .item .discount .iconfont {
	  color: #BBBBBB;
	  font-size: 28rpx;
	  margin-left: 15rpx;
	}
	.personal-data .wrapper .item .discount .num {
	  font-size: 32rpx;
	  margin-right: 20rpx;
	}	
	.personal-data .wrapper .item .discount .radio{
	  margin: 0 22rpx 0 22rpx;
	  padding: 10rpx 0;
	}
	.personal-data .wrapper .item .discount .radio /deep/uni-checkbox .uni-checkbox-input{
	  border-radius: 0;
	}
	.personal-data .wrapper .item textarea {
	  background-color: #f9f9f9;
	  width: 650rpx;
	  height: 140rpx;
	  border-radius: 3rpx;
	  margin-top: 30rpx;
	  padding: 25rpx 28rpx;
	  box-sizing: border-box;
	}
	.personal-data .wrapper .item .placeholder {
	  color: #ccc;
		font-size: 30rpx;
	}
	.asterisk{
		color: red;
	}
	.footer{
		background: #ffffff;
		width: 750rpx;
		height: 126rpx;
		height: calc(126rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(126rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	.personal-data .modifyBnt {
		font-size: 32rpx;
		color: var(--view-theme);
		background-color: #ffffff;
		border: 1px solid var(--view-theme);
		width: 690rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		&.disabled{
			color: #ffffff;
			background-color: #BBBBBB;
			border-color: #BBBBBB;
		}
	}
	.success {
		z-index: 10;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, .5);
		}
		.con {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 520rpx;
			height: 526rpx;
			background: #fff;
			border-radius: 10rpx;
			font-size: 34rpx;
			color: #282828;
			image {
				width: 214rpx;
				height: 180rpx;
			}
			.title{
				color: #282828;
				font-size: 32rpx;
				font-weight: bold;
			}
			.text{
				color: #999999;
				font-size: 26rpx;
				margin-top: 30rpx;
			}
			.foot {
				height: 78rpx;
				border-top: 1px solid #EAEAEA;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				position: absolute;
				bottom: 0;
				left: 0;
				.btn{
					color: #999999;
					font-size: 26rpx;	
					width: 50%;
					text-align: center;
					height: 78rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					+.btn{
						color: #E93323;
						position: relative;
						&::before{
							content: "";
							display: block;
							width: 1px;
							height: 78rpx;
							background: #EAEAEA;
							position: absolute;
							left: 0;
							top: 0;
						}
					}
				}
			}
		}
	}
	.generate-posters {
		width: 100%;
		height: 170rpx;
		background-color: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 301;
		transform: translate3d(0, 100%, 0);
		transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
		border-top: 1rpx solid #eee;
	}
	.generate-posters.on {
		transform: translate3d(0, 0, 0);
	}
	.generate-posters .item {
		/* #ifdef H5 */
		flex: 50%;
		/* #endif */
		/* #ifndef H5 */
		flex: 33.33%;
		/* #endif */
		text-align: center;
		font-size: 30rpx;
		&.item3{
			flex: 33.33%;
		}
	}
	.generate-posters .item .iconfont {
		font-size: 80rpx;
		color: #5eae72;
	}
	.generate-posters .item .iconfont.icon-haibao {
		color: #5391f1;
	}
	.generate-posters .item .iconfont.icon-fuzhikouling1 {
		color: #FBB324;
	}
	.distribution-posters{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #a3a3a3;
	}
	.canvas {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.box {
		width: 100%;
		height: 100%;
		position: relative;
		border-radius: 18rpx;
		overflow: hidden;
		.user-msg {
			position: absolute;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			.user-code {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				justify-content: space-between;
				image {
					width: 100%;
				}
			}
		}
	}
	.img-list {
		margin-right: 40px;
	}
	.distribution-posters swiper {
		width: 100%;
		height: 1000rpx;
		position: relative;
		margin-top: 40rpx;
	}
	.distribution-posters .slide-image {
		width: 100%;
		height: 100%;
		margin: 0 auto;
		border-radius: 15rpx;
	}
	.distribution-posters /deep/.active {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}
	.distribution-posters /deep/ .quiet {
		transform: scale(0.8333333);
		transition: all 0.2s ease-in 0s;
	}
	.distribution-posters .keep {
		font-size: 30rpx;
		color: #fff;
		width: 600rpx;
		height: 80rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 80rpx;
		margin: 38rpx auto;
		background-color: var(--view-theme);
	}
	.share-box {
		z-index: 1000;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>