austin
/
staff
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

我的工单

This commit is contained in:
zhang zhuo 2025-03-11 17:16:37 +08:00
parent 2314d15847
commit 00149a359b
3 changed files with 138 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api/ticket.ts
View File

@ -5,4 +5,6 @@ export const ticketPoolList = (data : any = {}) => get('v1/ticket/pool/list', da
// 工单详情（工单池） // 工单详情（工单池）
export const ticketPoolInfo = (data : any = {}) => get('v1/ticket/pool/info', data); export const ticketPoolInfo = (data : any = {}) => get('v1/ticket/pool/info', data);
// 接单接口 // 接单接口
export const ticketAccept = (data : any = {}) => get('v1/ticket/accept', data); export const ticketAccept = (data : any = {}) => get('v1/ticket/accept', data);
// 我的工单
export const myTicketList = (data : any = {}) => get('v1/ticket/my/list', data);

231
pagesA/my_order/list.vue
View File

@ -12,12 +12,12 @@
</view> </view>
<!-- 搜索框 --> <!-- 搜索框 -->
<view class="li-w-90% li-mx-auto li-mt-15 li-mb-25"> <view class="li-w-90% li-mx-auto li-mt-15 li-mb-25">
<wd-search placeholderStyle="color:#d9d9d9" v-model="keyword" placeholder="工单编号/业主姓名" hide-cancel <wd-search placeholderStyle="color:#d9d9d9" v-model="query.ticket_no" placeholder="工单编号查询" hide-cancel
placeholder-left></wd-search> placeholder-left @search="search"></wd-search>
</view> </view>
<!-- 工单类型tabs --> <!-- 工单类型tabs -->
<view class="li-flex li-items-center"> <view class="li-flex li-items-center">
<wd-tabs v-model="activeTab" slidable="auto" :slidable-num="4" :map-num='4'> <wd-tabs v-model="activeTab" slidable="auto" :slidable-num="4" :map-num='4' @click="tabChange">
<block v-for="(item, index) in tabList" :key="index"> <block v-for="(item, index) in tabList" :key="index">
<wd-tab :title="item.name" :badge-props="item.badgeProps"></wd-tab> <wd-tab :title="item.name" :badge-props="item.badgeProps"></wd-tab>
</block> </block>
@ -30,70 +30,58 @@
</view> </view>
<view class="li-flex li-items-center li-mx-auto li-w-92% li-mt-check-costom"> <view class="li-flex li-items-center li-mx-auto li-w-92% li-mt-check-costom">
<text v-for="(item,index) in orderStatusList" :key="index" <text v-for="(item,index) in orderStatusList" :key="index"
:class="item.id==currentStatus?'space-check':'space-checkOut'" @click="handleStatusChange(item.id)"> :class="item.id==query.status?'space-check':'space-checkOut'" @click="handleStatusChange(item.id)">
{{item.title}} {{item.title}}
</text> </text>
</view> </view>
<!-- 工单列表 --> <!-- 工单列表 -->
<view class="li-w-92% li-mx-auto li-mt-list-costom"> <view class="li-w-92% li-mx-auto li-mt-list-costom">
<!-- 商城待配送工单 --> <view v-for="(item, index) in taskList" :key="index" @click="toPages({type:'detail',value:item})"
<template v-if="activeTab === 0"> class="li-task-card li-bg-white li-mt-20 li-rd-15 li-pt-25 li-pb-30 li-px-30">
<view v-for="(item, index) in deliveryList" :key="index" @click="toPages({type:'detail',value:item})" <view class="li-flex li-items-center li-justify-between li-bottom-border2 li-pb-15">
class="li-task-card li-bg-white li-mt-20 li-rd-15 li-pt-25 li-pb-30 li-px-30"> <view class="li-text-28 li-flex li-items-center li-justify-between li-text-#999">
<view class="li-flex li-items-center li-justify-between li-bottom-border2 li-pb-15"> <text class="ri-todo-line sli-mr-3"></text>
<view class="li-text-28 li-flex li-items-center li-justify-between li-text-#999"> {{item.ticket_no}}
<text class="ri-todo-line sli-mr-3"></text> <text class="ri-file-copy-line li-text-#009aff li-ml-15"></text>
{{item.number}}
<text class="ri-file-copy-line li-text-#009aff li-ml-15"></text>
</view>
<wd-tag custom-class="space" :color="getStatusColor(item.status)"
:bg-color="getStatusBgColor(item.status)">
{{getStatusText(item.status)}}
</wd-tag>
</view> </view>
<view> <wd-tag custom-class="space" :color="getStatusColor(item.status)"
<view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20"> :bg-color="getStatusBgColor(item.status)">
<text class="li-text-#9a9a9a">配送地址</text> {{getStatusText(item.status)}}
<text>{{item.address}}</text> </wd-tag>
</view> </view>
<view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20"> <view>
<text class="li-text-#9a9a9a">收货人</text> <view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
<text>{{item.name}}</text> <text class="li-text-#9a9a9a">配送地址</text>
</view> <text>{{item.address}}</text>
<view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
<text class="li-text-#9a9a9a">联系方式</text>
<text>{{item.phone}}</text>
</view>
<view class="li-mt-20 bg-#f9f9f9 li-rd-10 li-p-15 li-text-24">
<text>{{item.remarks}}</text>
</view>
</view> </view>
<view class="li-flex li-items-center li-justify-between li-mt-20"> <view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
<text class="li-text-24 li-text-#999">{{item.time}}</text> <text class="li-text-#9a9a9a">收货人</text>
<wd-button custom-class="custom-shadow" size="small" v-if="item.status === 1">开始配送</wd-button> <text>{{item.name}}</text>
</view>
<view class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
<text class="li-text-#9a9a9a">联系方式</text>
<text>{{item.phone}}</text>
</view>
<view class="li-mt-20 bg-#f9f9f9 li-rd-10 li-p-15 li-text-24">
<text>{{item.remarks}}</text>
</view> </view>
</view> </view>
</template> <view class="li-flex li-items-center li-justify-between li-mt-20">
<text class="li-text-24 li-text-#999">{{item.time}}</text>
<!-- 维修工单 --> <wd-button custom-class="custom-shadow" size="small" v-if="item.status === 1">开始配送</wd-button>
<template v-if="activeTab === 1">
<view v-for="(item, index) in repairList" :key="index"
class="li-task-card li-bg-white li-mt-20 li-rd-15 li-pt-25 li-pb-30 li-px-30">
<!-- 维修工单内容结构类似，根据需要调整显示字段 -->
</view> </view>
</template> </view>
<!-- 其他类型工单... -->
</view> </view>
</view> </view>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app' import { onLoad, onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import SafeAreaTop from '@/components/SafeAreaTop/index.vue' import SafeAreaTop from '@/components/SafeAreaTop/index.vue'
import { useNavigation } from '@/hooks/useNavigation' import { useNavigation } from '@/hooks/useNavigation'
import { myTicketList } from '@/api/ticket'
// 使用导航 composable // 使用导航 composable
const { const {
hasMultiplePages, // 是否有多个页面在路由栈中 hasMultiplePages, // 是否有多个页面在路由栈中
@ -101,14 +89,56 @@
checkRouteStack // 检查当前路由栈状态的方法 checkRouteStack // 检查当前路由栈状态的方法
} = useNavigation() } = useNavigation()
onLoad(() => { onLoad(() => {
checkRouteStack() checkRouteStack()
}) })
onShow(() => {
query.value.page = 1
taskList.value = []
poolList()
})
onPullDownRefresh(() => {
query.value.page = 1
taskList.value = []
poolList()
setTimeout(() => {
uni.stopPullDownRefresh()
}, 300)
})
onReachBottom(() => {
if (finish.value) return
query.value.page++
poolList()
})
const poolList = async () => {
loading.value = true
const res = await myTicketList(query.value)
loading.value = false
if (res.data.length < query.value.limit) {
finish.value = true
}
taskList.value.push(...res.data)
}
const query = ref({
page: 1,
limit: 10,
type: 'ALL',
status: 'ALL',
ticket_no: ''
})
const finish = ref<boolean>(false)
const loading = ref<boolean>(false)
const keyword = ref('') const keyword = ref('')
const activeTab = ref(0) const activeTab = ref(0)
const status = ref('0') const status = ref('0')
const currentStatus = ref(0) // 默认选中"未完成" const taskList = ref([])
// tab列表 // tab列表
const tabList = ref([ const tabList = ref([
@ -116,20 +146,12 @@
name: '全部', name: '全部',
value: 0, value: 0,
badgeProps: { badgeProps: {
modelValue: 11, modelValue: 0,
right: '-8px' right: '-8px'
} }
}, },
{ {
name: '商品配送', name: '商品配送',
value: 0,
badgeProps: {
modelValue: 1,
right: '-8px'
}
},
{
name: '维修工单',
value: 1, value: 1,
badgeProps: { badgeProps: {
modelValue: 0, modelValue: 0,
@ -137,28 +159,28 @@
} }
}, },
{ {
name: '量房工单', name: '维修工单',
value: 2, value: 2,
badgeProps: { badgeProps: {
modelValue: 0, modelValue: 0,
right: '-8px' right: '-8px'
} }
}, },
// { {
// name: '待入库', name: '量房工单',
// value: 3, value: 3,
// badgeProps: { badgeProps: {
// modelValue: 0, modelValue: 0,
// right: '-8px' right: '-8px'
// } }
// } }
]) ])
const orderStatusList = ref([ const orderStatusList = ref([
{ {
title: '全部', title: '全部',
id: 0 id: 'ALL'
}, },
{ {
title: '未完成', title: '未完成',
@ -170,32 +192,31 @@
} }
]) ])
// 商城待配送工单列表 const tabChange = () => {
const deliveryList = ref([ switch (activeTab.value) {
{ case 1:
number: 'JD1232122932919', query.value.type = 'F2'
status: 1, // 1待配送 2已完成 break;
address: '中金北区17号楼一单元201室', case 2:
name: '王先生', query.value.type = 'F6'
phone: '177****4485', break;
remarks: '请在下午6点前送达，谢谢。', case 3:
time: '2024-03-01 10:30' query.value.type = 'F4'
}, break;
{ default:
number: 'JD1232122932919', query.value.type = 'ALL'
status: 2, break;
address: '中金北区2号楼二单元502室',
name: '李先生',
phone: '138****6678',
remarks: '放在门口即可。',
time: '2024-03-01 09:15'
} }
]) query.value.page = 1
taskList.value = []
poolList()
}
// 维修工单列表 const search = async () => {
const repairList = ref([ query.value.page = 1
// 维修工单数据结构 taskList.value = []
]) poolList()
}
const toPages = (item : any) => { const toPages = (item : any) => {
console.log(item); console.log(item);
@ -223,10 +244,10 @@
// 状态颜色配置 // 状态颜色配置
const getStatusColor = (status : number) => { const getStatusColor = (status : number) => {
const colorMap = { const colorMap = {
1: '#ff9d00', // 待配送 0: '#ff9d00', // 待配送
1: '#37A5FF', // 未入库
2: '#00b42a', // 已完成 2: '#00b42a', // 已完成
3: '#37A5FF', // 未入库 3: '#F42429' // 已取消
4: '#F42429' // 已取消
} }
return colorMap[status] || '#666666' return colorMap[status] || '#666666'
} }
@ -234,10 +255,10 @@
// 状态背景色配置 // 状态背景色配置
const getStatusBgColor = (status : number) => { const getStatusBgColor = (status : number) => {
const bgColorMap = { const bgColorMap = {
1: '#fff6e9', // 待配送 0: '#fff6e9', // 待配送
1: '#e8f4ff', // 未入库
2: '#e8ffea', // 已完成 2: '#e8ffea', // 已完成
3: '#e8f4ff', // 未入库 3: '#ffe8e8' // 已取消
4: '#ffe8e8' // 已取消
} }
return bgColorMap[status] || '#f5f5f5' return bgColorMap[status] || '#f5f5f5'
} }
@ -245,17 +266,19 @@
// 状态文字配置 // 状态文字配置
const getStatusText = (status : number) => { const getStatusText = (status : number) => {
const textMap = { const textMap = {
1: '待配送', 0: '待接单',
1: '待完成',
2: '已完成', 2: '已完成',
3: '未入库', 3: '已取消'
4: '已取消'
} }
return textMap[status] || '未知状态' return textMap[status] || '未知状态'
} }
const handleStatusChange = (id : number) => { const handleStatusChange = (id : any) => {
currentStatus.value = id query.value.page = 1
// 这里可以处理状态切换后的逻辑 query.value.status = id
taskList.value = []
poolList()
} }
</script> </script>

10
pagesA/task_hall/detail.vue
View File

@ -90,11 +90,17 @@
</view> </view>
</view> </view>
<view class="li-flex li-items-start li-justify-between li-mt-30 li-text-28"> <view v-if="ticketInfo?.order?.remark" class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">工单备注</text> <text class="li-w-150 li-text-#9a9a9a">工单备注</text>
<text class="li-w-400 li-two-line li-text-right">{{ticketInfo?.order?.remark}}</text> <text class="li-w-400 li-two-line li-text-right">{{ticketInfo?.order?.remark}}</text>
</view> </view>
<view v-if="ticketInfo.type == 'F6'"
class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">报修内容</text>
<text class="li-w-400 li-two-line li-text-right">{{ticketInfo?.order?.content}}</text>
</view>
<view class="li-flex li-items-start li-justify-between li-mt-30 li-text-28"> <view class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">工单类型</text> <text class="li-w-150 li-text-#9a9a9a">工单类型</text>
<view class="li-w-400 li-text-right"> <view class="li-w-400 li-text-right">
@ -104,7 +110,7 @@
</view> </view>
</view> </view>
<view v-if="ticketInfo?.type =='F4' || ticketInfo?.type =='F6'" <view v-if="(ticketInfo?.type =='F4' || ticketInfo?.type =='F6') && ticketInfo.images"
class="li-flex li-items-start li-justify-between li-mt-30 li-text-28"> class="li-flex li-items-start li-justify-between li-mt-30 li-text-28">
<text class="li-w-150 li-text-#9a9a9a">附件上传</text> <text class="li-w-150 li-text-#9a9a9a">附件上传</text>
<view class="li-flex li-flex-col li-w-400 justify-end"> <view class="li-flex li-flex-col li-w-400 justify-end">