wxThird/pages/user/feedBack.vue

<template>
	<view class="content">
		<view class="main">
			<!-- 建议 -->
			<view class="firstView">
				<view class="title">您的问题或建议</view>
				
				<textarea placeholder-style="color:#999999" placeholder="输入个人意见反馈" v-model="exeContent"
						class="textareaCont" maxlength="-1" auto-height="true" @confirm="feedDone" />
				
			</view>

			<!-- 图片 -->
			<view class="secondView">
				<view class="title">上传图片</view>
				<view class="imgBox">
					<view :class="{img4:(imgindex+1)%4==0}" class="imgLine" v-for="(img,imgindex) in imgArr">
						<image :src="img" mode="" class="itemImg"></image>
						<image src="../../static/img/icon_del_red.png" mode="" class="delImg" @click="delimg(imgindex)">
						</image>
					</view>
					<view class="img4" @click="uploadImg">
						<image src="../../static/img/btn_pic.png" mode="" class="itemImg"></image>
					</view>
				</view>
			</view>


		</view>

		<view class="bottom">
			<view class="shoreDz" :style="{background:'#'+themeColor}"  @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				imgArr: [],
				exeContent: '',
				themeColor:'',

			}
		},
		
		onLoad() {
			 this.themeColor = uni.getStorageSync("themeColor");
		
		},
		methods: {
			
			feedDone(e) {
				this.exeContent = e.target.value

			},
			uploadImg() {

				var that = this;
				var length = this.imgArr.length;
				var num = 9;
				if (length > 8) {
					uni.showToast({
						title: '最多上传9张',
						icon: 'none',
						duration: 2000,
					});
					return false;
				}
				uni.chooseImage({
					sourceType: ['album', 'camera'],
					count: num - length,
					sizeType:['compressed'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						/* uni.uploadFile({
				            url: that.$request.baseUrl+'accompany/SuperCheckSheet/uploadFile', //仅为示例，非真实的接口地址
				            filePath: tempFilePaths[0],
				            name: 'file',
				            formData: {
				                'user': 'test'
				            },
				            success: (uploadFileRes) => {
				                console.log(JSON.parse(uploadFileRes.data).data );
								that.imgArr=that.imgArr.concat(JSON.parse(uploadFileRes.data).data) ;
								
				            }
				        }); */
						tempFilePaths.forEach(v => {
							console.log(that.$request.baseUrl + 'tuhuUploadFile');
							uni.uploadFile({
								url: that.$request.baseUrl + 'tuhuUploadFile',
								filePath: v,
								name: 'file',
								formData: {
									'user': 'test'
								},

								success: (uploadFileRes) => {

									console.log(JSON.parse(uploadFileRes.data).data);
									that.imgArr = that.imgArr.concat(JSON.parse(
										uploadFileRes.data).data);
									console.log('imgArr--',that.imgArr);
								}
							});
						})
						/* that.$http('accompany/SuperCheckSheet/uploadFile', tempFilePaths[0], 'POST').then(res => {
							
						}) */
					}
				});
			},
			delimg(index) {
				this.imgArr.splice(index, 1)
			},
			submit() {
				if (!this.exeContent) {
					uni.showToast({
						title: '请输入个人意见反馈',
						icon: 'none',
						duration: 2000,
					});
					return;
				}
				// if (this.imgArr.length == 0) {
				// 	uni.showToast({
				// 		title: '请上传图片',
				// 		icon: 'none',
				// 		duration: 2000,
				// 	});
				// 	return ;
				// }
				uni.showLoading({
					title: '保存中'
				})
				var exeImg = this.imgArr.join(',')
				this.$http('openmy/addTMemberSuggest', {

					contents: this.exeContent,
					img: exeImg
				}, 'GET').then(res => {
					//this.submitSuperCheckSheet()
					if (res.code == 0) {
						uni.showToast({
							title: '提交成功',
							icon: 'none',
							duration: 2000,
						});
						setTimeout(function() {
							uni.navigateBack({

							})
						}, 2000);
					} else {
						uni.showToast({
							title: '提交失败',
							icon: 'none',
							duration: 2000,
						});
					}



				})
			}

		}
	}
</script>

<style scoped>
	.content {
		background: #F4F5F7;
		min-height: 100vh;

	}

	/* #ifdef H5 */
	.content {
		background: #F4F5F7;
		min-height: calc(100vh - 44px);

	}

	/* #endif */
	.main {
		background: #F4F5F7;
		padding: 20rpx 24rpx;
	}

	.firstView,
	.secondView {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		padding: 20rpx;
	}

	.firstView {
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 30rpx;
		color: #3C3C3C;
		padding-bottom: 20rpx;
	}

	.textareaCont {
		min-height: 150rpx;
		width: 100%;
		color: #3C3C3C;
		font-size: 28rpx;
	}


	.imgBox {
		display: flex;
		flex-wrap: wrap;
		
		
	}

	.imgLine {
		position: relative;
		margin-right: 20.6rpx;
	}
	.img4{
		margin-right: 0rpx;
	}

	.itemImg {
		width: 150rpx;
		height: 150rpx;
		
	}


	.delImg {
		width: 32rpx;
		height: 32rpx;
		position: absolute;
		right: 0rpx;
		top: 0rpx;
	}


	.bottom {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -4px 8px 0px rgba(153, 153, 153, 0.08);
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

	}

	.shoreDz {
		width: 702rpx;
		height: 74rpx;
		background: #D53533;
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		margin-top: 24rpx;
	}
</style>