jiuyiUniapp/jiuyi2/pages/mine/setting/feedback.vue

<script setup>
	// 意见反馈
	import {
		ref,
		reactive,
		computed,
	} from 'vue'
	import {
		onLoad,
		onReady,
	} from '@dcloudio/uni-app'
	// 工具库
	import util from '@/common/js/util.js'
	// 
	import api from '@/api/index.js'
	// 表单
	const form = reactive({
		feedbackType: '',
		content: '',
		url: [],
		phoneNumber: '',
	})

	// 提交
	function handleSubmit() {
		// 
		const data = {
			...form
		}
		console.log('data', data)

		// 验证必填项
		if (!data.feedbackType) {
			util.alert('问题标题不能为空')
			return
		}
		if (!data.content) {
			util.alert('问题详情不能为空')
			return
		}
		if (!data.phoneNumber) {
			util.alert('联系方式不能为空')
			return
		}
		// 图片路径
		data.url = data.url.join(',')

		api.mine.feedback({
			data,
		}).then(rs => {
			if (rs.code == 200) {
				util.alert({
					content: '提交成功，请耐心等待平台反馈',
					showCancel: false,
				}).then(rs => {
					uni.navigateBack()
				})
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	// 上传文件
	function uploadImg() {
		util.upload_image({
			value: form.url,
			type: 2,
			count: 6,
		})
	}

	/**
	 * 删除图片
	 * @param {Object} index
	 */
	function removeImage(index) {
		util.alert({
			content: '删除后不可恢复，确认删除吗？',
		}).then(rs => {
			if (!rs.confirm) return
			form.url.splice(index, 1)
		})
	}
</script>

<template>
	<view class="app">
		<view class="form mtb30 mlr30 ptb20 plr30 bfff br20">
			<view class="line">
				<view class="key f36">请输入您遇到的问题标题</view>
				<view class="value inputBox">
					<input v-model.trim="form.feedbackType" placeholder="请输入描述问题标题" />
				</view>
			</view>

			<view class="line">
				<view class="key f36">请输入您遇到的问题详情</view>
				<view class="value inputBox">
					<textarea v-model.trim="form.content" class="textarea" type="text" placeholder="请输入描述问题详情" />
				</view>
			</view>

			<view class="line">
				<view class="key f36">请输入您遇到的问题</view>
				<view class="imgList mt30">
					<view class="imgs wh180 br20" v-for="(item,index) in form.url" :key="index">
						<image class="wh180 br20" :src="item" mode="aspectFill" />
						<uni-icons type="clear" class="close" color="red" @click="removeImage(index)" />
					</view>
					<view class="imgs upload fmid wh180 br20" @click="uploadImg">
						<uni-icons type="plusempty" size="80rpx" color="#aaa" />
					</view>
				</view>
			</view>

			<view class="line">
				<view class="key f36">请输入您的联系方式</view>
				<view class="value inputBox">
					<input v-model.trim="form.phoneNumber" type="text" placeholder="请输入联系方式" />
				</view>
			</view>

			<view class="btn lg bar black mt60 mb30" @click="handleSubmit">提交</view>
		</view>

		<view class="fill"></view>
	</view>
</template>

<style lang="scss" scoped>
	// 
	.form {
		.line {
			margin: 40rpx 0;

			.key {
				font-size: 36rpx;
			}

			.value {
				margin-top: 20rpx;
				padding: 15rpx 20rpx;
			}

			// 上传
			.upload {
				border: 4rpx dashed #ddd;
			}

			// 多行文本框
			.textarea {
				width: 100%;
				height: 300rpx;
			}
		}
	}
</style>