cxyy-applet/pagesMy/activity/add.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="cardType">
					<uni-data-checkbox v-model="form.cardType" :localdata="typeList"
						:map="{text:'label',value:'value'}" />
				</uni-forms-item>
				<uni-forms-item label="证件号码" required name="card">
					<uni-easyinput v-model="form.card" 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="email">
					<uni-easyinput v-model="form.email" placeholder="请输入电子邮箱" />
				</uni-forms-item>
				<uni-forms-item label="微信/QQ" required name="communication">
					<uni-easyinput v-model="form.communication" placeholder="请输入微信/QQ" />
				</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 moment from 'moment';
	export default {
		data() {
			return {
				id: "",
				user: {},
				form: {
					name: "",
					cardType: "",
					card: "",
					phone: "",
					email: "",
					communication: ""
				},
				typeList: [],
				// 校验规则
				rules: {
					name: {
						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);
			},
			// 查询
			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,
						});
					}
				}
			},
			// 保存
			submit(ref) {
				const that = this;
				that.$refs[ref].validate().then(async res => {
					let arr;
					const data = {
						id: that.id,
						time: moment().format('YYYY-MM-DD HH:mm:ss'),
						status: '0'
					}
					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);
			}

			.button {
				margin: 2vw 0 0 0;

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