Commit a00f16b6 authored by Damon's avatar Damon
parents 3b35f9ca d54b4e03
<template>
<view class="order-view">
<text>订单</text>
</view>
</template>
<script>
export default {
props: {
orderData: {
type: Object,
default: {}
}
<template>
<view class="order-view" @click="handleClickCell">
<view class="top">
<view class="left">
<view class="tag">{{ orderData.orderServiceType }}</view>
<view class="store">{{ orderData.categoryName }}</view>
<view>{{ orderData.orderNumber }}</view>
</view>
<view class="right">{{ orderData.orderBusinessTypeText }}</view>
</view>
<view class="content">
<view class="title u-line-2">
<text>{{orderData.contactName }}</text> <text
style="margin-left: 8rpx;">{{ orderData.contactPhone }}</text>
</view>
</view>
<view class="address u-line-2">
<view class="left">
<view>
<u-icon name="map" size="32"></u-icon>
<text style="margin-left: 8rpx;">{{orderData.contactAddress }}</text>
</view>
</view>
<view class="right">{{getDistance(orderData.contactAddressLatitud,orderData.contactAddressLongitud)}}km
</view>
</view>
<u-divider margin-top="16" half-width="630" border-color="#F4F5F7" :use-slot="false">
</u-divider>
<view class="bottom">
<view class="left">
<view class="tag"></view>
<u-count-down :timestamp="timestamp" font-size="44" color="#FF930D"></u-count-down>
</view>
<u-button class="right-btn" @click.stop="handleClick">
{{orderText}}
</u-button>
</view>
</view>
</template>
<script>
export default {
props: {
orderData: {
type: Object,
default: {
orderServiceType: '安装', // 服务类型:安装、维修
categoryName: '充电桩', // 品类:充电桩
orderBusinessTypeText: '分配单', // 业务类型:分配单、订单池
orderNumber: 'OR2021041809827', // 工单编号
contactName: '郭小清', // 客户信息
contactPhone: '13631612077', // 联系方式
contactAddress: '湾街道荔枝花园D座125号', // 详细地址
orderStatus: '0', // 工单状态
appointmentDatetime: '' // 预约时间
}
},
orderType: Number // 0:待接单 1:'去预约', 2:'去签到', 3:'去完工', 4:'审核中', 5:'去处理', 6'已完工'
},
data() {
return {
};
},
computed: {
/*
orderStatus:
待接单 orderStatus<31 工单状态小于31
待预约 orderStatus == 31 and appointmentDatetime == null 工单状态等于30并且预约时间为空
待签到 orderStatus == 31 and appointmentDatetime is not null 工单状态等于30并且预约时间不为空
待完工 orderStatus >31 and orderStatus < 80 工单状态大于31 小于80
审核中 orderStatus ==85 or orderStatus == 87 工单状态 等于85 或者 等于有87
异常 orderStatus ==86 or orderStatus == 88 工单状态 等于86 或者 等于有88
已完工 orderStatus in(80,81,89,110) 工单状态 等于80 or 81 or 89 or 110
*/
orderText() { // 按钮文字
if (!this.orderType) {
if (this.orderData.orderStatus < 31) {
this.orderType = 0
} else if (this.orderData.orderStatus == 31) {
if (this.orderData.appointmentDatetime) {
return this.orderType = 2
} else {
this.orderType = 1
}
} else if (this.orderData.orderStatus > 31 && this.orderData.orderStatus < 80) {
this.orderType = 3
} else if (this.orderData.orderStatus == 85 && this.orderData.orderStatus == 87) {
this.orderType = 4
} else if (this.orderData.orderStatus == 86 && this.orderData.orderStatus == 88) {
this.orderType = 5
} else if ([80, 81, 89, 110].indexOf(this.orderData.orderStatus) != -1) {
this.orderType = 6
}
}
return this.typeTexts[this.orderType]
},
buttonStyle() { // 按钮样式
switch (this.status) {
case 0:
if (this.orderData.currentWillOverTime) {
return this.buttonStyle[0]
} else {
return this.buttonStyle[1]
}
case 1: case 2: case 3: case 5:
return this.buttonStyle[0]
case 4: case 6:
return this.buttonStyle[2]
}
},
typeTexts() {
return [type0Text, '去预约', '去签到', '去完工', '审核中', '去处理', '已完工']
},
type0Text() {
return this.orderData.currentWillOverTime ? '接单' : '抢单'
},
buttonStyles() {
return [{
'background-color': '#2272FF',
'color': '#FFFFFF'
}, {
'background-color': '#FF930D',
'color': '#FFFFFF'
}, {
'background-color': 'transparent',
'color': '#2272FF'
}]
},
buttonDisabled() {
return this.orderData.orderStatus == 4 || this.orderData.orderStatus == 6
}
},
data() {
return {
};
}
}
</script>
<style lang="scss" scoped>
.order-view {
width: 100%;
height: 200rpx;
}
methods: {
handleClick() {
if (buttonDisabled) return
this.$emit('action')
},
actionClick() {
this.$emit('click')
}
}
}
</script>
<style lang="scss" scoped>
.order-view {
width: 100%;
height: 200rpx;
}
</style>
......@@ -167,6 +167,15 @@
"enablePullDownRefresh": false
}
}
,{
// 订单详情页
"path" : "pages/order/detail",
"style" :
{
"navigationStyle": "custom"// 隐藏系统导航栏
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
......@@ -220,8 +229,8 @@
"query": ""
},
{
"name": "基本信息", //模式名称
"path": "pages/settle/base", //启动页面,必选
"name": "订单详情", //模式名称
"path": "pages/order/detail", //启动页面,必选
"query": "" //启动参数,在页面的onLoad函数里面得到
},
{
......@@ -244,10 +253,10 @@
"path": "pages/settle/file", //启动页面,必选
"query": "" //启动参数,在页面的onLoad函数里面得到
},
{
"name": "缴纳保证金", //模式名称
"path": "pages/settle/pay-ensure", //启动页面,必选
"query": "" //启动参数,在页面的onLoad函数里面得到
{
"name": "缴纳保证金", //模式名称
"path": "pages/settle/pay-ensure", //启动页面,必选
"query": "" //启动参数,在页面的onLoad函数里面得到
},
{
"name": "签约页面", //模式名称
......
<template>
<view class="order-wrap">
<u-navbar back-icon-color="#FFFFFF" :background="background" :border-bottom="false"></u-navbar>
<view class="header">
<view class="title">订单信息</view>
<view class="button" @click="rejectOrder">拒单</view>
</view>
<view class="content"></view>
</view>
</template>
<script>
export default {
data() {
return {
background: {
backgroundColor: 'none',
// 导航栏背景图
// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
// 还可以设置背景图size属性
// backgroundSize: 'cover',
// 渐变色
}
};
},
methods: {
/**
* 拒单
*/
rejectOrder() {
console.log("点击拒单")
}
}
}
</script>
<style lang="scss">
.order-wrap {
width: 750rpx;
height: 100vh;
overflow: auto;
// height: 1600rpx;
// background: linear-gradient(360deg, #F4F5F7 0%, #2272FF 100%);
background-color: #F4F5F7;
background-image: linear-gradient(to top, #F4F5F7 , #2272FF);
background-size: 750rpx 600rpx;
background-repeat: no-repeat;
.header {
padding: 12rpx 30rpx 40rpx 30rpx;
display: flex;
justify-content: space-between;
align-items: center;
.title {
font-size: 40rpx;
font-weight: bold;
color: #FFFFFF;
}
.button {
text-align: center;
width: 106rpx;
height: 52rpx;
background: #FFFFFF;
border-radius: 40rpx;
font-size: 24rpx;
font-weight: 400;
color: #2272FF;
line-height: 52rpx;
}
}
.content{
height: 2000rpx;
}
}
</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