lvdao-miniapp/pages/complaint/complaint.vue

<template>
	<view class="page">
		<view class="item">
			<view class="contents">
				<view class="add-list">
					<view class="list">
						<view class="title">
							<text style="font-weight: bold;">*投诉类型</text>
							<!-- <text class="star">*</text> -->
						</view>
						<view class="content" @click="chooseLocation(1)" style="width: 25%;">
							<u-input v-model="ruleForm.complaintType" type="select" disabledColor="#ffffff"
								placeholder="请选择" :border="false" suffixIcon="arrow-right" style="pointer-events:none">
							</u-input>
						</view>
					</view>
					<view class="list">
						<view class="title">
							<text style="font-weight: bold;">*问题描述</text>
							<!-- <text class="star">*</text> -->
						</view>
						<view class="content">
							<input type="text" placeholder="请输入" v-model="ruleForm.problemDescription">
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="contents" style="background-color:#fff;padding:10px 20px;">
				<view class="feedback-data">
					<view>
						<view class="title">
							<text style="font-weight: bold;">*现场照片</text>
							<!-- <text class="star">*</text> -->
						</view>
					</view>
					<view class="voucher-img">
						<view class="voucher-list">
							<u-upload :action="$upload" :auto-upload="false" ref="uUpload" :max-count="5"
								@on-choose-complete="(response, file, fileList) => onsuccess1(response, file, fileList, 'uUpload')"></u-upload>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="item">
			<view class="contents" style="background-color:#fff;padding:10px 20px;">
				<view class="feedback-data">
					<view>
						<view class="title">
							<text style="font-weight: bold;">*备注信息</text>
							<!-- <text class="star">*</text> -->
						</view>
					</view>
					<view class="voucher-img">
						<view class="voucher-list" style="width: 100%;">
							<view class="" style="background-color: #F0F0F0;border-radius: 20rpx;">
								<textarea name="" id="" cols="30" rows="10" placeholder="请输入"
									style="font-size: 24rpx;background-color: #F0F0F0;border-radius: 20rpx;width: 96%;margin: 0 auto;padding: 20rpx;"
									v-model="ruleForm.remark"></textarea>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-select v-model="popup1" mode="mutil-column-auto" :list="list" @confirm="pops" label-name="label"
			value-name="value"></u-select>
		<!-- 保存按钮 -->
		<!-- <view class="page-footer">
			<u-button type="success" style="flex: 1; margin: 0 10px;" >提交</u-button>
		</view> -->
		<view style="height: 140rpx;"></view>
		<view class="page-footer">
			<view class="footer-btn">
				<u-button type="success" style="width: 100%;border-radius: 10px;" @click="submit">提交</u-button>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				fileList: [],
				ruleForm: {
					onSitePhoto: [],
					status: '1'
				},
				list: [{
						value: '物业投诉',
						label: '物业投诉'
					},
					{
						value: '违规投诉',
						label: '违规投诉'
					}
				],
				popup1: false
			}
		},
		methods: {
			chooseLocation(val, item) {
				this.popup1 = true
			},
			pops(val) {
				this.ruleForm.complaintType = val[0].label
			},
			check() {
				if (!this.ruleForm.complaintType) {
					uni.showToast({
						icon: 'none',
						title: '请选择投诉类型'
					});
					return false;
				}
				if (!this.ruleForm.problemDescription) {
					uni.showToast({
						icon: 'none',
						title: '请输入问题描述'
					});
					return false;
				}
				if (this.ruleForm.onSitePhoto.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请上传现场图片'
					});
					return false;
				}
				if (!this.ruleForm.remark) {
					uni.showToast({
						icon: 'none',
						title: '请输入备注信息'
					});
					return false;
				}
				return true;
			},
			submit() {
				let show = this.check()
				if (show == false) {
					return
				}
				this.ruleForm.applicationTime = this.currentTime()
				this.ruleForm.createUser = uni.getStorageSync('user').phone
				this.ruleForm.onSitePhoto = this.ruleForm.onSitePhoto.map(item => {
					return item.replace(this.$img, '');
				})
				let info = {
					...this.ruleForm,
					onSitePhoto: this.ruleForm.onSitePhoto.join(','),
				}
				this.$http.sendRequest('/cereComplaintsSuggestions/add', 'POST', info, 1).then(res => {
					uni.redirectTo({
						url: '/pagesA/tishi/tishi'
					})
				}).catch(err => {
					console.log(err)
					//请求失败
				})
			},
			// 获取时间
			currentTime() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1; // 月份从0~11，所以加一
				let day = date.getDate();
				let hours = date.getHours();
				let minutes = date.getMinutes();
				let seconds = date.getSeconds();
				// 为月、日、时、分、秒添加前导零（如果需要）
				month = month < 10 ? '0' + month : month;
				day = day < 10 ? '0' + day : day;
				hours = hours < 10 ? '0' + hours : hours;
				minutes = minutes < 10 ? '0' + minutes : minutes;
				seconds = seconds < 10 ? '0' + seconds : seconds;
				// 拼接日期和时间字符串
				let strDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				return strDate;
			},
			onsuccess1(e, file, fileList, ziduan) {
				console.error(e, file, fileList, ziduan)
				uni.uploadFile({
					url: this.$upload, // 仅为示例，请替换为您的服务器上传接口
					filePath: e[0].url,
					name: 'file', // 后端接收的文件参数名
					formData: {
						filePath: 'xcx', // 其他表单数据
					},
					success: (uploadFileRes) => {
						this.ruleForm.onSitePhoto.push(this.$img + JSON.parse(uploadFileRes.data).data)
						uni.showToast({
							title: '上传成功',
							icon: 'success',
						});
					},
					fail: (err) => {
						console.error('上传失败', err);
						uni.showToast({
							title: '上传失败',
							icon: 'none',
						});
					},
				});
			},
		}
	}
</script>
<style scoped lang="scss">
	@import 'complaint.scss';
</style>