dev/dcp-app-gate/pages/conference/conferenceOfflineEn/conference-offline-en.vue

<template>
	<view class="bigbox">
		<!-- 顶部导航栏 -->
		<uni-nav-bar status-bar=true fixed=true left-icon="back" background-color="#3387ff" color="#ffffff"
			@clickLeft="navigateBack">
			<text slot="default" style="text-align: center; flex: 1; font-size: 18px; font-weight: bold;">Sign Up</text>
			<button slot="right" size="mini" @click="submitForm" class="sunmit-btn" type="submit"
				hover-class="button-hover">submit</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;">Photo</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">Invitation Code</text>
				<input placeholder="Please enter your Invitation Code or '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">Given Name</text>
				<input placeholder="Please enter your Given Name" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.givenName" />
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s" style="margin-left: 12rpx;">Middle Name</text>
				<input placeholder="Please enter your Middle Name" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.middleName" />
				<!-- <information-input slot="body" class="uni-common-mt" v-model="meetingApply.middleName"></information-input> -->
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s label">Surname</text>
				<input placeholder="Please enter your Surname" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.surname" />
			</uni-list-item>

			<uni-list-item showArrow>
				<text slot="header" class="text_style text_style_s label">Gender</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">E-mail</text>
				<input placeholder="Please enter your E-mail" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.email" />
			</uni-list-item>

			<!-- <uni-list-item showArrow clickable @click="toMobileAreaCode('mobileAreaCodeDictEn')">
				<text slot="header" class="text_style text_style_s label" style="line-height: 100rpx;">Mobile Area
					Code</text>
				<text slot="footer" style="margin-top: -42px;">{{meetingApply.mobileAreaCodeDictEn}}</text>
			</uni-list-item> -->

			<uni-list-item showArrow clickable @click="toMobileAreaCode('mobileAreaCodeDictEn')">
				<text slot="header" class="text_style text_style_s label"
					style="height: 100rpx;line-height: 100rpx;">Mobile Area Code</text>
				<text slot="footer" style="margin-top: -37px;">{{meetingApply.contactMobileAreacodeDictEn}}</text>
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s label">Tel.</text>
				<input placeholder="Please enter your Tel." 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" style="line-height: 100rpx; font-weight: bold;">
					<text class="label" style="margin-left: 10rpx;">Country/Region</text>
				</view>
				<text slot="footer" style="margin-top: -42px;">{{unitCountry}}</text>
			</uni-list-item>

			<uni-list-item showArrow>
				<text slot="header" class="text_style text_style_s label">Language</text>
				<view slot="body" class="uni-list select-view">
					<view class="uni-list-cell" v-if="languageDictEns.length">
						<view class="uni-list-cell-db">
							<picker @change="bindLanguageChange" :value="languageIndex" :range="languageDictEns"
								range-key="label">
								<view class="uni-input">{{languageDictEns[languageIndex].label}}</view>
							</picker>
						</view>
					</view>
				</view>
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s ">Passport Number</text>
				<input placeholder="Please enter your Passport Number" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.passportNumber" />
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s label">Name of Company/Organization</text>
				<input placeholder="Please enter your Company/Organization" slot="body"
					class="uni-input-info text_style_s" v-model="meetingApply.unitNameEn" />
			</uni-list-item>

			<uni-list-item showArrow>
				<view class="" slot="header">
					<text class="text_style text_style_s label">Company/Organization Type</text>
				</view>
				<view slot="body" class="uni-list select-view text_style_s">
					<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"
									style="text-align:left; padding-left:28rpx;line-height: 192rpx;">
									{{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">Title</text>
				<input placeholder="Please enter your Title" 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">Contact Person</text>
				<input placeholder="Please enter your Contact Person" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.contactPersonName" />
			</uni-list-item>

			<uni-list-item showArrow clickable @click="toMobileAreaCode('contactMobileAreacodeDictEn')">
				<text slot="header" class="text_style text_style_s label"
					style="height: 100rpx;line-height: 100rpx;">Mobile Area Code</text>
				<text slot="footer" style="margin-top: -37px;">{{meetingApply.contactMobileAreacodeDictEn}}</text>
			</uni-list-item>

			<uni-list-item clickable>
				<text slot="header" class="text_style text_style_s label">Contact Cellphone</text>
				<input placeholder="Please enter your Contact Cellphone" 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">Contact E-mail</text>
				<input placeholder="Please enter your Contact E-mail" slot="body" class="uni-input-info text_style_s"
					v-model="meetingApply.contactEmail" />
			</uni-list-item>
		</uni-list>
		<activities-select v-if="baseInfo!= {} && baseInfo.isShowEnOnsiteIntention=='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 informationInput from "@/pages/conference/conferenceOfflineZh/information.vue";
	import activitiesSelect from "@/pages/conference/activitiesSelectEN.vue";
	export default {
		components: {
			uniNavBar,
			informationInput,
			activitiesSelect,
			addIntegral,
			addGrowth
		},
		data() {
			return {
				unitCountry: '',
				genderRange: [{
						value: 'M',
						label: 'Male'
					},
					{
						value: 'F',
						label: 'Female'
					},
					{
						value: 'O',
						label: 'Other'
					},
				],
				genderIndex: 0,
				unitTypeIndex: 0,
				languageIndex: 1,
				UnitTypeDictRange: [],
				languageDictEns: [],
				baseInfo: {}, //邀请码集合
				invitationCodePrefix: [], //邀请码集合
				invitationCodeArr: [], //邀请码集合
				meetingApply: {
					meetingYearplanTypeDict: 'main_meeting',
					isNeedLetter: 'No',
					meetingId: '',
					auditStatusDict: '',
					applyWay: 'en',
					nameEn: '',
					photoUrl: '',
					invitationCode: '',
					givenName: '',
					middleName: '',
					surname: '',
					genderDictEn: 'M',
					email: '',
					mobileAreaCodeDictEn: '',
					tel: '',
					unitCountryDictEn: '',
					languageDictEn: 'english',
					passportNumber: '',
					unitNameEn: '',
					meetingUnitTypeDictEn: '01',
					positionNameEn: '',
					contactPersonName: '',
					contactMobileAreacodeDictEn: '',
					contactCellphone: '',
					contactEmail: ''
				},
				approverId: '',
				checkedIds: '',
				checkDetermine: true,
			}
		},
		mounted() {
			// this.getUnitTypeDict();
			this.getLanguageDictEn();
		},
		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);
					// console.log('2222',that.meetingApply)
				})
				that.initDicts()
			}
		},
		watch: {
			'meetingApply.givenName'(val) {
				this.meetingApply.givenName = val
				this.meetingApply.contactPersonName = val + ' ' + this.meetingApply.middleName + ' ' + this.meetingApply
					.surname
				this.meetingApply.nameEn = val + ' ' + this.meetingApply.middleName + ' ' + this.meetingApply.surname
			},
			'meetingApply.middleName'(val) {
				this.meetingApply.middleName = val
				this.meetingApply.contactPersonName = this.meetingApply.givenName + ' ' + val + ' ' + this.meetingApply
					.surname
				this.meetingApply.nameEn = this.meetingApply.givenName + ' ' + val + ' ' + this.meetingApply.surname
			},
			'meetingApply.surname'(val) {
				this.meetingApply.surname = val
				this.meetingApply.contactPersonName = this.meetingApply.givenName + ' ' + this.meetingApply.middleName +
					' ' + val
				this.meetingApply.nameEn = this.meetingApply.givenName + ' ' + this.meetingApply.middleName + ' ' + 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_en,meeting_unit_type_dict_en'
					}
				})
				res.data[0].forEach(item => {
					// console.log(item)
					if (this.meetingApply.unitCountryDictEn == item.value) {
						this.unitCountry = item.label
					}
				})
				res.data[1].forEach((item, i) => {
					// console.log(item)
					if (this.meetingApply.meetingUnitTypeDictEn == item.value) {
						this.unitTypeIndex = i
					}
				})
				this.genderRange.forEach((item, i) => {
					if (this.meetingApply.genderDict == item.value) {
						this.genderIndex = i
					}
				})
			},
			async submitForm() {
				// uni.navigateTo({
				// 	url: '/pages/conference/conferenceOfflineEn/successfully'
				// });
				// return
				//必填项验证
				if (!this.checkContent(this.meetingApply.invitationCode)) {
					uni.showToast({
						title: 'Invitation code not filled in',
						icon: 'none'
					});
					return;
				} else if (!this.invitationCodeArr.includes(this.meetingApply.invitationCode)) {
					uni.showToast({
						title: 'Invitation code error',
						icon: 'none'
					});
					return;
				} else if (!this.checkContent(this.meetingApply.givenName)) {
					uni.showToast({
						title: 'GivenName not filled in',
						icon: 'none'
					});
					return;
				} else if (!this.checkContent(this.meetingApply.surname)) {
					uni.showToast({
						title: 'SurName not filled in',
						icon: 'none'
					});
					return;
				} else if (!this.checkContent(this.meetingApply.email)) {
					uni.showToast({
						title: 'Email not filled in',
						icon: 'none'
					});
					return;
				} else if (!this.checkEmail(this.meetingApply.email)) {
					uni.showToast({
						title: 'Email format error',
						icon: 'none'
					});
					return;
				}/* else if (!this.checkContent(this.meetingApply.mobileAreaCodeDictEn)) {
					uni.showToast({
						title: 'Mobile Area Code not filled in',
						icon: 'none'
					});
					return;
				} */ else if (!this.checkContent(this.meetingApply.tel)) {
					uni.showToast({
						title: 'Tel not filled in',
						icon: 'none'
					});
					return;
				} else if (!this.checkMobile(this.meetingApply.tel)) {
					uni.showToast({
						title: 'Tel error',
						icon: 'none'
					});
					return;
				}/* else if (!this.checkContent(this.meetingApply.passportNumber)) {
					uni.showToast({
						title: 'passportNumber is not filled in',
						icon: 'none'
					});
					return;
				} */ else if (!this.checkContent(this.meetingApply.unitNameEn)) {
					uni.showToast({
						title: 'Name of Company/Organization is not filled in',
						icon: 'none'
					});
					return;
				} else if (!this.checkContent(this.meetingApply.positionNameEn)) {
					uni.showToast({
						title: 'Title not filled in',
						icon: 'none'
					});
					return;
				} else if (!this.checkContent(this.meetingApply.contactPersonName)) {
					uni.showToast({
						title: 'Contact Person is not filled in',
						icon: 'none'
					});
					return;
				} else if (!this.checkContent(this.meetingApply.contactCellphone)) {
					uni.showToast({
						title: 'Contact Cellphone is not filled in',
						icon: 'none'
					});
					return;
				} else if (!this.checkMobile(this.meetingApply.contactCellphone)) {
					uni.showToast({
						title: 'Contact Cellphone error',
						icon: 'none'
					});
					return;
				} else if (!this.checkContent(this.meetingApply.contactEmail)) {
					uni.showToast({
						title: 'Contact Email is not filled in',
						icon: 'none'
					});
					return;
				} else if (!this.checkEmail(this.meetingApply.contactEmail)) {
					uni.showToast({
						title: 'Contact Email format error',
						icon: 'none'
					});
					return;
				} else if (!this.checkDetermine) {
					uni.showToast({
						title: 'Kind Reminder: participants can only register for one parallel session. Hope you enjoy the conference.',
						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)
				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
					},
				}).then(result => {
					console.log(result)
					if (result.data.isRepeat) {
						uni.showToast({
							title: 'please do not fill in again',
							icon: 'none'
						})
						return
					}
					addIntegral('meeting_registration_successful', '10')
					addGrowth('meeting_registration_successful', '10')
					uni.navigateTo({
						url: '/pages/conference/conferenceOfflineEn/successfully'
					});
				});


			},
			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.meetingUnitTypeDictEn = this.UnitTypeDictRange[e.target.value].value;
				this.unitTypeIndex = e.target.value;
			},
			bindLanguageChange(e) {
				this.meetingApply.languageDictEn = this.languageDictEns[e.target.value].value;
				this.languageIndex = e.target.value;
			},
			async getDict(rand) {
				const res = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: 'geidco_dept_dict,meeting_unit_type_dict_en'
					}
				})
				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) {
				const res = await this.$myRequest({
					url: '/meeting/meetingOutInfos/findMeetingDetail/',
					data: {
						id: myId
					}
				});
				this.baseInfo = res.data.basicInfo;
				this.getDict(res.data.basicInfo.meetingRand)
			},
			async getLanguageDictEn() {
				const res = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type: 'language_dict_en'
					}
				})
				if (res.data) {
					this.languageDictEns = res.data[0];
				}
			},
			toMobileAreaCode(mark) {
				uni.navigateTo({
					url: 'MobileAreaCodeDict',
					events: {
						watchMobileAreaCode: data => {
							this.meetingApply[mark] = data.code;
							if (mark == 'mobileAreaCodeDictEn') {
								this.meetingApply.contactMobileAreacodeDictEn = data.code;
							}
						}
					},
				})
			},
			toUnitCountryDict() {
				uni.navigateTo({
					url: 'CountryDict',
					events: {
						acceptSelectedCountry: data => {
							this.unitCountry = data.country;
							this.meetingApply.unitCountryDictEn = data.code;
						}
					},
				})
			},
			toUpload() {
				uni.navigateTo({
					url: '/pages/conference/conferenceOfflineZh/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>