luoshan_web/pages/command/finish.vue

<template>
	<view class="container">
		<view class="mim-view">
			<view class="mim-font-16 bold mim-flex-wrap-left">
				<text class="mim-font-16 bold">完成日期</text>
				<text class="mim-font-16 bold mimRed">*</text>
			</view>
			<view class="select">
				<u-input
					type="select"
					v-model="form.complain_date"
					placeholder="请选择完成的日期"
					placeholder-style="color: #BDBDBD;"
					height="96"
					cursor-spacing="12"
					:clearable="false"
					disabled
					:custom-style="customStyle"
					@click="show = true"
				/>
				<u-image src="@/static/icon/jt.png" class="select_img" width="64rpx" height="64rpx"></u-image>
				<u-calendar v-model="show" mode="date" @change="change"></u-calendar>
			</view>
		</view>
		<view class="mim-view" style="margin-top: -24rpx">
			<view class="mim-font-16 bold mim-flex-wrap-left">
				<text class="mim-font-16 bold">完成意见</text>
				<text class="mim-font-16 bold mimRed">*</text>
			</view>
			<u-input
				type="textarea"
				v-model="form.deal_idea"
				placeholder="请填写你的完成意见"
				placeholder-style="color: #BDBDBD;"
				height="240"
				:auto-height="true"
				:clearable="false"
				:custom-style="customTestStyle"
				maxlength="-1"
				cursor-spacing="12"
			/>
		</view>

		<view class="mim-view">
			<text class="mim-font-16 bold">附件上传</text>
			<view class="wrap">
				<view class="mim-flex-wrap-left">
					<u-upload
						:custom-btn="true"
						ref="uUpload"
						:auto-upload="true"
						:show-upload-list="showUploadList"
						:max-size="20 * 1024 * 1024"
						max-count="9"
						:action="action"
						:form-data="formData"
						:header="header"
						accept="video"
					>
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
							<view class="mim-flex-vertical-center">
								<u-image src="@/static/icon/camera.png" width="40rpx" height="40rpx"></u-image>
								<view class="uploading_test">上传文件</view>
							</view>
						</view>
					</u-upload>
					<view class="pre-box" v-if="!showUploadList">
						<view class="pre-item" v-for="(item, index) in lists" :key="index">
							<view style="position: relative">
								<image class="pre-item-image" :src="item.url" mode="aspectFill" @click="previewImage(index)"></image>
								<u-image src="@/static/icon/cuo.png" mode="widthFix" class="cha" @click="deleteImage(index)"></u-image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="mim-view mim-flex-wrap-space-between" style="margin-top: 24rpx; padding-bottom: 200rpx">
			<view class="mim-font-16 bold mim-flex-wrap-left">
				<text class="mim-font-16 bold">群众满意度</text>
				<text class="mim-font-16 bold mimRed">*</text>
			</view>
			<view>
				<u-number-box v-model="form.deal_evaluation" bg-color="#f7f7f7" :min="0" :max="100" @change="valChange"></u-number-box>
			</view>
		</view>

		<view class="mim-view-list"></view>
		<view class="mim-view-last"></view>
		<view class="mim-foot">
			<view class="mim-foot-button mim-flex-wrap mim-button" :class="{ disabled: isButtonDisabled }" @click="save">确定</view>
		</view>
		<UserPrivacy ref="privacy"></UserPrivacy>
	</view>
</template>

