<template> <view class="orderCard"> <!-- <view class="order-top">--> <!--<!– <view class="orderNo">–>--> <!--<!– 工单编号:{{ order.orderNo }}–>--> <!--<!– </view>–>--> <!-- <view :style="{ color: getFlagColor(order.flag) }" class="flag">--> <!-- {{ order.flagStr }}--> <!-- </view>--> <!-- </view>--> <view class="order-body"> <view class="carNum"> {{ order.carNo }} </view> <view class="carModel"> {{ order.carModel }} </view> <!-- <view class="project">--> <!-- <view class="project-left">--> <!-- <view class="title">--> <!-- <image class="titleIcon" mode="aspectFit" src="/static/icons/order-icon1.png"></image>--> <!-- 维修项目--> <!-- </view>--> <!-- <view class="desc">--> <!-- {{ projectName }}--> <!-- </view>--> <!-- </view>--> <!-- <view v-if="order.ticketsStatus == '05'" class="project-right">--> <!-- <image class="rightIcon" mode="aspectFit" src="/static/icons/success.png"></image>--> <!-- <text class="rightText">已派工</text>--> <!-- </view>--> <!-- </view>--> <view class="baseInfo"> <view> 客户信息:{{ order.userName }} {{ order.userMobile }} </view> <view v-if="order.bookingTime"> 预约时间:{{ order.bookingTime }} </view> <view v-if="order.adviserName"> 服务顾问:{{ order.adviserName }} </view> <view v-if="order.repairText"> 服务项目:{{ order.repairText }} </view> </view> <!-- <view class="footer">--> <!-- <view @click="projectDis" v-if="order.ticketsStatus == '04' && roleCanPg" class="btn pg">--> <!-- 项目派工--> <!-- </view>--> <!-- <view @click="projectDis" v-if="order.ticketsStatus == '05' && roleCanPg" class="btn pg">--> <!-- 重新派工--> <!-- </view>--> <!-- <view @click="receiveOrder(order.id)" v-if="order.ticketsStatus == '05' && order.ticketsWorkStatus=='01' && roleCanJd" class="btn qc">--> <!-- 接单--> <!-- </view>--> <!--<!– <view @click="doOrder(order.id)" v-if="order.ticketsStatus == '05' && order.ticketsWorkStatus=='04' && roleCanSg" class="btn qc">–>--> <!--<!– 开始施工–>--> <!--<!– </view>–>--> <!-- <view v-if="order.ticketsStatus == '06' && roleCanQc" class="btn qc">--> <!-- 告知取车--> <!-- </view>--> <!-- <view @click="gotoDetail" class="btn pg">--> <!--<!– 在什么都不能操作的情况下,可以查看详情–>--> <!-- 查看详情--> <!-- </view>--> <!-- </view>--> </view> </view> </template> <script> import { getUserInfo, getStrData } from '@/utils/auth'; import request from '@/utils/request'; export default { name: "bookingOrderCard", 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' } }, } } </script> <style lang="less" scoped> .orderCard { background: #FFFFFF; border-radius: 8rpx 8rpx 8rpx 8rpx; border-left: 4rpx solid #FFB323; padding: 5rpx 30rpx; margin: 15rpx 0; } .order-top { padding: 20rpx 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #F3F5F7; .orderNo { font-weight: 500; font-size: 24rpx; color: #858BA0; } .flag { font-family: PingFang SC, PingFang SC; font-weight: 500; font-size: 24rpx; } } .order-body { .carNum { margin: 20rpx 0; } .carModel { margin: 20rpx 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; &.qc { background: #0174F6; color: #fff; } } } } </style>