<template>
<view class="box">
<homenav :iStatusBarHeight="iStatusBarHeight" :title="'完工报告'" ></homenav>
<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 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>
import homenav from "../../components/homenav/nav.vue"
export default {
components: {
homenav
},
data() {
return {
location: '',
id: '',
orderData: '',
themeColor: '',
authorizShow: false,
userInfo: '',
ext: '',
wxOpenData: '',
headInfo: {},
itemDetailList: '',
Photos:[],
PhotosShow:false,
demo01_index:0,
iStatusBarHeight:'',
}
},
onLoad(opt) {
this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
this.id = opt.id
console.log(this.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();
if(!this.userInfo){
this.authorizShow=true
}
})
}
},
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)
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:this.id,// '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;
}
.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>