Applet/pages/report/double.vue

<template>
	<view class="container">
		<uni-forms ref="baseForm" :modelValue="formData" :rules="rules" :label-width="80">
			<uni-forms-item v-for="item in fileds" :label="item.title" :name="item.name"  :key="item.name" required>
				<uni-easyinput v-if="!item.formatter && !item.type" type="text" v-model="formData[item.name]" :placeholder="`请输入${item.title}`" />
				<uni-data-checkbox v-model="formData[item.name]" v-if="item.formatter && item.type == 'checkbox'" :multiple="item.multiple || false" :localdata="item.dict" />
				<uni-data-select v-model="formData[item.name]" v-if="item.formatter && item.type == 'select'" :localdata="item.dict"></uni-data-select>
				<view class="upVideo" v-if="item.type == 'video' && !formData[item.name]" @click="upVideo">
					<uni-icons color="#cacaca" class="videoIcon" type="videocam" size="30"></uni-icons>
				</view>
				<video controls v-if="item.type == 'video' && formData[item.name]" class="uploadVideo" :src="filesUrl + formData[item.name]"></video>
			</uni-forms-item>
		</uni-forms>
		<button :disabled="btnText == '已报到'" class="btn" type="primary" @click="submitForm">{{ btnText }}</button>
	</view>
</template>

<script>
	import request from '../../api/report.js';
	import { BASE_URL } from '../../env.js';
	export default {
		data() {
			return {
				btnText: '提交',
				baseUrl: BASE_URL.url,
				filesUrl: BASE_URL.fileUrl,
				formData: {},
				fileds: [
					{ name: 'name', title: '姓名' },
					{ name: 'sex', title: '性别', formatter: 'dict:user_sex_type', type: 'checkbox' },
					{ name: 'phone', title: '联系电话' },
					{ name: 'workUnit', title: '工作单位' },
					{ name: 'reportLocation', title: '报到位置' },
					{ name: 'reportType', title: '报到类别', formatter: 'dict:baodao_type', type: 'select' },
					{ name: 'residence', title: '居住地' },
					{ name: 'content', title: '报到内容' },
					// { name: 'videoPath', title: '影片', type: 'video' },
				],
				rules: {
					name: {
						rules:[{ required: true, errorMessage: '请填写姓名' }]
					},
					sex: {
						rules:[{ required: true, errorMessage: '请选择性别' }]
					},
					phone: {
						rules:[{ required: true, errorMessage: '请填写联系电话' }]
					},
					workUnit: {
						rules:[{ required: true, errorMessage: '请填写工作单位' }]
					},
					reportLocation: {
						rules:[{ required: true, errorMessage: '请填写报到位置' }]
					},
					reportType: {
						rules:[{ required: true, errorMessage: '请选择报到类别' }]
					},
					residence: {
						rules:[{ required: true, errorMessage: '请填写居住地' }]
					},
					content: {
						rules:[{ required: true, errorMessage: '请填写报到内容' }]
					},
					// videoPath: {
					// 	rules:[{ required: true, errorMessage: '请上传影片' }]
					// }
				}
			}
		},
		async mounted() {
			const res = await request.getDyStatus();
			if (res.data) {
				this.formData = { ...res.data, sex: String(res.data.sex), reportType: String(res.data.reportType) };;
				this.btnText = '已报到';
			}
			await this.setDict();
		},
		onShow() {},
		methods: {
			async setDict() {
				this.fileds = await Promise.all(this.fileds.map(async e => {
					if (e.formatter && e.formatter.includes('dict')) {
						const dictType = e.formatter.split(':')[1];
						const res = await request.getDict(dictType);
						if (res.code == 200) e.dict = res.data.map(l => ({ ...l, value: l.dictValue, text: l.dictLabel }));
					}
					return e;
				}));
			},
			async upVideo() {
				const _this = this;
				wx.chooseMedia({
					  count: 1,  //上传视频的个数
					  mediaType:['video'],  //限制上传的类型为video
					  sourceType:['album', 'camera'], //视频选择来源
					  maxDuration: 30, //拍摄限制时间
					  camera: 'back',  //采用后置摄像头
					  success:function(res){
						const token = uni.getStorageSync('token');
						//获取临时存放的视频资源
						let tempFilePath=res.tempFiles[0].tempFilePath
						// 上传视频
						uni.uploadFile({
							url: _this.baseUrl + '/activity/photo',
							name: 'file',
							header: {
								'Authorization': `Bearer ${token}`
							},
							filePath: tempFilePath,
							success: (uploadFileRes) => {
								const obj = JSON.parse(uploadFileRes.data);
								_this.$set(_this.formData, 'videoPath', obj.imgUrl);
							},
							fail() {
								wx.showToast({
									title: '上传失败'
								})
							},
							complete() {
								wx.hideLoading();
							}
						});
					  },
					})
			},
			submitForm() {
				this.$refs.baseForm.validate().then(async valid=>{
					const res = await request.submitdy(this.formData);
					if (res.code == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 2000,
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1000)
					}
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			}
		},
		// 页面生命周期中onReachBottom（页面滚动到底部的事件）
		onReachBottom() {}
	}
</script>

<style>
	.uni-forms {
		width: 90%;
		margin: 10px auto;
	}
	.btn {
		width: 90%;
		margin: 0 auto;
	}
	.upVideo {
		width: 100px;
		height: 100px;
		border: 1px solid #cacaca;
		border-radius: 12px;
	}
	.videoIcon {
		display: block;
		text-align: center;
		line-height: 100px;
	}
	.uploadVideo {
		width: 100px;
		height: 100px;
	}
</style>