dev/dcp-app-gate/pages/service/membership/leagueApplication.vue

<template>
	<view class="leagueApplication">
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" :title-width="400"
			back-icon-color="#fff" title-color="#fff" 
			:background="background" :title="i18n('AllianceApplication')">
		</u-navbar>
		<view class="content">
			<view class="title">{{$t('common.Membershipapplicationinformation')}}</view>
			<view class="form-box">
				<u-form :model="form" ref="uForm" label-position="top">
					<u-form-item>
						<u-checkbox-group :wrap="true" @change="leagueNameValue">
							<u-checkbox v-model="item.checked" :name="item.baseEntityId" 
								v-for="(item,index) in baseLeagueInfos" :key="index">
								{{($i18n.locale=='zh'?'全球能源互联网':'World of Energy Interconnection ')+item.leagueName}}
							</u-checkbox>
						</u-checkbox-group>
					</u-form-item>
					<u-form-item :label="$i18n.locale == 'zh'? '姓名': 'Name of the contact'" prop="name" required>
						<u-input v-model="form.name" :placeholder="placeholder.name" />
					</u-form-item>
					<u-form-item :label="$i18n.locale == 'zh'? '单位名称': 'Name of the entity'" prop="unitName" required>
						<u-input v-model="form.unitName" :placeholder="placeholder.unitName" />
					</u-form-item>
					<u-form-item :label="$i18n.locale == 'zh'? '邮箱': 'E-mail'" prop="email" required>
						<u-input v-model="form.email" :placeholder="placeholder.email" />
					</u-form-item>
					<u-form-item :label="$i18n.locale == 'zh'? '联系电话': 'Contact phone number'" prop="tel" required>
						<u-input v-model="form.tel" :placeholder="placeholder.tel" />
					</u-form-item>
				</u-form>
				<u-button shape="circle" type="primary" class="custom-style" @click="submit">{{$t('common.submit')}}</u-button>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle:{
					color:'#fff'
				},
				baseLeagueInfos:[],
				form: {
					name: '',
					unitName: '',
					email: '',
					tel: ''
				},
				token: '',
				leagueBaseIdStr: [],
				placeholder: {
					name: this.$i18n.locale == 'zh'? '请输入姓名': 'Please enter the name of the contact',
					unitName: this.$i18n.locale == 'zh'? '请输入单位名称': 'Please enter the name of the entity',
					email: this.$i18n.locale == 'zh'? '请输入邮箱': 'Please enter the e-mail',
					tel: this.$i18n.locale == 'zh'? '请输入联系电话': 'Please enter the contact phone number'
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: this.$i18n.locale == 'zh'? '请输入姓名': 'Please enter the name of the contact', 
							trigger: 'blur'
						}
					],
					unitName: [
						{
							required: true,
							message: this.$i18n.locale == 'zh'? '请输入单位名称': 'Please enter the name of the entity', 
							trigger: 'blur'
						}
					],
					email: [
						{
							required: true,
							message: this.$i18n.locale == 'zh'? '请输入邮箱': 'Please enter the e-mail', 
							trigger: 'blur'
						},
						{
							message: this.$i18n.locale == 'zh'? '邮箱格式不正确': 'Email format is not correct, please input again',
							type: 'email',
							trigger: 'blur'
						}
					],
					tel: [
						{
							required: true,
							message: this.$i18n.locale == 'zh'? '请输入联系电话': 'Please enter the contact phone number', 
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: this.$i18n.locale == 'zh'? '手机号码不正确': 'The contact phone number is incorrect',
							trigger: 'blur'
						}
					]
				}
			}
		},
		onLoad() {
			this.getIntaData();
			this.getUser();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			i18n (data) {
			    return this.$t('common.'+data);
			},
			async getIntaData() {
				const res = await this.$myRequest({
					url: '/project/baseLeagueInfos/getBaseLeagues',
					data: {
						language: this.$i18n.locale.toUpperCase()
					}
				});
				// console.log(res);
				this.baseLeagueInfos = res.data.baseLeagueInfos;
			},
			async getUser() {
				let user = uni.getStorageSync('user');
				let token = uni.getStorageSync('Auth-Token');
				console.log(user!=undefined && token!=undefined);
				if (!token && !user) {
					uni.setStorageSync('pathReminder', '/pages/service/membership/leagueApplication')
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/public/login?back=1&language=zh"
						})
					}, 1000)
				}
			},
			leagueNameValue(value) {
				this.leagueBaseIdStr = value;
			},
			async submit() {
				const res = await this.$myRequest({
					url: '/project/baseLeagueApplys/getSelfAllianceApply'
				});
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if(this.leagueBaseIdStr.length == 0) {
							this.$refs.uToast.show({
								title: this.$i18n.locale == 'zh'?'请选择专业联盟！':'Please select professional alliance!',
							});
							return;
						}
						let leagueApply = res.data.baseLeagueApplyList;
						// console.log(leagueApply);
						if(leagueApply) {
							this.$refs.uToast.show({
								title: this.$i18n.locale == 'zh'?'您已申请！':'You have applied!',
								type: 'warning'
							});
							return;
						}else {
							this.getToken();
						}
					} else {
						console.log('验证失败');
					}
				});
			},
			async commitMemberApply() {
				const that = this;
				let leagueBaseNameStr = [];
				this.baseLeagueInfos.forEach(item1 => {
					this.leagueBaseIdStr.forEach(item2 => {
						if(item1.baseEntityId == item2) {
							leagueBaseNameStr.push(item1.leagueName);
						}
					})
				});
				const res = await this.$myRequest({
					url: '/project/baseLeagueApplys/appCommitLeagueMemberApply',
					method: 'POST',
					data: {
						// type:'formData',
						contactsName: this.form.name,
						unitZhName: this.form.unitName,
						mobilePhone: this.form.tel,
						telephoneNumber: this.form.tel,
						email: this.form.email,
						language: this.$i18n.locale.toUpperCase(),
						leagueBaseIdStr: this.leagueBaseIdStr.join(),
						leagueBaseNameStr: leagueBaseNameStr.join(),
						token: this.token
					}
				});
				// console.log(res);
				if(res.status == 200) {
					uni.navigateTo({
						url: '/pages/service/membership/successful?value=league&key='+res.data
					})
				}else {
					this.$refs.uToast.show({
						title: this.$i18n.locale == 'zh'?'申请失败！':'Application failed!',
						type: 'error' 
					});
				}
			},
			async getToken() {
				const res = await this.$myRequest({
					url: '/sys/token'
				});
				// console.log(res);
				this.token = res.data;
				this.commitMemberApply();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.leagueApplication {
		.content {
			margin-top: 20upx;
			background-color: #FFFFFF;
			padding: 30upx;
			height: calc(100vh - 20upx - 44px - var(--status-bar-height));
		}
		.title {
			color: #1777FE;
			font-size: 32upx;
		}
		.custom-style {
			width: 100%;
			height: 80upx;
			margin-top: 60upx;
		}
	}
</style>