feat: 调整项目结构
This commit is contained in:
duanshuwen
256
src/components/CreateServiceOrder/index.vue
Normal file
256
src/components/CreateServiceOrder/index.vue
Normal file
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<view class="create-service-order">
|
||||
<view class="create-service-wrapper">
|
||||
<view class="order-header">
|
||||
<text>创建服务工单</text>
|
||||
</view>
|
||||
<view class="order-content">
|
||||
<view class="order-item">
|
||||
<image src="./images/icon_service.png" class="order-icon"></image>
|
||||
<uni-data-select
|
||||
v-if="!isCallSuccess && workOrderTypeList.length > 0"
|
||||
class="order-select"
|
||||
placeholder="请选择服务工单"
|
||||
v-model="workOrderTypeName"
|
||||
:localdata="workOrderTypeListSelectData"
|
||||
@change="changeWorkOrderType"
|
||||
></uni-data-select>
|
||||
<text v-else class="order-description">{{ workOrderTypeName }}</text>
|
||||
</view>
|
||||
<view class="order-line"></view>
|
||||
<view class="order-details">
|
||||
<view class="detail-item">
|
||||
<text class="detail-label">房间号：</text>
|
||||
<input
|
||||
v-if="!isCallSuccess"
|
||||
class="detail-input"
|
||||
placeholder="请填写房间号"
|
||||
v-model="roomId"
|
||||
/>
|
||||
<text v-else class="detail-value">{{ roomId }}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="detail-label">服务时间：</text>
|
||||
<text class="detail-value">2025-08-11 14:00</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="detail-label">联系房客：</text>
|
||||
<!-- 呼叫成功后显示为文本，否则显示输入框 -->
|
||||
<input
|
||||
v-if="!isCallSuccess"
|
||||
class="detail-input"
|
||||
placeholder="请填写联系人"
|
||||
v-model="contactName"
|
||||
/>
|
||||
<text v-else class="detail-value">{{ contactName }}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="detail-label">联系电话：</text>
|
||||
<!-- 呼叫成功后显示为文本，否则显示输入框 -->
|
||||
<input
|
||||
v-if="!isCallSuccess"
|
||||
class="detail-input"
|
||||
placeholder="请填写联系电话"
|
||||
v-model="contactPhone"
|
||||
/>
|
||||
<text v-else class="detail-value">{{ contactPhone }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 呼叫前显示立即呼叫按钮 -->
|
||||
<button v-if="!isCallSuccess" class="order-button" @click="handleCall">
|
||||
立即呼叫
|
||||
</button>
|
||||
|
||||
<!-- 呼叫成功后显示两个按钮 -->
|
||||
<view v-else class="order-buttons">
|
||||
<button class="order-button-secondary" @click="viewWorkOrder">
|
||||
查看工单
|
||||
</button>
|
||||
<button
|
||||
v-if="!isMarkCompleted"
|
||||
class="order-button-primary"
|
||||
@click="markCompleted"
|
||||
>
|
||||
已完成
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="footer-help">
|
||||
<image src="./images/icon_volume.png" class="help-icon"></image>
|
||||
<text class="help-text">没解决问题？给我打电话吧！</text>
|
||||
<text class="help-phone" @click="makePhoneCall">15185111210</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import { SCROLL_TO_BOTTOM } from "@/constant/constant";
|
||||
|
||||
import {
|
||||
createWorkOrder,
|
||||
workOrderTypeListForBiz,
|
||||
} from "@/request/api/OrderApi";
|
||||
const workOrderTypeId = ref("");
|
||||
const workOrderTypeName = ref("");
|
||||
const roomId = ref("");
|
||||
const contactName = ref("");
|
||||
const contactPhone = ref("");
|
||||
const isCallSuccess = ref(false); // 呼叫成功状态
|
||||
const workOrderId = ref(0); // 工单ID
|
||||
const workOrderTypeList = ref([]);
|
||||
const workOrderTypeListSelectData = ref([]);
|
||||
const isMarkCompleted = ref(false);
|
||||
|
||||
const changeWorkOrderType = (index) => {
|
||||
if (index < 0 || index >= workOrderTypeListSelectData.value.length) {
|
||||
return;
|
||||
}
|
||||
const item = workOrderTypeList.value[index];
|
||||
console.log("item:", item);
|
||||
workOrderTypeId.value = item.id;
|
||||
workOrderTypeName.value = item.workOrderTypeName;
|
||||
};
|
||||
|
||||
const handleCall = async () => {
|
||||
// 验证输入
|
||||
if (!roomId.value.trim()) {
|
||||
uni.showToast({
|
||||
title: "请填写房间号",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!contactName.value.trim()) {
|
||||
uni.showToast({
|
||||
title: "请填写联系人",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (!contactPhone.value.trim()) {
|
||||
uni.showToast({
|
||||
title: "请填写联系电话",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
sendCreateWorkOrder();
|
||||
};
|
||||
|
||||
/// 创建工单
|
||||
const sendCreateWorkOrder = async () => {
|
||||
try {
|
||||
const res = await createWorkOrder({
|
||||
contactName: contactName.value,
|
||||
contactPhone: contactPhone.value,
|
||||
workOrderTypeId: workOrderTypeId.value,
|
||||
roomId: roomId.value,
|
||||
});
|
||||
|
||||
if (res.code === 0) {
|
||||
// 保存工单ID
|
||||
workOrderId.value = res.data?.id || "";
|
||||
|
||||
// 设置呼叫成功状态
|
||||
isCallSuccess.value = true;
|
||||
|
||||
uni.showToast({
|
||||
title: "工单创建成功",
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.message || "创建工单失败",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("创建工单失败:", error);
|
||||
uni.showToast({
|
||||
title: "网络错误，请重试",
|
||||
icon: "none",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/// 获取工单类型
|
||||
const getWorkOrderType = async () => {
|
||||
const res = await workOrderTypeListForBiz();
|
||||
if (res.code === 0) {
|
||||
workOrderTypeList.value = res.data;
|
||||
workOrderTypeList.value.forEach((item, index) => {
|
||||
workOrderTypeListSelectData.value.push({
|
||||
value: index,
|
||||
text: item.workOrderTypeName,
|
||||
});
|
||||
});
|
||||
|
||||
if (workOrderTypeList.value.length > 0) {
|
||||
workOrderTypeId.value = workOrderTypeList.value[0].id;
|
||||
workOrderTypeName.value = workOrderTypeList.value[0].workOrderTypeName;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 查看工单
|
||||
const viewWorkOrder = () => {
|
||||
console.log("查看工单:", workOrderId.value);
|
||||
// 这里可以跳转到工单详情页面
|
||||
uni.navigateTo({
|
||||
url: `/pages-order/order/list?id=${workOrderId.value}`,
|
||||
});
|
||||
};
|
||||
|
||||
// 标记已完成
|
||||
const markCompleted = () => {
|
||||
console.log("标记工单已完成:", workOrderId.value);
|
||||
uni.showModal({
|
||||
title: "确认完成",
|
||||
content: "确认标记此工单为已完成吗？",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
isMarkCompleted.value = true;
|
||||
// 这里可以调用API标记工单完成
|
||||
uni.showToast({
|
||||
title: "工单已完成",
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const makePhoneCall = () => {
|
||||
// 使用 uniapp 的 API 拨打电话
|
||||
uni.makePhoneCall({
|
||||
phoneNumber: "15185111210",
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getWorkOrderType();
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
uni.$emit(SCROLL_TO_BOTTOM, true);
|
||||
}, 200);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./styles/index.scss";
|
||||
</style>
|
||||
Reference in New Issue
Block a user