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

<template>
	<view class="membershipApplication">
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" :title-width="350"
			back-icon-color="#fff" title-color="#fff" 
			:background="background" :title="i18n('MembershipApplication')">
		</u-navbar>
		<view class="content">
			<view class="title">{{$t('common.MembershipApplications')}}</view>
			<view class="form-box">
				<u-form :model="form" ref="uForm" label-position="top">
					<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'? '单位名称': 'Company name'" 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>
	import {getToken} from '@/utils/auth'
	export default {
		data() {
			return {
				background:{
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle:{
					color:'#fff'
				},
				token: '',
				form: {
					name: '',
					unitName: '',
					email: '',
					tel: ''
				},
				placeholder: {
					name: this.$i18n.locale == 'zh'? '请输入姓名': 'Please enter the name of the contact',
					unitName: this.$i18n.locale == 'zh'? '请输入单位名称': 'Please enter the company name',
					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 company name', 
							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'
						}
					]
				},
				
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			i18n (data) {
			    return this.$t('common.'+data);
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.getToken();
					} else {
						console.log('验证失败');
					}
				});
			},
			async baseMemberApplys() {
				const that = this;
				const res = await this.$myRequest({
					url: '/project/baseMemberApplys/appCommitMemberApply',
					method: 'POST',
					data: {
						contactsName: this.form.name,
						unitZhName: this.form.unitName,
						email: this.form.email,
						mobilePhone: this.form.tel,
						language: this.$i18n.locale.toUpperCase(),
						token: this.token
					}
				});
				// console.log(res);
				if(res.status == 200) {
					uni.navigateTo({
						url: '/pages/service/membership/successful?value=member&key='+res.data
					})
				}else {
					that.$refs.uToast.show({
						title: that.$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.baseMemberApplys();
			}
		}
	}
</script>

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