taoke/pages/user/feedback.vue

<template>
	<view class="feedback">
		<view class="header-bg"></view>

		<view class="header">
			<view class="title">
				意见反馈
			</view>

		</view>
		<view class="" style="margin: 0 20upx;">
			<view class="">
				<label class="label" for="">我要反馈</label>
				<view style="background: white;margin: 20upx 0;border-radius: 10upx;">
					<view>
						<textarea class="textarea" v-model="form.content" placeholder="" maxlength="300" />
					</view>
					<view class="tips">您还能输入{{300-form.content.length}}个字符</view>
				</view>
			</view>
			<view class="">
				<label class="label" for="">上传图片</label>
				<view style="background: white;border-radius: 10upx;margin-top: 20upx;">
					<view class="images-wrapper">
						<view class="image-item" v-for="(image,i) in mainImages">
							<view class="del" @tap="mainImages.splice(i,1)">删除</view>
							<image class="image" :src="image|imagesFilter" mode="aspectFill" @tap="replaceImage(i)">
							</image>
						</view>

						<view class="image-item" v-if="mainImagesLimit>mainImages.length">
							<view class="add" @tap="addImage">
								<uni-icons type="plusempty" size="40" color="#EEEEEE" style="font-weight: 500;">
								</uni-icons>
							</view>
						</view>
					</view>

				</view>
			</view>
			<view class="" style="margin-top: 100upx;">
				<button type="default" class="btn submit-btn" @tap="submit">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mainImages: [],
				mainImagesLimit: 4,
				form: {
					content: ''
				}
			}
		},
		methods: {
			addImage() {
				this.chooseImage().then((res) => {
					console.log(res)
					for (let i in res.tempFilePaths) {
						this.$http.upload({
							file: res.tempFiles[i],
							filePath: res.tempFilePaths[i],
							name: 'file',
							success: (res) => {
								console.log(res.data.data)
								this.mainImages.push(res.data.data.url)
							}
						})
					}
				});
			},
			replaceImage(index) {
				console.log(index)
				this.chooseImage().then((res) => {
					this.$http.upload({
						file: res.tempFiles[0],
						filePath: res.tempFilePaths[0],
						name: 'file',
						success: (res) => {
							// this.mainImages[index] = res.data.data.url
							this.$set(this.mainImages, index, res.data.data.url)
						}
					})

				});
			},
			chooseImage() {
				return new Promise((resolve, reject) => {
					uni.chooseImage({
						count: this.mainImagesLimit - this.mainImages.length,
						extension: ['jpg', 'png', 'bmp', 'jpeg'],
						success(res) {
							resolve(res)
						},
						fail(err) {
							reject(err)
						}
					})
				})
			},
			submit() {
				if (this.$verified.required(this.form.content,"请输入反馈内容")) {
					this.$http.post({
						url: "/feedback/create",
						data: this.form,
						success: (res) => {
							console.log(res)
							uni.showModal({
								title: "意见反馈",
								content: "提交成功，平台将于三个工作日之内为您处理",
								success: (res) => {
									if (res.confirm) {
										uni.navigateBack()
									}
								}
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.feedback {
		position: relative;
		overflow: hidden;
	}

	.header-bg {
		background: $primary-color;
		height: 100upx;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 1;
	}

	.header {
		margin: 20upx;
		background: white;
		text-align: center;
		border-radius: 20upx;
		position: relative;
		z-index: 2;

		.title {
			height: 100upx;
			font-size: 32upx;
			line-height: 100upx;
			// font-weight: bold;
		}
	}

	.label {
		font-size: 30upx;

	}

	.tips {
		font-size: 28upx;
		text-align: right;
		padding: 10upx;
		color: #999999;
	}

	.textarea {
		padding: 20upx;
		font-size: 28upx;
		width: 100%;
		box-sizing: border-box;
	}

	.images-wrapper {
		padding: 0;
		padding-top: 40upx;
		display: flex;
		flex-wrap: wrap;

		// justify-content: space-between;

		.image-item {
			position: relative;
			width: 25%;
			text-align: center;
			margin-bottom: 40upx;

			.del {
				position: absolute;
				top: 0;
				right: 30upx;
				z-index: 1;
				font-size: 24upx;
				background-color: $primary-color;
				color: white;
				padding: 2upx 15upx;
			}
		}

		.image {
			width: 120upx;
			height: 120upx;
			background: #EEEEEE;
			flex: 0 0 150upx;

		}

		.add {
			width: 120upx;
			height: 120upx;
			display: inline-block;
			line-height: 110upx;

			border: 8upx #EEEEEE solid;
			box-sizing: border-box;
		}

	}

	.submit-btn {
		font-size: 30upx;
		line-height: 60upx;
		width: 250upx;
		background: $primary-color;
		color: white;
	}
</style>