operatingCompany/operatingCompany/pages/reportManage/reportDetail.vue

<template>
	<view class="content">
		<view class="zdyNav">
		  <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		  <view class="nav">
			  <view class="backBoxBox">
				  <view class="backBox">
					  <image src="../../static/img/icon_return_white@2x.png" mode="" class="baiheiback" @click="back"></image>
					  <view class="shuxian"></view>
					  <image src="../../static/img/icon_home_white@2x.png" mode="" class="homeImg" @click="goHome" ></image>
				  </view>
			  </view>
			 
			  <view >报告详情</view>
			  <view style="width:157rpx;"></view>
		  </view>
		  <view class="topCont" v-if="info.state==1"> 
			  <image src="../../static/img/report_icon_daitijiao@2x.png" mode="" class="topContImg"></image>
			  <view class="topContTxt">待提交</view>
		  </view>
		  <view class="topCont" v-if="info.state==2">
			  <image src="../../static/img/report_icon_daizuoye@2x.png" mode="" class="topContImg2"></image>
			  <view class="topContTxt">待作业</view>
		  </view>
		  <view class="topCont" v-if="info.state==3">
			  <image src="../../static/img/report_icon_dianping@2x.png" mode="" class="topContImg3"></image>
			  <view class="topContTxt">待点评</view>
		  </view>
		  <view class="topCont" v-if="info.state==4">
			  <image src="../../static/img/report_icon_daihuifu@2x.png" mode="" class="topContImg4"></image>
			  <view class="topContTxt">待回复</view>
		  </view>
		  <view class="topCont" v-if="info.state==5">
			  <image src="../../static/img/report_icon_yiwancheng@2x.png" mode="" class="topContImg5"></image>
			  <view class="topContTxt">已完成</view>
		  </view>
		</view>
		
		<view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
		<view style="height: 44px;"></view>
		<view class="main">
			<!-- 访问人 -->
			<view class="submitOpBox">
				<view class="submitOpBoxLeft">
					<view class="submitOpBoxLeftline">访问人：{{info.managerName}}</view>
					<view class="submitOpBoxLeftline" style="padding-top: 28rpx;">访问人：{{info.checkTime}}</view>
				</view>
				<view class="shopScore" v-if="info.shopScore">{{info.shopScore}}分</view>
			</view>
			<!-- 门店 -->
			<view class="shopBox">
				<view class="shopTop">
					<view class="shopName">{{info.shopInfo.shopName}}</view>
					<view class="shopTopImgBox">
						<image src="../../static/img/icon_daohang_def@2x.png" mode="" class="shopTopimg" @click="goaddress"></image>
						<image src="../../static/img/icon_phone_def@2x.png" mode="" class="shopTopimg" @click="call"></image>
					</view>
				</view>
				<view class="shopCont">
					<view class="shopLevel" v-if="info.shopInfo.shopLevel">{{info.shopInfo.shopLevel}}</view>
					<view class="openingTime" v-if="info.shopInfo.openingTime">·{{info.shopInfo.openingTime}}</view>
					<view class="openingTime">联系人：{{info.shopInfo.contactor}} {{info.shopInfo.contactorPhone}}</view>
				</view>
				<view class="address" v-if="info.shopInfo.address">
					<view style="padding-right: 30rpx;">{{info.shopInfo.address}}</view>
				    <view v-if="info.shopInfo.distance">{{info.shopInfo.distance}}km</view>
				</view>
			</view>
			
			<!-- tab -->
			<view class="tabBox">
				<view class="tabLine" :class="{tabActive:tabIndex==1}" @click="tabClick(1)">检测情况</view>
				<view class="tabLine" :class="{tabActive:tabIndex==2}" @click="tabClick(2)">行动建议</view>
				<view class="tabLine" v-if="info.state==4||info.state==5" :class="{tabActive:tabIndex==3}" @click="tabClick(3)">点评</view>
			</view>
			<!-- 检测情况 -->
			<view class="categoryList" v-if="tabIndex==1">
				<view class="categoryListLine" v-for="(item,index) in info.categoryList">
					<view class="categoryName">{{item.categoryName}}</view>
					<view class="sectionList" v-for="(list,index2) in item.sectionList">
						<view class="checkName">{{list.checkName}}</view>
						<view class="itemList" v-for="(v,index3) in list.itemList">
							<view class="itemTOp">
								<view class="itemName">{{v.itemName}}</view>
								<view class="itemSorce" v-if="v.keyType==4">{{v.itemValue}}分</view>
							</view>
							<view class="itemdescribe" v-if="v.describe">{{v.describe}}</view>
							<view class="ckImemBox" v-if="v.keyType==1">
								<view class="ckItemLIne" v-for="(ckv,i) in v.itemValue.split(',')">
									{{ckv}}
								</view>
							</view>
							<view class="itemTxt" v-if="v.keyType==2">
								{{v.itemValue}}
							</view>
							<view class="itemImgBox" v-if="v.keyType==3">
								<view  v-for="(itemiMg,i) in v.itemValue.split(',')">
									<image :src="itemiMg" mode="" class="itemIMg"></image>
								</view>
								
							</view>
						</view>
					</view>
				</view>
				
			</view>
			<!-- 行动建议 -->
			<view class="suggestList" v-if="tabIndex==2">
				<view class="suggestLine" v-for="(item,index) in info.suggestList">
					<view class="suggestLineTop">建议({{index+1}})</view>
					<view class="suggestCont">{{item.suggest}}</view>
					<view class="suggestLineBottom">
						<view class="suggestLineBottomTxt">预计完成日期:{{item.orderFinishTime.slice(0,item.orderFinishTime.length-8)}}</view>
						<view class="suggestLineBottomTxt">{{item.managerName}}</view>
					</view>
					<image src="../../static/img/report_weixiugai@2x.png" mode="" class="exeStateImg" v-if="item.exeState==0"></image>
					<image src="../../static/img/_report_yixiugai@2x.png" mode="" class="exeStateImg" v-if="item.exeState==1"></image>
				</view>
				
				
				<nodata v-if="info.suggestList.length==0"></nodata>
			</view>
			<!-- 点评 -->
			<view class="remarksBox" v-if="tabIndex==3">
				<view class="remarksLine">
					<view class="remarksLineTop">
						<view class="remarksLineTopTitle">对门店行动完成情况打分</view>
						<view class="remarksLineTopXxbox">
							<uni-rate :max="5" v-model="info.shopEvaStar" :size="16" :readonly="true"/>
						</view>
					</view>
					<view class="remarksLineTxt1">
						补充说明
					</view>
					<view class="remarksLineTxt2">{{info.shopEvaContent}}</view>
					<view class="timeBox">
						<view>{{info.shopEvaTime}}</view>
						<view>{{info.shopEvaOpName}}</view>
					</view>
				</view>
				
				<view class="remarksLine" v-if="lookShow">
					<view class="remarksLineTop">
						<view class="remarksLineTopTitle">对运营经理的服务评价</view>
						<view class="remarksLineTopXxbox">
							<uni-rate :max="5" v-model="info.userEvaStar" :size="16" :readonly="true"/>
						</view>
					</view>
					<view class="remarksLineTxt1">
						其他建议
					</view>
					<view class="remarksLineTxt2">{{info.userEvaContent}}</view>
					<view class="timeBox">
						<view>{{info.userEvaTime}}</view>
						<view>{{info.userEvaOpName}}</view>
					</view>
				</view>
				
			</view>
		</view>
	   <view style="height: 150rpx;"></view>
	   <view class="bottom"  v-if="info.state==1&&loginType==1">
		    <view class="delBtn" @click="delBg">删除</view>
		    <view class="editBtn" @click="editBg">编辑</view>
			<view class="Submit" @click="submitBg">提交</view>
	   </view>
	   <view class="bottom"  v-if="info.state==2&&loginType==1">
	   		<view class="shoreDz">发送给店长</view>
	   </view>
	   <view class="bottom"  v-if="info.state==3&&loginType==1" @click="goremarks">
	   		<view class="shoreDz">点评</view>
	   </view>
	   <!-- 店主-->
	   <view class="bottom"  v-if="info.state==2&&loginType==2">
	   		<view class="shoreDz" @click="editWork">修改作业</view>
	   </view>
	   <view class="bottom"  v-if="info.state==4&&loginType==2">
	   		<view class="shoreDz">回复</view>
	   </view>
	</view>
