wxThird/pages/user/reportUni.vue

<template>
	<view class="content">
	<view class="car-report-main newjcbgD">
	  <view class="car-report newcar-report">
	    <view class="newcar-reportTs">检测报告</view>
	    <view class="car-report-title report-title-box">
	      <h4>
	        <img :src="detailData.brandLogo" v-if="detailData.brandLogo" alt="" class="car-list-container-icon">
	         <img src="../../static/timg/nocar.png" v-else class="car-list-container-icon">
	        <view class="car-list-container-title">
	          <h5 class="carjcPlateNumber">{{detailData.licensePlateNumber}}</h5> <span class="km-con">{{detailData.currentMileage||'-- '}}km</span>
	          <h3 >{{detailData.carModel?detailData.carModel:'暂无'}}</h3>
	        </view>
	      </h4>
	    </view>
	    <view class="car-report-item">
	      <h5 class="fule hhhhh5">
	         <img src="../../static/img/newshop.png" alt=""  class="shop-icon2">
	        <!-- <span class="shop-icon"></span> -->{{detailData.shopName}} <span class="phone" @click="tel"></span>
	      </h5>
	      <h5 class="hxxhhh5"><!-- <span class="user-icon"></span> -->{{detailData.workerName||'--'}} | {{detailData.time||'--'}}</h5>
	    </view>
	    <view class="car-report-item">
	      <view class="car-report-statistics">
	        <view class="car-report-statistics-item">
	          <h3 class="report-color-red">{{detailData.ultimateOutcome&&detailData.ultimateOutcome[3]&&detailData.ultimateOutcome[3].length||0}}</h3>
	          <p>急需处理</p>
	        </view>
	        <view class="car-report-statistics-item">
	          <h3 class="report-color-yellow">
	            {{detailData.ultimateOutcome&&detailData.ultimateOutcome[2]&&detailData.ultimateOutcome[2].length||0}}</h3>
	          <p>密切关注</p>
	        </view>
	        <view class="car-report-statistics-item">
	          <h3 class="report-color-green">
	            {{detailData.ultimateOutcome&&detailData.ultimateOutcome[1]&&detailData.ultimateOutcome[1].length||0}}</h3>
	          <p>状态良好</p>
	        </view>
	      </view>
	    </view>
	    <view v-for="status in listData">
	      <view :key="status.valueType">
	        <view class="car-report-item flex"
	             :class="{'report-warning':status.valueType===2,'report-error':status.valueType===3,'report-ok':status.valueType===1}"
	             @click="ckd(status)">
	          <view class="report-status-count">{{status.value&&status.value.length||0}}项</view>
	          <view class="report-status">
	            <h3>{{status.name}}</h3>
	            <p v-if="status.valueType===1&&!status.show">点击查看详情</p>
	            <p v-else>{{status.message}}</p>
	          </view>
	          <span class="icon-select-down" :class="{'close':!status.show}"></span>
	        </view>
	       <!-- <collapse-transition> -->
	          <view v-show="status.show">
	            <view class="car-report-item" v-for="item in status.value" :key="item.name">
	              <view class="car-report-item-title"
	                   :class="{'warning-title':status.valueType===2,'error-title':status.valueType===3,'ok-title':status.valueType===1}">
	                <h3 class="carjcdItemname">{{item.name}}</h3>
	                <h4 class="carjcZt"><i class="title-icon"></i>{{status.name}}</h4>
	              </view>
	              <view class="car-report-item-info">
	                <view v-if="item.SectionType===0">
	                  <p v-for="(item2,index) in item.value" :key="index"><span class="carjcitemSpan">{{item2.ItemName}}：</span>{{item2.Value}}
	                    <i class="info-status"
	                       :class="{'report-color-red':item2.ValueType===3,'report-color-yellow':item2.ValueType===2}">{{item2.ValueType===3?'急需处理':item2.ValueType===2?'密切关注':'状态良好'}}</i>
	                  </p>
	                  <p v-if="item.Comment"><span>备注：</span>{{item.Comment}}
	                  </p>
	                  <p v-if="item.Describe"><span>说明：</span>{{item.Describe}} </p>
	                </view>
	                <view class="warning-lamp" v-if="item.SectionType===2">
	                  <span v-for="(item2,index) in item.value" :key="index" class="lamp-item error-lamp" :class="{'check':item2.IsSelect}" v-bind:style="{'background-image':'url('+item2.ItemIcon+')'}"></span>
	                </view>
	                <view v-if="item.SectionType===1">
	                  <view class="car-report-rv">
	                    <img :src="item.SectionPic" style="width: 100%" alt="图片加载失败">
	                  </view>
	                  <view class="car-report-rv-buttom"></view>
	                </view>
	                <view class="video-button carjcvideo-button" v-if="item.VideoName&&!item.showVideo">
	                  <view class="video-play" @click="ckVideo(item)"></view>
	                  {{item.VideoName}}
	                </view>
	                <view class="image-list">
	                  <view class="image-list-item" v-for="(file,index) in item.photoPath" :key="file.id">
	                    <img :src="file"
	                         v-preview="file"
	                         :alt="`查看图片${index+1}`"
	                         preview-title-enable="true"
	                         preview-nav-enable="true"/>
	                  </view>
	                </view>
	
	                <view class="video-wrapper" v-if="item.showVideo">
	                  <video :src="item.VideoURL"></video>
	                  <!-- <video-player class="vjs-custom-skin" :options="getPlayerOptions(item.VideoURL)"></video-player> -->
	                </view>
	                <view class="car-report-remarks" v-if="item.SectionType&&item.Comment">
	                  <p><span>备注：</span>{{item.Comment}} </p>
	                </view>
	              </view>
	            </view>
	          </view>
	       <!-- </collapse-transition> -->
	      </view>
	    </view>
	  </view>
	
	</view>
