safetyHome_wxapp/pages/complain/wantCompalin.vue

<!-- 我要投诉 -->
<template>
	<view class="pageBg">
		<view class="content">
			<view class="topBack" :style="{marginTop:phoneHeight + 'px'}">
				<image src="../../static/icon_back@2x(1).png" style="width:48rpx ;height: 48rpx;margin-left: 36rpx;margin-top: 18rpx;"
				 @tap="back"></image>
			</view>
			<view class="topImg">
				<image src="../../static/complain_icon_complain@2x.png" style="width: 100%;height: 100%;"></image>
			</view>
			<view class="topTitle">
				我要投诉
			</view>
			<view class="main">
				<image src="../../static/appraise_bgimage@2x.png" style="width: 100%;height: 100%;"></image>
				<image src="../../static/guarantee_icon_summary@2x.png" class="mainImg"></image>
				<view class="fa">投诉摘要</view>
				<view class="star">
				   <input placeholder="请填写投诉摘要" style="width: 95%;height: 100%;margin: 0 auto;" maxlength="69" v-model="digest"/>
				</view>
				<image src="../../static/guarantee_icon_content@2x.png" class="contentImg"></image>
				<view class="contentTitle">
					投诉内容
				</view>
				<view class="textContent">
					<textarea placeholder="请填写投诉内容" style="width: 95%;height: 96%;margin-left: 10rpx;margin-top: 10rpx;" v-model="textRea" maxlength="300" cursor-spacing="120"></textarea>
				</view>
				<!-- 图片盒字 -->
				<view style="width:646rpx;height: 114rpx;position: absolute;left: 24rpx;bottom: 40rpx;display: flex;">
					<view style="height: 114rpx;margin-right: 10rpx;display: flex;justify-content: space-between;" v-show="imgData" >
						<image style="width: 114rpx;height: 114rpx;margin-right: 10rpx;" :src="item" v-for="(item,index) in imgData" :key="index" @longpress="deleteImg(index)" @tap="prew(imgData,index)"></image>
					</view>
					<image src="../../static/circle_image@2x.png" style="width: 114rpx;height: 114rpx;" @tap="uploadImg(item)" v-if="imgData.length<3"></image>
					<view style="font-size: 18rpx;line-height:114rpx;color: #999999;margin-left: 10rpx;" v-if="imgData.length>0">长按图片可以进行删除</view>
				</view>
			</view>
		</view>
		<button class="submit" :class="{active:digest && textRea}" @tap="submit" >提交</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isloading:false,
				digest:'',//报修摘要
				textRea:'',//评价内容
				starNum:0,//星星数量
				phoneHeight: 0, //手机状态栏的高度
				isShow: false,
				imgData: [],
				num:3
			}
		},
		 components: {},
		created() {
			// 获取状态栏的高度
			this.phoneHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			// 计算还能选择几张
			  formatNum(){
				this.num=3-this.imgData.length  
			  },
			// 预览图片
			prew(item,index){
				uni.previewImage({
				  current:item[index],
				 	urls:item,
				success:(res)=>{
				
				},
				})
			},
			// 长按图片删除
			deleteImg(index){
				 wx.showModal({
				   title: '提示',
				   content: '确定要删除此图片吗？',
				   success:  (res) =>{
				    if (res.confirm) {
				     this.imgData.splice(index, 1);
					 this.formatNum()
				    } else if (res.cancel) {
				      return false;    
				     }
				   }
				  })
			},
			// 选择评分
		changeRate(e){
			this.starNum=e.value
		},
			// 图片上传
			uploadImg(item) {
				if (this.imgData.length >= 3) {
					uni.showToast({
						"icon": 'none',
						title: "最多可以上传三张图片"
					})
					return
				} else {
					uni.chooseImage({
						count: this.num, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						// sourceType: ['album'], //从相册选择
						success: (res) => {
							console.log(res)
							var successUp = 0; //成功个数
							var failUp = 0; //失败个数
							var length = res.tempFilePaths.length; //总共个数
							var i = 0; //第几个
							this.uploadDIY(res.tempFilePaths, successUp, failUp, i, length);
						},
					});
				}
			},
			// 上传图片
			uploadDIY(filePaths, successUp, failUp, i, length) {
				uni.showLoading({
					mask:true,
					title:'上传中'
				})
				wx.uploadFile({
					filePath: filePaths[i],
					url: 'https://www.szdeao.com/wxapplet/upload/imgPhoto ', //仅为示例，非真实的接口地址
					name: 'photo',
					method: 'post',
					success: (resp) => {
						let data =JSON.parse(resp.data)
						console.log(data)
						// 判断上传照片是否成功
						if(data.code==0){
							let reg=/,$/gi;
							  let str=data.data.imagesPath.replace(reg,"");
							  if(this.imgData.length<3){
								  this.imgData.push(str)
								  this.formatNum()
								  uni.hideLoading()
								  setTimeout(()=>{
									  uni.showToast({
									  	title:'上传成功',
										'icon':'success'
									  })
								  },1000)
							  }
							successUp++;
						}else{
							uni.showToast({
								title:'上传失败,'+data.msg,
								'icon':'none'
							})
						} 
					},
					fail: (res) => {
						failUp++;
					},
					complete: () => {
						i++;
						if (i == length) {
							
						} else { //递归调用uploadDIY函数
							this.uploadDIY(filePaths, successUp, failUp, i, length);
						}
					},
				});
			
			},
			// 提交
			submit(){
				if(!this.digest || !this.textRea){
					return
				}else{
					uni.showLoading({
						mask:true,
						title:'加载中'
					})
					this.http.httpRequest('/wxapplet/owneradvice/add', 'post', {
						userId: uni.getStorageSync('userId'),
						createBy: uni.getStorageSync('createBy'),
						content:this.textRea,
						PhotosUrlList:this.imgData,
						comtyId:uni.getStorageSync('comtyId'),
						complType:this.digest,
						ownerPhone:uni.getStorageSync('phoneNumber')
					}, true).then((res)=>{
						console.log(res)
						if(res.code==0){
							uni.navigateTo({
								url:'./compalinSuccess'
							})
							this.textRea=''
							this.digest=''
							this.imgData=[]
							uni.hideLoading()
						}else{
							uni.hideLoading()
							uni.showToast({
								title:res.msg,
								'icon':'none'
							})
						}
					}).catch(()=>{
						uni.hideLoading()
					})
				}
			},
			// 返回上一页
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		},
		
	}