<script>
import UserPrivacy from '@/components/userPrivacy/userPrivacy.vue';
import { prodUrl } from '@/common/settings.js';
export default {
	components: {
		UserPrivacy
	},
	data() {
		return {
			customStyle: {
				marginTop: '24rpx',
				fontSize: '32rpx',
				paddingLeft: '24rpx',
				background: '#f7f7f7',
				borderRadius: '8rpx'
			},
			customTestStyle: {
				'box-sizing': 'border-box',
				marginTop: '24rpx',
				fontSize: '32rpx',
				padding: '32rpx 24rpx',
				background: '#f7f7f7',
				borderRadius: '8rpx'
			},
			show: false,
			form: {
				id: '',
				complain_date: '',
				deal_file_ids: [],
				deal_idea: '',
				deal_evaluation: 100
			},
			formData: {
				dir: 'file_account',
				file_type: 'file'
			},
			header: {
				Authorization: uni.getStorageSync('token')
			},
			action: prodUrl + '/base/resource/upload', //上传的地址
			showUploadList: false,
			lists: [],
			isButtonDisabled: false // 按钮是否禁用
		};
	},
	onLoad(e) {
		this.form.id = e.id;
		this.$refs.privacy.getPrivacySettingFn();
		wx.onNeedPrivacyAuthorization((resolve, eventInfo) => {
			console.log('触发本次事件的接口是：' + eventInfo.referrer);
			this.$refs.privacy.getPrivacySettingFn();
			resolve({ event: 'disagree' });
		});
	},
	onReady() {
		this.lists = this.$refs.uUpload.lists;
	},
	methods: {
		//放大图片查看
		previewImage(index) {
			const urls = this.lists.map((item) => item.url);
			const current = urls[index]; // 当前显示的图片地址
			uni.previewImage({
				current: current, // 当前显示的图片地址
				urls: urls // 图片地址数组
			});
		},
		change(e) {
			console.log(e);
			this.form.complain_date = e.result;
		},
		valChange(e) {
			this.form.deal_evaluation = e.value;
		},
		//删除图片
		deleteImage(index) {
			this.show = true;
			this.confirmDel(index);
		},
		confirmDel(index) {
			this.show = false;
			this.lists.splice(index, 1); //手动移除列表的某一个图片，index为lists数组的索引
		},
		save() {
			if (this.isButtonDisabled) {
				return false; // 如果按钮已禁用，直接返回
			}
			if (!this.form.complain_date) {
				this.$u.toast('请选择完成日期！');
				return false;
			}
			if (!this.form.deal_idea) {
				this.$u.toast('请填写完成意见！');
				return false;
			}
			this.form.deal_file_ids = this.lists.map((item) => item.response.data.id);
			console.log(this.form);
			this.isButtonDisabled = true; // 禁用按钮
			this.doCompleteFn();
		},
		//完成
		async doCompleteFn() {
			setTimeout(() => {
				this.isButtonDisabled = false; // 启用按钮
			}, 500);
			const res = await this.$u.api.doComplete(this.form);
			if (res.status === 'success') {
				this.$u.toast(res.message);
				setTimeout(() => {
					this.$u.route({
						type: 'navigateBack',
						url: '/pages/throughTrain/throughTrainDetails'
					});
				}, 1500);
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;

	.container {
		.mim-view {
			margin: 0;
			border-radius: 0;

			u-input {
				/deep/ .u-input__right-icon {
					display: none !important;
				}
			}

			.select {
				position: relative;

				.select_img {
					position: absolute;
					right: 0;
					top: 38rpx;
				}
			}

			.wrap {
				margin-top: 24rpx;
			}

			.slot-btn {
				width: 144rpx;
				height: 144rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #ffffff;
				box-sizing: border-box;
				border: 2px dashed #dbdbdb;
				margin-bottom: 20rpx;
			}

			.slot-btn__hover {
				background-color: rgb(235, 236, 238);
			}

			.uploading_test {
				font-size: 24rpx;
				font-weight: normal;
				line-height: 24rpx;
				letter-spacing: 0em;
				color: #dbdbdb;
				margin-top: 20rpx;
			}

			.pre-box {
				display: flex;
				align-items: center;
				// justify-content: space-between;
				flex-wrap: wrap;
			}

			.pre-item {
				width: 140rpx;
				height: 140rpx;
				overflow: hidden;
				position: relative;
				margin-left: 20rpx;
				margin-bottom: 20rpx;
			}

			.pre-item-image {
				width: 100%;
				height: 140rpx;
			}

			.cha {
				position: absolute;
				height: 30rpx;
				width: 30rpx;
				right: 6rpx;
				top: 6rpx;
			}
		}

		.mim-view-last {
			padding: 56rpx;
			background: transparent;
		}

		.mim-foot {
			width: 100%;
			height: 136rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #ffffff;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			z-index: 9;

			&-button {
				border-radius: 48rpx;
				opacity: 1;
				background: #de2e27;
				font-size: 32rpx;
				font-weight: normal;
				line-height: 32rpx;
				letter-spacing: 0px;
				color: #ffffff;
				height: 96rpx;
				cursor: pointer;
			}
		}
	}
}
</style>