uniapp_ahbcqz/bundle/pages/user/complain.vue

<template>
	<view class="store-settled">
		<view class="content">
			<view class="apply-form bg-white">
				<!-- 投诉类型 -->
				<view class="apply-form-item" @tap="showPop=true">
					<u-field label="投诉类型" v-model="form.clabel" label-width="160" style="flex: 1;" placeholder="请选择投诉类型"
						required disabled>
						<u-icon name="arrow-right" slot="right" size="28" />
					</u-field>
				</view>

				<!-- 联系人姓名 -->
				<!-- <view class="apply-form-item">
					<u-field label="联系人姓名" v-model="form.nickname" label-width="160" placeholder="请输入联系人姓名" required />
				</view> -->

				<!-- 手机号码 -->
				<!-- <view class="apply-form-item">
					<u-field label="手机号码" v-model="form.mobile" label-width="160" placeholder="请输入手机号码" required />
				</view> -->

				<!-- 问题截图 -->
				<view class="apply-form-item">
					<u-field label="投诉截图" label-width="160" placeholder="请上传投诉截图证明" :border-bottom="false"
						required disabled />
					<view>
						<u-upload ref="uUpload" :show-progress="false" :header="{token: $store.getters.token}"
							:max-count="10" width="150" height="150" :action="action" upload-text="上传图片"
							@on-success="onSuccess"  @on-remove="onRemove" />
					</view>
					<view class="muted m-t-20 m-b-30">支持jpg、png、jpeg格式的图片，最多可上传10张</view>
				</view>
				<view class="apply-form-item">
					<view class="label">备注说明</view>
					<view class="flex-1" style="background-color: #F8F8F8;">
						<u-input v-model="content" type="textarea" placeholder="请描述具体原因，300字以内" :border="false"
							:height="160" />
					</view>
				</view>

				<!-- 提交申请 -->
				<view style="padding: 30rpx 20rpx 30rpx 0;">
					<button type="primary" size="lg" class="br60" @tap="onSubmit">投诉</button>
				</view>

				<!-- 查阅记录 -->
				<router-link to="/bundle/pages/user/complain_recode">
					<view class="flex row-center muted">
						<u-icon name="order" size="32" />
						<view class="m-l-10">查看提交记录</view>
					</view>
				</router-link>
			</view>
		</view>
		<u-select v-model="showPop" mode="single-column" value-name="id" label-name="name" :list="shopCategory"
			@confirm="confirmSelect"></u-select>
	</view>
</template>

<script>
	import {
		complain,
		getComplainCategory
	} from "@/api/user"
	import {
		baseURL
	} from '@/config/app'
	import {
		sendSms
	} from '@/api/app'
	import {
		SMSType
	} from '@/utils/type'
	export default {
		data() {
			return {
				content:'',
				// 表单数据
				form: {
					cid: '',
					clabel: '',
					name: '',
					image: '',
					content: ''
				},
				codeTips: '',
				shopCategory: [],
				showPop: false,
				action: baseURL + '/api/file/formimage',
				fileList: []
			}
		},
		onLoad() {
			this.getComplainCategoryFun()
			this.goLogin()
		},
		methods: {
			goLogin() {
				let {
					isLogin
				} = this;
				if (isLogin) {
					return;
				}
				uni.redirectTo({
					url: '/pages/login/login'
				});
			},
			
			async getComplainCategoryFun() {
				const {
					code,
					data
				} = await getComplainCategory()
				if (code == 1) {
					this.shopCategory = data.lists
				}
			},
			// 提交表单
			async onSubmit() {
				const {
					form,
					fileList
				} = this
				const submitObj = {
					...form,
					image: fileList[0],
					content:this.content
				}
				delete submitObj.clabel
				const {
					data,
					code,
					msg
				} = await complain(submitObj)
				if(code == 1) {
					this.$toast({
						title: msg
					})
					setTimeout(() => {
						this.$Router.replace({
							path: '/bundle/pages/user/complain_recode',
							query: {
								id: data.id
							}
						})
					},1000)	
				}
			},
			confirmSelect(e) {
				const {
					value,
					label
				} = e[0]
				this.form.cid = value
				this.form.clabel = label
			},
			onSuccess(e) {
				this.fileList.push(e.data.base_uri)
			},
			onRemove(index) {
				this.fileList.splice(index, 1)
				console.log(index)
			},
		},

	}
</script>

<style lang="scss">
	.store-settled {
		background-color: #FA844C;
		min-height: 100vh;
		background-repeat: no-repeat;
		background-size: 100% auto;
		overflow: hidden;

		.content {
			margin-top: 320rpx;
			padding: 0 20rpx 31rpx;

			.apply-form {
				border-radius: 8px;
				padding: 20rpx 0 30rpx 26rpx;

				.apply-form-item {
					.send-code-btn {
						height: 56rpx;
						width: 188rpx;
						border: 1rpx solid $-color-primary;
					}
				}

				.primary-btn {
					width: 100%;
					height: 88rpx;
					background-color: $-color-primary;
				}
			}
		}

		// .pop-categories {
		// 	.reason-item {
		// 		padding: 24rpx 20rpx;

		// 		.reason-desc {
		// 			line-height: 46rpx;
		// 		}
		// 	}
		// }
	}
</style>