dvlyadmin_pro/uniapp/pages/my/feedback.vue

<template>
	<view class="container">
		<!-- 01. 反馈 -->
		<view class="use-item2">
			<text class="use-item2-text margin-lr-15">请输入您的反馈意见（200字以内）</text>
			<textarea class="use-item2-textarea margin-lr-15" v-model="message" maxlength="200"/>
		</view>
		<view class="use-item3">
			<view class="image-title margin-top margin-lr-15">
				<text class="text-black">上传问题截图<text class="text-grey"> (选填，最多可上传5张)
					</text>
				</text>
				<view class="text-grey">{{ images.length }}/5</view>
			</view>
			<view class="filepicker margin-lr-15">
				<u-upload
					:fileList="fileList1"
					@afterRead="afterRead"
					@delete="deletePic"
					:previewFullImage="true"
					name="1"
					maxSize="1048576"
					multiple
					:maxCount="5"
					></u-upload>
			</view>
		</view>
		<view class="btn">
			<button type="primary" class="submitbtn" @click="FeeckbackAdd">
				提交
			</button>
		</view>
	</view>
</template>

<script>
	import { xcxFeeckbackAdd,uploadImage } from '@/api/api.js'
	export default {
		data() {
			return {
				message: '',
				images: [],
				fileList1:[],
				imageStyles:{
					width:100,
					height:100,
				},
			}
		},
		methods:{
			//u-upload自定义图片上传
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
				this.images.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const obj = await uploadImage(lists[i].url)
					let result=''
					if(obj.code == 2000) {
						if (obj.data.data[0].indexOf("://")>=0){
							result = obj.data.data[0]
						}else{
							result = url.split('/api')[0]+obj.data.data[0]
						}
					} else {
						common.showToast(obj.msg)
					}
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
					this.images.push(result)
				}
				console.log(this.fileList1,"上传的图片列表")
			},
			//----------------图片上传结束
			
			FeeckbackAdd() {
				if(this.message==''){
					this.$common.showToast("请填写反馈内容")
					return
				}
				var params = {
					message:this.message,
					images:this.images,
				}
				this.$common.showToast("提交成功")
				xcxFeeckbackAdd(params).then(res=>{
					if(res.code == 2000) {
						this.$common.showToast("提交成功")
						//延迟重载该页面
						setTimeout(()=>{
							uni.redirectTo({
								url: `/pages/my/feedback`,
							});
						},2000)
					}else{
						this.$common.showToast(res.msg)
					}
				})
			},
		},
	}
	
</script>

<style lang="scss" scoped>
	.container{
		padding: 15rpx 20rpx;
	}
	.margin-top {
	    margin-top: 15rpx;
	}
	.margin-lr {
		margin-left: 20rpx;
		margin-right: 20rpx;
	}
	.margin-lr-15 {
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.use-item2{
		display: flex;
		flex-direction: column;
		height: 350rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		.use-item2-text{
			padding-top: 20rpx;
			font-size: 28rpx;
			font-weight: 400;
			color: #666666;
		}
		.use-item2-textarea{
			width: calc(100% - 60rpx);
			margin-top: 20rpx;
			height: 230rpx;
			background: #EEEEEE;
			padding:20rpx;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			font-size:26rpx
		}
	}
	.use-item3{
		height: 500rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	}
	.btn-submit {
		border-radius: 20rpx;
		color: #FFFFFF;
		margin-top: 100rpx;
		background-color: #007AFF;
		margin-bottom: 70rpx;
	}
	.text-black {
		color: #666666;
		font-size: 28rpx;
		font-weight: 400;
	}
	
	.text-grey {
		color: #666666;
		font-size: 24rpx;
		margin-left: 15rpx;
	}

	.image-title {
		padding-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		color: #606266;

	}

	.filepicker {
		margin-top: 30rpx;
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0 ;
		right: 0;
		margin: 20rpx 20rpx 60rpx 20rpx;
	}
	.submitbtn{
		// background: #007AFF;
		font-size: 34rpx;
		height: 88rpx;
		color: #FFFFFF;
		font-weight: 500;
	}
	
		.upload-img .file-picker__box{
			width: 200rpx !important;
			height: 200rpx !important;
		}
</style>