book-hi/pages-mine/pages/complaint.vue

<template>
	<view class="complaint-page">
		<!-- 表单区域 -->
		<view class="form-block">
			<!-- 投诉原因 -->
			<view class="form-item flex-a">
				<view class="common-text-2 required">投诉原因</view>
				<view class="input-wrapper flex-1" @click="showReasonPicker">
					<text class="placeholder" v-if="!complaintReason">请选择投诉原因</text>
					<text v-else>{{ complaintReason }}</text>
					<u-icon name="arrow-right" color="#333" size="32" top="3rpx"></u-icon>
				</view>
			</view>
		</view>

		<view class="form-block">
			<!-- 联系方式 -->
			<view class="form-item flex-a" style="padding:14rpx 0">
				<view class="common-text-2 required">联系方式</view>
				<u-input class="flex-1" input-align="right" placeholder-style="color:#999;font-size:28rpx;"
					v-model="phone" placeholder="请输入联系方式" :border="false" type="number" maxlength="11"></u-input>
			</view>
		</view>

		<view class="common-text-2 required mb-20">投诉说明</view>
		<view class="form-block" style="padding: 20rpx;">
			<!-- 投诉说明 -->
			<u-input v-model="description" type="textarea" placeholder="请描述投诉情况，有助于客服更快处理" :height="200"
				:border="false"></u-input>
		</view>

		<!-- 图片上传 -->
		<view class="common-text-2 required mb-20">上传凭证(最多3张)</view>

		<u-upload class="upload-image" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" :maxCount="3"
			:previewFullImage="true" uploadText="点击上传"></u-upload>

		<!-- 底部按钮 -->
		<view class="bottom-fixed-con">
			<u-button type="primary" @click="submitComplaint">提交</u-button>
		</view>

		<!-- 投诉原因选择器 -->
		<u-picker v-model="showPicker" mode="selector" :range="reasonList" @confirm="confirmReason"
			@cancel="showPicker = false"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				complaintReason: '',
				phone: '',
				description: '',
				fileList: [],
				showPicker: false,
				reasonList: ['价格问题', '质量问题', '服务态度', '其他问题']
			}
		},
		methods: {
			showReasonPicker() {
				this.showPicker = true
			},
			confirmReason(e) {
				this.complaintReason = e.value[0]
				this.showPicker = false
			},
			afterRead(event) {
				const {
					file
				} = event
				this.fileList.push({
					url: file.url,
					status: 'success',
					message: '上传成功'
				})
			},
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			submitComplaint() {
				if (!this.complaintReason) {
					return uni.$u.toast('请选择投诉原因')
				}
				if (!this.phone) {
					return uni.$u.toast('请输入联系方式')
				}
				if (!this.description) {
					return uni.$u.toast('请输入投诉说明')
				}
				// TODO: 提交投诉信息
				uni.$u.toast('投诉上报已上报给管理员')
			}
		}
	}
</script>

<style lang="scss">
	.complaint-page {
		min-height: 100vh;
		background: #F8F8F8;
		padding: 20rpx;
		padding-bottom: 120rpx;

		.form-block {
			background: #FFFFFF;
			border-radius: 12rpx;
			padding: 0 30rpx;
			margin-bottom: 20rpx;
		}

		.required::before {
			content: '*';
			color: #FF5B5B;
			margin-right: 4rpx;
		}

		.form-item {
			padding: 30rpx 0;

			.input-wrapper {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 28rpx;
				color: #333;

				.placeholder {
					color: #999;
				}
			}
		}
	}

	::v-deep .upload-image {
		.u-list-item {
			background: #ffffff;
		}
	}
</style>