<!-- 手机号授权 -->
	<view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
		<view class="authorizCont" @click.stop="">
			<view class="authorizName">{{wxOpenData.miniAppName}}</view>
			<view class="authorizMs">您好，欢迎访问本店，授权手机号登录能获取我们最新的促销活动哦~</view>
			<button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
		</view>
		<view style="text-align: center;padding-top: 56rpx;">
			<image src="../../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailData: {},
				listData: {},
				id:'',
				userInfo:'',
				ext:'',
				wxOpenData:'',
				authorizShow:false,
				code:'',
			}
		},
		onLoad(opt) {
			this.id=opt.id;
			this.userInfo=this.$store.state.userInfo;
			this.ext=this.$common.getExtStoreId();
			if(this.userInfo){
				if (this.id) {
					this.getDetail()
				}
			}else{
				this.$common.automaticlogin().then(val => {
					this.userInfo=this.$store.state.userInfo;
					this.wxOpenData=this.$store.state.wxOpenData;
					this.themeColor = uni.getStorageSync("themeColor");
					if (this.id) {
						this.getDetail()
					}
				})
			}
			
		},
		methods: {
			decryptPhoneNumber: function(e) {
			  console.log(e);
			  this.code=e.detail.code
			  this.wxPhoneLogin()
			  this.authorizShow=false;
			},
			wxPhoneLogin(){
					 var that=this;
					 this.$http('miniApp2/sys/wxPhoneLogin', {
					   appId:this.ext.appId,
					   unionId:this.ext.unionId,
					   code:this.code,
					   openId:this.wxOpenData.openid
					  },'POST').then(res => {
						var data = res.data;
						if(data.loginInfo){
							this.userInfo=data.loginInfo.openUser;
							this.wxOpenData=data.loginInfo;
							this.$store.commit('mutationswxOpenData', data.loginInfo)
							this.$store.commit('mutationsuserInfo', this.userInfo)
						    this.getDetail()
						}	
					  })
			},
			tel () {
				uni.makePhoneCall({
					phoneNumber: this.detailData.mobilePhone
				});
			},
			ckd(status){
				status.show=!status.show
			},
			ckVideo(item){
				console.log("点击视频")
				item.showVideo=!item.showVideo
			},
			getPlayerOptions (url) {
			  return {
			    // videojs options
			    muted: true,
			    language: 'zh',
			    width: document.documentElement.clientWidth - 40,
			    height: (document.documentElement.clientWidth - 40) / 16 * 9,
			    playbackRates: [0.7, 1.0, 1.5, 2.0],
			    sources: [{
			      type: 'video/mp4',
			      src: url
			    }]
			  }
			},
			getDetail () {
				this.$http('opencheckSheet/getTestReportDetails', {
				  sheetId:this.id
				 },'GET').then(res => {
						let data = [{
						  name: '急需处理',
						  value: res.data.ultimateOutcome[3],
						  valueType: 3,
						  message: '以下项存在异常，请尽快去处理哟~',
						  show: true
						}, {
						  name: '密切关注',
						  value: res.data.ultimateOutcome[2],
						  valueType: 2,
						  message: '以下项需保持关注~',
						  show: true
						}, {
						  name: '状态良好',
						  value: res.data.ultimateOutcome[1],
						  valueType: 1,
						  message: '以下项没有异常，请保持定期检测哟~',
						  show: false
						}]
						data.forEach((item, index) => {
						  item.value && item.value.forEach((item2, index2) => {
						    this.$set(item2, 'name', Object.keys(item2)[0])
						    this.$set(item2, 'value', item2[Object.keys(item2)[0]])
						    this.$set(item2, 'showVideo', false)
						    this.$set(item2, 'VideoName', item2.value[0].VideoName)
						    this.$set(item2, 'VideoURL', item2.value[0].VideoURL)
						    this.$set(item2, 'photoPath', item2.value[0].photoPath && item2.value[0].photoPath.split(',') || [])
						    this.$set(item2, 'Comment', item2.value[0].Comment)
						    this.$set(item2, 'Describe', item2.value[0].Describe)
						    this.$set(item2, 'SectionType', item2.value[0].SectionType)
						    this.$set(item2, 'SectionPic', item2.value[0].SectionPic)
						  })
						})
						console.log(data)
						this.detailData = res.data
						this.listData = data
											
				 })
			  
			}
		}
	}
