cxyy-applet/pagesMy/activity/active.vue

<template>
	<view class="container main">
		<view class="one">
			<uni-forms ref="baseForm" :rules="rules" :modelValue="form" label-width="80px">
				<uni-forms-item label="姓名" required name="name">
					<uni-easyinput v-model="form.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="手机号" required name="phone">
					<uni-easyinput v-model="form.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<uni-forms-item label="报名类型" required name="type">
					<uni-data-checkbox v-model="form.type" :localdata="signList" :map="{text:'label',value:'value'}" />
				</uni-forms-item>
				<uni-forms-item label="公司名称" required name="company">
					<linSelect style="width: 273px;" :list="companyList" :loading="loading" loading-text="数据加载中"
						value-key="name" name-key="name" max-height="180" placeholder="请输入公司名称" @input="toCompany"
						v-model="form.company" />
				</uni-forms-item>
				<uni-forms-item label="路演名称" required name="project_name" v-if="form.type=='1'">
					<uni-easyinput v-model="form.project_name" placeholder="请输入路演名称" />
				</uni-forms-item>
				<uni-forms-item label="路演简介" required name="project_brief" v-if="form.type=='1'">
					<uni-easyinput v-model="form.project_brief" placeholder="请输入路演简介" />
				</uni-forms-item>
				<uni-forms-item label="路演附件" required name="project_file" v-if="form.type=='1'">
					<upload class='upload' :list="form.project_file" name="project_file" :count="1" @uplSuc="uplSuc"
						@uplDel="uplDel">
					</upload>
				</uni-forms-item>
			</uni-forms>
			<view class="button">
				<view class="button_remark">*修改报名信息将会重新进行审核</view>
				<button type="primary" @click="submit('baseForm')">保存</button>
			</view>
		</view>
	</view>
</template>

<script>
	import upload from '../../components/upload/index.vue';
	import linSelect from '../../components/lin-select/index.vue';
	import moment from 'moment';
	export default {
		components: {
			upload,
			linSelect
		},
		data() {
			return {
				id: "",
				user: {},
				form: {
					name: "",
					type: "",
					company: "",
					phone: "",
					project_name: "",
					project_brief: "",
					project_file: [],
				},
				typeList: [],
				signList: [],
				companyList: [],
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '姓名不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '联系方式不能为空'
						}]
					},
				},
			}
		},
		onLoad: async function(e) {
			const that = this;
			that.$set(that, `id`, e && e.id || '');
			await that.searchToken();
			await that.searchOther();
			await that.search();
		},
		methods: {
			// 用户信息
			searchToken() {
				const that = this;
				try {
					const res = uni.getStorageSync('token');
					if (res) {
						const user = that.$jwt(res);
						that.$set(that, `user`, user);
					}
				} catch (e) {}
			},
			async searchOther() {
				const that = this;
				let res;
				// 查询证件类型
				res = await that.$api(`/dictData`, 'GET', {
					code: 'cardType',
					is_use: '0',
				})
				if (res.errcode == '0') that.$set(that, `typeList`, res.data);
				// 查询证件类型
				res = await that.$api(`/dictData`, 'GET', {
					code: 'signType',
					is_use: '0',
				})
				if (res.errcode == '0') that.$set(that, `signList`, res.data);
			},
			// 查询
			async search() {
				const that = this;
				if (that.id) {
					let res;
					res = await that.$api(`/sign/${that.id}`, 'GET', {})
					if (res.errcode == '0') {
						that.$set(that, `form`, res.data)
					} else {
						uni.showToast({
							title: res.errmsg,
						});
					}
				}
			},
			// 图片上传
			uplSuc(e) {
				const that = this;
				that.$set(that.form, `${e.name}`, [...that.form[e.name], e.data]);
			},
			// 图片删除
			uplDel(e) {
				const that = this;
				let data = that.form[e.name];
				let arr = data.filter((i, index) => index != e.data.index);
				that.$set(that.form, `${e.name}`, arr)
			},
			// 远程加载数据
			toCompany(name) {
				const that = this;
				setTimeout(async () => {
					const res = await that.$api(`/company`, 'GET', {
						status: '1',
						name
					})
					if (res.errcode == '0') {
						if (res.total > 0) that.$set(that, `companyList`, res.data)
						else that.$set(that, `companyList`, [{
							value: name,
							name
						}])
					}
				}, 1000)
			},
			// 保存
			submit(ref) {
				const that = this;
				that.$refs[ref].validate().then(async res => {
					let arr;
					const data = {
						id: that.id,
						project_file: that.form.project_file,
						company: that.form.company,
						time: moment().format('YYYY-MM-DD HH:mm:ss'),
						status: '0'
					}
					if (res.type == '1') {
						delete res.project_name
						delete res.project_brief
						delete res.project_file
					}
					arr = await that.$api(`/sign/${that.id}`, 'POST', {
						...res,
						...data
					})
					if (arr.errcode == '0') {
						uni.showModal({
							content: "修改报名信息成功！",
							showCancel: false
						});
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.showToast({
							title: arr.errmsg,
						});
					}
				}).catch(err => {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		padding: 0 3vw;

		.one {
			.button_remark {
				margin: 2vw 0;
				text-indent: 10px;
				color: var(--fF0Color);
				font-size: var(--font12Size);
			}

			/deep/ .uni-forms-item__content {
				display: flex;
				align-items: center;
			}

			.button {
				margin: 2vw 0 0 0;

				button {
					background-color: var(--f3CColor);
					font-size: var(--font14Size);
					border-radius: 2vw;
				}
			}
		}
	}
</style>