JiangxiMiniProgram/pages/indexEntry/consult/pubComplaint/pubComplaint.vue

<template>
	<view class="pageBgImg">
		<topNavbar title="我要投诉"></topNavbar>
		<view class="pad">
			<!-- 投诉类别 -->
			<view class="card">
				<view class="row">
					<view class="label">投诉类别</view>
					<view class="rightSelect">
						<u-radio-group
						    v-model="form.userType"
						  >
						    <u-radio
						      :customStyle="{marginRight: '24rpx'}"
						      v-for="(item, index) in radiolist1"
						      :key="index"
						      :label="item.name"
						      :name="item.id"
						    >
						    </u-radio>
						  </u-radio-group>
					</view>
				</view>
			</view>
			<!-- 驾校名称 教练名称 -->
			<view class="card">
				<view class="row">
					<view class="label">驾校名称</view>
					<view @click="showSchool=true"  class="select_row my" >
						<input v-model="form.schoolName"   placeholder="请选择"   @click="showSchool=true" disabled  style="pointer-events: none;"/></input>
						<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
					</view>
				</view>
				<view class="row">
					<view class="label">教练名称</view>
					<view @click="goCoach"  class="select_row" >
						<input v-model="form.coachName"   placeholder="请选择"   @click="goCoach" style="pointer-events: none;" disabled/></input>
						<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
					</view>
				</view>
			</view>
			<!-- 投诉类型 -->
			<view class="card">
				<view class="row">
					<view class="label">投诉类型</view>
					<view @click="showComplainType=true"  class="select_row" >
						<input v-model="form.complainTypeName"   placeholder="请选择"   @click="showComplainType=true" style="pointer-events: none;" disabled/></input>
						<u-icon name="arrow-right" size="14" color="#686B73" style="margin-left: 12rpx;" ></u-icon>
					</view>
				</view>
			</view>
			<!-- 咨询内容 -->
			<view class="card" style="padding: 0 24rpx 24rpx 24rpx ;">
				<view class="h2">咨询内容</view>
				<view class="textareaBg">
					<view class="flex">
						<view class="icon">
							<image src="@/static/images/index/edit.png" mode=""></image>
						</view>
						<view class="inputBox">
							<u-textarea v-model.trim="form.content" ref="textarea" placeholder="详细说明问题，以便获得更好的回答~"></u-textarea>
						</view>
					</view>
					<view class="phoneBox">
						<view class="imgBox">
							<view class="img" v-for="(item,index) in imgArr" :key="item">
								<view class="minusCircle" @click="deleteImg(item)">
									<u-icon name="close-circle-fill"  size="20" color="#b9061d"></u-icon>
								</view>
								<image :src="item" mode=""></image>
							</view>
						</view>
						<view class="phone" @click="chooseImages"  v-if="imgArr.length<3">
							<view class="phoneIcon">
								<image src="@/static/images/index/btn_tupian.png" mode=""></image>
							</view>
							<view class="lab">添加图片</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="card">
				<view class="phone_row">
					<view class="label">联系电话</view>
					<view class="uInput my">{{ this.vuex_userInfo.mobile }}</view>
				</view>
			</view>
			
			<view class="btn" :class="{active: btnActive}" @click="submintFn">提交</view>
		</view>
		<u-picker :show="showComplainType" :columns="complainTypeArr" keyName="label" @confirm="confirmComplainType" @cancel="showComplainType=false"></u-picker>
		
		<u-popup :show="showSchool" mode="bottom" :round="8"  @close="showSchool=false">
			<searchSchool @chooseSchool="chooseSchool"/>
		</u-popup>
		 <!-- <u-picker :show="show" :columns="shoolArr" keyName="lab"></u-picker> -->
	</view>
</template>

