报告详情

operatingCompany/pages/reportManage/reportDetail.vue

@@ -3,15 +3,96 @@
 		<view class="zdyNav">
 		  <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
 		  <view class="nav">
-			  <view><image src="../../static/img/baiheiback.png" mode="" class="baiheiback" @click="back"></image></view>
+			  <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"></image>
+				  </view>
+			  </view>
+			 
 			  <view >报告详情</view>
-			  <view style="width:70px;"></view>
+			  <view style="width:157rpx;"></view>
+		  </view>
+		  <view class="topCont">
+			  <image src="../../static/img/report_icon_daitijiao@2x.png" mode="" class="topContImg"></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"></image>
+						<image src="../../static/img/icon_phone_def@2x.png" mode="" class="shopTopimg"></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">{{info.shopInfo.address}}</view>
+			</view>
+			
+			<!-- tab -->
+			<view class="tabBox">
+				<view class="tabLine" :class="{tabActive:tabIndex==1}">检测情况</view>
+				<view class="tabLine" :class="{tabActive:tabIndex==2}">行动建议</view>
+			</view>
+			<!-- 检测情况 -->
+			<view class="categoryList">
+				<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>
 	  
-	   
+	   <view style="height: 150rpx;"></view>
+	   <view class="bottom">
+		    <view class="delBtn">删除</view>
+		    <view class="editBtn">编辑</view>
+			<view class="Submit">提交</view>
+	   </view>
 	</view>
 </template>
 
@@ -20,14 +101,35 @@
 		data() {
 			return {
 				 iStatusBarHeight:'',
+				 id:'',
+				 info:'',
+				 tabIndex:1,
 			}
 		},
-		onLoad() {
+		onLoad(opt) {
           //页面加载初始化生命周期函数
 		    this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
+			this.id=opt.id;
+			this.getSuperCheckSheetInfo()
 		},
 		methods: {
-			//自己定义的方法函数
+			back(){
+				uni.navigateBack({
+					delta:1
+				})
+			},
+			getSuperCheckSheetInfo(){
+				uni.showLoading({
+					title: '加载中'
+				})
+				let url = 'accompany/SuperCheckSheet/querySuperCheckSheetInfo',
+					params = {
+						sheetID: this.id,
+					}
+				this.$http(url, params, 'GET').then(res => {
+					this.info = res.data
+				})
+			}
            
 		}
 	}
@@ -39,12 +141,246 @@
 		 min-height: 100vh;
 		
 	}
-	/* #ifdef H5 */
-		.content{
-			 background: #F4F5F7;
-			 min-height:calc(100vh - 44px);
-			
-		}
-	/* #endif */
 	
+	.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;
+	}
+	.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;
+	}
 </style>