179crm_user_app/pages_user/user/complaint.vue

<template>
	<view>
		<view class="p20 column">
			<view class="bg-white p30 radius16">
				<view class="bold">投诉类型<text class="color-price">*</text></view>
				<view class="justify-start align-center wrap mt20">
					<view v-for="(item,index) in cates" :key="index" :class="actsee==item.id?'active':'bg-light fs24 line'"
					@click="selectsee(item,index)" class="ptb20 plr30 mr20 radius12 mb20" >{{item.categoryName}}</view>
				</view>
			</view>
			<view class="bg-white p30 radius16 mt30">
				<view class="bold">投诉内容<text class="color-price">*</text></view>
				<view class="textinput">
					<textarea  auto-height maxlength='500' placeholder="请输入内容" :value="fconsulting"  @input='lookvalue' />
				</view>
				<view class="justify-between align-center">
					<view></view>
					<!-- <image src="/static/images/health/voice_icon.png" class="w48 h48"></image> -->
					<text class="fs24 color-text1">{{consultingNum}}/500</text>
				</view>
			</view>
			<!-- 多图上传 -->
			<view class="bg-white p30 radius16 mt30">
				<view class="bold">上传凭证（必传）<text class="color-price">*</text></view>
				<view class="justify-start align-center mt20">
					<view v-for="(item,index) in imgList" :key="index"  @tap="viewImage" :data-url="imgList[index]"
					class="justify-start align-center ml20 img-item">
						<image :src="item" class="w120 h120 radius8 " mode="aspectFill"></image>
						<image class="close-img" src="@/static/images/close32.png" mode="" @tap.stop="delImg" :data-index="index"></image>
					</view>
					<view class="column align-center bg-light w208 h208 radius8 center" @tap="chooseImage" v-if="imgList.length<3">
						<u-icon name="plus" size="16"></u-icon>
						<view class="fs28">选择图片</view>
					</view>
				</view>
				<view class="justify-between fs24 color-text1 mt20">
					<view>最多上传3张图片</view>
					<view><text>{{imgList.length}}</text>/3</view>
				</view>
			</view>
			<view class="bg-white p30 radius16 mt30 align-center">
				<view class="bold mr20">联系方式<text class="color-price">*</text></view>
				<input maxlength='20' v-model="phone"  placeholder="请输入您的手机号码或邮箱" class="flex-1"/>
			</view>
			<view class="h200"></view>
		</view>
		<view class="footer center">
			<view class="bg-color radius44 color-white h88 lh88 center" style="width: 90%;"
			@click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import {getuserlist,submitconsult} from '@/api/health.js'
	import {getCategory,submitComplaint} from '@/api/companyUser.js'
	export default {
		data() {
			return {
				cates:[],
				famaleurl:"/static/images/health/female_profile.png",
				maleurl:"/static/images/health/male_profile.png",
				actitem:null,
				type:null,
				consulting:null,
				consultingNum:0,
				actsee:null,
				phone:null,
				imgList:[],
				photos:[]
			}
		},
		onLoad() {
			this.getCategory()
		},
		methods: {
			getCategory(){
				getCategory().then(res=>{
					if(res.code==200){
						this.cates=res.data
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg,
						});
					}
				},rej => {}
				);
			},
			submit(){
				if(this.actsee==null){
					uni.showToast({
						icon:'none',
						title:'请选择投诉类型！',
					});
					return
				}
				if(this.consulting==null){
					uni.showToast({
						icon:'none',
						title:'请输入投诉内容！',
					});
					return
				}
			if(this.imgList.length==0){
				uni.showToast({
					icon:'none',
					title:'请上传凭证！',
				});
				return
			}
				const data={
					type: this.actsee,
					content: this.consulting,
					url: this.photos,
					contact:this.phone
				}
				submitComplaint(data).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon:'none',
							title:'提交成功',
						});
						setTimeout(function() {
													 uni.$emit('refreshComplaint');
													 uni.navigateBack({
														 delta: 1
													 })
						}, 500);
					}else{
						uni.showToast({
							icon:'none',
							title:res.msg,
						});
					}
				})
			},
			lookvalue(e){
				this.consulting=e.detail.value
				this.consultingNum=e.detail.cursor
				if(this.consultingNum==500){
					uni.showToast({
						icon:'none',
						title:'最大输入500字符！',
					});
				}
			},
			selectsee(item,index){
				this.actsee=item.id
			},
			// 选择上传的图片
			chooseImage() {
				console.log('图片')
				var that = this;
				uni.showActionSheet({
					itemList: ['相册', '拍照'],
					success: function(res) {
						if (res.tapIndex == 0) {
							//从相册选择
							that.chooseImageFunction('album')
						} else if (res.tapIndex == 1) {
							//拍照
							that.chooseImageFunction('camera')
						}
					},
					fail: function(res) {
						
					}
				});
			},
			chooseImageFunction: function(type) {
				var that = this;
				uni.chooseImage({
					count: 3, // 默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: [type],
					success: (res) => {
						uni.uploadFile({
							url: uni.getStorageSync('requestPath')+'/app/common/uploadOSS', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'  // 上传附带参数
							},
							success: (uploadFileRes) => {
								// 根据接口具体返回格式   赋值具体对应url
								if (this.imgList.length != 0) {
									this.imgList = this.imgList.concat(res.tempFilePaths)
								} else {
									this.imgList = res.tempFilePaths
									
								}
						 
								this.photos = this.photos.concat(JSON.parse(uploadFileRes.data).url)
							}
						});
						 
					}
				});
			},
			// 查看图片
			viewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			// 删除上传的图片
			delImg(e) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定要删除照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							that.imgList.splice(e.currentTarget.dataset.index, 1)
							this.photos.splice(e.currentTarget.dataset.index, 1);
						}
					},
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.peoplebox{
	  white-space: nowrap;
	  margin-top: 30rpx;
	  ::-webkit-scrollbar {
	    display: none;
	  }
	 .scroll-content{
		  display: flex;
		flex-wrap: nowrap;
	 }
	.item-list{
		padding: 20rpx 28rpx;
		width: fit-content;
		display: flex;
		justify-content: start;
		border-radius: 12rpx;
		margin-right: 20rpx;
	}
	.noact-box{
		background-color: #F5F7FA;
	}
	.act-box{
		background-color: #F0FAFF;
		border: 2rpx solid #008FD3;
	}
}
.line{
	border: 2rpx solid #F5F7FA;
}
.active{
	font-size: 24rpx;
	color: #008FD3;
	background: #F0FAFF;
	border: 2rpx solid #008FD3;
}
.img-item{
	position: relative;
	margin-right: 20upx;
	.close-img{
		width: 32upx;
		height: 32upx;
		position: absolute;
		top:2upx;
		right: 2upx;
	}
}
.textinput{
	margin-top: 30rpx;
	height:200rpx;
	overflow-y: scroll;
}
.footer{
	padding: 40rpx 0; 
	width: 100%;
	position: fixed;
	bottom: 0;
	background-color: #fff;
	z-index:999
}
</style>