ProAdvanced/pages/login-page/feedback/feedback.vue

<template>
	<view>
		<uni-nav-bar id="nav-bar" status-bar="true" @clickLeft="onBack" :title="pageTitle" color="#000000" fixed="true"
		 :border="false">
			<view slot="left">
				<view class=" flex align-center margin-left">
					<image class="p-left-arrow" src="../../../static/p-left-arrow.png"></image>
				</view>
			</view>

		</uni-nav-bar>
		<form @submit="onUploadFeedback" class="padding flex flex-direction">

			<textarea name="problemDescription" :maxlength='500' class="feedback-textarea" placeholder="请输入你要反馈的问题"
			 placeholder-class="feedback-placeholder"></textarea>
			<view style="height: 20px;"></view>
			<view class="feedback-upload-image">
				<view class="cu-bar" style="color: #BEBEBE; font-size: 14px;">
					<view class="action">
						请提供问题的截图或照片
					</view>
					<view class="action">
						{{imgList.length}}/4
					</view>
				</view>
				<view style="height: 1px; background-color: #dadada; margin: 0px 15px 15px;"></view>
				<view class="cu-form-group" style="background-color: #F6F6F6;">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
							<image :src="imgList[index]" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" style="background-color: #EEEEEE; border-radius: 15rpx;" @tap="ChooseImage" v-if="imgList.length<4">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</view>

			<view class="cu-form-group margin-top radius" style="background-color: #F6F6F6;">
				<view class="feedback-title">用户名</view>
				<input name="userName" style=" text-align: right;" placeholder="请输入用户名" placeholder-class="feedback-placeholder"
				 :value="userName"></input>
			</view>
			<view class="cu-form-group margin-top radius" style="background-color: #F6F6F6;">
				<view class="feedback-title">联系方式</view>
				<input name="phoneNumber" type="number" style="text-align: right;" placeholder="请输入手机号" placeholder-class="feedback-placeholder"
				 :value="phoneNumber"></input>
			</view>
			<view class="flex flex-direction margin-top">
				<button form-type="submit" class="cu-btn make-bg-bPurple margin-tb-sm lg text-white">提交</button>
			</view>

			<input v-show="false" name="versionName" :value="version"></input>
			<input v-show="false" name="versionCode" :value="versionCode"></input>

		</form>
	</view>
</template>

<script>
	import reqUtil from '@/util/util-js/requstUtil.js';
	import config from '@/common/config.js';

	import {
		mapState
	} from 'vuex';

	export default {
		computed: mapState(['userName', 'phoneNumber', 'version', 'versionCode']),
		data() {
			return {
				pageTitle: '意见反馈',
				imgList: []
			}
		},
		methods: {
			onBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '删除照片',
					content: '确定要删除这张照片吗？',
					cancelText: '不是',
					confirmColor: '#ff0004',
					confirmText: '是',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},

			onUploadFeedback(e) {
				console.log(e.detail.value, this.imgList);
				if(e.detail.value.problemDescription.length <= 10){
					uni.showModal({
						title:'提示',
						content: "请填写不少于10个字的问题内容！",
						showCancel: false
					});
					return;
				}
				if(this.imgList.length == 0){
					uni.showModal({
						title:'提示',
						content: "至少选择一张反馈问题的截图照片！",
						showCancel: false
					});
					return;
				}
				uni.showLoading({
					title: '上传中...',
					mask: true
				});
				
				let files = this.imgList.map((value, index) => {
					return {
						name: 'images' + index,
						uri: value
					};
				});
				console.log("files:",files);
				reqUtil.reqUploadFiles(config.URL.UPLOADFEEDBACK, e.detail.value, files)
					.then(res => {
						uni.hideLoading();
						this.imgList = [];
						console.log(res)
						if(res.code ==0){
							uni.showModal({
								content: '成功',
								showCancel: false
							});
						}else{
							uni.showModal({
								title:'上传失败',
								content: res.msg,
								showCancel: false
							});
						}
					}, e => {
						console.log(e);
						uni.hideLoading();
					});
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.feedback-textarea {
		/* border: solid 1px red; */
		background-color: #F6F6F6;
		width: 100%;
		border-radius: 20rpx;
		padding: 50rpx;
	}

	.feedback-placeholder {
		color: #BEBEBE;
		font-size: 14px;
	}

	.feedback-upload-image {
		background-color: #F6F6F6;
		width: 100%;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.feedback-title {
		font-size: 14px;
		color: #7B7B7B;
	}
</style>