wxThird/pages/report/complete.vue

<template>
	<view class="box">
 <view class="topbox">
      <view class="IncoBox">
        <img src="../../static/timg/icon_ddztty@2x.png" alt="" class="iconwg">
        <view class="wgTitle">完工报告</view>
      </view>
    </view>
    <view class="shopBox">
     <view class="shopleft">
       <img src="../../static/timg/wgshop.png" alt="" class="shopIcon">
       <view class="shopNameBox">
         <view class="shopName">{{headInfo.shopName}}</view>
         <view class="shopAddress">{{headInfo.address?headInfo.address:''}}</view>
       </view>
     </view>
     <view class="shopRight" @click="call">
       <img src="../../static/timg/wgcall.png" alt="" class="wgCall">
       <view class="wgmobilePhone">电话</view>
     </view>
    </view>
    <view class="carBox">
      <view class="carLeft">
     
         <img src="../../static/timg/icon_che.png" alt="" class="shopIcon">
      </view>
      <view class="carRight">
        <view class="carRtop">
          <view class="carCp">{{headInfo.plateNumber}}</view>
          <view class="carGongli" v-if="headInfo.currentMileage">{{headInfo.currentMileage}}km</view>
        </view>
        <view class="carMname">{{headInfo.carModel}}</view>
        <view class="reception">
          <img src="../../static/timg/icon_order_jiedai@2x.png" alt="" class="receptionImg">
          <view class="receptionName">{{headInfo.pickName}}</view>
          <view class="receptionName">{{headInfo.code}}</view>
        </view>
      </view>
    </view>

    <view class="newIiembox">
      <view class="newItime">
        <view class="newIname1">项目名称</view>
        <view class="newIname2">施工前照片</view>
        <view class="newIname2">施工后照片</view>
      </view>
      <view class="newItem" v-for="(v,i) in itemDetailList">
        <view class="newItemLine">
          <view class="newItemName">{{v.itemName}}</view>
          <view class="itemImgBox" >
            <view class="itemImghz" v-if="v.workBefore" >
             <img  :src="v.workBefore.split(',')[0]"  alt="" class="newcarPhotoImg" @click="sphotos(v.workBefore.split(','))">
           
              <view class="itemImgYy" v-if="v.workBefore.split(',').length>1">
                <img src=".../../static/timg/icon_pic.png" alt="" class="itemImgYyImg">
                <view class="itemImgYyNUm">{{v.workBefore.split(',').length}}</view>
              </view>
            </view>
            <view class="itemImghz" v-else>
              <img  src=".../../static/timg/noimg.png"  alt="" class="newcarPhotoImg">
            </view>

          </view>
          <view class="itemImgBox" >
            <view class="itemImghz" v-if="v.workAfter" @click="sphotos(v.workAfter.split(','))"><!--  -->
              <view v-for="(img,index) in v.workAfter.split(',')">
                <img  :src="img"
                 alt="" class="newcarPhotoImg">
              </view>

              <view class="itemImgYy" v-if="v.workAfter.split(',').length>1" >
                <img src=".../../static/timg/icon_pic.png" alt="" class="itemImgYyImg">
                <view class="itemImgYyNUm">{{v.workAfter.split(',').length}}</view>
              </view>
            </view>
            <view class="itemImghz" v-else>
              <img  src="..../../static/timg/noimg.png"  alt="" class="newcarPhotoImg">
            </view>

          </view>
        </view>
      </view>
    </view>

    <view style="height: 100rpx;"></view>
    <view class="lbImgBOx" v-if="PhotosShow" @click="Photosclose">
    
    <view class="lbImgview">
      
    </view>

    </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				location: '',
				id: '',
				orderData: '',
				themeColor: '',
				authorizShow: false,
				userInfo: '',
				ext: '',
				wxOpenData: '',
				headInfo: {},
				itemDetailList: '',
				Photos:[],
				PhotosShow:false,
				demo01_index:0,
			}
		},
		onLoad(opt) {

			this.id = opt.id
			this.themeColor = uni.getStorageSync("themeColor");
			this.userInfo = this.$store.state.userInfo;
			this.ext = this.$common.getExtStoreId();
			if (this.userInfo) {
				this.getData()
			} else {
				this.$common.automaticlogin().then(val => {
					this.userInfo = this.$store.state.userInfo;
					this.wxOpenData = this.$store.state.wxOpenData;
					this.themeColor = uni.getStorageSync("themeColor");
					this.getData()
				})
			}

			
		},

		methods: {
			sphotos(img){
				console.log(img)
				// 预览图片
				uni.previewImage({
					urls: img,
					//current: img,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			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.getData()
					}
				})
			},
			map() {
				console.log("打开地图")
				var that = this;
				if (!that.orderData.billsheet.lat || !that.orderData.billsheet.lng) {
					uni.showToast({
						title: '该店铺未设置定位',
						icon: 'none',
						duration: 3000
					});
				} else {
					uni.openLocation({
						latitude: Number(that.orderData.billsheet.lat),
						longitude: Number(that.orderData.billsheet.lng),
						name: that.orderData.billsheet.ShopName,
						address: that.orderData.billsheet.Address,
						success: function() {
							console.log('success');
						},
						fail(err) {
							console.log(err)
						}
					});
				}

			},

			call() {
				uni.makePhoneCall({
					phoneNumber:  this.headInfo.mobilePhone
				});
			},


			getData() {
				let that = this
				uni.showLoading({
					title: '加载中'
				});

				this.$http('workOrderMarketing/completeReport', {
					sheetId: '278569FB-6F21-47AD-8B66-D62D2EA6981D',
				}, 'GET').then(res => {
					uni.hideLoading();
					this.itemDetailList=res.data.itemDetailList;
					this.headInfo=res.data.headInfo;

					//console.log('data===', this.orderData);

				})
			},
			//时间对比
			getDateBeforeNow(stringTime) {
				console.log("传参未格式化", stringTime);
				stringTime = new Date(stringTime.replace(/-/g, '/'))

				// 统一单位换算
				var minute = 1000 * 60;
				var hour = minute * 60;
				var day = hour * 24;
				var week = day * 7;
				var month = day * 30;
				var year = month * 12;

				var time1 = new Date().getTime(); //当前的时间戳						console.log("当前时间", time1);

				// 对时间进行毫秒单位转换						var time2 = new Date(stringTime).getTime(); //指定时间的时间戳

				console.log("传过来的时间", time2);

				var time = time1 - time2;
				console.log("计算后的时间", time);

				var result =
					null; // if (time < 0) {						// 	// alert("传过来的时间的时间不能晚于当前时间！");						// 	result = stringTime;						// } else if (time / year >= 1) {
				// 	result = parseInt(time / year) + "年前";
				// } else if (time / month >= 1) {
				// 	result = parseInt(time / month) + "月前";
				// } else if (time / week >= 1) {						// 	result = parseInt(time / week) + "周前";						// } else if (time / day >= 1) {
				// 	result = parseInt(time / day) + "天前";
				// } else if (time / hour >= 1) {						// 	result = parseInt(time / hour) + "小时前";
				// } else if (time / minute >= 1) {
				// 	result = parseInt(time / minute) + "分钟前";						// } else {
				// 	result = "刚刚";						// }

				if (time < 0) {
					// alert("传过来的时间的时间不能晚于当前时间！");
					result = -1;
				} else if (time / day >= 0) {
					result = parseInt(time / day); //多少天前
				}
				console.log("多少天前", result);
				return result;
			},
			goback() {

				uni.navigateBack({})


			},

		},
		onPullDownRefresh() {

			this.getData()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

	}
