crm-app-vue3/pages/feedback/index.vue

<template>
	<view class="follow_wrap">
		<u-navbar placeholder :autoBack="true" title="意见反馈" @rightClick="handleNavSaveClick">
			<view class="u-nav-slot" slot="right">
				提交
			</view>
		</u-navbar>
		<view class="form_wrap">
			<u--form :model="form" :rules="rules" ref="form" class="form_wrap">
				<u-form-item label="" prop="content" class="content_form_wrap">
					<u--textarea v-model="form.content" placeholder="请输入您需要反馈的内容" height="120" count confirmType="done"
						maxlength="500" border="none">
					</u--textarea>
				</u-form-item>
				<u-form-item class="upload_wrap">
					<view class="top_prop">
						上传文件
					</view>
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="file"
						:previewFullImage="true"></u-upload>
				</u-form-item>
				<u-form-item label="联系电话" prop="contact" labelWidth="80" class="contact_form_wrap">
					<u--input v-model="form.contact" disabledColor="#ffffff" placeholder="请输入联系方式" border="none">
					</u--input>
				</u-form-item>
			</u--form>
			<view class="hint">
				<text class="text">请留下您的联系方式(微信号/QQ/邮箱)，反馈的相关问题我们会第一时间为您解答。</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList: [],
				form: {
					content: "",
					contact: "",
				},
				rules: {
					'content': {
						type: 'string',
						required: true,
						message: '请填写反馈内容',
						trigger: []
					},
					'contact': {
						type: 'string',
						required: true,
						message: '请填写联系电话',
						trigger: []
					},
				},
			}
		},
		methods: {
			deletePic({
				file
			}) {
				const index = this.fileList.findIndex(v => v.url == file.url);
				this.fileList.splice(index, 1);
			},
			afterRead({
				file,
				lists,
				name
			}) {
				uni.$u.api.uploadFile(file.url).then((res) => {
					const {
						url
					} = res.data;
					this.fileList.push({
						url
					});
					uni.$u.toast("文件上传成功");
				}).catch(() => {
					uni.$u.toast("上传文件失败");
				})
			},
			handleNavSaveClick() {
				this.$refs.form.validate().then(async () => {
					const photos = this.fileList.map(v => v.url);
					await uni.$u.api.caseAppFeedback({
						...this.form,
						photos
					});
					uni.$u.toast("提交成功");
					this.$refs.form.resetFields();
					this.fileList = [];
				})
			},
			async handleOption() {},
		},
		onLoad() {
			this.handleOption();
		}
	}
</script>

<style lang="scss" scoped>
	.hint {
		text-align: center;
		.text {
			color: #aaaaaa;
			font-size: 20rpx;
		}
	}

	.form_wrap {
		background-color: #f5f6f8;
		margin: 20rpx 0;

		.form_wrap {
			::v-deep .u-form-item__body {
				padding: 20rpx 40rpx;
			}
		}

		.content_form_wrap {
			::v-deep .u-form-item__body {
				padding: 0rpx;
			}

			;
			margin-bottom: 20rpx;
		}

		.contact_form_wrap {
			background-color: #ffffff;
		}

		.upload_wrap {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			background: #ffffff;

			::v-deep .u-form-item__body__right__content__slot {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
			}
		}

		.top_prop {
			font-size: 28rpx;
			color: #202020;
			margin-bottom: 20rpx;
		}
	}
</style>