yijianbao_user_uniapp/pages_user/complaint.vue

<template>
	<view class="container">
		<view class="form-item top_item" @click="navTo">
			<text>我的咨询投诉</text>
			<u-icon name="arrow-right" color="#333" size="20"></u-icon>
		</view>
		<u-form labelPosition="top" labelWidth='0' :model="formdata" :rules="rules" ref="uForm" errorType="toast">
			<u-form-item label=" " prop="complaintType">
				<view class="form-item">
					<view class="form-item-title">投诉方式</view>
					<view class="tagbox">
						<view :class="formdata.complaintType == 1?'tagitem active':'tagitem'"
							@click="formdata.complaintType = 1">咨询</view>
						<view :class="formdata.complaintType == 2?'tagitem active':'tagitem'"
							@click="formdata.complaintType = 2">投诉/举报</view>
					</view>
				</view>
			</u-form-item>
			<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" v-if="formdata.type == 1">
				<view class="form-item">
					<view class="form-item-title">选择店铺</view>
					<view class="storename" @click="openStore">{{storeId? storeName : "选择店铺"}}</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="4"></u-upload>
				</view>
			</u-form-item>
		</u-form>
		<view class="btn-box">
			<view class="sub-btn" @click="submit()">提交</view>
		</view>
		<u-popup :show="show" :closeable="true" @close="close">
			<view class="storePop">
				<view class="storePop-title">选择店铺</view>
				<scroll-view class="scroll-list" scroll-y="true" @scrolltolower="lower" >
					<view class="storebox" v-for="(item,index) in storeList" :key="index">
						<image class="logo" :src="item.store.logoUrl" mode="aspectFill"></image>
						<view class="storebox-r">
							<view class="x-bc" style="flex: 1;min-height: 104rpx;">
								<view class="storename ellipsis">{{item.store.storeName || ''}}</view>
								<view class="storebox-btn" @click="handleClick(item)">选择</u-icon></view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {recommendList} from "@/api/index.js"
	import {storeComplaint} from "@/api/user.js"
	export default {
		data() {
			return {
				show: false,
				total: 0,
				pageNum: 1,
				storeId: '',
				storeName: "",
				isLastPage: false,
				storeList: [],
				fileList1: [],
				formdata: {
					title: '',
					type: 0, //0默认1店铺2商品
					content: '',
					images: '',
					complaintType: '',
				},
				rules: {
					complaintType: [{
						required: true,
						message: '请选择投诉方式'
					}],
					title: [{
						required: true,
						message: '请输入标题'
					}],
					content: [{
						required: true,
						message: '请输入内容'
					}],
					images: [{
						required: true,
						message: '请上传凭证'
					}]
				}
			}
		},
		methods: {
			openStore() {
				this.storeId = ''
				this.storeName = ''
				this.show = true
				this.pageNum = 1
				this.getList()
			},
			close() {
				this.show = false
			},
			lower(event) {
				if(this.total>this.storeList.length){
					this.pageNum++;
					this.getList();
				}
			},
			handleClick(item) {
				this.storeId = item.store.storeId
				this.storeName = item.store.storeName
				this.show = false
			},
			getList(){
				if(this.isLastPage){
					return;
				}
				const param = {
					pageNum: this.pageNum,
					pageSize: 10
				};
				recommendList(param).then(res => {
					if(res.code==200){
						//设置列表数据
						if (this.pageNum == 1) {
							this.storeList = res.rows; 
						} else {
							this.storeList = this.storeList.concat(res.rows);
						}
						this.total=res.total
						this.isLastPage=this.storeList.length>=res.total
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
					}
				});
			},
			navTo() {
				this.$isLogin().then(
					res => {
						if (res) {
							uni.navigateTo({
								url: '/pages_user/complaintList'
							})
						} else {
							uni.navigateTo({
								url: '/pages/auth/login'
							})
						}
					}
				);
			},
			submit() {
				if (this.fileList1.length > 0) {
					this.formdata.images = this.fileList1.map(item=>item.url).join(',')
				}
				if(this.formdata.type == 1&&!this.storeId) {
					uni.showToast({
						title: '请选择店铺',
						icon: 'none'
					})
					return
				}
				this.$refs.uForm.validate().then(res => {
					if (res) {
						this.$isLogin().then(res => {
							if (res) {
								if(this.formdata.type == 1) {
									this.formdata = {
										...this.formdata,
										storeId: this.storeId
									}
								}
								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'
										})
									}
								})
							} else {
								uni.navigateTo({
									url: '/pages/auth/login'
								})
							}
						});
					}
				})

			},
			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;
	}
	.scroll-list {
		height: 60vh;
		padding: 24rpx;
		box-sizing: border-box;
	}
	::v-deep .u-form-item__body {
		padding: 0 !important;
	}
	.storePop{
		background-color: #f5f5f5;
		&-title {
			padding: 24rpx;
			text-align: center;
			border-bottom: 1rpx solid #eee;
			background-color: #fff;
		}
		.storebox {
			background-color: #fff;
			padding: 20rpx;
			font-family: PingFang SC;
			color: #333333;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			overflow: hidden;
			display: flex;
			align-items: flex-start;
			margin-bottom: 24rpx;
			.logo {
				flex-shrink: 0;
				width: 104rpx;
				height: 104rpx;
				background: #fff;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 1rpx solid #eee;
				margin-right: 16rpx;
				box-sizing: border-box;
			}
			.storename {
				font-weight: 500;
				font-size: 32rpx;
			}
			.storedesc {
				margin-top: 12rpx;
				font-weight: 400;
				font-size: 22rpx;
			}
			.storebox-r {
				flex: 1;
				overflow: hidden;
			}
			.storebox-btn {
				flex-shrink: 0;
				padding: 10rpx 24rpx;
				font-size: 28rpx;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				border: 2rpx solid #FF5C03;
				font-weight: 500;
				font-size: 24rpx;
				color: #FF5C03;
			}
		}
	}
	.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: 16rpx;

		&-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #222222;
			padding: 24rpx 0;
		}
	}

	.top_item {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #222222;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx !important;
	}
</style>