H5/pages/feedback/feedback.vue

<template>
	<view>
		<view class="hint">
			尊敬的市民朋友，您好！【武汉公安政务服务地图】正在试运行中，欢迎提出宝贵的意见和建议。
		</view>
		<view class="from">
			<view class="from-item">
				<view class="item-label sign">
					评价
				</view>
				<view class="item-value" style="padding-left: 20rpx;">
					<u-rate :size="40" v-model="from.score"></u-rate>
				</view>
			</view>

			<view class="from-item">
				<view class="item-label sign">
					问题分类
				</view>
				<view class="item-value select-item" @click.stop="$refs.SelectClassifyRefs.open()">
					<view :class="['select-value' , isPlaceholder(from.feedbackType) ? 'input-placeholder' : '']">
						{{ isPlaceholder(from.feedbackType) ? '请选择' :  getLable(from.feedbackType) }}
					</view>
					<u-icon class="select-icon" size="40" name="arrow-down" />
				</view>
			</view>

			<view class="from-item">
				<view class="item-label sign">
					联系方式
				</view>
				<view class="item-value">
					<u--input placeholder="请输入内容" border="surround" v-model="from.phone" />
				</view>
			</view>

			<view class="from-item from-item-textarea ">
				<view class="item-label sign">
					建议内容
				</view>
				<view class="item-value">
					<u--textarea v-model="from.feedbackContent" placeholder="请输入内容" autoHeight count :maxlength="400" />
				</view>
			</view>

			<view class="from-item" v-if="CaptchaImg">
				<view class="item-label">
					验证码
				</view>
				<view class="item-value from-item-code">
					<u--input class="code-input" placeholder="请输入内容" border="surround" v-model="from.validCode" />
					<image class="code-img" :src="CaptchaImg" mode="scaleToFill" />
				</view>
			</view>
			<view class="from-item file-box">
				<view class="file-item" v-for="item in (from.attachmentList||[])">
					<image class="file-value" :src="item.annexUrl" mode="scaleToFill" />
				</view>
				<view class="file-item updata-img-box" @click.stop="handlerUploadImage"
					v-if="!from.attachmentList || from.attachmentList.length < fileNum">
					<image class="camera" src="/static/images/camera.png" mode="aspectFit" />
					<text class="text">上传照片</text>
				</view>
			</view>
			<view class="sign file-hint"> 上传类型:照片jpg、png；</view>
			<view class="from-item submit">
				<view class="submit-btn" @click.stop="SubmitFeedback">
					提 交
				</view>
			</view>
		</view>
		<SelectClassify ref="SelectClassifyRefs" :list="FeedbackType" @chang="r => from.feedbackType = r" />
	</view>
</template>

