yijianbao_user_uniapp/pages_user/complaint.vue

<template>
	<view class="container">
		<u-form labelPosition="top" labelWidth='0' :model="formdata" :rules="rules" ref="uForm" errorType="toast">
			<u-form-item label=" " prop="type">
				<view class="form-item">
					<view class="form-item-title">投诉类型</view>
					<view class="tagbox">
						<view :class="formdata.type == 1?'tagitem active':'tagitem'" @click="formdata.type = 1">店铺</view>
						<view :class="formdata.type == 2?'tagitem active':'tagitem'" @click="formdata.type = 2">商品</view>
						<view :class="formdata.type == 0?'tagitem active':'tagitem'" @click="formdata.type = 0">其他</view>
					</view>
				</view>
			</u-form-item>
			<u-form-item label=" " prop="title">
				<view class="form-item">
					<view class="form-item-title">投诉标题</view>
					<u--input v-model="formdata.title" placeholder="请输入投诉标题" maxlength='100'></u--input>
				</view>
			</u-form-item>
			<u-form-item label=" " prop="content">
				<view class="form-item">
					<view class="form-item-title">投诉内容</view>
					<u--textarea v-model="formdata.content" placeholder="请详细描述您遇到的问题，我们会认真处理您的投诉" count maxlength='200'></u--textarea>
				</view>
			</u-form-item>
			<u-form-item label=" " prop="images">
				<view class="form-item">
					<view class="form-item-title">上传凭证</view>
					<u-upload
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						:maxCount="3"
					></u-upload>
				</view>
			</u-form-item>
		</u-form>
		<view class="btn-box">
			<view class="sub-btn" @click="submit()">提交</view>
		</view>
	</view>
</template>

<script>
	import {storeComplaint} from '@/api/user.js'
	export default {
		data() {
			return {
				fileList1:[],
				formdata: {
					title:'',
					type:0,//0默认1店铺2商品
					content: '',
					images: ''
				},
				rules: {
					title: [{required: true, message: '请输入投诉标题'}],
					content: [{required: true, message: '请输入投诉内容'}],
					images: [{required: true, message: '请上传凭证'}],
				}
			}
		},
		methods: {
			submit(){
				var that=this;
				if(this.fileList1.length>0){
					this.formdata.images=this.fileList1[0].url
				}
				this.$refs.uForm.validate().then(res => {
					if(res) {
						storeComplaint(this.formdata).then(res=>{
							if(res.code == 200) {
								uni.showModal({
									title: '',
									content: '我们已收到您的反馈，谢谢',
									showCancel: false,
									success: function (res) {
										if (res.confirm) {
											uni.navigateBack()
										} else if (res.cancel) {
											uni.navigateBack()
										}
									}
								});
							} else {
								uni.showToast({
									title: res.msg,
									icon:'none'
								})
							}
						})
					}
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uni.getStorageSync('requestPath')+'/app/common/uploadOSS',  
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								console.log(JSON.parse(res.data).url)
								resolve(JSON.parse(res.data).url)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.container{
		padding: 24rpx;
	}
	::v-deep .u-form-item__body {
		padding: 0 !important;
	}
	.btn-box{
		width: 100%;
		height: 120upx;
		padding: 0 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		.sub-btn{
			width: 100%;
			height: 88upx;
			line-height: 88upx;
			text-align: center;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background: #2583EB;
			border-radius: 44upx;
		}
	}
	.tagbox {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.tagitem {
			min-width: 100rpx;
			box-sizing: border-box;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			padding: 8rpx 12rpx;
			background: #FFF;
			border: 1rpx solid #2583EB;
			color: #2583EB;
			border-radius: 4rpx 4rpx 4rpx 4rpx;
			margin-right: 24rpx;
			text-align: center;
		}
		.active {
			color: #FFFFFF;
			border: 1rpx solid #2583EB;
			background: #2583EB;
		}
	}
	.form-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 0 24rpx 24rpx 24rpx;
		margin-bottom: 24rpx;
		&-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #222222;
			padding: 24rpx 0;
		}
	}
</style>