Applet/pages/report/service.vue

<template>
	<view class="container">
		<uni-card v-if="isdy == 0">
			<uni-section title="您还不能签到" type="line">
				<text class="msg">您需要进行党员或下沉干部报到后，才能进行签到。</text>
			</uni-section>
		</uni-card>
		<uni-forms v-else 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 == 'upload' && !formData[item.name]" @click="upVideo">
					<uni-icons color="#cacaca" class="videoIcon" type="videocam" size="30"></uni-icons>
				</view>
				<uni-data-select v-model="formData[item.name]" v-if="item.type == 'picker'" :localdata="item.dict" placeholder="请选择社区"></uni-data-select>
				 <image class="uploadVideo" v-if="item.type == 'upload' && formData[item.name]" :mode="item.mode" :src="filesUrl + formData[item.name]"></image>
				<!-- <video controls v-if="item.type == 'video' && formData[item.name]" class="uploadVideo" :src="filesUrl + formData[item.name]"></video> -->
			</uni-forms-item>
		</uni-forms>
		<button v-if="isdy != 0" :disabled="formData && formData.userId" 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 {
				pickerList: [],
				pickerValue: '',
				pickerName: '',
				indicatorStyle: `height: 50px`,
				visible: false,
				btnText: '签到',
				baseUrl: BASE_URL.url,
				filesUrl: BASE_URL.fileUrl,
				formData: {},
				fileds: [
					{ name: 'deptId', title: '报到社区', type: 'picker' },
					{ name: 'description', title: '报到内容' },
					{ name: 'photo', title: '上传照片', type: 'upload' },
				],
				rules: {
					photo: {
						rules:[{ required: true, errorMessage: '请上传照片' }]
					},
					description: {
						rules:[{ required: true, errorMessage: '请填写报到内容' }]
					},
					deptId: {
						rules:[{ required: true, errorMessage: '请选择报到社区' }]
					},
				},
				isdy: 1
			}
		},
		async mounted() {
			const isdy = await request.getisdy();
			this.isdy = isdy.data;
			if (isdy && isdy.data == 0) {
				return;
			}
			const getCommunity = await request.getCommunity();
			this.pickerList = getCommunity.rows;
			await this.setDict();
			const is_status = await request.getqdstatus();
			if (is_status.data) {
				this.formData = is_status.data;
				this.btnText = '已签到'
			}
		},
		onShow() {},
		methods: {
			// 社区选择改变
			bindChange(e) {
				console.log(e, '社区选择改变')
			},
			// 选择社区
			pickerClick() {
				console.log('选择社区')
				this.visible = true;
			},
			async setDict() {
				this.fileds = await Promise.all(this.fileds.map(async e => {
					if (e.name == 'deptId') e.dict = this.pickerList.map(e => ({ ...e, text: e.deptName, value: e.deptId }));
					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;
				const token = uni.getStorageSync('token');
				uni.chooseImage({
					count: 1,
					success: async (chooseImageRes) => {
						wx.showLoading({
							title: '上传中'
						})
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: BASE_URL.url + '/activity/photo',
							name: 'file',
							header: {
								'Authorization': `Bearer ${token}`
							},
							filePath: tempFilePaths[0],
							success: (uploadFileRes) => {
								const obj = JSON.parse(uploadFileRes.data);
								_this.$set(_this.formData, 'photo', obj.imgUrl);
							},
							fail(e) {
								console.log(e)
								wx.showToast({
									title: '上传失败'
								})
							},
							complete() {
								wx.hideLoading();
							}
						});
					}
				});
			},
			submitForm() {
				this.$refs.baseForm.validate().then(async valid=>{
					const res = await request.clockin(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;
	}
	.pickerItem {
		text-indent: 0.5em;
		border: 1px solid #e8e8e8;
		line-height: 2.5em;
	}
	.msg {
		color: red;
		font-size: 12px;
	}
</style>