</script>

<style scoped lang="scss">
	.image-list{
		display: block;
	}
    .image-list-item {
      vertical-align: top;
      position: relative;
      display: inline-block;
      width: 33%;
      margin: 4rpx auto;
	  }
	  .remove {
	    position: absolute;
	    text-align: center;
	    line-height: 20rpx;
	    border-radius: 50%;
	    font-size: 20rpx;
	    font-weight: 700;
	    color: rgb(255, 255, 255);
	    right: 10%;
	    top: 0px;
	    height: 20rpx;
	    width: 20rpx;
	    background-color: gray;
	    display: block;
	  }
	  img {
	    display: block;
	    width: 85rpx;
	    height: 85rpx;
	    vertical-align: center;
	    border: 1px solid rgba(247, 247, 247, 1);
	    border-radius: 10rpx;
	    object-fit: contain;
	    cursor: pointer;
	  }
	  .newjcbgD .newcar-report{
	  	background: url('http://dmsphoto.66km.com.cn/thFiles/58BF776D-0B1D-420A-A7C1-BAE6FA7E8695.png') no-repeat;
	  	background-size: 100%;
	  	position: relative;
	  }
	  .newcar-reportTs{
	  	font-size: 44rpx;
	  	color: #ffffff;
	  	font-weight: 600;
	  	position: absolute;
	  	top: 50rpx;
	  	left: 24rpx;
	  }
	  .car-report{
	    background: url("http://dmsphoto.66km.com.cn/thFiles/B5701B43-38A7-48A9-928D-7C8CCCE750D6.png") 100% -70px no-repeat;
	    background-size: contain;
	    padding: 30rpx 20rpx 20rpx 20rpx;
		}
	.car-report-title{
	  margin-top: 140rpx;
	}
	.report-title-box{
	  h4{
	    margin-left: 10rpx;
	    margin-bottom: 30rpx;
	    .car-list-container-title{
	      h5,h3,.km-con{
	        color: white;
	      }
	    }
	  }
	}
	.car-list-container-icon{
	  width: 72rpx;
	  height: 72rpx;
	  display: inline-block;
	}
	.car-list-container-title{
	  display: inline-block;
	  padding-left: 10rpx;
	  >h5{
	    height:36rpx;
	    font-size:32rpx;
	    font-weight:600;
	    color:rgba(51,51,51,1);
	    line-height:36rpx;
	    display: inline-block;
	    margin-right: 10rpx;
	  }
	  .km-con{
	    height:33rpx;
	    font-size:24rpx;
	    font-weight:400;
	    color:rgba(102,102,102,1);
	    line-height:33rpx;
	    border-radius:5rpx;
	    border:2rpx solid rgba(221,221,221,1);
	    display: inline-block;
	    padding: 2rpx 11rpx;
	    transform: translateY(-4rpx);
	  }
	  >h3{
	    width: 550rpx;
	    height:33rpx;
	    font-size:24rpx;
	    font-weight:400;
	    color:rgba(153,153,153,1);
	    line-height:33rpx;
	   
	  }
	}
	.car-report-item{
	  background-color: #fff;
	  padding: 30rpx 20rpx;
	  box-shadow:0px 0px 10rpx 0px rgba(153,153,153,0.16);
	  border-radius:10rpx;
	  margin-bottom: 20rpx;
	  position: relative;
	  .car-report-item-info{
	    padding: 15rpx 0;
	    .car-report-rv{
	      width: 331rpx;
	      height: 465rpx;
	      margin: 10rpx auto;
	      position: relative;
	    }
	    .car-report-rv-buttom{
	      width: 480rpx;
	      height: 70rpx;
	      background: url("http://dmsphoto.66km.com.cn/thFiles/1A42D7CB-072B-4565-95BA-878FA340B852.png") 100% 100% no-repeat;
	      background-size: contain;
	      margin: 10rpx auto;
	    }
	    .car-report-remarks{
	      border-top: 2px solid #EEEEEE;
	      padding-top: 10rpx;
	      margin-top: 10rpx;
	      margin-bottom: -10rpx;
	    }
	    .video-wrapper{
	      margin-top: 20rpx;
	      //border-radius:20px;
	      object-fit: fill;
	      overflow: hidden;
	      .vjs-paused{
	        overflow: hidden;
	      }
	    }
	    .video-button{
	      margin-top: 20rpx;
	      height: 90rpx;
	      background-color: #FEEFD8;
	      display: flex;
	      font-size:28rpx;
	      font-weight:500;
	      color:rgba(185,144,86,1);
	      line-height:90rpx;
	      .video-play{
	        width: 50rpx;
	        height: 50rpx;
	        margin: 20rpx;
	        display: inline-block;
	        background: url("http://dmsphoto.66km.com.cn/thFiles/A7F13529-E889-4B2B-83B7-4CD5E322853D.png") 100% 100% no-repeat;
	        background-size: contain;
	      }
	    }
	    .warning-lamp{
	      display: flex;
	      justify-content: flex-start;
	      flex-wrap: wrap;
	      .lamp-item{
	        margin: 20rpx 30rpx 20rpx 56rpx;
	        width: 80rpx;
	        height: 70rpx;
	        display: block;
	        background: url("http://dmsphoto.66km.com.cn/thFiles/DE80CE12-534E-4AD0-921A-17051A4F5984.png") 100% 100% no-repeat;
	        background-size: contain;
	        position: relative;
	        &.check:after{
	          background: url("http://dmsphoto.66km.com.cn/thFiles/7E809DDE-FD2D-4158-A6EF-01FC855A5A2D.png") 100% 100% no-repeat;
	          background-size: contain;
	        }
	        &:after{
	          content: '';
	          width: 38rpx;
	          height: 38rpx;
	          border-radius: 50%;
	          border:2px solid rgba(221,221,221,1);
	          display: block;
	          position: absolute;
	          left: -50rpx;
	          top: 18rpx;
	        }
	        &.error-lamp{
	          color: #F03B3B;
	          //filter: drop-shadow(#F03B3B 80px 0);
	          &svg path{
	            fill:rgb(18, 136, 222)
	          }
	        }
	      }
	
	    }
	    p{
	      font-size:28rpx;
	      font-weight:400;
	      color:rgba(153,153,153,1);
	      line-height:150%;
	      padding: 8rpx 0;
		  display: flex;
	      >span{
	        height:28rpx;
	        font-size:28rpx;
	        font-weight:400;
	        color:rgba(102,102,102,1);
	        line-height:28rpx;
			padding-top: 5rpx;
	      }
	      .info-status{
	        margin-left: 10rpx;
	        height:38rpx;
	        border-radius:8rpx;
	        border:2rpx solid rgba(221,221,221,1);
	        padding: 2rpx 14rpx;
	        text-decoration: none;
	        font-style: normal;
	      }
	    }
	  }
	  .car-report-item-title{
	    position: relative;
	    &.error-title{
	      .title-icon{
	        background: url("http://dmsphoto.66km.com.cn/thFiles/69B1087C-79B4-40E3-99DD-7B6F7C334373.png") 100% 100% no-repeat;
	      }
	      >h4{
	        display: flex;
	        font-weight:400;
	        color:rgba(240,59,59,1);
	        .title-icon{
	          width: 36rpx;
	          height: 36rpx;
	          background-size: contain;
	          margin-right: 10rpx;
	          transform: translateY(2rpx);
	        }
	      }
	    }
	    &.ok-title{
	      .title-icon{
	        background: url("http://dmsphoto.66km.com.cn/thFiles/A331D98F-D90C-4170-BA36-EBD94C2B8EE1.png") 100% 100% no-repeat;
	      }
	      >h4{
	        display: flex;
	        font-weight:400;
	        color:rgba(38,150,92,1);
	        .title-icon{
	          width: 36rpx;
	          height: 36rpx;
	          background-size: contain;
	          margin-right: 10rpx;
	          transform: translateY(2px);
	        }
	      }
	    }
	    &.warning-title{
	      .title-icon{
	        background: url("http://dmsphoto.66km.com.cn/thFiles/C3B101F2-32E7-4247-A679-52C82C976E0D.png") 100% 100% no-repeat;
	      }
	      >h4{
	        display: flex;
	        font-weight:400;
	        color:rgba(241,157,1,1);
	        .title-icon{
	          width: 36rpx;
	          height: 36rpx;
	          background-size: contain;
	          margin-right: 10rpx;
	          transform: translateY(2px);
	        }
	      }
	    }
	    >h3{
	      height:32rpx;
	      font-size:32rpx;
	      font-weight:600;
	      color:rgba(51,51,51,1);
	      line-height:32rpx;
	      padding-top: 10rpx;
	      padding-bottom: 30rpx;
	      border-bottom: 2px solid #EEEEEE;
	      padding-right: 200rpx;
	     
	    }
	    >h4{
	      position: absolute;
	      top: 6rpx;
	      right: 0;
	      height:42rpx;
	      font-size:30rpx;
	      font-weight:400;
	      line-height:42rpx;
	    }
	  }
	  &.report-error{
	    .report-status-count{
	      background-color: rgb(255, 77, 15);
	    }
	  }
	  &.report-warning{
	    .report-status-count{
	      background-color: rgb(244, 165, 11);
	    }
	  }
	  &.report-ok{
	    .report-status-count{
	      background-color: rgb(41, 162, 87);
	    }
	  }
	  .report-status-count{
	    width: 100rpx;
	    height: 100rpx;
	    border-radius: 50%;
	    margin: 10rpx 20rpx;
	    line-height: 100rpx;
	    text-align: center;
	    font-size:30rpx;
	    font-weight:500;
	    color:rgba(255,255,255,1);
	  }
	  .report-status{
	    >h3{
	      height:45rpx;
	      font-size:32rpx;
	      font-weight:500;
	      color:rgba(51,51,51,1);
	      line-height:45rpx;
	      margin-bottom: 10rpx;
	      padding-top: 15rpx;
	    }
	    >p{
	      height:33rpx;
	      font-size:24rpx;
	      font-weight:400;
	      color:rgba(153,153,153,1);
	      line-height:33rpx;
	    }
	  }
	  .car-report-statistics{
	    display: flex;
	    justify-content: space-around;
	    .car-report-statistics-item{
	      >h3{
	        text-align: center;
	        height:62rpx;
	        font-size:44rpx;
	        font-weight:500;
	        line-height:62rpx;
	      }
	      >p{
	        height:40rpx;
	        font-size:28rpx;
	        font-weight:400;
	        color:rgba(153,153,153,1);
	        line-height:40rpx;
	      }
	    }
	  }
	  h5{
	   
	    margin:0 0 16rpx 8rpx;
	    width: 600rpx;
	    height:37rpx;
	    font-size:26rpx;
	    font-weight:400;
	    color:rgba(51,51,51,1);
	    line-height:37rpx;
	    .phone{
	      position: absolute;
	      right: 40rpx;
	      top: 24rpx;
	      width: 30rpx;
	      height: 40rpx;
	      display: inline-block;
	      background: url("http://dmsphoto.66km.com.cn/thFiles/36EFD213-1D81-4153-AFFD-33BE701E5DBF.png") 100% no-repeat;
	      background-size: contain;
	    }
	    .shop-icon{
	      vertical-align: sub;
	      transform: translateY(-2rpx);
	    }
	    &:last-child{
	      margin-bottom: 0;
	    }
	  }
	}
	.fule{
		display: flex;
	}
	.newjcbgD .hhhhh5{
		height: 44rpx !important;
		font-weight: 500 !important;
		color: #3C3C3C !important;
		font-size: 28rpx !important;
	}
	.newjcbgD .hxxhhh5{
		padding-left: 50rpx;
		color: #999999 !important;
	}
	.newjcbgD .shop-icon2{
		/* background: url(../newimg/icon_store@2x.png);
		background-size: 100% !important; */
		width: 40rpx;
		height: 44rpx;
		margin-right: 10rpx;
		
	}
	.newjcbgD .car-report .car-report-item h5 .phone{
		background: url('http://dmsphoto.66km.com.cn/thFiles/AA0ED98C-DC25-41D0-B09A-9ACC497D017A.png');
		background-size: 100% 100% !important;
		width: 60rpx;
		height: 60rpx;
	}
	.report-color-red{
	  color:rgba(240,59,59,1)!important;
	  border-color: rgba(240,59,59,1)!important;
	}
	.report-color-yellow{
	  color: rgb(242, 157, 0)!important;
	  border-color: rgb(242, 157, 0)!important;
	}
	.report-color-green{
	  color:rgba(38,150,92,1)!important;
	  border-color: rgba(38,150,92,1)!important;
	}
	.authorizBox{
			width: 100vw;
			height: 100vh;
			background: rgba(0, 0, 0, 0.5);
			position: fixed;
			top: 0;
			left: 0;
		}
		.authorizCont{
			margin-top: 30vh;
			width: 564rpx;
			height: 408rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin-left: 93rpx;
			position: relative;
		}
		.authorizCloseImg{
			width: 62rpx;
			height: 62rpx;
		}
		.sqLogoBox{
			width: 180rpx;
			height: 180rpx;
			background: #FFFFFF;
			border-radius: 90rpx;
			text-align: center;
			position: absolute;
			top: -50rpx;
			left: 192rpx;
		}
		.authorizName{
			color: #333333;
			line-height: 42rpx;
			font-size: 30rpx;
			text-align: center;
			padding-top: 58rpx;
		}
		.authorizMs{
			color: #999999;
			line-height: 36rpx;
			font-size: 26rpx;
			width: 452rpx;
			padding-top: 24rpx;
			text-align: center;
			margin-left: 56rpx;
		}
		.authorizContbutton{
			width: 422rpx;
			height: 88rpx;
			background: #D53533;
			border-radius: 44rpx;
			line-height: 88rpx;
			text-align: center;
			font-size:30rpx;
			color: #FFFFFF;
			margin-top: 62rpx;
			margin-left:71rpx;
		}
</style>