</script>

<style scoped>
	.box{
		width: 100vw;
		min-height: 100vh;
		background: #F4F5F7;
	}
	.topbox{
	    width: 750rpx;
	    height: 200rpx;
	    background: #FF0000;
	  }
	.carBox{
		width: 702rpx;
		padding-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
	    margin-left:24rpx;
		 margin-top:20rpx;
		display: flex;
	}
	.shopBox{
		width: 702rpx;
		padding-bottom: 30rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-left:24rpx;
	    margin-top:-70rpx;
		display: flex;
		justify-content: space-between;
	}
	.shopleft{
		display: flex;
		padding-top: 32rpx;
		padding-left: 20rpx;
		
	}
	.shopNameBox{
		padding-left: 20rpx;
	}
	.shopAddress{
		width: 450rpx;color: #999999;padding-top: 10rpx;font-size: 24rpx;
	}
	.shopName{
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #3C3C3C;
	}
	.wgCall{
		width:44rpx;
		height:44rpx;
	}
	.carIcon{
		width: 72rpx;
		height: 72rpx;
		border-radius: 36rpx;
	}
	.wgmobilePhone{
		color: #999999;
		font-size: 24rpx;
		padding-top: 10rpx;
	}
	.shopRight{
		text-align: center;padding-top: 30rpx;
		padding-right: 20rpx;
	}
	.carRtop{
		display: flex;
	}
	.carCp{
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 36rpx;
		padding-right: 30rpx;
	}
	.carGongli{
		font-weight: 500;
		color: #F19D01;
		font-size: 24rpx;
		line-height: 36rpx;
		background: #FFF8EB;
		border-radius: 5rpx;
		padding: 0 10rpx;
	}
	.carLeft{
		padding-left: 20rpx;
		padding-top: 30rpx;
		padding-right: 20rpx;
	}
	.carMname{
		font-weight: 400;
		color: #999999;
		line-height: 33rpx;
		font-size: 24rpx;
		width: 570rpx;
		padding: 10rpx 0;
		overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
		text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
		white-space: nowrap;
	}
	.carRight{
		padding-top: 30rpx;
	}
	.reception{
		display: flex;
	}
	.receptionImg{
		width: 27rpx;
		height: 29rpx;
	}
	.receptionName{
		font-weight: 400;
		color: #999999;
		font-size: 24rpx;
		line-height: 29rpx;
		padding-left: 12rpx;
	}
	.itemLIne{
		width: 662rpx;
		margin-top: 20rpx;
		margin-left: 24rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 0 20rpx 15rpx 20rpx;
	}
	.itemTitieBox{
		display: flex;
		justify-content: space-between;
		padding: 28rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.itemTitle{
		font-weight: 500;
		color: #333333;
		line-height: 42rpx;
		font-size: 30rpx;
	}
	.itemstate{
		font-weight: 400;
		color: #3F90F7;
		line-height: 42rpx;
		font-size: 28rpx;
	}
	.Construction{
		display: flex;
		padding-top: 29rpx;
		padding-bottom: 15rpx;
	}
	.itemMs{
		font-weight: 400;
		color: #666666;
		font-size: 28rpx;
	}
	.personnel{
		font-weight: 400;
		color: #3C3C3C;
		font-size: 28rpx;
		padding-left: 72rpx;
	}
	.carPhotoImg{
		width: 150rpx;
		height: 150rpx;
		border-radius: 5rpx;
		margin-right: 20rpx;
		margin-top: 16rpx;
	}
	.carPhoto{
		
		display: flex;
		flex-wrap: wrap;
	}
	.carPhotoImg:nth-child(4n){
		margin-right: 0;
	}
	.carPhotoBox{
		padding-top: 15rpx;
		padding-bottom: 15rpx;
	}
	.IncoBox{
		display: flex;
		justify-content: center;
		padding-top:43rpx;
	}
	.iconwg{
		width:44rpx;
		height:44rpx;
	}
	.wgTitle{
		color:#ffffff;
		line-height:44rpx;
		padding-left: 18rpx;
		font-size: 36rpx;
	}
	.shopIcon{
		width:44rpx;
		height:44rpx;
	}
	.newIiembox{
		background: #ffffff;
		margin-top:20rpx;
		width: 702rpx;
		margin-left:24rpx;
	}
	.newItime{
		display: flex;	border-bottom:1rpx solid #EEEEEE;
	}
	.newIname1{
		width:338rpx;
		text-align: center;
		color: #999999;
		padding:20rpx 0;
		font-size: 24rpx;
	}
	.newIname2{
		width:182rpx;
		text-align: center;
		color: #999999;
		padding:20rpx 0;
		font-size: 24rpx;
	}
	.newItemName{
		width:318rpx;
		color: #333333;
		padding-left:20rpx;
		height:150rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}
	.newcarPhotoImg{
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}
	.itemImgBox{
		width: 150rpx;
	    padding:0 16rpx;
		height: 150rpx;
	}
	.itemImghz{
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
	}
	.itemImgYy{
		position:absolute;
		width: 68rpx;
		height: 36rpx;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 10rpx 0rpx 10rpx 0rpx;
	display: flex;
	justify-content: center;
	align-items: center;
		bottom:0;
		right:0;
	}
	.newItemLine{
		display: flex;
		padding:20rpx 0;
		border-bottom:1rpx solid #EEEEEE;
	}
	.itemImgYyImg{
		width: 26rpx;
		height: 26rpx;
	}
	.itemImgYyNUm{
		color: #FFFFFF;
		line-height: 26rpx;
		font-size: 22rpx;
		padding-left: 5rpx;
	}
	.lbImgBOx{
		position: fixed;
		width: 100%;
		height:100vh;
		background: rgba(0, 0, 0, 0.9);
		left: 0;
		top: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.lbImgdiv{
		width:100%;
		
	}
	.newIname3{
		width:175rpx;
		text-align: center;
		color: #999999;
		padding:20rpx 0;
		font-size: 24rpx;
	}
	.newsectionName{
		width:155rpx;
		color: #333333;
		padding-left:20rpx;
		height:150rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
	}
</style>