<script>
	import { createcomplain, consultationType } from '@/config/api.js'
	import searchSchool from '@/pages/indexEntry/enroll/registInfo/comp/searchSchool.vue'
	
	import { uploadImgApi } from '@/config/utils.js'
	
	export default {
		components: { searchSchool },
		data() {
			return {
				showSchool: false,
				value: '',
				imgArr: [],
				showComplainType: false,
				// 1、服务态度，2、教学质量、3、退费问题，4、学时问题，5、考试预约，6、转校问题,示例值(1)
				complainTypeArr: [],
				form: {
					value: '投诉驾校',
					complainType: '',
					complainTypeName: '',
					userType: 1,
					coachName: '',
					schoolName: '',
					schoolId: '',
					content: '',
					type: 2
				},
				radiolist1: [{
				            name: '投诉驾校',
							id: 1,
				            disabled: false
				          },
				            {
				              name: '投诉教练',
							  id: 2,
				              disabled: false
				            },
				          ],
			}	
		},
		computed: {
			btnActive() {
				if(this.form.schoolId&&this.form.complainType&&this.form.content) {
					return true
				}else {
					return false
				}
			}
		},
		onLoad() {
			uni.$on('upDateCoachItem',(item)=>{
				console.log(item)
				this.form.coachId = item.id
				this.form.coachName = item.name
			})
			this.consultationTypeFn()
		},
		methods: {
			// 投诉类型
			async consultationTypeFn() {
				const {data: res} = await consultationType()
				this.complainTypeArr = [res]
			},
			// 选择投诉类型
			confirmComplainType(val) {
				console.log(val)
				let item = val.value[0]
				this.form.complainType = item.value
				this.form.complainTypeName = item.label
				this.showComplainType = false
			},
			// 选择驾校
			chooseSchool(item) {
				this.form.schoolName = item.name
				this.form.schoolId = item.id
				console.log(this.columnsCar)
				this.showSchool = false
			},
			// 跳转到选择教练
			goCoach() {
				if(!this.form.schoolId) return this.$u.toast('请先选择驾校')
				this.$goPage('/pages/indexEntry/enroll/registInfo/chooseCoach/chooseCoach?schoolId=' + this.form.schoolId)
			},
			deleteImg(item) {
				let index = this.imgArr.findIndex(val=>val==item)
				this.imgArr.splice(index, 1)
			},
			//选择图片
			chooseImages(type) {
				let imgNum = 3 - (this.imgArr.length)
				uni.chooseImage({
					count: imgNum, //允许选择的数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success:  res => {
						uni.showLoading({
							title: '图片上传中...'
						});
						// console.log(res)
						res.tempFiles.forEach( async (item,index)=>{
							 let imgLink = await uploadImgApi(item.path, item.name)
							 this.imgArr.push(imgLink)
						})
					}
				})
			},
			
			async submintFn() {
				if(!this.btnActive) return
				if(!this.form.content) return this.$u.toast('请输入内容')
				this.form.images = this.imgArr.join(',')
				let obj = Object.assign({}, this.form)
				delete obj.value
				delete obj.complainTypeName
				const {data: res} = await createcomplain(this.form)
				this.$u.toast('发布成功')
				setTimeout(()=>{
					this.$goPage('/pages/indexEntry/consult/record/record?tab=2')
				},1500)
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.pageBgImg {
	  .card {
		   margin-bottom: 20rpx;
	    .h2 {
			font-size: 28rpx;
			font-weight: 600;
			line-height: 96rpx;
	    }
	
	    .textareaBg {
			min-height: 364rpx;
			background: #F8F8F8;
			border-radius: 16rpx;
			border: 2rpx solid #E8E9EC;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
	      .flex {
			  padding: 20rpx;
			  align-items: flex-start;
	        .icon {
	          width: 24rpx;
			  height: 24rpx;
			  margin: 0 14rpx 0 24rpx;
	        }
	
	        .inputBox {
				flex: 1;
	         
	        }
			/deep/ .inputBox .u-textarea {
				padding: 0 !important;
				border: none !important;
				background: none !important;
			}
	      }
	
	      .phoneBox {
			  display: flex;
			  padding: 0 10rpx 20rpx 20rpx;
	        .imgBox {
				display: flex;
	          .img {
				margin-right: 14rpx;
				position: relative;
				width: 160rpx;
				height: 160rpx;
				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8rpx;
					overflow: hidden;
				}
				.minusCircle {
					position: absolute;
					right: -14rpx;
					top: -20rpx;
					z-index: 9;
					
				}
	          }
	        }
	
	        .phone {
				border: 2rpx dashed #CDCED0;
				width: 160rpx;
				height: 160rpx;
				background: #F8F8F8;
				border-radius: 8rpx;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
	          .phoneIcon {
				width: 60rpx;
				height: 60rpx;
	          }
	
	          .lab {
				font-size: 20rpx;
				color: #686B73;
				margin-top: 8rpx;
	          }
	        }
	      }
	    }
	  }
	.phone_row {
		display: flex;
		height: 104rpx;
		padding: 0 28rpx;
		line-height: 104rpx;
		.label {
			font-size: 28rpx;
			font-weight: 600;
			margin-right: 50rpx;
		}
		.uInput {
			flex: 1;
		}
	}
	  .btn {
			width: 396rpx;
			height: 72rpx;
			background: #D1E7FE;
			border-radius: 8rpx;
			font-size: 28rpx;
			text-align: center;
			line-height: 72rpx;
			margin: 100rpx auto 114rpx auto;
			color: #fff;
			&.active {
				background: $themC;
			}
	  }
	}
	.row {
		height: 120rpx;
		display: flex;
		align-items: center;
		padding-right: 30rpx;
		.label {
			font-size: 28rpx;
			font-weight: 600;
			width: 184rpx;
			text-align: center;
		}
		.select_row {
			display: flex;
			align-items: center;
			justify-content: space-between;
			flex: 1;
			input {
				font-size: 28rpx;
				color: #333;
			}
		}
	}
</style>