意见反馈增加图片上传

pages/feedback/feedback.vue

@@ -12,7 +12,19 @@
 			</view>
 		</view>
 		<view class="feedback-block">
-			<view class="feedback-title">问题说明<text>*</text></view>
+			<view class="feedback-title">上传应用截图({{feedbackImg.length}}/8)</view>
+			<view class="feedback-sbutitle">上传出现问题的应用图片；长按图片可删除</view>
+			<view class="feedback-imgs">
+				<view class="feedback-imgs-item" v-for="(item, index) in feedbackImg" :key="index" @longpress="removeImg(index)">
+					<image :src="item.showPath" mode="aspectFill"></image>
+				</view>
+				<view class="feedback-imgs-item" @click="onFeedbackUpd" v-if="feedbackImg.length < 8">
+					<image :src="require('@/static/user/feedback-upd.png')" mode="aspectFill"></image>
+				</view>
+			</view>
+		</view>
+		<view class="feedback-block">
+			<view class="feedback-title">问题说明</view>
 			<view class="feedback-sbutitle">请对您所遇到的问题进行尽可能详细的描述</view>
 			<view class="feedback-textarea">
 				<textarea maxlength="200" v-model="description" />
@@ -32,13 +44,15 @@
 
 <script>
 	import { feedbacks } from '@/apis/interfaces/versions'
+	import { uploads } from '@/apis/interfaces/uploading.js'
 	export default {
 		data() {
 			return {
 				radioValue : "页面闪退",
 				description: "",
 				mobile	   : "",
-				systemInfo : {}
+				systemInfo : {},
+				feedbackImg: []
 			}
 		},
 		onLoad(){
@@ -69,18 +83,15 @@
 				this.radioValue = e
 			},
 			subFeedback(){
-				if(this.description === ''){
-					uni.showToast({
-						title: '问题说明不能为空',
-						icon : 'none'
-					})
-					return
-				}
+				let pictures = this.feedbackImg.map(val => {
+					return val.path
+				})
 				feedbacks({
 					type    	: this.radioValue,
 					description	: this.description,
 					mobile		: this.mobile,
-					...this.systemInfo
+					...this.systemInfo,
+					pictures
 				}).then(res => {
 					uni.showModal({
 						title	   : '提示',
@@ -97,6 +108,51 @@
 						icon : 'none'
 					})
 				})
+			},
+			// 上传图片
+			onFeedbackUpd(){
+				uni.chooseImage({
+					count		: 8 - this.feedbackImg.length,
+					sizeType	: ['compressed'],
+					sourceType	: ['album'],
+					success		: chooseRes => {
+						let { tempFiles } = chooseRes
+						let paths = tempFiles.map(val => {
+							return {
+								uri	: val.path,
+								name: 'file' + val.size
+							}
+						})
+						uni.showLoading({
+							title: '上传中...'
+						})
+						uploads(paths).then(res => {
+							uni.hideLoading()
+							let feedbackImg = res.path.map((val, index) => {
+								return {
+									path	: val,
+									showPath: res.url[index]
+								}
+							})
+							this.feedbackImg = this.feedbackImg.concat(feedbackImg)
+						}).catch(err => {
+							uni.showToast({
+								title: err.message,
+								icon : 'none',
+							})
+						})
+					},
+					fail		: err => {
+						uni.showToast({
+							title: err.message,
+							icon : 'none'
+						})
+					}
+				})
+			},
+			// 删除图片
+			removeImg(index){
+				this.feedbackImg.splice(index, 1)
 			}
 		}
 	}
@@ -136,6 +192,26 @@
 		background: #34CE98;
 		color: white;
 	}
+	.feedback-imgs{
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		margin: 10rpx -10rpx 0;
+	}
+	.feedback-imgs-item{
+		position: relative;
+		width: calc(25% - 20rpx);
+		padding-top: calc(25% - 20rpx);
+		margin: 20rpx 10rpx 0 10rpx;
+	}
+	.feedback-imgs-item image{
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		border:solid 1rpx #f8f8f8;
+	}
 	.feedback-sbutitle{
 		font-size: 28rpx;
 		padding-top: 10rpx;