qa-prevention-xgf-app/pages/mine/feedback/feedback.vue

<template>
	<view class="">
		<view class="feedback">
			<u--input v-model="form.FEEDBACK_TITLE" placeholder="请输入标题" border="bottom" clearable></u--input>
			<view class="feedback-type">
				<view class="item" v-for="(item, index) in feedbackType" :key="index"
					:class="{active:item.value === form.FEEDBACK_TYPE}" @click="form.FEEDBACK_TYPE = item.value">
					<u--image :src="item.img" width="40rpx" height="38rpx"
						style="margin-left: 70rpx; margin-top: 20rpx;"></u--image>
					<view style="margin-top: -40rpx;">{{item.label}}</view>
				</view>
			</view>
			<view class="title">我要反馈</view>
			<u--textarea v-model="form.FEEDBACK_CONTENT" maxlength="255" height="100" count confirmType="done"
				placeholder="请输入问题描述"></u--textarea>
			<view class="title">
				<text>请提供相关问题的截图或照片</text>
			</view>
			<u-upload ref="aaa" capture="album" uploadIcon="plus" :fileList="form.fileList" @afterRead="afterRead"
				@delete="deletePic" name="1" multiple :maxCount="4"></u-upload>
			<u-button type="primary" text="提交" @click="$u.debounce(submitFeedback, 1000, true)"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import {setFeedbackAdd, setFeedbackUpload} from "../../../api";

  export default {
		data() {
			return {
				form: {
					FEEDBACK_TITLE: '',
					FEEDBACK_TYPE: '其他',
					FEEDBACK_CONTENT: '',
					fileList: [],
					urlList: [],
				},
				feedbackType: [{
						label: '系统错误',
						value: '1',
						img: require('../../../static/images/fico1.png'),
					},
					{
						label: '界面优化',
						value: '2',
						img: require('../../../static/images/fico2.png'),
					},
					{
						label: '设计缺陷',
						value: '3',
						img: require('../../../static/images/fico3.png'),
					},
					{
						label: '性能问题',
						value: '4',
						img: require('../../../static/images/fico4.png'),
					},
					{
						label: '其他问题',
						value: '9',
						img: require('../../../static/images/fico5.png'),
					},
				]
			}
		},
		methods: {
			// 新增图片
			afterRead(event) {
				this.form.fileList = [...this.form.fileList, ...event.file]
			},
			// 删除图片
			deletePic(event) {
				this.form.fileList = this.form.fileList.filter(item => item.url !== event.file.url)
			},
			// 提交反馈
      submitFeedback() {
				if (!this.form.FEEDBACK_TITLE) {
					this.$refs.uToast.warning('为了更加方便我们排查，请输入标题')
					return
				}
				if (!this.form.FEEDBACK_CONTENT) {
					this.$refs.uToast.warning('为了更加方便我们排查，请输入问题描述')
					return
				}
				if (this.form.fileList.length === 0) {
					this.$refs.uToast.warning('为了更加方便我们排查，请上传问题截图或照片')
					return
				}
        let PromiseArr = [];
        for (let i = 0; i < this.form.fileList.length; i++) {
          PromiseArr.push(this.fnSetFeedbackUpload(this.form.fileList[i].url))
        }
        Promise.all(PromiseArr).then(async () => {
          await setFeedbackAdd({
            ...this.form,
            USER_ID: this.$store.getters.getUserInfo.USER_ID,
            FEEDBACK_IMG: this.form.urlList.join(';')
          })
          this.$refs.uToast.show({
            message: '反馈成功',
            type: 'success',
            complete: () => {
              uni.switchTab({
                url: '/pages/mine/index/index'
              })
            }
          })
        }).catch(() => {
          this.$refs.uToast.show({
            message: '反馈失败',
            type: 'error',
          })
        })
			},
      async fnSetFeedbackUpload(filePath){
        let resData = await setFeedbackUpload({
          name: 'FFILE',
          filePath,
        })
        this.form.urlList.push(resData.imgPath)
        return resData
      }
		},
	}
</script>

<style lang="scss" scoped>
	.feedback {
		padding: 40rpx;
		background-color: #fff;

		.title {
			font-weight: bold;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			color: $uni-text-color-placeholder;
			font-size: 30rpx;

			&:first-child {
				margin-top: 0;
			}
		}

		.feedback-type {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 20rpx;
			margin-top: 20rpx;


			.item {
				padding: 10rpx;
				border-radius: 10rpx;
				margin-top: 10rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
				background-color: #f6f7fb;
				text-align: center;
				font-size: 30rpx;
				color: #9fa7bc;
				width: 207rpx;
				height: 143rpx;
				box-sizing: border-box;
				line-height: 143rpx;
				text-align: center;

				&.active {
					background-color: #3c9cff;
					color: #fff;
				}
			}
		}

		::v-deep {
			.u-upload__wrap__preview__image {
				width: 146rpx !important;
				height: 146rpx !important;
			}
		}
	}

	.title {
		font-size: 32rpx;
		color: #333;
	}
</style>