<script>
	import SelectClassify from "./SelectClassify.vue";
	import { uploadImage } from "@/utils/tool.js"
	import { getDictTree_Api, getPicCaptcha_Api, addMapuserfeedback_Api } from "@/api/feedback.js";
	export default {
		components: { SelectClassify },
		data() {
			return {
				singleSize: uni.upx2px(210),
				FeedbackType: [],
				CaptchaImg: undefined,
				SubmitLoading: false,
				// isShow
				from: {},
				fileNum: 6
			};
		},
		onLoad() {
			this.init()
			this.getDictTree()
		},
		methods: {
			init() {
				this.from = {
					score: 0,
					feedbackType: undefined,
					phone: undefined,
					feedbackContent: undefined,
					validCode: undefined,
					attachmentList: undefined
				}
			},
			getLable(val){
				const item  = this.FeedbackType.find(el => el.value === val)
				return item ? item.label : item
			},
			isPlaceholder(val) {
				return val ? false : true
			},
			getDictTree() {
				getDictTree_Api("FEEDBACK_TYPE").then(res => {
					const arr = [];
					if (res && Object.keys(res).length) {
						for (var key in res) {
							console.log("key === ", res, key)
							arr.push({
								label: res[key],
								value: key
							})
						}
					}
					this.FeedbackType = arr || [];
				})
			},
			handlerUploadImage() {
				const L_ = this.from.attachmentList ? this.from.attachmentList.length : 0;
				const N_ = this.fileNum - L_;
				if (N_ && N_ > 0) {
					uploadImage(N_).then(res => {
						console.log("uploadImage = ", res)
						this.from.attachmentList = [...(this.from.attachmentList || []), ...(res || [])]
					})
				} else {
					uni.showToast({
						title: `只能上传${this.fileNum}张`,
						icon: 'none'
					})
				}
			},

			async SubmitFeedback() {
				try {
					if (this.SubmitLoading) return
					this.SubmitLoading = true;
					uni.showLoading()
					if (!this.from.score) {
						throw new Error("请先选择评分")
					}
					if (!this.from.feedbackType) {
						throw new Error("请先选问题分类")
					}
					if (this.from.phone) {
						const phone = this.from.phone + ''
						const regex = /^(0|[1-9]\d*)$/;
						if (!regex.test(phone) || phone.length !== 11) {
							throw new Error("请输入正确的手机号码")
						}
					}else{
						throw new Error("请输入手机号码")
					};
					
					if (!this.from.feedbackContent) {
						throw new Error("请输入建议内容")
					}
					if (this.CaptchaImg && !this.from.validCode) {
						throw new Error("请输入验证码")
					}
					const { data } = await getPicCaptcha_Api();
					if (data) {
						this.CaptchaImg = data;
						uni.showToast({
							title: '请先输入验证码',
							icon: 'none'
						}); 
						return
					};
					await addMapuserfeedback_Api(this.from)
					uni.showToast({
						title: '提交成功'
					});

					this.init()
				} catch (error) {
					console.log("error.message = ", error.message)
					if (error.message) {
						uni.showToast({
							title: error.message,
							icon: 'none'
						});
					}
					//TODO handle the exception
				} finally {
					uni.hideLoading()
					this.SubmitLoading = false;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.hint {
		font-size: 28rpx;
		padding: 20rpx;
		background-color: #E5F3FE;
		color: #68A1E4;
	}

	.from {
		width: 100%;
		padding: 20rpx 30rpx;

		.from-item {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			min-height: 100rpx;
			padding: 10rpx 0;
			border-bottom: 0.5px solid #dadbde;

			.item-label {
				width: 180rpx;
			}

			.item-value {
				width: calc(100% - 180rpx);
			}
		}

		.from-item-textarea {
			.item-label {
				height: 100rpx;
				line-height: 100rpx;
			}

			align-items: flex-start;

			::v-deep .u-textarea__field {
				min-height: 200rpx;
			}
		}

		.select-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 20rpx;
		}

		.from-item-code {
			display: flex;
			justify-content: space-between;
			height: 80rpx;

			.code-input {
				width: calc(100% - 180rpx);
			}

			.code-img {
				width: 180rpx;
				height: 100%;
			}
		}

		.submit-btn {
			width: 620rpx;
			height: 80rpx;
			margin: 50rpx auto;
			text-align: center;
			line-height: 80rpx;
			background-color: #1D72E6;
			color: #fff;
			border-radius: 10rpx;
		}
	}

	.file-box {
		flex-wrap: wrap;
		justify-content: flex-start !important;
		padding: 50rpx 0 0 0 !important;

		.file-item {
			width: 210rpx;
			height: 210rpx;
			flex-shrink: 0;
			margin: 0 30rpx 30rpx 0;
			border-radius: 10rpx;
			overflow: hidden;

			&:nth-child(3n) {
				margin-right: 0;
			}

			.file-value {
				width: 100%;
				height: 100%;
			}
		}

		.u-album {
			uni-image {
				width: 210rpx !important;
				height: 210rpx !important;
			}
		}

		.updata-img-box {
			background-color: #EFEFEF;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			border: 1rpx solid #BBBBBB;

			.camera {
				width: 80rpx;
				height: 80rpx;
			}

			.text {
				color: #9A9A9A;
			}
		}

	}



	.u-input,
	.file-box,
	.submit {
		border: none !important;
	}

	.sign {
		position: relative;
		padding-left: 20rpx;

		&::before {
			position: absolute;
			left: 0;
			top: 0;
			content: "*";
			color: red;
			font-size: 40rpx;
		}
	}

	.file-hint {
		color: red;
	}

	.input-placeholder {
		color: rgb(192, 196, 204);
		padding: 0 9rpx;
	}
</style>