</template>

<script>
	import nodata from '@/components/nodata/nodata.vue'	
	export default {
		components: {
			   nodata
		},
		data() {
			return {
				 iStatusBarHeight:'',
				 id:'',
				 info:'',
				 tabIndex:1,
				 lat:'',
				 lng:'',
				 loginType:'',
				 type:1,
				 userInfoId:'',
				 mEvaluateLook:'',
				 lookShow:true,
			}
		},
		onLoad(opt) {
			if(uni.getStorageSync("logInData").userInfo){
				this.userInfoId=uni.getStorageSync("logInData").userInfo.id;
				this.mEvaluateLook=uni.getStorageSync("logInData").mEvaluateLook;
			}
          
		    var that=this;
			this.loginType=uni.getStorageSync("logInData").type;
			console.log('this.loginType=='+this.loginType)
		    this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			this.id=opt.id;
			//this.getSuperCheckSheetInfo();
			uni.getLocation({
				success(res) {
					that.lng = res.longitude
					that.lat = res.latitude
					that.getSuperCheckSheetInfo()
				},
				fail() {
				
				}
			})
			//#ifdef H5
			
			that.lng='117.06533'
			that.lat='36.68013'
			that.getSuperCheckSheetInfo()
			 // #endif
		},
		onShow() {
			if(this.id){
				this.getSuperCheckSheetInfo()
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			editBg(){
				this.info.categoryList.forEach(item=>{
					item.sectionList.forEach(v=>{
						v.check=v.isCheck;
						v.itemList.forEach(i=>{
							if(i.keyType==1){
								
								i.keyValue=i.keyValue.replace(/，/ig,',')
								var array= i.keyValue.split(",")
								var array2=i.itemValue.split(",")
								var arr=[];
								console.log(array2)
								array.forEach(name=>{
									var index = array2.indexOf(name);
									console.log(index)
									if(index!=-1){
										var obj={
											name:name,
											check:true
										}
									}else{
										var obj={
											name:name,
											check:false
										}
									}
									
									arr.push(obj)
								})
								i.array=arr
							}
						})
					})
				})
				//console.log(this.info.categoryList)
				this.$store.commit('mutationsCategoryList',this.info.categoryList);
				this.$store.commit('mutationssuggestList',this.info.suggestList)
				uni.navigateTo({
					url:'../entryReport/entered?type=3&sheetID='+this.id
				}) 
			},
			goaddress(){
				var that=this;
				if(that.info.shopInfo.lat==''||that.info.shopInfo.lng==''){
					uni.showToast({
					    title: '该门店未设置定位',
						 icon:'none',
					    duration: 2000,
					});
					return false;
				}
				uni.openLocation({
					latitude:Number(that.info.shopInfo.lat),
					longitude:Number(that.info.shopInfo.lng),
					name:that.info.shopInfo.shopName,
					address:that.info.shopInfo.address,
					success: function () {
						console.log('success');
					},
					fail(err) {
					  console.log(err)	
					}
				});
			},
			call(){
				var that=this;
				uni.makePhoneCall({
				    phoneNumber: that.info.shopInfo.contactorPhone
				}); 
			},
			goHome(){
				uni.navigateTo({
					url:'../index/index'
				})
			},
			tabClick(num){
				this.tabIndex=num
			},
			goremarks(){
				uni.navigateTo({
					url:'../entryReport/remarks?id='+this.id
				})
			},
			getSuperCheckSheetInfo(){
				uni.showLoading({
					title: '加载中'
				})
				let url = 'accompany/SuperCheckSheet/querySuperCheckSheetInfo',
					params = {
						sheetID: this.id,
						lat:this.lat,
						lng:this.lng
					}
				this.$http(url, params, 'GET').then(res => {
					this.info = res.data;
					if(this.userInfoId==res.data.managerID){
						if(this.mEvaluateLook==0){
							this.lookShow=false;
						}
					}
					
				})
			},
			editWork(){
				uni.navigateTo({
					url:'../shop/shopIndex/editWork?sheetID='+this.id
				})
			},
			delBg(){
				var that=this;
				 uni.showModal({
				     title: '提示',
				     content: '您确定要删除报告吗？',
				     success: function (res) {
				         if (res.confirm) {
				             uni.showLoading({ });
				             that.$http('accompany/SuperCheckSheet/deleteSuperCheckSheet', {
				             	sheetID:that.id,
				             	
	
				             }, 'POST').then(res => {
				                uni.showToast({
				                    title: '删除成功',
				                	 icon:'success',
				                    duration: 2000,
				                });
				                uni.navigateBack({
				                	delta:1
				                })
				             })
							 
				         } else if (res.cancel) {
				             console.log('用户点击取消');
				         }
				     }
				 }); 
			},
			submitBg(){
				uni.showLoading({ });
				this.$http('accompany/SuperCheckSheet/submitSuperCheckSheet', {
					sheetID:this.id,
					
				}, 'POST').then(res => {
				  this.getSuperCheckSheetInfo()
				})
			}
           
		}
	}
</script>

<style scoped>
	.content{
		 background: #F4F5F7;
		 min-height: 100vh;
		
	}
	
	.zdyNav{
		background: linear-gradient(132deg, #FF8635 0%, #FF4828 100%);
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		z-index: 11;
	}
	.baiheiback{
		width: 18rpx;
		height: 34rpx;
		padding-top: 12rpx;
		padding-left: 32rpx;
	}
	.homeImg{
		width: 40rpx;
		height: 34rpx;
		padding-top: 12rpx;
		padding-right: 20rpx;
	}
	.backBox{
		display: flex;
		width: 157rpx;
		height: 58rpx;
		border-radius: 30rpx;
		border: 1px solid #EEEEEE;
		justify-content: space-between;
	}
	.shuxian{
		width: 2rpx;
		height: 32rpx;
		background: #E4E5E6;
		margin-top: 14rpx;
	}
	.nav{
		display: flex;
		justify-content: space-between;
		line-height: 44px;
		font-size: 36rpx;
		color: #FFFFFF;
	}
	.backBoxBox{
		display: flex;
		align-items: center;
		padding-left: 24rpx;
	}
	.topContImg{
		width: 38rpx;
		height: 46rpx;
	}
	.topContImg2{
		width: 42rpx;
		height: 44rpx;
	
	}
	.topContImg3{
		width: 38rpx;
		height: 44rpx;
	}
	.topContImg4{
		width: 44rpx;
		height: 38rpx;
		margin-top: 4rpx;
	}
	.topContImg5{
		width: 44rpx;
		height: 46rpx;
	}
	.topContTxt{
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 46rpx;
		margin-left: 20rpx;
	}
	.topCont{
		display: flex;
		justify-content: center;
		padding: 32rpx;
	}
	.main{
		padding-top:110rpx ;
		padding-left: 24rpx;
		padding-right: 24rpx;
	}
	.submitOpBox{
		background: #FFFFFF;
		margin-top: 20rpx;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
	}
	.submitOpBoxLeftline{
		font-size: 26rpx;
		color: #3C3C3C;
	}
	.shopScore{
		color: #FF4F00;
		font-size: 36rpx;
		padding-top: 20rpx;
	}
	.shopBox{
		background: #FFFFFF;
		margin-top: 20rpx;
		padding: 30rpx 20rpx;
		border-radius: 10rpx;
	}
	.shopTopimg{
		width: 48rpx;
		height: 48rpx;
		margin-left: 40rpx;
	}
	.shopTop{
		display: flex;justify-content: space-between;
	}
	.shopName{
		font-size: 30rpx;
		color: #3C3C3C;
	}
	.shopCont{
	 display: flex;
	 font-size: 26rpx;
	}
	.shopLevel{
		color: #B98B5D;
		padding-right: 15rpx;
	}
	.openingTime{
		padding-right: 15rpx;
	}
	.address{
		font-size: 26rpx;
		color: #999999;
		padding-top: 10rpx;
	}
	.tabBox{
		background: #FFFFFF;
		margin-top: 20rpx;
		padding: 30rpx 20rpx 0 20rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-around;
	}
	.tabLine{
		padding-bottom: 26rpx;
	}
	.tabActive{
		color: #FF4F00;
		border-bottom: 4rpx solid #FF4F00;
	}
	.categoryName{
		padding: 20rpx 0;
		font-size: 26rpx;
		color: #999999;
	}
	.sectionList{
		background: #FFFFFF;
		border-radius: 10rpx;
	}
	.checkName{
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #EEEEEE;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #3C3C3C;
	}
	.itemTOp{
		display: flex;
		justify-content: space-between;
	}
	.itemList{
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.itemName{
		font-size: 28rpx;
		color: #444444;
	}
	.itemSorce{
		font-size: 30rpx;
		color: #FF4F00;
	}
	.itemdescribe{
		font-size: 26rpx;
		color: #999999;
	}
	.bottom{
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0px -4px 8px 0px rgba(153,153,153,0.08);
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		justify-content: space-around;
	}
	.delBtn{
		width: 220rpx;
		height: 74rpx;
		background: #F4F5F7;
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		color: #3C3C3C;
		font-size: 30rpx;
		margin-top: 24rpx;
	}
	.editBtn{
		width: 220rpx;
		height: 74rpx;
		background: linear-gradient(129deg, #FFDC5C 0%, #FFB62F 100%);
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		margin-top: 24rpx;
	}
	.Submit{
		width: 220rpx;
		height: 74rpx;
		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		color: #FFFFFF;
		font-size: 30rpx;
		margin-top: 24rpx;
	}
	.ckItemLIne{
		border: 1px solid #B98B5D;
		border-radius: 4rpx;
		padding: 5rpx 10rpx;
		margin-left: 20rpx;
	}
	.ckImemBox{
		display: flex;
		flex-wrap: wrap;
		padding-top: 20rpx;
		font-size: 24rpx;
		color: #B98B5D;
	}
	.itemTxt{
		font-size: 26rpx;
		padding-top: 10rpx;
		color: #666666;
	}
	.itemIMg{
		width: 150rpx;
		height: 150rpx;
		margin-right: 20rpx;
		
	}
	.itemImgBox{
		display: flex;
		flex-wrap: wrap;
	}
	.suggestLine{
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
		position: relative;
	}
	.suggestLineTop{
		height: 76rpx;
		background: linear-gradient(270deg, rgba(255, 255, 255, 0.1) 0%, #FFE2D5 100%);
		line-height: 76rpx;
		color: #3C3C3C;
		font-size: 28rpx;
		padding-left: 20rpx;
	}
	.suggestCont{
		color: #3C3C3C;
		font-size: 28rpx;
		line-height: 40rpx;
		padding: 30rpx 20rpx;
	}
	.suggestLineBottom{
		display: flex;
		justify-content: space-between;
		color: #999999;
		font-size: 26rpx;
		padding: 0 20rpx 30rpx 20rpx;
	}
	.address{
		display: flex;
		justify-content: space-between;
	}
	.exeStateImg{
		width: 116rpx;
		height: 96rpx;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 11;
	}
	.shoreDz{
		width: 702rpx;
		height: 74rpx;
		background: linear-gradient(124deg, #FF8700 0%, #FF4F00 100%);
		border-radius: 37rpx;
		text-align: center;
		line-height: 74rpx;
		color: #FFFFFF;
        font-size: 30rpx;
		margin-top: 24rpx;
	}
	.remarksLine{
		background: #FFFFFF;
		margin-top: 20rpx;
	}
	.remarksLineTop{
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
		font-size: 30rpx;
		color: #3C3C3C;
		border-bottom: 1px solid #EEEEEE;
	}
	.remarksLineTxt1{
		font-size: 28rpx;
		color: #444444;
		padding: 28rpx 20rpx;
	}
	.remarksLineTxt2{
		font-size: 26rpx;
		padding: 0rpx 20rpx 20rpx 20rpx;
		color: #666666;
	}
	.timeBox{
	  display: flex;
	  justify-content: space-between;
	  font-size: 26rpx;
	 padding:10rpx 20rpx;
	  color: #999999;
	}
</style>