367 lines
7.2 KiB
Vue
367 lines
7.2 KiB
Vue
<template>
|
||
<view class="orderCard " :class="order.state==1?'orderCard-ok':'orderCard-doing'">
|
||
<view class="order-top">
|
||
<view class="title-box" :class="order.state==1?'title-box-ok':'title-box-doing'">
|
||
<image class="titleIcon" mode="aspectFit" src="/static/icons/order-icon1.png"></image>
|
||
<view class="title">
|
||
{{ projectName }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="order-body">
|
||
<view class="order-title">
|
||
<view>
|
||
<view class="carNum">
|
||
{{ order.carNum }}
|
||
</view>
|
||
<view class="carModel">
|
||
{{ order.carModel }}
|
||
</view>
|
||
</view>
|
||
<view :style="{ color: getFlagColor(order.flag) }" class="flag">
|
||
{{ order.flagStr }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="baseInfo">
|
||
<view>
|
||
客户信息：{{ order.userName }} {{ order.userPhone }}
|
||
</view>
|
||
<view>
|
||
预约时间：{{ order.createTime }}
|
||
</view>
|
||
<view>
|
||
服务顾问：{{ order.counselorName }}
|
||
</view>
|
||
<view>
|
||
订单编号：{{ order.counselorName }}
|
||
</view>
|
||
</view>
|
||
<view class="message red">
|
||
<image class="icon" mode="aspectFit" src="/static/icons/order-icon1.png"></image>
|
||
配件审批单未申请通过
|
||
</view>
|
||
<view class="message blue">
|
||
<image class="icon" mode="aspectFit" src="/static/icons/order-icon1.png"></image>
|
||
配件审批单申请通过
|
||
</view>
|
||
<view class="footer">
|
||
<view class="btn pg">
|
||
配件申请
|
||
</view>
|
||
<view class="btn qc">
|
||
接单处理
|
||
</view>
|
||
<view class="btn pg">
|
||
维修拍照
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getUserInfo,
|
||
getStrData
|
||
} from '@/utils/auth';
|
||
import request from '@/utils/request';
|
||
export default {
|
||
name: "orderCard",
|
||
props: {
|
||
order: {
|
||
type: Object,
|
||
default: () => {
|
||
return {}
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
projectName() {
|
||
if (this.order && this.order.projectList && this.order.projectList.length > 0) {
|
||
return this.order.projectList.map(m => m.name).join(',')
|
||
}
|
||
return ''
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
//当前角色是否可以派工
|
||
roleCanPg:false,
|
||
//当前角色是否可以告知取车
|
||
roleCanQc:false,
|
||
//当前角色是否可以接单
|
||
roleCanJd:false,
|
||
//当前用户是否可以进行施工、施工过程、结束施工操作---
|
||
roleCanSg:false,
|
||
}
|
||
},
|
||
mounted(){
|
||
let userInfo = getUserInfo()
|
||
if(userInfo.roleCodes.includes("service_advisor") || userInfo.roleCodes.includes("general_inspection") || (userInfo.roleCodes.includes("repair_staff") && getStrData("ifLeader"))){
|
||
//服务顾问、总检、维修班组长可以派工
|
||
this.roleCanPg = true
|
||
}
|
||
if(userInfo.roleCodes.includes("service_advisor")){
|
||
//服务顾问可以告知取车
|
||
this.roleCanQc = true
|
||
}
|
||
if(userInfo.roleCodes.includes("repair_staff") && this.order.nowRepairId==userInfo.id){
|
||
//维修工角色,并且指派处理的人就是当前用户可以接单
|
||
this.roleCanJd = true
|
||
}
|
||
},
|
||
onLoad(){
|
||
|
||
},
|
||
methods: {
|
||
getFlagColor(flag) {
|
||
if (flag == 1) {
|
||
return '#E8A321'
|
||
} else if (flag === 2) {
|
||
return '#999'
|
||
}
|
||
},
|
||
/**
|
||
* 接单
|
||
*/
|
||
receiveOrder(id){
|
||
request({
|
||
url: '/admin-api/repair/tickets/take',
|
||
method: 'get',
|
||
params:{id:id}
|
||
}).then((res) => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: '接单成功，请尽快处理！'
|
||
})
|
||
this.$emit('childEvent');
|
||
}else{
|
||
uni.showToast({
|
||
icon: 'none',
|
||
title: res.message
|
||
})
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 开始施工
|
||
*/
|
||
doOrder(id){
|
||
this.$emit('startWork',id);
|
||
},
|
||
/**
|
||
* 查看详情
|
||
*/
|
||
gotoDetail() {
|
||
uni.navigateTo({
|
||
url: '/pages-order/orderDetail/orderDetail?id=' + this.order.id + '&isDetail=' + '1'
|
||
})
|
||
},
|
||
/**
|
||
* 项目派工
|
||
*/
|
||
projectDis(){
|
||
uni.navigateTo({
|
||
url: '/pages-order/choosePeople/choosePeople?id=' + this.order.id
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.message{
|
||
padding: 9px 0;
|
||
font-size: 18px;
|
||
margin-bottom: 10px;
|
||
.icon{
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
margin-left: 10px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
.red{
|
||
background: #FFEFEF;
|
||
color: #F92C2C;
|
||
}
|
||
.blue{
|
||
background: #ECF5FF;
|
||
color: #0174F6;
|
||
}
|
||
.orderCard {
|
||
background: #FFFFFF;
|
||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||
margin: 32rpx 0;
|
||
}
|
||
.orderCard-doing{
|
||
border-left: 4rpx solid #FFB323;
|
||
}
|
||
.orderCard-ok{
|
||
border-left: 4rpx solid #4CD964;
|
||
}
|
||
.order-top {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #F3F5F7;
|
||
|
||
.title-box{
|
||
display: inline-flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 40px;
|
||
margin: 2px;
|
||
.title {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
margin-left: 5px;
|
||
}
|
||
.titleIcon{
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-left: 15px;
|
||
}
|
||
}
|
||
.title-box-doing{
|
||
background: linear-gradient(90deg, #FFFFFF 0%, #FFF4E0 100%);
|
||
}
|
||
.title-box-ok{
|
||
background: linear-gradient(90deg, #FFFFFF 0%, #DCFFE2 100%);
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
}
|
||
|
||
.order-body {
|
||
margin: 15px;
|
||
.order-title{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px #DDDDDD solid;
|
||
.carNum {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.flag {
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.carModel {
|
||
margin: 15rpx 0;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #858BA0;
|
||
}
|
||
|
||
.project {
|
||
padding: 20rpx 10rpx;
|
||
background: #F2F2F7;
|
||
border-radius: 4rpx 4rpx 4rpx 4rpx;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.project-left {
|
||
flex: 1;
|
||
width: 0;
|
||
}
|
||
|
||
.project-right {
|
||
padding: 0 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
border-left: 1rpx solid #DDDDDD;
|
||
|
||
.rightIcon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.rightText {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #17DBB1;
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #0174F6;
|
||
display: flex;
|
||
align-items: center;
|
||
column-gap: 8rpx;
|
||
}
|
||
|
||
.titleIcon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.desc {
|
||
font-weight: 500;
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.baseInfo {
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #858BA0;
|
||
|
||
& > view {
|
||
margin: 30rpx 0;
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
column-gap: 10rpx;
|
||
padding-bottom: 30rpx;
|
||
|
||
.btn {
|
||
width: 172rpx;
|
||
height: 60rpx;
|
||
border-radius: 30rpx 30rpx 30rpx 30rpx;
|
||
border: 2rpx solid #0174F6;
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #0174F6;
|
||
margin-left: 20rpx;
|
||
|
||
&.qc {
|
||
background: #0174F6;
|
||
color: #fff;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</style>
|