5f06d8ef11
Replace all usages of legacy `.color-*` and `.text-color-*` SCSS utility classes with inline Tailwind `text-[#hexcode]` arbitrary value classes. Remove the deprecated `src/static/scss/colors.scss` file, and fix minor formatting/indentation issues across multiple component files.
98 lines
3.2 KiB
Vue
98 lines
3.2 KiB
Vue
<template>
|
||
<view class="order-card bg-white p-[12px] rounded-12 m-12">
|
||
<!-- 卡片头部 -->
|
||
<view class="border-box flex flex-items-center pb-[12px]">
|
||
<image class="icon mr-4" src="https://oss.nianxx.cn/mp/static/version_101/service/service_icon.png" />
|
||
<text class="font-size-14 text-[#525866] leading-[20px]">工单</text>
|
||
<text class="font-size-12 text-[#525866] leading-[20px] ml-auto">{{
|
||
isCancelWork ? "已取消" : workOrderStatus(orderData.workOrderStatus)
|
||
}}</text>
|
||
</view>
|
||
<!-- 卡片内容 -->
|
||
<view class="border-box card-content flex flex-items-center pb-[12px]">
|
||
<view class="border-box left flex-full pr-[20px]">
|
||
<view class="font-size-12 text-[#525866] leading-[20px] mb-4">所在位置：{{ orderData.roomNo }}</view>
|
||
<view class="font-size-12 text-[#525866] leading-[20px] mb-4">联系方式: {{ orderData.userPhone }}</view>
|
||
<view class="font-size-12 text-[#525866] leading-[20px] ellipsis-2">需求描述: {{ orderData.content }}</view>
|
||
</view>
|
||
|
||
<image v-if="orderData.contentImgUrl" class="right rounded-6" :src="orderData.contentImgUrl" mode="aspectFill" />
|
||
</view>
|
||
|
||
<!-- 服务人员 -->
|
||
<view v-if="orderData.processMemberName && orderData.processMemberPhone"
|
||
class="service-user p-[8px] flex flex-items-center flex-justify-between mb-12">
|
||
<view class="font-size-12 leading-[16px]">服务人员：{{ orderData.processMemberName }}</view>
|
||
<uni-icons class="ml-auto mr-4" type="phone-filled" size="14" color="#436799" />
|
||
<text class="font-size-12 leading-[16px]" @click="callService">拨打电话</text>
|
||
</view>
|
||
|
||
<!-- 取消操作 -->
|
||
<view v-if="
|
||
!isCancelWork &&
|
||
orderData.workOrderStatus !== '2' &&
|
||
orderData.workOrderStatus !== '3'
|
||
" class="flex flex-items-center flex-justify-between">
|
||
<text class="cancel border rounded-6 font-size-12 leading-[16px] text-[#525866] ml-auto"
|
||
@click="cancelCall">取消呼叫</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineProps } from "vue";
|
||
import { closeWorkOrder } from "@/request/api/WorkOrderApi";
|
||
import { ref } from "vue";
|
||
const isCancelWork = ref(false);
|
||
|
||
// Props
|
||
const props = defineProps({
|
||
orderData: {
|
||
type: Object,
|
||
required: true,
|
||
default: () => ({}),
|
||
},
|
||
});
|
||
|
||
/// 工单状态 0-待接单 1-处理中 2-已完成 3-已关闭
|
||
const workOrderStatus = (status) => {
|
||
if (status === "0") {
|
||
return "待处理";
|
||
} else if (status === "1") {
|
||
return "处理中";
|
||
} else if (status === "2") {
|
||
return "已完成";
|
||
} else if (status === "3") {
|
||
return "已取消";
|
||
} else {
|
||
return "";
|
||
}
|
||
};
|
||
|
||
// 拨打电话
|
||
const callService = () => {
|
||
uni.makePhoneCall({
|
||
phoneNumber: props.orderData.processMemberPhone,
|
||
});
|
||
};
|
||
|
||
// 取消呼叫
|
||
const cancelCall = async () => {
|
||
const res = await closeWorkOrder({
|
||
workOrderId: props.orderData.id,
|
||
});
|
||
if (res.data) {
|
||
isCancelWork.value = true;
|
||
}
|
||
uni.showToast({
|
||
title: res.data ? "取消呼叫成功" : res.message || "取消呼叫失败",
|
||
icon: "success",
|
||
duration: 2000,
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import "./styles/index.scss";
|
||
</style>
|