278 lines
7.7 KiB
Vue
278 lines
7.7 KiB
Vue
<template>
|
||
<view class="order-list" @click="handleOrderListClick">
|
||
<view class="order-item" v-for="(item, index) of orderList" :key="item.order_id">
|
||
<view class="order-item-header">
|
||
<view class="order-item-type">
|
||
{{ item.serviceType === 1 ? '上门' : '到店' }}
|
||
</view>
|
||
<view class="order-item-sn overflow-text">{{ item.workOrderNo }}</view>
|
||
<view v-if="item.refundStatus === 0" class="order-item-status">{{ item.serviceStatus | serviceStatusFilter }}</view>
|
||
<view v-else class="order-item-status">{{ item.refundStatus === 1 ? '退款审核中' : '已退款'}}</view>
|
||
</view>
|
||
|
||
<view class="order-item-contact-info mt-32" v-if="item.serviceType === 1">
|
||
<view class="contact-info-left">
|
||
<view class="contact-info-name overflow-text">
|
||
{{ item.userName }}
|
||
<text class="contact-info-phone">{{ item.userPhone }}</text>
|
||
</view>
|
||
<view class="contact-info-address overflow-text">
|
||
{{ item.userAddress }}
|
||
</view>
|
||
</view>
|
||
<button class="contact-action-btn iconfont icon-ic_Phone" :data-event="EVENT.CALL"
|
||
:data-index="index"></button>
|
||
<button class="contact-action-btn iconfont icon-icon_Location" :data-event="EVENT.LOCATION"
|
||
:data-index="index"></button>
|
||
</view>
|
||
<navigator hover-class="none"
|
||
:url="orderType?`/pages/admin/workOrder_manage/workOrder_detail?workOrderNo=${item.workOrderNo}`:`/pages/admin/work_order/detail?workOrderNo=${item.workOrderNo}`">
|
||
<OrderGoods :cartInfo="[item]" :isShowBtn="false">
|
||
</OrderGoods>
|
||
<view class="order-item-reverse-time overflow-text">
|
||
预约日期：
|
||
{{ item.reservationDate }}
|
||
{{ item.reservationTimeSlot }}
|
||
</view>
|
||
</navigator>
|
||
<!--工单管理操作按钮-->
|
||
<view v-if="orderType && btnConfig(item).length" class="order-item-btn-group mt-40">
|
||
<button class="order-item-btn" v-for="itms of btnConfig(item)" :key="itms.text"
|
||
@click="handleBottomBarAction(itms.event,item.workOrderNo)">
|
||
{{ itms.text }}
|
||
</button>
|
||
</view>
|
||
<!--移动端商家管理操作按钮-->
|
||
<view v-if="!orderType && adminBtnConfig(item).length" class="order-item-btn-group mt-40">
|
||
<button class="order-item-btn" :type="itms.type" v-for="itms of adminBtnConfig(item)" :key="itms.text"
|
||
@click="handleBottomAdminBarAction(itms.event,item.workOrderNo)" :class="itms.type==='default'?'defaultColor':''">
|
||
{{ itms.text }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 派单 改派 -->
|
||
<OrderAssign ref="orderAssignRef" v-if="!orderType" @refresh="goDetail"></OrderAssign>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
handleWorkOrderBarAction,
|
||
serviceStatusEnum,
|
||
workOrderBottomBar
|
||
} from "../workOrder_manage/config";
|
||
import OrderGoods from '@/components/orderGoods'
|
||
import {handleMakeCallPhone, handleOpenLocation} from "@/libs/order";
|
||
import {adminOrderBottomBar, handleAdminOrderBarAction} from "../work_order/config";
|
||
import OrderAssign from "../work_order/components/orderAssign";
|
||
|
||
const EVENT = {
|
||
CALL: "call",
|
||
LOCATION: "location"
|
||
}
|
||
|
||
export default {
|
||
components: {
|
||
OrderGoods,
|
||
OrderAssign
|
||
},
|
||
props: {
|
||
orderList: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
// 底部操作tab，用于区分工单还是移动端商家管理，有值是工单
|
||
orderType: {
|
||
type: Number,
|
||
default: 0
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
serviceStatusEnum,
|
||
// BtnUtil,
|
||
EVENT,
|
||
reservationConfig: {},
|
||
};
|
||
},
|
||
mounted() {
|
||
this.reservationConfig = uni.getStorageSync('reservationConfig'); // 商户预约设置
|
||
},
|
||
methods: {
|
||
// 工单操作按钮回调
|
||
async handleBottomBarAction(event,workOrderNo) {
|
||
let data = await handleWorkOrderBarAction(event, workOrderNo)
|
||
// 服务完成 / 服务开始
|
||
if (data === 'complete' || data === 'start' || data ==='rush_order') {
|
||
this.goWorkOrderDetail(workOrderNo)
|
||
}
|
||
},
|
||
// 工单管理详情
|
||
goWorkOrderDetail(workOrderNo){
|
||
this.$util.navigateTo(`/pages/admin/workOrder_manage/workOrder_detail?workOrderNo=${workOrderNo}`)
|
||
},
|
||
// 移动端商家 工单详情
|
||
goAdminWorkOrderDetail(workOrderNo){
|
||
this.$util.navigateTo(`/pages/admin/work_order/detail?workOrderNo=${workOrderNo}`)
|
||
},
|
||
// 商家管理操作按钮回调
|
||
async handleBottomAdminBarAction(event, workOrderNo) {
|
||
let data = await handleAdminOrderBarAction(event, workOrderNo)
|
||
// 服务完成 / 服务开始
|
||
if (data === 'revise_reservation' || data === 'Compulsory_completion') await this.goAdminWorkOrderDetail(workOrderNo)
|
||
if (data === 'revise_dispatch' || data === 'dispatch') await this.handleOpenAssignPage(data, workOrderNo)
|
||
},
|
||
// 派单 改派
|
||
handleOpenAssignPage(isReassign, workOrderNo) {
|
||
this.$refs.orderAssignRef.openPanel(workOrderNo, isReassign=== 'revise_dispatch'? true :false);
|
||
},
|
||
// 去订单详情
|
||
goDetail(workOrderNo){
|
||
if(this.orderType){
|
||
this.goWorkOrderDetail(workOrderNo)
|
||
}else{
|
||
this.$util.navigateTo(`/pages/admin/work_order/detail?workOrderNo=${workOrderNo}`)
|
||
}
|
||
},
|
||
// 工单操作按钮
|
||
btnConfig(workOrderNoInfo) {
|
||
return workOrderBottomBar(workOrderNoInfo)
|
||
},
|
||
async handleOrderListClick(e) {
|
||
const {
|
||
event,
|
||
index
|
||
} = e.target.dataset;
|
||
if (event === undefined || index === undefined) return;
|
||
const item = this.orderList[index];
|
||
if (event === EVENT.CALL) {
|
||
handleMakeCallPhone(item.userPhone);
|
||
} else if (event === EVENT.LOCATION) {
|
||
await handleOpenLocation(item);
|
||
}
|
||
},
|
||
//移动端商家管理操作按钮
|
||
adminBtnConfig(adminOrderNoInfo){
|
||
return adminOrderBottomBar(adminOrderNoInfo)
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.defaultColor{
|
||
background-color: #fff !important;
|
||
color: #666666 !important;
|
||
border: 1px solid #DDDDDD;
|
||
}
|
||
.order-list {
|
||
padding: 0 24rpx 24rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.order-item {
|
||
background-color: #fff;
|
||
border-radius: 24rpx;
|
||
padding: 32rpx 24rpx;
|
||
|
||
&+.order-item {
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
.order-item-header {
|
||
display: flex;
|
||
align-items: baseline;
|
||
|
||
.order-item-type {
|
||
height: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-inline: 6rpx;
|
||
font-size: 20rpx;
|
||
color: #2A7EFB;
|
||
border: 1px solid currentColor;
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
.order-item-sn {
|
||
font-size: 28rpx;
|
||
margin-left: 16rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.order-item-status {
|
||
margin-left: auto;
|
||
font-size: 26rpx;
|
||
color: #FF9600;
|
||
}
|
||
}
|
||
|
||
.order-item-reverse-time {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.order-item-btn-group {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.order-item-btn {
|
||
height: 64rpx;
|
||
padding-inline: 32rpx;
|
||
border-radius: 50rpx;
|
||
//background-color: #2291F8;
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&+.order-item-btn {
|
||
margin-left: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.order-item-contact-info {
|
||
background-color: #f9f9f9;
|
||
border-radius: 16rpx;
|
||
padding: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.contact-info-left {
|
||
margin-right: 28rpx;
|
||
flex: 1;
|
||
overflow: hidden;
|
||
font-size: 28rpx;
|
||
color: #282828;
|
||
|
||
.contact-info-phone {
|
||
margin-left: 30rpx;
|
||
}
|
||
|
||
.contact-info-address {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 6rpx;
|
||
}
|
||
}
|
||
|
||
.contact-action-btn {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
background-color: #edf2f9;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28rpx;
|
||
color: #2a7efb;
|
||
|
||
&+.contact-action-btn {
|
||
margin-left: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |