xiongmao/pages/my/feedback/feedback.vue

<!-- 意见反馈 -->
<template>
	<view class="wrap">

		<view class="textarea-box">
			<textarea class="textarea" v-model="params.content" maxlength=300 placeholder='请输入问题描述，点击下方“+”号提交截图，帮助我们更快定位您的问题'
				placeholder-class="placeholder" @input="sumfontnum"></textarea>
			<view class="num"><text>{{fontNum}}</text>/300</view>
		</view>

		<view class="input-box">
			<input type="text" v-model="params.phone" class="input" placeholder="请输入联系方式" placeholder-class="placeholder" />
		</view>

		<view class="img-container">
			<view class="note-image-box">
				<view class="note-image-item" v-for="(item,index) in imageLists" :key="index">
					<view class="close-icon" @click="del(index)">
						<image src="../../../static/del-img.png" mode=""></image>
					</view>
					<view class="image-box"  @click="previewImg(index)">
						<image :src="item.url" class="img" mode="aspectFill"></image>
					</view>
				</view>

				<view v-if="imageLists.length < 3" class="note-image-item" @click="addImage">
					<image src="../../../static/upload.png" class="add-img" mode="aspectFill"></image>
					<view class="note-image-item-num">
						{{imageLists.length + 1}}/3
					</view>
				</view>
			</view>
		</view>
		
		<view class="btn-box">
			<button type="default" class="active" @tap="leaveFeedback()">提交反馈</button>
		</view>
		
	</view>
</template>

<script>
	import { userManageLeaveFeedback } from '../../../common/service.js';
	import { uploadFiles } from '../../../common/request';
	import { validatorFun } from '../../../common/utils/util';

	export default {
		data() {
			return {
				fontNum: 0,
				imageLists: [], //存放图片数组
				params: {
					content: '', // 反馈内容
					phone: '', // 联系方式
					images: '', // 反馈图片（逗号隔开，没有不传）
				},
			}
		},
		methods: {
			leaveFeedback(key = '') {
				this.params.images = this.imageLists.join(',');
				const params = this.params;
				const errList = validatorFun(params, [
					['content', ['notNull', '请输入问题描述']],
				]);
				if (errList.length > 0) {
					return uni.showToast({
						icon: 'none',
						title: errList[0].errMsg,
					});
				}
				userManageLeaveFeedback({
					data: params,
					success: ({code, msg, data}) => {
						if (code == 1) {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1,
								});
							}, 1000);
						} else {
							uni.showToast({
								icon: 'none',
								title: msg,
							});
						}
					}
				});
			},
			// 限制文本框字数
			sumfontnum(e) {
				console.log(e)
				this.fontNum = e.detail.value.length
			},
			//删除图片
			del(index) {
				this.imageLists.splice(index, 1)
			},
			// //添加图片
			// addImage() {
			// 	const count = 9 - this.imageLists.length
			// 	uni.chooseImage({
			// 		count: count,
			// 		success: res => {
			// 			let tempfilepaths = res.tempFilePaths
			// 			tempfilepaths.forEach((item, index) => {
			// 				// 处理h5多选的情况
			// 				if (index < count) {
			// 					this.imageLists.push({
			// 						url: item
			// 					})
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			//上传图片
			addImage(){
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'],
					success: res => {
						uploadFiles({
							filePath: res.tempFilePaths[0],
							success: res => {
								const data = JSON.parse(res.data);
								console.log(data);
								if (res.statusCode === 200 && data.code == 1) {
									this.imageLists.push({
										url: data.data
									});
								} else {
									uni.showToast({
										icon: 'none',
										title: data.msg || res.msg,
									});
								}
							}
						});
					},
				});
			},
			//查看图片
			previewImg(index){
				let urls = []
				for(let i = 0;i < this.imageLists.length;i++){
					urls.push(this.imageLists[i].url)
				}
				uni.previewImage({
					current:index,
					urls:urls,
				})   
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./feedback.css";
</style>