yanzong_qianduan/pages/feedback/form.vue

<template>
	<view class="container">
		<template v-if="!isSubmit">
			<view class="form">
				<view class="form-item">
					<view class="form-item-label">
						<text class="label-flag">*</text>问题类型
					</view>
					<view class="form-item-content">
						<view v-for="(item, index) in typeList" :key="index" class="type" @click="form.type = index + 1">
							<image v-if="form.type !== index + 1" src="/static/feedback/circle.png" mode="aspectFill"></image>
							<image v-else src="/static/feedback/circle-choose.png" mode="aspectFill"></image>
							{{ item }}
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">
						<text class="label-flag">*</text>反馈与建议
					</view>
					<view class="form-item-content">
						<view class="textarea-box">
							<textarea v-model="form.suggest" placeholder="您填写的信息越全，越有利于问题得到快速解决~" placeholder-class="textarea-placeholer" maxlength="299" />
							<view class="text-num">已写<text>{{ form.suggest.length }}</text>/299个字</view>
						</view>
						<view class="image-list">
							<view v-for="(item, index) in form.images" :key="index" class="image">
								<image :src="item" mode="aspectFill" @click="previewImage(item)"></image>
								<image src="/static/delete.png" mode="aspectFill" class="delete" @click.stop="deleteImage(index)"></image>
							</view>
							<view v-if="form.images.length < 5" class="upload-btn" @click="addImage">
								<image src="/static/feedback/photo.png" mode="aspectFill"></image>
								<view class="tip">添加照片</view>
								<view class="sub-tip">最多5张</view>
							</view>
							<view class="image-num"><text>{{ form.images.length }}</text>/5</view>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-content" style="padding: 0 30rpx;">
						<view class="content-info">
							<view class="info-name">您的姓名</view>
							<input type="text" v-model="form.name" placeholder="请填写您的名字" placeholder-class="input-placeholder" />
						</view>
						<view class="content-info">
							<view class="info-name">您的电话</view>
							<input type="number" v-model="form.phone" placeholder="请填写可以联系到您的手机号码" placeholder-class="input-placeholder" />
						</view>
						<view class="content-info">
							<view class="info-name">您的单位</view>
							<input type="text" v-model="form.unit" placeholder="请填写您商城认证的营业执照名称" placeholder-class="input-placeholder" />
						</view>
					</view>
				</view>
			</view>
			<view class="submit" @click="submit">提交</view>
		</template>
		<template v-else>
			<view class="success">
				<image :src="$picUrl+ '/static/feedbackSuccess.png'" mode="aspectFill"></image>
				<view class="success-tip">提交成功</view>
				<text>您的反馈意见已经提交成功，</text>
				<text>预计1-2个工作日内与您联系。</text>
			</view>
			<view class="submit back" @click="back">完成</view>
		</template>
	</view>
</template>

<script>
import * as UploadApi from '@/api/upload'
import * as Api from '@/api/feedback/index.js'
	export default {
		data() {
			return {
				typeList: [
					'功能异常：系统功能异常或不可用',
					'系统建议：用的不爽，我有建议',
					'功能新增：我想用的功能，希望能开发新增',
					'服务建议：服务商服务不到位，我有建议',
				],
				form: {
					type: '',
					suggest: '',
					images: [],
					uploadImages: [],
					name: '',
					phone: '',
					unit: '',
				},
				loading: false,
				isSubmit: false,
			};
		},
		methods: {
			addImage() {
				const that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success({
						tempFiles
					}) {
						console.log(that.form.images);
						that.form.images.push(tempFiles[0].path)
						that.upload(tempFiles[0])
					}
				});
			},
			async upload(path) {
				const that = this;
				// 批量上传
				return new Promise((resolve, reject) => {
					if (path) {
						UploadApi.image([path])
							.then(fileIds => {
								console.log(fileIds);
								that.form.uploadImages.push(fileIds[0]);
								resolve(fileIds)
							})
							.catch(reject)
					} else {
						resolve()
					}
				})
			},
			deleteImage(index) {
				this.form.images.splice(index, 1);
				this.form.uploadImages.splice(index, 1);
			},
			previewImage(item) {
				uni.previewImage({
					urls:this.form.images,
				});
			},
			submit() {
				if (!this.form.type) {
					uni.showModal({
						title: '提示',
						content: '请选择问题类型',
						showCancel: false,
					});
					return false;
				}
				if (!this.form.suggest) {
					uni.showModal({
						title: '提示',
						content: '请填写反馈与建议',
						showCancel: false,
					});
					return false;
				}
				if (this.form.uploadImages.length === 0) {
					uni.showModal({
						title: '提示',
						content: '请上传图片',
						showCancel: false,
					});
					return false;
				}
				if (!this.form.name) {
					uni.showModal({
						title: '提示',
						content: '请填写您的姓名',
						showCancel: false,
					});
					return false;
				}
				if (!this.form.phone) {
					uni.showModal({
						title: '提示',
						content: '请填写您的手机号码',
						showCancel: false,
					});
					return false;
				} else if (!/^1[3-9]\d{9}$/.test(this.form.phone)) {
					uni.showModal({
						title: '提示',
						content: '请填写正确格式的手机号码',
						showCancel: false,
					});
					return false;
				}
				if (!this.form.unit) {
					uni.showModal({
						title: '提示',
						content: '请填写您的单位',
						showCancel: false,
					});
					return false;
				}
				if (!this.loading) {
					this.loading = true;
					Api.addFeedback({
						imgs: this.form.uploadImages.join(','),
						type: this.form.type,
						suggest: this.form.suggest,
						name: this.form.name,
						phone: this.form.phone,
						unit: this.form.unit,
					})
						.then(res => {
							console.log(res);
							this.loading = false;
							this.isSubmit = true;
						})
						.catch(() => {
							this.loading = false;
						})
				}
			},
			
			back() {
				uni.navigateBack();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 24rpx 24rpx 42rpx;
		.form {
			&-item {
				margin-bottom: 40rpx;
				&:last-child {
					margin-bottom: 0;
				}
				&-label {
					font-size: 30rpx;
					color: #333;
					margin-bottom: 30rpx;
					.label-flag {
						color: #F34A40;
					}
				}
				&-content {
					background: #fff;
					border-radius: 20rpx;
					padding: 40rpx 30rpx;
					font-size: 30rpx;
					color: #333;
					.textarea-box {
						position: relative;
						width: fit-content;
						.text-num {
							position: absolute;
							right: 31rpx;
							bottom: 29rpx;
							font-size: 24rpx;
							line-height: 24rpx;
							color: #999;
							text {
								color: #F34A40;
							}
						}
					}
					textarea {
						height: 215rpx;
						background: #F7F8FA;
						border-radius: 10rpx;
						padding: 20rpx;
					}
					.textarea-placeholer {
						color: #ccc;
						font-size: 24rpx;
					}
					.type {
						display: flex;
						align-items: center;
						margin-bottom: 40rpx;
						&:last-child {
							margin-bottom: 0;
						}
						>image {
							width: 36rpx;
							height: 36rpx;
							margin-right: 20rpx;
						}
					}
					.image-list {
						display: flex;
						flex-wrap: wrap;
						position: relative;
						margin-top: 20rpx;
						.image {
							width: 140rpx;
							height: 140rpx;
							background: #FFFFFF;
							border-radius: 10rpx;
							border: 1px solid #CCCCCC;
							margin-right: 15rpx;
							margin-bottom: 20rpx;
							position: relative;
							.delete {
								width: 30rpx;
								height: 30rpx;
								position: absolute;
								top: 0;
								right: 0;
							}
							>image {
								width: 100%;
								height: 100%;
							}
						}
						.upload-btn {
							width: 140rpx;
							height: 140rpx;
							background: #FFFFFF;
							border-radius: 10rpx;
							border: 1px solid #CCCCCC;
							display: flex;
							flex-direction: column;
							align-items: center;
							padding-top: 20rpx;
							>image {
								width: 45rpx;
								height: 37rpx;
							}
							.tip {
								font-size: 24rpx;
								line-height: 24rpx;
								margin: 13rpx;
							}
							.sub-tip {
								font-size: 22rpx;
								line-height: 22rpx;
								color: #999999;
							}
						}
						.image-num {
							position: absolute;
							right: 0rpx;
							bottom: 20rpx;
							font-size: 24rpx;
							line-height: 24rpx;
							color: #999;
							text {
								color: #F34A40;
							}
						}
					}
					.content-info {
						border-bottom: 1rpx solid #EAEAEA;
						display: flex;
						align-items: center;
						height: 98rpx;
						.info-name {
							margin-right: 40rpx;
						}
						input {
							flex: 1;
						}
						.input-placeholder {
							color: #CCCCCC;
						}
					}
				}
			}
		}
		.submit {
			height: 98rpx;
			background: #F34A40;
			border-radius: 49rpx;
			color: #FFFFFF;
			font-size: 30rpx;
			line-height: 98rpx;
			text-align: center;
			margin-top: 30rpx;
		}
		
		.success {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 140rpx;
			>image {
				width: 189rpx;
				height: 166rpx;
			}
			.success-tip {
				margin: 34rpx 0 28rpx;
				color: #222222;
				font-size: 36rpx;
				line-height: 36rpx;
			}
			uni-text {
				color: #666666;
				font-size: 28rpx;
				line-height: 40rpx;
			}
		}
		.back {
			position: fixed;
			left: 24rpx;
			width: 702rpx;
			bottom: 43rpx;
		}
	}
</style>