Skip to content

S
self-support
Commit ed1a215e authored by Facius's avatar Facius
Browse files
Options

feat: 【ID1001292】 前台-师傅在小程序前台完工后，“审核中”及“已完工”状态下均可查看完工信息

parent 5e3bcaf6
Show whitespace changes
Inline Side-by-side
Showing with 558 additions and 470 deletions
src/components/order/index.vue
View file @ ed1a215e
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<view class="order-view" @click="handleClickCell"> <view class="order-view" @click="handleClickCell">
<view class="order-top-view"> <view class="order-top-view">
<view class="left-view"> <view class="left-view">
<view :class="['tag-view', {'active': active}]"> <view :class="['tag-view', { active: active }]">
{{ orderData.orderServiceType }} {{ orderData.orderServiceType }}
</view> </view>
<view class="store-view">{{ orderData.categoryName }}</view> <view class="store-view">{{ orderData.categoryName }}</view>
...@@ -12,20 +12,26 @@ ...@@ -12,20 +12,26 @@
<view class="content-view"> <view class="content-view">
<view class="info-view" v-for="(item, key) in infoTexts" :key="key"> <view class="info-view" v-for="(item, key) in infoTexts" :key="key">
<view class="info-title"> <view class="info-title">
<text>{{item.name + '：'}}</text> <text>{{ item.name + '：' }}</text>
</view> </view>
<view class="info-content"> <view class="info-content">
<text @longpress="handleLongpress(key, orderData[key])">{{orderData[key]}}</text> <text @longpress="handleLongpress(key, orderData[key])">{{
<text v-if="item.content">{{' / ' + orderData[item.content]}}</text> orderData[key]
}}</text>
<text v-if="item.content">{{ ' / ' + orderData[item.content] }}</text>
</view> </view>
</view> </view>
<view class="address-view"> <view class="address-view">
<view class="address-left-view"> <view class="address-left-view">
<image class="address-image" :src="dizhiImage" mode="widthFix"></image> <image
class="address-image"
:src="dizhiImage"
mode="widthFix"
></image>
<text>{{ formatAddress(orderData) }}</text> <text>{{ formatAddress(orderData) }}</text>
</view> </view>
<view v-if="showDistance" class="address-right-view"> <view v-if="showDistance" class="address-right-view">
{{orderDistance}}km {{ orderDistance }}km
</view> </view>
</view> </view>
</view> </view>
...@@ -33,34 +39,53 @@ ...@@ -33,34 +39,53 @@
<view class="line-view"></view> <view class="line-view"></view>
<view class="reason-view" v-if="showReason"> <view class="reason-view" v-if="showReason">
<view class="reason-title"><text>未通过原因：</text></view> <view class="reason-title"><text>未通过原因：</text></view>
<view class="reason-text"><text v-for="(item, index) in orderData.auditResults" :key="index">{{item}}</text></view> <view class="reason-text"
><text v-for="(item, index) in orderData.auditResults" :key="index">{{
item
}}</text></view
>
</view> </view>
<view class="bottom-view"> <view class="bottom-view">
<view> <view>
<view v-if="showCountTime" class="bottom-left-view"> <view v-if="showCountTime" class="bottom-left-view">
<view :class="['bottom-tag-view', {'timeout': timeout}]"><text>{{tagText}}</text></view> <view :class="['bottom-tag-view', { timeout: timeout }]"
<u-count-down :timestamp="timestamp" font-size="40" show-days separator="zh" ><text>{{ tagText }}</text></view
:color="timeout ? '#FA5A49' : '#FF930D'" @change="handleChange" separator-color="#666666" ref="order-count-down"></u-count-down> >
<u-count-down
:timestamp="timestamp"
font-size="40"
show-days
separator="zh"
:color="timeout ? '#FA5A49' : '#FF930D'"
@change="handleChange"
separator-color="#666666"
ref="order-count-down"
></u-count-down>
</view> </view>
<view v-else-if="showTime"> <view v-else-if="showTime">
<text>{{timeTitle}}</text> <text>{{ timeTitle }}</text>
<text>{{timeText}}</text> <text>{{ timeText }}</text>
</view> </view>
</view> </view>
<u-button class="right-btn" @click.stop="handleClick" :custom-style="buttonStyle" type="primary" <u-button
shape="circle" :hover-class="buttonTextType ? 'none' : ''"> class="right-btn"
{{orderText}} @click.stop="handleClick"
:custom-style="buttonStyle"
type="primary"
shape="circle"
>
{{ orderText }}
</u-button> </u-button>
</view> </view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
orderData: { orderData: {
type: Object, type: Object,
default () { default() {
return { return {
orderServiceType: '安装', // 服务类型：安装、维修 orderServiceType: '安装', // 服务类型：安装、维修
categoryName: '充电桩', // 品类：充电桩 categoryName: '充电桩', // 品类：充电桩
...@@ -81,7 +106,7 @@ ...@@ -81,7 +106,7 @@
orderBusinessType: 'R', // 业务类型 R 为抢单 orderBusinessType: 'R', // 业务类型 R 为抢单
orderId: '0', // 订单id orderId: '0', // 订单id
} }
} },
}, },
/* 订单类型 /* 订单类型
waitAccept:待接单、 waitAccept:待接单、
...@@ -93,24 +118,27 @@ ...@@ -93,24 +118,27 @@
finish：已完工 finish：已完工
*/ */
type: String, type: String,
location: { // 当前坐标 location: {
// 当前坐标
type: Array, type: Array,
default () { default() {
return [116.3896, 39.91917] // 纬度,经度 return [116.3896, 39.91917] // 纬度,经度
} },
} },
}, },
data() { data() {
return { return {
timeout: false, timeout: false,
timestamp: 0, timestamp: 0,
}; }
}, },
computed: { computed: {
orderText() { // 按钮文字 orderText() {
// 按钮文字
return this.typeTexts[this.orderType] return this.typeTexts[this.orderType]
}, },
buttonStyle() { // 按钮样式 buttonStyle() {
// 按钮样式
/** orderType /** orderType
0 待接单、 0 待接单、
1 待预约、 1 待预约、
...@@ -122,7 +150,7 @@ ...@@ -122,7 +150,7 @@
*/ */
switch (this.orderType) { switch (this.orderType) {
case 0: case 0:
if (!this.isCompetition ) { if (!this.isCompetition) {
return this.buttonStyles[0] return this.buttonStyles[0]
} else { } else {
return this.buttonStyles[1] return this.buttonStyles[1]
...@@ -131,59 +159,75 @@ ...@@ -131,59 +159,75 @@
case 2: case 2:
case 3: case 3:
case 5: case 5:
return this.buttonStyles[0]
case 4: case 4:
case 6: case 6:
return this.buttonStyles[2] return this.buttonStyles[0]
} }
}, },
showCountTime() { // ((待预约、 待签到、 待完工) || (待接单 && 业务类型非抢单)) && 有超过时间点 showCountTime() {
return ([1, 2, 3].indexOf(this.orderType) != -1 || (this.orderType == 0 && !this.isCompetition)) && this.orderData.currentOverTime // ((待预约、 待签到、 待完工) || (待接单 && 业务类型非抢单)) && 有超过时间点
return (
([1, 2, 3].indexOf(this.orderType) != -1 ||
(this.orderType == 0 && !this.isCompetition)) &&
this.orderData.currentOverTime
)
}, },
showTime() { showTime() {
return [4, 5, 6].indexOf(this.orderType) != -1 return [4, 5, 6].indexOf(this.orderType) != -1
}, },
infoTexts() { infoTexts() {
return { return {
'orderNumber': {name:'工单编号'}, orderNumber: { name: '工单编号' },
'partnerCompanyName': {name: '合作厂商'}, partnerCompanyName: { name: '合作厂商' },
'contactName': {name: '客户信息', content: 'contactPhone'}, contactName: { name: '客户信息', content: 'contactPhone' },
} }
}, },
typeTexts() { typeTexts() {
return [this.type0Text, '去预约', '去签到', '去完工', '审核中', '去处理', '已完工'] return [
}, this.type0Text,
isCompetition() { // 是：订单池，抢单； 否：指派单，接单 '去预约',
'去签到',
'去完工',
'去查看',
'去处理',
'去查看',
]
},
isCompetition() {
// 是：订单池，抢单； 否：指派单，接单
return this.orderData.orderBusinessType == 'R' return this.orderData.orderBusinessType == 'R'
}, },
type0Text() { type0Text() {
return !this.isCompetition ? '接单' : '抢单' return !this.isCompetition ? '接单' : '抢单'
}, },
buttonStyles() { buttonStyles() {
return [{ return [
{
'background-color': '#2272FF', 'background-color': '#2272FF',
'color': '#FFFFFF', color: '#FFFFFF',
'font-size': '32rpx', 'font-size': '32rpx',
'height': '80rpx', height: '80rpx',
'width': '200rpx' width: '200rpx',
}, { },
{
'background-color': '#FF930D', 'background-color': '#FF930D',
'color': '#FFFFFF', color: '#FFFFFF',
'font-size': '32rpx', 'font-size': '32rpx',
'height': '80rpx', height: '80rpx',
'width': '200rpx' width: '200rpx',
}, { },
'background-color': 'transparent', // {
'color': '#2272FF', // 'background-color': 'transparent',
'font-size': '32rpx', // color: '#2272FF',
'height': '32rpx', // 'font-size': '32rpx',
'width': '100rpx' // height: '32rpx',
}] // width: '100rpx',
}, // },
buttonTextType() { ]
return this.orderType == 4 || this.orderType == 6 },
}, // buttonTextType() {
// return this.orderType == 4 || this.orderType == 6
// },
dizhiImage() { dizhiImage() {
return process.uniEnv.qn_base_url + 'shouye-dizhi.png' return process.uniEnv.qn_base_url + 'shouye-dizhi.png'
}, },
...@@ -194,7 +238,10 @@ ...@@ -194,7 +238,10 @@
return this.timeout ? '超' : '剩' return this.timeout ? '超' : '剩'
}, },
timeText() { timeText() {
let time = this.orderType == 4 ? this.orderData.orderFinishDatetime : this.orderData.auditDatetime let time =
this.orderType == 4
? this.orderData.orderFinishDatetime
: this.orderData.auditDatetime
return time ? this.$u.timeFormat(time, 'yyyy.mm.dd hh:MM:ss') : '' return time ? this.$u.timeFormat(time, 'yyyy.mm.dd hh:MM:ss') : ''
}, },
timeTitle() { timeTitle() {
...@@ -204,7 +251,12 @@ ...@@ -204,7 +251,12 @@
return this.orderType == 5 return this.orderType == 5
}, },
showDistance() { showDistance() {
return this.orderType == 0 && this.location.length >= 2 && (this.orderData.contactAddressLatitud || this.orderData.contactAddressLongitud) return (
this.orderType == 0 &&
this.location.length >= 2 &&
(this.orderData.contactAddressLatitud ||
this.orderData.contactAddressLongitud)
)
}, },
isWaitFinish() { isWaitFinish() {
return this.orderType == 3 return this.orderType == 3
...@@ -214,17 +266,22 @@ ...@@ -214,17 +266,22 @@
}, },
types() { types() {
return { return {
'waitAccept': 0, // 待接单、 waitAccept: 0, // 待接单、
'waitAppointment': 1, // 待预约、 waitAppointment: 1, // 待预约、
'waitCheckIn': 2, // 待签到、 waitCheckIn: 2, // 待签到、
'waitFinish': 3, // 待完工、 waitFinish: 3, // 待完工、
'audit': 4, // 审核中、 audit: 4, // 审核中、
'exception': 5, // 异常单、 exception: 5, // 异常单、
'finish': 6, //已完工 finish: 6, //已完工
} }
}, },
orderDistance() { orderDistance() {
return this.distance(this.orderData.contactAddressLatitud,this.orderData.contactAddressLongitud, this.location[0], this.location[1]) return this.distance(
this.orderData.contactAddressLatitud,
this.orderData.contactAddressLongitud,
this.location[0],
this.location[1]
)
}, },
/** orderType /** orderType
0 待接单、 0 待接单、
...@@ -255,13 +312,24 @@ ...@@ -255,13 +312,24 @@
} else { } else {
return 1 return 1
} }
} else if (this.orderData.orderStatus > 31 && this.orderData.orderStatus < 80) { } else if (
this.orderData.orderStatus > 31 &&
this.orderData.orderStatus < 80
) {
return 3 return 3
} else if (this.orderData.orderStatus == 85 || this.orderData.orderStatus == 87) { } else if (
this.orderData.orderStatus == 85 ||
this.orderData.orderStatus == 87
) {
return 4 return 4
} else if (this.orderData.orderStatus == 86 || this.orderData.orderStatus == 88) { } else if (
this.orderData.orderStatus == 86 ||
this.orderData.orderStatus == 88
) {
return 5 return 5
} else if ([80, 81, 89, 110].indexOf(this.orderData.orderStatus) != -1) { } else if (
[80, 81, 89, 110].indexOf(this.orderData.orderStatus) != -1
) {
return 6 return 6
} else { } else {
return 0 return 0
...@@ -269,57 +337,66 @@ ...@@ -269,57 +337,66 @@
} else { } else {
return this.types[this.type] return this.types[this.type]
} }
} },
}, },
created() { created() {
this.updateTime() this.updateTime()
}, },
watch:{ watch: {
'orderData.currentCellTime'(val) { 'orderData.currentCellTime'(val) {
// 从后台重新获取数据之后，时间重新计算 // 从后台重新获取数据之后，时间重新计算
this.updateTime() this.updateTime()
} },
}, },
methods: { methods: {
handleExceptions() { handleExceptions() {
if(this.isException) { if (this.isException) {
getApp().track("order_handleExceptions", {}) getApp().track('order_handleExceptions', {})
} }
}, },
// title:标题，showCountTime：是否显示倒计时。详情页面情况太多，提前传值可以避免页面晃动 // title:标题，showCountTime：是否显示倒计时。详情页面情况太多，提前传值可以避免页面晃动
handleClick() { handleClick() {
var func = 'click' var func = 'action'
this.handleExceptions() this.handleExceptions()
if (this.isWaitFinish || this.isException) { // 不是待完工、不是异常单点按钮算点cell this.$emit(
func = 'action' func,
} this.orderData,
this.$emit(func, this.orderData, this.type, this.showCountTime ? 'show' : '') this.type,
this.showCountTime ? 'show' : ''
)
}, },
handleClickCell() { handleClickCell() {
var func = 'click' var func = 'click'
this.handleExceptions() this.handleExceptions()
if (this.isException) { // 异常单点cell算点按钮 if (this.isException) {
// 异常单点cell算点按钮
func = 'action' func = 'action'
} }
this.$emit(func, this.orderData, this.type, this.showCountTime ? 'show' : '') this.$emit(
func,
this.orderData,
this.type,
this.showCountTime ? 'show' : ''
)
}, },
handleChange(timestamp) { handleChange(timestamp) {
if (this.timeout) this.$refs['order-count-down'].seconds += 2 if (this.timeout) this.$refs['order-count-down'].seconds += 2
if (timestamp == 0 && !this.timeout) { // 超时之后倒计时变为正计时 if (timestamp == 0 && !this.timeout) {
setTimeout(()=> { // 超时之后倒计时变为正计时
setTimeout(() => {
this.timestamp = 1 this.timestamp = 1
this.timeout = true this.timeout = true
}, 1000) }, 1000)
} }
}, },
formatAddress(order) { formatAddress(order) {
let address = "" let address = ''
if(order) { if (order) {
address = order.contactProvinceText || "" address = order.contactProvinceText || ''
address += order.contactCityText || "" address += order.contactCityText || ''
address += order.contactCommunityText || "" address += order.contactCommunityText || ''
address += order.contactStreetText || "" address += order.contactStreetText || ''
address += order.contactAddress || "" address += order.contactAddress || ''
} }
return address return address
}, },
...@@ -332,43 +409,55 @@ ...@@ -332,43 +409,55 @@
* @param float $lat2 经度 * @param float $lat2 经度
* @return float 浮点数 * @return float 浮点数
*/ */
distance(lat1, lng1, lat2, lng2) { distance(lat1, lng1, lat2, lng2) {
var radLat1 = this.Rad(lat1); var radLat1 = this.Rad(lat1)
var radLat2 = this.Rad(lat2); var radLat2 = this.Rad(lat2)
var a = radLat1 - radLat2; var a = radLat1 - radLat2
var b = this.Rad(lng1) - this.Rad(lng2); var b = this.Rad(lng1) - this.Rad(lng2)
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + var s =
Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2))); 2 *
s = s *6378.137 ;// EARTH_RADIUS; Math.asin(
s = Math.round(s * 10000)/10000 //输出为米 Math.sqrt(
return Number(s?s.toFixed(2):0); Math.pow(Math.sin(a / 2), 2) +
}, Math.cos(radLat1) *
Rad(d){ Math.cos(radLat2) *
return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。 Math.pow(Math.sin(b / 2), 2)
)
)
s = s * 6378.137 // EARTH_RADIUS;
s = Math.round(s * 10000) / 10000 //输出为米
return Number(s ? s.toFixed(2) : 0)
},
Rad(d) {
return (d * Math.PI) / 180.0 //经纬度转换成三角函数中度分表形式。
}, },
updateTime() { updateTime() {
var time = new Date().getTime() var time = new Date().getTime()
this.timeout = this.orderData.currentOverTime < time this.timeout = this.orderData.currentOverTime < time
this.timestamp = Math.round(Math.abs(this.orderData.currentOverTime - time) / 1000) this.timestamp = Math.round(
Math.abs(this.orderData.currentOverTime - time) / 1000
)
}, },
handleLongpress(key, text) { // 长按复制单号 handleLongpress(key, text) {
// 长按复制单号
if (key == 'orderNumber') { if (key == 'orderNumber') {
uni.setClipboardData({ uni.setClipboardData({
data: text, data: text,
success: function () { success: function() {
console.log('success'); console.log('success')
} },
}); })
}
}
}
} }
},
},
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.order-view { .order-view {
width: 100%; width: 100%;
background-color: #FFFFFF; background-color: #ffffff;
border-radius: 12rpx; border-radius: 12rpx;
padding: 30rpx; padding: 30rpx;
margin-bottom: 20rpx; margin-bottom: 20rpx;
...@@ -387,13 +476,13 @@ ...@@ -387,13 +476,13 @@
text-align: center; text-align: center;
width: 84rpx; width: 84rpx;
height: 40rpx; height: 40rpx;
color: #FFFFFF; color: #ffffff;
border-radius: 8rpx; border-radius: 8rpx;
background-image: linear-gradient(to right, #FF930D, #FFC174); background-image: linear-gradient(to right, #ff930d, #ffc174);
font-size: 22rpx; font-size: 22rpx;
line-height: 42rpx; line-height: 42rpx;
&.active { &.active {
background-image: linear-gradient(to right, #2272FF, #47ABFF); background-image: linear-gradient(to right, #2272ff, #47abff);
} }
} }
...@@ -409,7 +498,7 @@ ...@@ -409,7 +498,7 @@
text-align: center; text-align: center;
width: 100rpx; width: 100rpx;
height: 40rpx; height: 40rpx;
background-color: #F4F5F7; background-color: #f4f5f7;
border-radius: 20rpx; border-radius: 20rpx;
color: #333333; color: #333333;
font-size: 22rpx; font-size: 22rpx;
...@@ -465,7 +554,7 @@ ...@@ -465,7 +554,7 @@
} }
.line-view { .line-view {
background-color: #F4F5F7; background-color: #f4f5f7;
height: 2rpx; height: 2rpx;
width: 100%; width: 100%;
margin-top: 30rpx; margin-top: 30rpx;
...@@ -475,7 +564,7 @@ ...@@ -475,7 +564,7 @@
text-align: left; text-align: left;
margin-top: 30rpx; margin-top: 30rpx;
font-size: 26rpx; font-size: 26rpx;
color: #FA5A49; color: #fa5a49;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
display: flex; display: flex;
...@@ -503,20 +592,19 @@ ...@@ -503,20 +592,19 @@
width: 52rpx; width: 52rpx;
height: 52rpx; height: 52rpx;
border-radius: 26rpx; border-radius: 26rpx;
color: #FFFFFF; color: #ffffff;
font-size: 26rpx; font-size: 26rpx;
background-color: #FF930D; background-color: #ff930d;
margin-right: 16rpx; margin-right: 16rpx;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
&.timeout { &.timeout {
background-color: #FA5A49; background-color: #fa5a49;
} }
} }
} }
}
} }
}
</style> </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