dev/dcp-app-gate/pages/conference/conferenceOfflineZh/conference-offline-zh.vue

<template>
	<view class="bigbox">
		<!-- 顶部导航栏 -->
		<uni-nav-bar status-bar=true fixed=true left-icon="arrowleft" background-color="#3387ff" color="#ffffff"
			@clickLeft="navigateBack">
			<text slot="default" style="text-align: center; flex: 1; font-size: 18px; font-weight: bold;">报名信息</text>
			<button slot="right" @click="submitForm" size="mini" class="sunmit-btn" type="submit"
				hover-class="button-hover">提交</button>
		</uni-nav-bar>
		<!-- 背景装饰物 -->
		<view class="decorate">
			<!-- <view class="decorates"></view> -->
		</view>
		<!-- 表单部分 -->
		<uni-list :border="false"
			style="width: 686rpx;margin: 100rpx 32rpx;border-radius: 12rpx;overflow: hidden;box-shadow: 0px 3px 6px #000000;">
			<uni-list-item showArrow clickable @click="toUpload">
				<view slot="header" class="text_style" style="line-height: 104rpx;">
					<text style="margin-left: 26rpx;">照片</text>
				</view>
				<image v-if="meetingApply.photoUrl" @click="toUpload" slot="footer"
					:src="websiteUrl+meetingApply.photoUrl"
					style="width: 100rpx;height: 140rpx; border-radius: 16rpx;margin-top: -134rpx;"></image>
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s label">邀请码</text>
				<input placeholder="请填写邀请码(如无,请填写“000000”)" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.invitationCode" />
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s label">姓名</text>
				<input placeholder="请填写您的姓名" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.name" />
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s" style="margin-left: 8rpx;">英文姓名</text>
				<input placeholder="请填写您的英文姓名" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.nameEn" />
			</uni-list-item>

			<uni-list-item showArrow>
				<text slot="header" class="text_style text_style_s label">性别</text>
				<view slot="body" class="uni-list select-view">
					<view class="uni-list-cell">
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="genderIndex" :range="genderRange"
								range-key="label">
								<view class="uni-input">{{genderRange[genderIndex].label}}</view>
							</picker>
						</view>
					</view>
				</view>
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s label">邮箱</text>
				<input placeholder="请填写您的邮箱" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.email" />
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s label">手机</text>
				<input placeholder="请填写您的手机" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.tel" />
			</uni-list-item>

			<uni-list-item showArrow clickable @click="toUnitCountryDict">
				<view slot="header" class="text_style select-view"
					style="line-height: 92rpx; font-weight: bold;padding-left: 28rpx;">
					<text class="label" style="margin-left: 10rpx;">国家</text>
				</view>
				<text slot="footer" style="line-height: 92rpx;">{{unitCountry}}</text>
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s label">所在单位</text>
				<input placeholder="请填写您的所在单位" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.unitName" />
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s" style="margin-left: 8rpx;">英文单位</text>
				<input placeholder="请填写您的所在英文单位" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.unitNameEn" />
			</uni-list-item>

			<uni-list-item showArrow>
				<text slot="header" class="text_style text_style_s label">单位类型</text>
				<view slot="body" class="uni-list select-view">
					<view class="uni-list-cell" v-if="UnitTypeDictRange.length">
						<view class="uni-list-cell-db">
							<picker @change="bindUnitTypePickerChange" :value="unitTypeIndex" :range="UnitTypeDictRange"
								range-key="label">
								<view class="uni-input">{{UnitTypeDictRange[unitTypeIndex].label}}</view>
							</picker>
						</view>
					</view>
				</view>
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s label">职务</text>
				<input placeholder="请填写您的职务" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.positionName" />
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s" style="margin-left: 8rpx;">英文职务</text>
				<input placeholder="请填写您的英文职务" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.positionNameEn" />
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s label">联系人姓名</text>
				<input placeholder="请填写您的联系人姓名" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.contactPersonName" />
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s label">联系人手机</text>
				<input placeholder="请填写您的联系人手机" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.contactCellphone" />
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s label">联系人邮箱</text>
				<input placeholder="请填写您的联系人邮箱" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.contactEmail" />
			</uni-list-item>
		</uni-list>
		<activities-select v-if="baseInfo!= {} && baseInfo.isShowZhOnsiteIntention=='Yes'"
			:meetingId="meetingApply.meetingId" @getcheckedIds="getActivityIds" @getcheckDetermine="getdetermine"></activities-select>
	</view>
</template>

<script>
	import {
		addIntegral,
		addGrowth
	} from '@/components/addPointDetailByTaskDict.js'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
	import chineseToPinYin from "@/components/uni-pinyin/uni-pinyin.js";
	import informationInput from "@/pages/conference/conferenceOfflineZh/information.vue";
	import activitiesSelect from "@/pages/conference/activitiesSelect.vue";

	export default {
		components: {
			uniNavBar,
			informationInput,
			activitiesSelect,
			addIntegral,
			addGrowth
		},
		data() {
			return {
				unitCountry: '中国',
				genderRange: [{
						value: 'M',
						label: '男'
					},
					{
						value: 'F',
						label: '女'
					}
				],
				genderIndex: 0,
				unitTypeIndex: 0,
				UnitTypeDictRange: [],
				baseInfo: {},
				invitationCodePrefix: [], //邀请码集合
				invitationCodeArr: [], //邀请码集合
				meetingApply: {
					meetingYearplanTypeDict: 'main_meeting',
					isNeedLetter: 'No',
					meetingId: '',
					applyWay: 'zh',
					unitCountryDict: 'china',
					auditStatusDict: '',
					photoUrl: '',
					invitationCode: '',
					name: '',
					nameEn: '',
					genderDict: 'M',
					email: '',
					mobileAreaCodeDictEn: '0086',
					tel: '',
					unitName: '',
					unitNameEn: '',
					meetingUnitTypeDict: '01',
					positionName: '',
					positionNameEn: '',
					contactPersonName: '',
					contactMobileAreacodeDictEn: '0086',
					contactCellphone: '',
					contactEmail: '',
					languageDictEn: '',
				},
				approverId: '',
				pinyin: '',
				checkedIds: '',
				checkDetermine: true,
			}
		},
		mounted() {
			// this.getUnitTypeDict();
		},
		onLoad(option) {
			if (option && option.id) {
				this.meetingApply.meetingId = option.id;
				const myId = option.id
				this.getConfrenceDetail(myId)
				// console.log(option.id)
			} else {
				let that = this;
				const eventChannel = this.getOpenerEventChannel()
				eventChannel.on('reapply', function(data) {
					that.meetingApply = data.data;
					that.getConfrenceDetail(data.data.meetingId);
				})
				that.initDicts()
			}

		},
		watch: {
			'meetingApply.name'(val) {
				this.meetingApply.contactPersonName = val
				this.meetingApply.nameEn = chineseToPinYin(val);
			},
			'meetingApply.email'(val) {
				this.meetingApply.contactEmail = val
			},
			'meetingApply.tel'(val) {
				this.meetingApply.contactCellphone = val
			}
		},
		methods: {
			getActivityIds(ids) {
				console.log('ids', ids)
				this.checkedIds = ids;
			},
			getdetermine(checkDetermine) {
				
				this.checkDetermine = checkDetermine;
				console.log('checkDetermine', this.checkDetermine)
			},
			async initDicts() {
				const res = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: 'unit_country_dict,meeting_unit_type_dict'
					}
				})
				res.data[0].forEach(item => {
					// console.log(item)
					if (this.meetingApply.unitCountryDict == item.value) {
						this.unitCountry = item.label
					}
				})
				res.data[1].forEach((item, i) => {
					// console.log(item)
					if (this.meetingApply.meetingUnitTypeDict == item.value) {
						this.unitTypeIndex = i
					}
				})
				this.genderRange.forEach((item, i) => {
					if (this.meetingApply.genderDict == item.value) {
						this.genderIndex = i
					}
				})
			},
			async getDict(rand) {
				const res = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: 'geidco_dept_dict,meeting_unit_type_dict'
					}
				})
				if (res.data) {
					this.UnitTypeDictRange = res.data[1];
					// this.invitationCodePrefix = res.data
					res.data[0].forEach(item => {
						// console.log(item)
						this.invitationCodeArr.push(item.value + '' + rand)
					})
					this.invitationCodeArr.push("000000")
					console.log(this.invitationCodeArr)
				}
			},
			async getConfrenceDetail(myId) {
				console.log('myId', myId)
				const res = await this.$myRequest({
					url: '/meeting/meetingOutInfos/findMeetingDetail/',
					data: {
						id: myId
					}
				});
				this.baseInfo = res.data.basicInfo;
				this.getDict(res.data.basicInfo.meetingRand);
			},
			async submitForm() {
				//必填项验证
				if (!this.checkContent(this.meetingApply.invitationCode)) {
					uni.showToast({
						title: '邀请码未填写',
						icon: 'none'
					});
					return;
				} else if (!this.invitationCodeArr.includes(this.meetingApply.invitationCode)) {
					uni.showToast({
						title: '邀请码错误',
						icon: 'none'
					});
					return;
				} else if (!this.checkContent(this.meetingApply.name)) {
					uni.showToast({
						title: '姓名未填写',
						icon: 'none'
					});
					return;
				} else if (!this.checkContent(this.meetingApply.email)) {
					uni.showToast({
						title: '邮箱未填写',
						icon: 'none'
					});
					return;
				} else if (!this.checkEmail(this.meetingApply.email)) {
					uni.showToast({
						title: '邮箱格式错误',
						icon: 'none'
					});
					return;
				} else if (!this.checkContent(this.meetingApply.tel)) {
					uni.showToast({
						title: '手机未填写',
						icon: 'none'
					});
					return;
				} else if (!this.checkMobile(this.meetingApply.tel)) {
					uni.showToast({
						title: '手机格式错误',
						icon: 'none'
					});
					return;
				} else if (!this.checkContent(this.meetingApply.unitName)) {
					uni.showToast({
						title: '所在单位未填写',
						icon: 'none'
					});
					return;
				} else if (!this.checkContent(this.meetingApply.positionName)) {
					uni.showToast({
						title: '职务未填写',
						icon: 'none'
					});
					return;
				} else if (!this.checkContent(this.meetingApply.contactPersonName)) {
					uni.showToast({
						title: '联系人姓名未填写',
						icon: 'none'
					});
					return;
				} else if (!this.checkContent(this.meetingApply.contactCellphone)) {
					uni.showToast({
						title: '联系人手机未填写',
						icon: 'none'
					});
					return;
				} else if (!this.checkMobile(this.meetingApply.contactCellphone)) {
					uni.showToast({
						title: '联系人手机格式错误',
						icon: 'none'
					});
					return;
				} else if (!this.checkContent(this.meetingApply.contactEmail)) {
					uni.showToast({
						title: '联系人邮箱未填写',
						icon: 'none'
					});
					return;
				} else if (!this.checkEmail(this.meetingApply.contactEmail)) {
					uni.showToast({
						title: '联系人邮箱格式错误',
						icon: 'none'
					});
					return;
				}else if (!this.checkDetermine) {
					uni.showToast({
						title: '温馨提示: 同一时段平行召开的会议仅限选择一场参加，祝您参会愉快！',
						icon: 'none'
					});
					return;
				}
				if (this.meetingApply.auditStatusDict == '') {
					this.meetingApply.auditStatusDict = '4';
				} else {
					this.meetingApply.auditStatusDict = this.meetingApply.auditStatusDict;
				}

				var res = await this.$myRequest({
					url: '/meeting/meetingApplys/getApproverId',
					data: {
						invitationCode: this.meetingApply.invitationCode
					},
				});
				res = res.data; //20210401添加此行代码
				var str = "";
				for (var i = 0; i < res.length; i++) {
					str += res[i].userId + ",";
				}
				if (str.length > 0) {
					str = str.substr(0, str.length - 1);
				}
				this.approverId = str;
				console.log('approverId', this.approverId)

				const token = await this.$myRequest({
					url: '/sys/token',
					data: {}
				});
				console.log('meetingApply', this.meetingApply)
				const result = await this.$myRequest({
					url: '/meeting/meetingApplys',
					method: (this.meetingApply.id ? 'PUT' : 'POST'),
					data: {
						meetingApply: JSON.stringify(this.meetingApply),
						approver: this.approverId,
						taskComment: '',
						token: token.data,
						activityIds: this.checkedIds
					}
				});
				// debugger
				if (result.data && result.data.isRepeat) {
					uni.showToast({
						title: '请勿重复提交!',
						icon: 'none'
					})
				}
				if (result.msg == '提交成功' || result.msg == '重新提交成功') {
					addIntegral('meeting_registration_successful', '10')
					addGrowth('meeting_registration_successful', '10')
					uni.navigateTo({
						url: '/pages/conference/conferenceOfflineZh/successfully'
					})
				}
				console.log('result', result)
			},
			bindPickerChange(e) {
				this.meetingApply.genderDict = this.genderRange[e.target.value].value;
				this.genderIndex = e.target.value;
			},
			bindUnitTypePickerChange(e) {
				console.log(this.UnitTypeDictRange[e.target.value].value)
				this.meetingApply.meetingUnitTypeDict = this.UnitTypeDictRange[e.target.value].value;
				this.unitTypeIndex = e.target.value;
			},
			toUnitCountryDict() {
				uni.navigateTo({
					url: 'CountryDict',
					events: {
						acceptSelectedCountry: data => {
							this.unitCountry = data.country;
							this.meetingApply.unitCountryDict = data.key;
						},
					},
				})
			},
			toUpload() {
				uni.navigateTo({
					url: 'uni-list-item-upload',
					events: {
						acceptImageUrl: data => {
							this.meetingApply.photoUrl = data.url;
						}
					},
				})
			},
			navigateBack() {
				uni.navigateBack()
			},
			checkEmail(email) {
				return RegExp(/^\w+.*\w+@[a-zA-Z0-9]+.*[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/).test(email);
			},
			checkMobile(mobile) {
				return RegExp(/^1[34578]\d{9}$/).test(mobile);
			},
			checkContent(content) {
				return RegExp(/^[\s\S]*.*[^\s][\s\S]*$/).test(content);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bigbox {
		background-color: #FFFFFF;
		padding-bottom: 20px;
	}

	/deep/.uni-list--border::after {
		background-color: #FFFFFF;
	}

	.uni-list-item {
		height: 144rpx;
		line-height: 104rpx;
		border-bottom: 1px solid #dadada;
	}

	/deep/.uni-list-item__container {
		flex-wrap: wrap;
	}

	.decorate {
		width: 100%;
		height: 170px;
		background-color: #3387ff;
		position: absolute;
		border-radius: 0 0 50px 50px
	}

	.decorates {
		width: 323px;
		height: 30px;
		background-color: rgb(255, 255, 255);
		opacity: 0.5;
		border-radius: 5px;
		position: absolute;
		top: 60rpx;
		left: 52rpx;
	}

	.text_style {
		width: 100%;
		font-weight: bold;
		font-size: 14px;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.text_style_s {
		padding-left: 14rpx;
	}

	.uni-common-mt {
		// margin-left: 90rpx;
	}

	.uni-list {
		width: auto;
		background-color: #d7d7d7;
	}

	.uni-list:after,
	.uni-list:before {
		height: 0px;
	}

	.select-view {
		position: absolute;
		width: 100%;
		height: 100%;
		text-align: right;
		top: 0;
		left: 0;
		background-color: transparent;
	}

	.select-view .uni-input {
		line-height: 140rpx;
	}

	.sunmit-btn {
		width: 57px;
		height: 30px;
		color: #FFFFFF;
		background-color: #2d79e5;
		padding: 0 10px;
		border-radius: 18px;
	}

	.button-hover[type=submit] {
		opacity: .75;
		transform: scale(0.95, 0.95);
	}

	.uni-input-info {
		height: 54rpx;
		width: 650rpx;
		font-size: 30rpx;
		// border-bottom: 1px solid #dadada;
		// background: #E4E7ED;
	}

	.uni-input-placeholder {
		font-size: 28rpx;
		padding-left: 10rpx;
	}

	.label:before {
		content: '* ';
		color: red;
	}
</style>