Commit d8dfe0c6 authored by Facius's avatar Facius

详情页面完成

parent 74926935
<template>
<view class="bottom-button">
<view v-for="(item, index) in list" :class="['button-view', item.type]">
<u-button :class="['list-button', item.type]" @click="handleClick(item)"
<u-button :class="['list-button', item.type, {'one': list.length == 1}]" @click="handleClick(item)"
:hover-class="item.type == 'image' || item.disabled ? 'none' : ''"
:custom-style="buttonStyle[item.disabled ? 'disabled' : item.type]" type="primary" shape="circle">
<view class="image-view" v-if="item.type == 'image'">
......@@ -9,7 +9,6 @@
</view>
<view :class="['text-content', item.type]">{{item.label}}</view>
</u-button>
<view v-if="index == 1"style="width: 6rpx;"></view>
</view>
</view>
</template>
......@@ -69,7 +68,6 @@
'flex-direction': 'column',
'height': '104rpx',
'width': '82rpx',
'margin-right': '40rpx'
},
'text': {
......@@ -78,7 +76,7 @@
'display': 'flex',
'flex-direction': 'column',
'height': '104rpx',
'width': '100%'
'width': '100%',
},
'disabled': {
......@@ -116,18 +114,26 @@
&.image {}
&.text {
width: 100%;
width: 100%;
display: flex;
justify-content: flex-end;
}
.list-button {
display: flex;
flex-direction: column;
max-width: 600rpx;
width: 100%;
&.image {}
&.text {}
&.image {
margin-right: 40rpx;
}
&.text {
width: 400rpx;
margin-left: 40rpx;
&.one {
width: 600rpx;
}
}
.image-view {
flex-shrink: 0;
background-color: #FFFFFF;
......
......@@ -257,7 +257,7 @@
return 3
} else if (this.orderData.orderStatus == 85 || this.orderData.orderStatus == 87) {
return 4
} else if (this.orderData.orderStatus == 86 ||this.orderData.orderStatus == 88) {
} else if (this.orderData.orderStatus == 86 || this.orderData.orderStatus == 88) {
return 5
} else if ([80, 81, 89, 110].indexOf(this.orderData.orderStatus) != -1) {
return 6
......
......@@ -2,21 +2,25 @@
<view class="order-wrap">
<u-navbar :title="title" title-color="#FFFFFF" title-size="32" back-icon-color="#FFFFFF" :background="background" :border-bottom="false"></u-navbar>
<view class="header" v-if="order.currentOverTime && showTimeOut">
<!-- 抓紧时间提示 -->
<view class="tip-text">{{tipText}}</view>
<view class="header-content">
<!-- 倒计时 -->
<view class="title">
<view :class="['bottom-tag-view', {'timeout': timeout}]"><text>{{timeout ? '超' : '剩'}}</text></view>
<u-count-down :timestamp="timestamp" font-size="44" show-days separator="zh" separator-size="44"
color="#FFFFFF" separator-color="#FFFFFF" @change="timeOutChange" ref="order-count-down" bg-color="transparent"></u-count-down>
</view>
<!-- 拒单 -->
<view v-show="allowRejection" class="reject-button" @click="$u.throttle(rejectOrder, 500)">拒单</view>
</view>
</view>
<view class="content">
<!-- 订单详情 -->
<view class="card base-item">
<Detail :order="order" :readMore.sync="readMore" :operate="isAllowDianhuaAndDaohang"></Detail>
</view>
<!-- 从我的页面进来显示算信息 -->
<!-- 从我的页面进来显示算信息 -->
<view v-if="isFromMine" class="settlement-view">
<view class="settlement-title">结算信息</view>
<view class="settlement-content">
......@@ -33,11 +37,24 @@
<text>{{settlementInfo.amount}}</text>
</view>
</view>
<!-- 其他页面进来 -->
<!-- 不是从我的页面,而是其他页面进来 -->
<view v-else>
<!-- 业务文件 -->
<view class="order-file">
<view class="order-file-left">
<image :src="wenjianImage" class="file-image"></image>
<text>充电桩安装业务文件</text>
</view>
<view class="order-file-right" @click="$u.throttle(handleClickFile, 500)">
<text>点击查看</text>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<!-- 时间选择 -->
<view class="card appoint-item" v-show="showTimeSelect">
<appoint-time :dateList="dateList" :timeList="timeList" @dateChange="dateChange" @timeChange="timeChange" @weekChange="weekChange"></appoint-time>
</view>
<!-- 履约记录 -->
<view class="card record-item">
<Record :orderRecords="orderRecords"></Record>
</view>
......@@ -145,7 +162,8 @@
settlementInfo: {formatTime: '-', list: [], amount: ''},
unloaded: false,
timeout: false,
timestamp: 0
timestamp: 0,
showFile: false, // 显示查看业务文件
}
},
onLoad(option) {
......@@ -204,38 +222,41 @@
buttons() {
//id: 0 主流程; 1 过程反馈;2 异常签到; 3 现场拍照
return [{
label: '过程反馈',
type: 'image',
image: 'guochengfankui.png',
show: this.allowFeedback,
disabled: false,
id: 1
},
{
label: '异常签到',
type: 'image',
image: 'yichangqiandao.png',
show: this.errorSignIn,
disabled: false,
id: 2
},
{
label: '现场拍照',
type: 'image',
image: 'xiancahngpaizhao.png',
show: this.scenePhoto,
disabled: false,
id: 3
},
{
label: this.centerButtonText,
type: 'text',
image: '',
show: true,
disabled: this.centerBtnDisabled,
id: 0
}]
}
label: '过程反馈',
type: 'image',
image: 'guochengfankui.png',
show: this.allowFeedback,
disabled: false,
id: 1
},
{
label: '异常签到',
type: 'image',
image: 'yichangqiandao.png',
show: this.errorSignIn,
disabled: false,
id: 2
},
{
label: '现场拍照',
type: 'image',
image: 'xiancahngpaizhao.png',
show: this.scenePhoto,
disabled: false,
id: 3
},
{
label: this.centerButtonText,
type: 'text',
image: '',
show: true,
disabled: this.centerBtnDisabled,
id: 0
}]
},
wenjianImage() {
return process.uniEnv.qn_base_url + 'wenjian.png'
},
},
methods: {
updateLocation(){
......@@ -465,6 +486,8 @@
this.submitType = "orderAccept"
this.readMore = false
this.isAllowDianhuaAndDaohang = false
this.title = '待接单',
this.showFile = false
} else if (orderStatus < 31 && orderBusinessType === '订单池') {
// 抢单
this.centerButton = "appoint1"
......@@ -474,6 +497,8 @@
this.showTimeOut=false
this.readMore = false
this.isAllowDianhuaAndDaohang = false
this.title = '待抢单',
this.showFile = false
} else if (orderStatus === 31 && !this.order.appointmentDatetime) {
// 预约
this.centerButton = "appoint2"
......@@ -484,6 +509,8 @@
this.isAllowDianhuaAndDaohang = true
this.readMore = true
this.submitType = "workerAppointment"
this.title = '待预约',
this.showFile = true
this.loadCalendar()
} else if (orderStatus === 31 && this.order.appointmentDatetime) {
// 签到
......@@ -494,6 +521,8 @@
this.submitType = "maintainWorkerCheckin"
this.isAllowDianhuaAndDaohang = true
this.errorSignIn = true
this.title = '待签到',
this.showFile = true
// this.addressToCoordinate()
this.updateLocation()
} else if (orderStatus > 31 && orderStatus < 80) {
......@@ -506,6 +535,20 @@
this.scenePhoto = true
this.readMore = true
this.isAllowDianhuaAndDaohang = true
this.title = '待完工',
this.showFile = true
}else if (orderStatus == 85 || orderStatus == 87) { // 审核中
this.isAllowDianhuaAndDaohang = true
this.title = '审核中',
this.showFile = true
} else if (orderStatus == 86 || orderStatus == 88) { // 异常单
this.isAllowDianhuaAndDaohang = true
this.title = '异常单',
this.showFile = true
} else if ([80, 81, 89, 110].indexOf(orderStatus) != -1) { // 已完工
this.isAllowDianhuaAndDaohang = true
this.title = '已完工',
this.showFile = true
} else {
this.isAllowDianhuaAndDaohang = true
}
......@@ -633,6 +676,10 @@
})
}
})
},
// 去业务材料页面
handleClickFile() {
},
trackOrder() {
// 接单成功事件,签到成功事件
......@@ -741,7 +788,6 @@
},
timeOutChange(timestamp){
if (this.timeout) this.$refs['order-count-down'].seconds += 2
console.log('-----timestamp-----:', timestamp, this.timeout)
if (timestamp == 0 && !this.timeout) { // 超时之后倒计时变为正计时
setTimeout(()=> {
this.timestamp = 1
......@@ -957,4 +1003,30 @@
}
}
}
.order-file {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20rpx 0;
border-radius: 12rpx;
background-color: #FFFFFF;
padding: 24rpx 30rpx;
.order-file-left {
color: #333333;
font-size: 26rpx;
display: flex;
align-items: center;
.file-image {
width: 52rpx;
height: 52rpx;
flex-shrink: 0;
margin-right: 16rpx;
}
}
.order-file-right {
color: #2272FF;
font-size: 26rpx;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment