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

<template>
	<view class="membershipApplication">
		<u-navbar :back-text="i18n('Back')" :back-text-style="backStyle" :title-width="400"
			back-icon-color="#fff" title-color="#fff" 
			:background="background" :title="i18n('CustomServiceApplication')">
		</u-navbar>
		<view class="content">
			<view class="title">{{$t('common.CustomServiceApplication')}}</view>
			<view class="form-box">
				<u-form :model="form" ref="uForm" label-position="top">
					<u-form-item :label="$i18n.locale == 'zh'? '姓名': 'Name'" 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-button slot="right" type="primary" shape="square" size="mini" @click="showSelect">{{i18n('Search')}}</u-button>
					</u-form-item>
					<u-form-item :label="$i18n.locale == 'zh'? '申请类型': 'Support Type'" prop="applicationType" required>
						<u-input v-model="form.applicationType" type="select" :placeholder="placeholder.applicationType" @click="selectShow = true" />
					</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-select mode="single-column" :list="typeDialog1" v-model="selectShow" @confirm="selectConfirm" :confirm-text="i18n('submit')" :cancel-text="i18n('cancel')"></u-select>
		<!-- 单位名称 -->
		<u-select v-model="unitNameShow" mode="single-column" :list="projectList" @confirm="confirm" label-name="unitName"
		 value-name="baseEntityId" :confirm-text="i18n('submit')" :cancel-text="i18n('cancel')"></u-select>
		 <u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{
					backgroundImage: 'linear-gradient(270deg, #4BC0E2 0%, #538BE7 100%)',
				},
				backStyle:{
					color:'#fff'
				},
				form: {
					name: '',
					unitName: '',
					unitId: '',
					applicationType: '',
					childTypeDict: '',
					email: '',
					tel: ''
				},
				placeholder: {
					name: this.$i18n.locale == 'zh'? '请输入姓名': 'Please enter name',
					unitName: this.$i18n.locale == 'zh'? '请输入单位名称': 'Please enter the company name',
					applicationType: this.$i18n.locale == 'zh'? '请输入申请类型': 'Please enter the Support Type',
					email: this.$i18n.locale == 'zh'? '请输入邮箱': 'Please enter the e-mail',
					tel: this.$i18n.locale == 'zh'? '请输入联系电话': 'Please enter the contact number'
				},
				typeDialog1: [],
				baseUnitViews: [],
				projectList: [],
				selectShow: false,
				unitNameShow: false,
				token: '',
				coopCustomService: {
					id: null,
					unitId: '',
					unitZhName: '',
					serviceType: this.$i18n.locale == 'zh'?'定制服务':'Costomized',
					serviceTypeDict: '1',
					childType: '',
					childTypeDict: '',
					supportWay: '',
					supportWayDict: '',
					applyUserName: '',
					linkNumber: '',
					linkEmail: '',
					userType: '1',
					unitIntroduction: '',
					applyContent: '',
					applyDate: '',
					subName: '',
					subAccount: '',
					subCompany: '',
					subMail: '',
					subPhone: '',
					language: '',
					status: '',
					statusDict: '1',
					createBy: '',
					createDate: '',
					updateBy: '',
					updateDate: '',
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: this.$i18n.locale == 'zh'? '请输入姓名': 'Please enter name', 
							trigger: 'blur',
						}
					],
					unitName: [
						{
							required: true,
							message: this.$i18n.locale == 'zh'? '请输入单位名称': 'Please enter the company name', 
							trigger: ['blur','change']
						}
					],
					applicationType: [
						{
							required: true,
							message: this.$i18n.locale == 'zh'? '请输入申请类型': 'Please enter the application type', 
							trigger: ['blur','change']
						}
					],
					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.getSelectList();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			i18n (data) {
			    return this.$t('common.'+data);
			},
			async showSelect() {
				await this.getProjectViews();
				this.unitNameShow = true;
			},
			async getProjectViews() {
				const res = await this.$myRequest({
					url: '/project/coopCustomServices/getUnitViews',
					data: {
						language: this.$i18n.locale.toUpperCase(),
						unitName: this.form.unitName
					}
				});
				// console.log(res);
				this.projectList = res.data.baseUnitViewList;
			},
			async getSelectList() {  //申请类型
				let type = "";
				if(this.$i18n.locale == 'zh') {
					type = "SERVICE_TYPE_DICT,SERVICE_CHILD_TYPE_DICT,STATUS_DICT,SUPPORT_WAY_DICT";
				}else {
					type = "SERVICE_TYPE_DICT_EN,SERVICE_CHILD_TYPE_DICT_EN,STATUS_DICT,SUPPORT_WAY_DICT_EN";
				}
				const res = await this.$myRequest({
					url: '/sys/sysDicts',
					data: {
						type
					}
				});
				// console.log(res);
				this.typeDialog1 = res.data[1] || []; 
				
			},
			selectConfirm(e) {
				this.form.applicationType = e[0].label;
				this.form.childTypeDict = e[0].value;
			},
			confirm(e) {
				this.form.unitName = e[0].label;
				this.form.unitId = e[0].value;
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.getToken();
					} else {
						console.log('验证失败');
					}
				});
			},
			async saveOrUpdate() {
				this.coopCustomService.applyUserName = this.form.name;
				this.coopCustomService.unitId = this.form.unitId;
				this.coopCustomService.childType = this.form.applicationType;
				this.coopCustomService.childTypeDict = this.form.childTypeDict;
				this.coopCustomService.linkEmail = this.form.email;
				this.coopCustomService.linkNumber = this.form.tel;
				const res = await this.$myRequest({
					url: '/project/coopCustomServices',
					method: 'POST',
					data: {
						coopCustomService: JSON.stringify(this.coopCustomService),
						attachmentIds: null,
						statements: null,
						dataSource: 'gate',
						token: this.token
					}
				});
				// console.log(res);
				if(res.status == 200) {
					uni.navigateTo({
						url: '/pages/service/membership/successful?value=custom&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.saveOrUpdate();
			}
		}
	}
</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>