</script>

<style scoped>
	.submit {
		width: 702rpx;
		height: 90rpx;
		background: rgba(244, 244, 244, 1);
		opacity: 1;
		border-radius: 18rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(204, 204, 204, 1);
		position: absolute;
		bottom:56rpx;
		left: 26rpx;
		text-align: center;
		line-height: 90rpx;
	}

	.textContent {
		width: 646rpx;
		height: 168rpx;
		background: rgba(246, 250, 255, 1);
		border: 2rpx solid rgba(197, 224, 255, 1);
		opacity: 1;
		border-radius: 6rpx;
		position: absolute;
		left: 24rpx;
		bottom: 180rpx;
	}

	.contentImg {
		width: 33rpx;
		height: 40rpx;
		position: absolute;
		bottom: 460rpx;
		left: 330rpx;
	}

	.contentTitle {
		width: 116rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(41, 138, 253, 1);
		position: absolute;
		bottom: 388rpx;
		left: 290rpx;
	}

	.star {
		width: 646rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		position: absolute;
		left: 24rpx;
		top: 164rpx;
		background:rgba(246,250,255,1);
		border:2rpx solid rgba(197,224,255,1);
		opacity:1;
		border-radius:6rpx;

	}

	.starImg {
		width: 51rpx;
		height: 49rpx;
	}

	.fa {
		width: 116rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(41, 138, 253, 1);
		position: absolute;
		top: 114rpx;
		left: 288rpx;
	}

	.mainImg {
		width: 40rpx;
		height: 46rpx;
		position: absolute;
		top: 40rpx;
		left: 326rpx;
	}

	.main {
		width: 692rpx;
		height: 844rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		position: relative;
	}

	.topTitle {
		width: 128rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin: 0 auto;
		margin-top: 26rpx;
	}

	.topImg {
		width: 122rpx;
		height: 122rpx;
		margin: 0 auto;
		margin-top: 4rpx;
	}

	.pageBg {
		width: 100%;
		height: 100vh;
		background: linear-gradient(180deg, rgba(205, 227, 255, 1) 0%, rgba(133, 188, 255, 1) 100%);
		opacity: 1;
	}

	.content {
		width: 100%;
		position: absolute;
		top: 0;
	}
	.active{
		color:rgba(255,255,255,1);
		background:rgba(41,138,253,1);
		opacity:1;
	}
</style>