Skip to content

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

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

parent 5e3bcaf6
Hide whitespace changes
Inline Side-by-side
Showing with 558 additions and 470 deletions
src/components/order/index.vue
View file @ ed1a215e
<template> <template>
<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>
</view> </view>
<view class="right-view">{{ orderData.orderBusinessTypeText }}</view> <view class="right-view">{{ orderData.orderBusinessTypeText }}</view>
</view> </view>
<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]
</view> }}</text>
</view> <text v-if="item.content">{{ ' / ' + orderData[item.content] }}</text>
<view class="address-view"> </view>
<view class="address-left-view"> </view>
<image class="address-image" :src="dizhiImage" mode="widthFix"></image> <view class="address-view">
<text>{{ formatAddress(orderData) }}</text> <view class="address-left-view">
</view> <image
<view v-if="showDistance" class="address-right-view"> class="address-image"
{{orderDistance}}km :src="dizhiImage"
</view> mode="widthFix"
</view> ></image>
</view> <text>{{ formatAddress(orderData) }}</text>
</view>
<view v-if="showDistance" class="address-right-view">
{{ orderDistance }}km
</view>
</view>
</view>
<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"
</view> ><text v-for="(item, index) in orderData.auditResults" :key="index">{{
<view class="bottom-view"> item
<view> }}</text></view
<view v-if="showCountTime" class="bottom-left-view"> >
<view :class="['bottom-tag-view', {'timeout': timeout}]"><text>{{tagText}}</text></view> </view>
<u-count-down :timestamp="timestamp" font-size="40" show-days separator="zh" <view class="bottom-view">
:color="timeout ? '#FA5A49' : '#FF930D'" @change="handleChange" separator-color="#666666" ref="order-count-down"></u-count-down> <view>
</view> <view v-if="showCountTime" class="bottom-left-view">
<view v-else-if="showTime"> <view :class="['bottom-tag-view', { timeout: timeout }]"
<text>{{timeTitle}}</text> ><text>{{ tagText }}</text></view
<text>{{timeText}}</text> >
</view> <u-count-down
</view> :timestamp="timestamp"
<u-button class="right-btn" @click.stop="handleClick" :custom-style="buttonStyle" type="primary" font-size="40"
shape="circle" :hover-class="buttonTextType ? 'none' : ''"> show-days
{{orderText}} separator="zh"
</u-button> :color="timeout ? '#FA5A49' : '#FF930D'"
</view> @change="handleChange"
</view> separator-color="#666666"
ref="order-count-down"
></u-count-down>
</view>
<view v-else-if="showTime">
<text>{{ timeTitle }}</text>
<text>{{ timeText }}</text>
</view>
</view>
<u-button
class="right-btn"
@click.stop="handleClick"
:custom-style="buttonStyle"
type="primary"
shape="circle"
>
{{ orderText }}
</u-button>
</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: '充电桩', // 品类：充电桩
orderBusinessTypeText: '分配单', // 业务类型：分配单、订单池 orderBusinessTypeText: '分配单', // 业务类型：分配单、订单池
orderNumber: 'OR2021041809827', // 工单编号 orderNumber: 'OR2021041809827', // 工单编号
contactName: '郭小清', // 客户信息 contactName: '郭小清', // 客户信息
contactPhone: '13631612077', // 联系方式 contactPhone: '13631612077', // 联系方式
contactAddress: '湾街道荔枝花园D座125号', // 详细地址 contactAddress: '湾街道荔枝花园D座125号', // 详细地址
contactAddressLatitud: '116.3896', // 联系人地址经度 contactAddressLatitud: '116.3896', // 联系人地址经度
contactAddressLongitud: '39.91917', // 联系人地址纬度 contactAddressLongitud: '39.91917', // 联系人地址纬度
orderStatus: 0, // 工单状态 orderStatus: 0, // 工单状态
appointmentDatetime: '', // 预约时间 appointmentDatetime: '', // 预约时间
currentWillOverTime: 10000, // 剩余时间 currentWillOverTime: 10000, // 剩余时间
currentOverTime: new Date().getTime() + 10000, // 超过时间点 currentOverTime: new Date().getTime() + 10000, // 超过时间点
auditDatetime: '2021.04.19 12:45:09', // 审核时间 auditDatetime: '2021.04.19 12:45:09', // 审核时间
orderFinishDatetime: '2021.04.19 16:24:48', // 提交时间 orderFinishDatetime: '2021.04.19 16:24:48', // 提交时间
auditResults: {}, // 审核结果 auditResults: {}, // 审核结果
orderBusinessType: 'R', // 业务类型 R 为抢单 orderBusinessType: 'R', // 业务类型 R 为抢单
orderId: '0', // 订单id orderId: '0', // 订单id
} }
} },
}, },
/* 订单类型 /* 订单类型
waitAccept:待接单、 waitAccept:待接单、
waitAppointment:待预约、 waitAppointment:待预约、
waitCheckIn:待签到、 waitCheckIn:待签到、
...@@ -92,26 +117,29 @@ ...@@ -92,26 +117,29 @@
exception：异常单、 exception：异常单、
finish：已完工 finish：已完工
*/ */
type: String, type: String,
location: { // 当前坐标 location: {
type: Array, // 当前坐标
default () { type: Array,
return [116.3896, 39.91917] // 纬度,经度 default() {
} return [116.3896, 39.91917] // 纬度,经度
} },
}, },
data() { },
return { data() {
timeout: false, return {
timestamp: 0, timeout: false,
}; timestamp: 0,
}, }
computed: { },
orderText() { // 按钮文字 computed: {
return this.typeTexts[this.orderType] orderText() {
}, // 按钮文字
buttonStyle() { // 按钮样式 return this.typeTexts[this.orderType]
/** orderType },
buttonStyle() {
// 按钮样式
/** orderType
0 待接单、 0 待接单、
1 待预约、 1 待预约、
2 待签到、 2 待签到、
...@@ -120,113 +148,142 @@ ...@@ -120,113 +148,142 @@
5 异常单、 5 异常单、
6 已完工 6 已完工
*/ */
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]
} }
case 1: case 1:
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[0]
return this.buttonStyles[2] }
} },
}, 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 ||
showTime() { (this.orderType == 0 && !this.isCompetition)) &&
return [4, 5, 6].indexOf(this.orderType) != -1 this.orderData.currentOverTime
}, )
infoTexts() { },
return { showTime() {
'orderNumber': {name:'工单编号'}, return [4, 5, 6].indexOf(this.orderType) != -1
'partnerCompanyName': {name: '合作厂商'}, },
'contactName': {name: '客户信息', content: 'contactPhone'}, infoTexts() {
return {
} orderNumber: { name: '工单编号' },
}, partnerCompanyName: { name: '合作厂商' },
typeTexts() { contactName: { name: '客户信息', content: 'contactPhone' },
return [this.type0Text, '去预约', '去签到', '去完工', '审核中', '去处理', '已完工'] }
}, },
isCompetition() { // 是：订单池，抢单； 否：指派单，接单 typeTexts() {
return this.orderData.orderBusinessType == 'R' return [
}, this.type0Text,
type0Text() { '去预约',
return !this.isCompetition ? '接单' : '抢单' '去签到',
}, '去完工',
buttonStyles() { '去查看',
return [{ '去处理',
'background-color': '#2272FF', '去查看',
'color': '#FFFFFF', ]
'font-size': '32rpx', },
'height': '80rpx', isCompetition() {
'width': '200rpx' // 是：订单池，抢单； 否：指派单，接单
}, { return this.orderData.orderBusinessType == 'R'
'background-color': '#FF930D', },
'color': '#FFFFFF', type0Text() {
'font-size': '32rpx', return !this.isCompetition ? '接单' : '抢单'
'height': '80rpx', },
'width': '200rpx' buttonStyles() {
}, { return [
'background-color': 'transparent', {
'color': '#2272FF', 'background-color': '#2272FF',
'font-size': '32rpx', color: '#FFFFFF',
'height': '32rpx', 'font-size': '32rpx',
'width': '100rpx' height: '80rpx',
}] width: '200rpx',
}, },
buttonTextType() { {
return this.orderType == 4 || this.orderType == 6 'background-color': '#FF930D',
}, color: '#FFFFFF',
dizhiImage() { 'font-size': '32rpx',
return process.uniEnv.qn_base_url + 'shouye-dizhi.png' height: '80rpx',
}, width: '200rpx',
active() { },
return this.orderData.orderServiceType == '安装' // {
}, // 'background-color': 'transparent',
tagText() { // color: '#2272FF',
return this.timeout ? '超' : '剩' // 'font-size': '32rpx',
}, // height: '32rpx',
timeText() { // width: '100rpx',
let time = this.orderType == 4 ? this.orderData.orderFinishDatetime : this.orderData.auditDatetime // },
return time ? this.$u.timeFormat(time, 'yyyy.mm.dd hh:MM:ss') : '' ]
}, },
timeTitle() { // buttonTextType() {
return this.orderType == 4 ? '提交时间：' : '审核时间：' // return this.orderType == 4 || this.orderType == 6
}, // },
showReason() { dizhiImage() {
return this.orderType == 5 return process.uniEnv.qn_base_url + 'shouye-dizhi.png'
}, },
showDistance() { active() {
return this.orderType == 0 && this.location.length >= 2 && (this.orderData.contactAddressLatitud || this.orderData.contactAddressLongitud) return this.orderData.orderServiceType == '安装'
}, },
isWaitFinish() { tagText() {
return this.orderType == 3 return this.timeout ? '超' : '剩'
}, },
isException() { timeText() {
return this.orderType == 5 let time =
}, this.orderType == 4
types() { ? this.orderData.orderFinishDatetime
return { : this.orderData.auditDatetime
'waitAccept': 0, // 待接单、 return time ? this.$u.timeFormat(time, 'yyyy.mm.dd hh:MM:ss') : ''
'waitAppointment': 1, // 待预约、 },
'waitCheckIn': 2, // 待签到、 timeTitle() {
'waitFinish': 3, // 待完工、 return this.orderType == 4 ? '提交时间：' : '审核时间：'
'audit': 4, // 审核中、 },
'exception': 5, // 异常单、 showReason() {
'finish': 6, //已完工 return this.orderType == 5
} },
}, showDistance() {
orderDistance() { return (
return this.distance(this.orderData.contactAddressLatitud,this.orderData.contactAddressLongitud, this.location[0], this.location[1]) this.orderType == 0 &&
}, this.location.length >= 2 &&
/** orderType (this.orderData.contactAddressLatitud ||
this.orderData.contactAddressLongitud)
)
},
isWaitFinish() {
return this.orderType == 3
},
isException() {
return this.orderType == 5
},
types() {
return {
waitAccept: 0, // 待接单、
waitAppointment: 1, // 待预约、
waitCheckIn: 2, // 待签到、
waitFinish: 3, // 待完工、
audit: 4, // 审核中、
exception: 5, // 异常单、
finish: 6, //已完工
}
},
orderDistance() {
return this.distance(
this.orderData.contactAddressLatitud,
this.orderData.contactAddressLongitud,
this.location[0],
this.location[1]
)
},
/** orderType
0 待接单、 0 待接单、
1 待预约、 1 待预约、
2 待签到、 2 待签到、
...@@ -235,288 +292,319 @@ ...@@ -235,288 +292,319 @@
5 异常单、 5 异常单、
6 已完工 6 已完工
*/ */
orderType() { orderType() {
/* /*
orderStatus: orderStatus:
待接单 orderStatus<31 工单状态小于31 待接单 orderStatus<31 工单状态小于31
待预约 orderStatus == 31 and appointmentDatetime == null 工单状态等于30并且预约时间为空 待预约 orderStatus == 31 and appointmentDatetime == null 工单状态等于30并且预约时间为空
待签到 orderStatus == 31 and appointmentDatetime is not null 工单状态等于30并且预约时间不为空 待签到 orderStatus == 31 and appointmentDatetime is not null 工单状态等于30并且预约时间不为空
待完工 orderStatus >31 and orderStatus < 80 工单状态大于31 小于80 待完工 orderStatus >31 and orderStatus < 80 工单状态大于31 小于80
审核中 orderStatus ==85 or orderStatus == 87 工单状态 等于85 或者 等于有87 审核中 orderStatus ==85 or orderStatus == 87 工单状态 等于85 或者 等于有87
异常 orderStatus ==86 or orderStatus == 88 工单状态 等于86 或者 等于有88 异常 orderStatus ==86 or orderStatus == 88 工单状态 等于86 或者 等于有88
已完工 orderStatus in(80,81,89,110) 工单状态 等于80 or 81 or 89 or 110 已完工 orderStatus in(80,81,89,110) 工单状态 等于80 or 81 or 89 or 110
*/ */
if (!this.type) { if (!this.type) {
if (this.orderData.orderStatus < 31) { if (this.orderData.orderStatus < 31) {
return 0 return 0
} else if (this.orderData.orderStatus == 31) { } else if (this.orderData.orderStatus == 31) {
if (this.orderData.appointmentDatetime) { if (this.orderData.appointmentDatetime) {
return 2 return 2
} else { } else {
return 1 return 1
} }
} else if (this.orderData.orderStatus > 31 && this.orderData.orderStatus < 80) { } else if (
return 3 this.orderData.orderStatus > 31 &&
} else if (this.orderData.orderStatus == 85 || this.orderData.orderStatus == 87) { this.orderData.orderStatus < 80
return 4 ) {
} else if (this.orderData.orderStatus == 86 || this.orderData.orderStatus == 88) { return 3
return 5 } else if (
} else if ([80, 81, 89, 110].indexOf(this.orderData.orderStatus) != -1) { this.orderData.orderStatus == 85 ||
return 6 this.orderData.orderStatus == 87
} else { ) {
return 0 return 4
} } else if (
} else { this.orderData.orderStatus == 86 ||
return this.types[this.type] this.orderData.orderStatus == 88
} ) {
} return 5
}, } else if (
created() { [80, 81, 89, 110].indexOf(this.orderData.orderStatus) != -1
this.updateTime() ) {
}, return 6
watch:{ } else {
'orderData.currentCellTime'(val) { return 0
// 从后台重新获取数据之后，时间重新计算 }
this.updateTime() } else {
} return this.types[this.type]
}, }
methods: { },
handleExceptions() { },
if(this.isException) { created() {
getApp().track("order_handleExceptions", {}) this.updateTime()
} },
}, watch: {
// title:标题，showCountTime：是否显示倒计时。详情页面情况太多，提前传值可以避免页面晃动 'orderData.currentCellTime'(val) {
handleClick() { // 从后台重新获取数据之后，时间重新计算
var func = 'click' this.updateTime()
this.handleExceptions() },
if (this.isWaitFinish || this.isException) { // 不是待完工、不是异常单点按钮算点cell },
func = 'action' methods: {
} handleExceptions() {
this.$emit(func, this.orderData, this.type, this.showCountTime ? 'show' : '') if (this.isException) {
}, getApp().track('order_handleExceptions', {})
handleClickCell() { }
var func = 'click' },
this.handleExceptions() // title:标题，showCountTime：是否显示倒计时。详情页面情况太多，提前传值可以避免页面晃动
if (this.isException) { // 异常单点cell算点按钮 handleClick() {
func = 'action' var func = 'action'
} this.handleExceptions()
this.$emit(func, this.orderData, this.type, this.showCountTime ? 'show' : '') this.$emit(
}, func,
handleChange(timestamp) { this.orderData,
if (this.timeout) this.$refs['order-count-down'].seconds += 2 this.type,
if (timestamp == 0 && !this.timeout) { // 超时之后倒计时变为正计时 this.showCountTime ? 'show' : ''
setTimeout(()=> { )
this.timestamp = 1 },
this.timeout = true handleClickCell() {
}, 1000) var func = 'click'
} this.handleExceptions()
}, if (this.isException) {
formatAddress(order) { // 异常单点cell算点按钮
let address = "" func = 'action'
if(order) { }
address = order.contactProvinceText || "" this.$emit(
address += order.contactCityText || "" func,
address += order.contactCommunityText || "" this.orderData,
address += order.contactStreetText || "" this.type,
address += order.contactAddress || "" this.showCountTime ? 'show' : ''
} )
return address },
}, handleChange(timestamp) {
/** if (this.timeout) this.$refs['order-count-down'].seconds += 2
* echo distance(116.3896,39.91917,116.3940,39.91726); if (timestamp == 0 && !this.timeout) {
* 计算两点之间直线距离 // 超时之后倒计时变为正计时
* @param float $lon1 纬度 setTimeout(() => {
* @param float $lat1 经度 this.timestamp = 1
* @param float $lon2 纬度 this.timeout = true
* @param float $lat2 经度 }, 1000)
* @return float 浮点数 }
*/ },
distance(lat1, lng1, lat2, lng2) { formatAddress(order) {
var radLat1 = this.Rad(lat1); let address = ''
var radLat2 = this.Rad(lat2); if (order) {
var a = radLat1 - radLat2; address = order.contactProvinceText || ''
var b = this.Rad(lng1) - this.Rad(lng2); address += order.contactCityText || ''
var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) + address += order.contactCommunityText || ''
Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2))); address += order.contactStreetText || ''
s = s *6378.137 ;// EARTH_RADIUS; address += order.contactAddress || ''
s = Math.round(s * 10000)/10000 //输出为米 }
return Number(s?s.toFixed(2):0); return address
}, },
Rad(d){ /**
return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。 * echo distance(116.3896,39.91917,116.3940,39.91726);
}, * 计算两点之间直线距离
updateTime() { * @param float $lon1 纬度
var time = new Date().getTime() * @param float $lat1 经度
this.timeout = this.orderData.currentOverTime < time * @param float $lon2 纬度
this.timestamp = Math.round(Math.abs(this.orderData.currentOverTime - time) / 1000) * @param float $lat2 经度
}, * @return float 浮点数
handleLongpress(key, text) { // 长按复制单号 */
if (key == 'orderNumber') {
uni.setClipboardData({ distance(lat1, lng1, lat2, lng2) {
data: text, var radLat1 = this.Rad(lat1)
success: function () { var radLat2 = this.Rad(lat2)
console.log('success'); var a = radLat1 - radLat2
} var b = this.Rad(lng1) - this.Rad(lng2)
}); var s =
} 2 *
} Math.asin(
} Math.sqrt(
} Math.pow(Math.sin(a / 2), 2) +
Math.cos(radLat1) *
Math.cos(radLat2) *
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() {
var time = new Date().getTime()
this.timeout = this.orderData.currentOverTime < time
this.timestamp = Math.round(
Math.abs(this.orderData.currentOverTime - time) / 1000
)
},
handleLongpress(key, text) {
// 长按复制单号
if (key == 'orderNumber') {
uni.setClipboardData({
data: text,
success: function() {
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;
.order-top-view {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
.order-top-view { .left-view {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
margin-bottom: 20rpx;
.left-view { .tag-view {
display: flex; text-align: center;
align-items: center; width: 84rpx;
height: 40rpx;
color: #ffffff;
border-radius: 8rpx;
background-image: linear-gradient(to right, #ff930d, #ffc174);
font-size: 22rpx;
line-height: 42rpx;
&.active {
background-image: linear-gradient(to right, #2272ff, #47abff);
}
}
.tag-view { .store-view {
text-align: center; color: #333333;
width: 84rpx; font-size: 36rpx;
height: 40rpx; font-weight: bold;
color: #FFFFFF; margin-left: 20rpx;
border-radius: 8rpx; }
background-image: linear-gradient(to right, #FF930D, #FFC174); }
font-size: 22rpx;
line-height: 42rpx;
&.active {
background-image: linear-gradient(to right, #2272FF, #47ABFF);
}
}
.store-view { .right-view {
color: #333333; text-align: center;
font-size: 36rpx; width: 100rpx;
font-weight: bold; height: 40rpx;
margin-left: 20rpx; background-color: #f4f5f7;
} border-radius: 20rpx;
} color: #333333;
font-size: 22rpx;
line-height: 40rpx;
}
}
.right-view { .content-view {
text-align: center; .info-view {
width: 100rpx; text-align: left;
height: 40rpx; color: #333333;
background-color: #F4F5F7; font-size: 26rpx;
border-radius: 20rpx; margin-top: 18rpx;
color: #333333; margin-bottom: 18rpx;
font-size: 22rpx; display: flex;
line-height: 40rpx; align-items: flex-start;
}
}
.content-view { .info-title {
.info-view { flex-shrink: 0;
text-align: left; }
color: #333333; .info-content {
font-size: 26rpx; word-break: break-all;
margin-top: 18rpx; }
margin-bottom: 18rpx; }
display: flex;
align-items: flex-start;
.info-title {
flex-shrink: 0;
}
.info-content {
word-break: break-all;
}
}
.address-view { .address-view {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
color: #333333; color: #333333;
font-size: 24rpx; font-size: 24rpx;
margin-top: 20rpx; margin-top: 20rpx;
.address-left-view { .address-left-view {
display: flex; display: flex;
align-items: center; align-items: center;
align-items: flex-start; align-items: flex-start;
text-align: left; text-align: left;
.address-image {
width: 26rpx;
height: 28rpx;
margin-right: 8rpx;
flex-shrink: 0;
margin-top: 4rpx;
}
}
.address-right-view { .address-image {
margin-left: 30rpx; width: 26rpx;
} height: 28rpx;
} margin-right: 8rpx;
} flex-shrink: 0;
margin-top: 4rpx;
}
}
.line-view { .address-right-view {
background-color: #F4F5F7; margin-left: 30rpx;
height: 2rpx; }
width: 100%; }
margin-top: 30rpx; }
}
.reason-view { .line-view {
text-align: left; background-color: #f4f5f7;
margin-top: 30rpx; height: 2rpx;
font-size: 26rpx; width: 100%;
color: #FA5A49; margin-top: 30rpx;
display: flex; }
align-items: flex-start;
display: flex;
.reason-title {
flex-shrink: 0;
color: #666666;
}
.reason-text {
display: flex;
flex-direction: column;
}
}
.bottom-view { .reason-view {
display: flex; text-align: left;
align-items: center; margin-top: 30rpx;
justify-content: space-between; font-size: 26rpx;
margin-top: 30rpx; color: #fa5a49;
display: flex;
align-items: flex-start;
display: flex;
.reason-title {
flex-shrink: 0;
color: #666666;
}
.reason-text {
display: flex;
flex-direction: column;
}
}
.bottom-left-view { .bottom-view {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
margin-top: 30rpx;
.bottom-tag-view { .bottom-left-view {
width: 52rpx; display: flex;
height: 52rpx; align-items: center;
border-radius: 26rpx;
color: #FFFFFF;
font-size: 26rpx;
background-color: #FF930D;
margin-right: 16rpx;
display: flex;
justify-content: center;
align-items: center;
&.timeout { .bottom-tag-view {
background-color: #FA5A49; width: 52rpx;
} height: 52rpx;
} border-radius: 26rpx;
} color: #ffffff;
font-size: 26rpx;
background-color: #ff930d;
margin-right: 16rpx;
display: flex;
justify-content: center;
align-items: center;
} &.timeout {
} 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