333 lines
9.3 KiB
Vue
333 lines
9.3 KiB
Vue
<template>
|
|
<view class="li-message-page">
|
|
<view class="li-task-nav">
|
|
<SafeAreaTop />
|
|
<view @click="toPages({type:'nav'})" class="li-ml-15 li-mt-10 li-flex li-items-center">
|
|
<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"></text>
|
|
<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mr-6 li-mb-8"
|
|
@click="toPages({type:'home'})"></text>
|
|
<text class="li-text-42">工单大厅</text>
|
|
</view>
|
|
<wd-drop-menu class="li-w-100%">
|
|
<wd-drop-menu-item v-model="query.type" :options="option1" @change="refresh" />
|
|
<wd-drop-menu-item v-model="query.timeRange" :options="option2" @change="refresh1" />
|
|
</wd-drop-menu>
|
|
</view>
|
|
<!-- list -->
|
|
<view class="li-w-92% li-mx-auto li-pb-30">
|
|
<view v-for="(item, index) in taskList" :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 @click.stop="toPages({type:'detail',value:item})" class="li-flex li-items-center li-justify-between li-bottom-border2 li-pb-15">
|
|
<view class="li-text-28 li-flex li-items-center">
|
|
<text class="ri-file-list-line li-mr-10 li-text-#009aff"></text>
|
|
<text>{{item.ticket_no}}</text>
|
|
</view>
|
|
<view class="task-type-tag li-flex li-items-center">
|
|
<view :class="['type-badge', `type-${item.type.toLowerCase()}`]">
|
|
<text :class="taskTypes[item.type].icon" class="li-text-32"></text>
|
|
<text class="li-text-24 li-ml-6">{{getTaskTypeName(item.type)}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view @click.stop="toPages({type:'detail',value:item})">
|
|
<view v-if="item.type == 'F4'"
|
|
class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
|
|
<text class="li-text-#9a9a9a">预约时间</text>
|
|
<text>{{item.order.appoint_date}} {{item.order.appoint_time}}</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.order.region_name}}{{item.order.cell_name}}{{item.order.house_name}}{{item.order.address}}</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.order.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.order.mobile}}</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.create_time}}</text>
|
|
</view>
|
|
<view v-if="item.type==2" class="li-flex li-items-center li-justify-between li-text-26 li-mt-20">
|
|
<text class="li-text-#9a9a9a">维修类型</text>
|
|
<wd-tag custom-class="space" v-if="item.RepairType==1" color="#0083ff"
|
|
bg-color="#d0e8ff">公共维修</wd-tag>
|
|
<wd-tag custom-class="space" v-if="item.RepairType==2" color="#0083ff"
|
|
bg-color="#d0e8ff">房屋维修</wd-tag>
|
|
</view>
|
|
<view class="li-mt-20 bg-#f9f9f9 li-rd-10 li-p-15 li-text-24" v-if="item.order.remark">
|
|
<text>{{item.order.remark}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="li-flex li-items-center li-justify-between li-mt-30">
|
|
<view
|
|
:style="{ visibility: (item.type==1 && item.commission && item.commission > 0) ? 'visible' : 'hidden' }"
|
|
class="li-flex li-items-center">
|
|
<text class="li-text-36 li-font-bold li-text-#ff0000 li-mr-6">{{item.commission}}</text>
|
|
<text class="li-text-24 li-text-#333333 li-pt-4">元/可得佣金</text>
|
|
</view>
|
|
<view class="li-flex li-items-center">
|
|
<wd-button @click.stop="toPages({type:'detail',value:item})" custom-class="custom-shadow" size="small"> 详情 </wd-button>
|
|
<wd-button @click.stop="sumbit(item.ticket_id)" custom-class="custom-shadow1"
|
|
size="small"> 接单 </wd-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="taskList.length==0" class="!li-mt-300">
|
|
<wd-status-tip :image="uni.$globalData?.RESOURCE_URL+'tip/search.png'" tip="暂无待处理工单" />
|
|
</view>
|
|
<wd-toast />
|
|
<zero-loading type="wobble" v-if="loading"></zero-loading>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import SafeAreaTop from '@/components/SafeAreaTop/index.vue'
|
|
import { ref } from 'vue'
|
|
import { onLoad, onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
|
|
import { useNavigation } from '@/hooks/useNavigation'
|
|
import { ticketPoolList, ticketAccept } from '@/api/ticket'
|
|
import { useToast } from '@/uni_modules/wot-design-uni'
|
|
import { throttle } from '@/utils/common'
|
|
const Toast = useToast()
|
|
// 使用导航 composable
|
|
const {
|
|
hasMultiplePages, // 是否有多个页面在路由栈中
|
|
isTabBarPage, // 当前页面是否为 tabBar 页面
|
|
checkRouteStack // 检查当前路由栈状态的方法
|
|
} = useNavigation()
|
|
|
|
const loading = ref<boolean>(false)
|
|
|
|
onLoad(() => {
|
|
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 query = ref({
|
|
page: 1,
|
|
limit: 10,
|
|
type: 'ALL',
|
|
timeRange: 0
|
|
})
|
|
|
|
const finish = ref<boolean>(false)
|
|
|
|
const option1 = ref([
|
|
{ label: '全部类型', value: 'ALL' },
|
|
{ label: '商品工单', value: 'F2' },
|
|
{ label: '维修工单', value: 'F6' },
|
|
{ label: '量房工单', value: 'F4' }
|
|
])
|
|
const option2 = ref([
|
|
{ label: '全部时间', value: 0 },
|
|
{ label: '今天', value: 1 },
|
|
{ label: '最近7天', value: 2 },
|
|
{ label: '最近30天', value: 3 },
|
|
])
|
|
|
|
const taskList = ref([])
|
|
|
|
const toPages = (item : any) => {
|
|
switch (item.type) {
|
|
case 'nav':
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
break;
|
|
case 'home':
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
break;
|
|
case 'detail':
|
|
uni.navigateTo({
|
|
url: '/pagesA/task_hall/detail?ticket_id=' + item.value.ticket_id
|
|
})
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
const refresh = (value : any) => {
|
|
query.value.type = value.value
|
|
query.value.page = 1
|
|
taskList.value = []
|
|
poolList()
|
|
}
|
|
const refresh1 = (value : any) => {
|
|
query.value.timeRange = value.value
|
|
query.value.page = 1
|
|
taskList.value = []
|
|
poolList()
|
|
}
|
|
|
|
const sumbit = throttle(async (ticket_id : number) => {
|
|
loading.value = true
|
|
var res = await ticketAccept({ ticket_id: ticket_id })
|
|
loading.value = false
|
|
if (res.code == 200) {
|
|
Toast.success('已接单')
|
|
query.value.page = 1
|
|
taskList.value = []
|
|
poolList()
|
|
}
|
|
|
|
}, 500)
|
|
|
|
// 工单类型配置
|
|
const taskTypes = {
|
|
F2: {
|
|
name: '商品',
|
|
bgColor: '#e6f7ff',
|
|
textColor: '#1890ff',
|
|
icon: 'ri-shopping-bag-3-line'
|
|
},
|
|
F6: {
|
|
name: '维修',
|
|
bgColor: '#e6fffb',
|
|
textColor: '#13c2c2',
|
|
icon: 'ri-tools-line'
|
|
},
|
|
F4: {
|
|
name: '量房',
|
|
bgColor: '#f9f0ff',
|
|
textColor: '#722ed1',
|
|
icon: 'ri-ruler-2-line'
|
|
}
|
|
}
|
|
|
|
// 获取工单类型名称
|
|
const getTaskTypeName = (type : string) => {
|
|
return taskTypes[type]?.name || '其他'
|
|
}
|
|
|
|
const poolList = async () => {
|
|
loading.value = true
|
|
const res = await ticketPoolList(query.value)
|
|
loading.value = false
|
|
if (res.data.length < query.value.limit) {
|
|
finish.value = true
|
|
}
|
|
taskList.value.push(...res.data)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.li-message-page {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
/* #ifdef APP-PLUS */
|
|
padding-top: calc(var(--status-bar-height) + 160rpx);
|
|
/* #endif */
|
|
|
|
/* #ifdef MP-WEIXIN || H5 */
|
|
padding-top: calc(var(--status-bar-height) + 200rpx);
|
|
/* #endif */
|
|
|
|
/* 为固定导航栏留出空间 */
|
|
background: linear-gradient(to bottom,
|
|
rgba(197, 224, 253, 1.0) 0%,
|
|
rgba(197, 224, 253, 1) 20%,
|
|
rgba(248, 248, 248, 0.6) 40%,
|
|
rgba(248, 248, 248, 0.5) 60%,
|
|
rgba(242, 243, 247, 0.4) 80%,
|
|
rgba(236, 237, 240, 0.4) 100%);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.li-task-nav {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 100;
|
|
background: linear-gradient(to bottom,
|
|
rgba(197, 224, 253, 1) 0%,
|
|
rgba(197, 224, 253, 1) 20%,
|
|
rgba(197, 224, 253, 1) 40%,
|
|
rgba(197, 224, 253, 1) 60%,
|
|
rgba(197, 224, 253, 1) 80%,
|
|
rgba(197, 224, 253, 1) 100%);
|
|
}
|
|
|
|
.custom-shadow {
|
|
color: #009aff !important;
|
|
background: linear-gradient(to right, #FFFFFF, #FFFFFF) !important;
|
|
border: solid 1px #009aff !important;
|
|
}
|
|
|
|
.custom-shadow1 {
|
|
color: #ffffff !important;
|
|
background: linear-gradient(to right, #7bbfff, #009aff) !important;
|
|
margin-left: 15rpx !important;
|
|
}
|
|
|
|
::v-deep .wd-drop-menu__list {
|
|
width: 100%;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
::v-deep .wd-popup-wrapper .wd-popup {
|
|
border-radius: 0 0 10rpx 10rpx !important;
|
|
}
|
|
|
|
.li-task-card {
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
::v-deep.space {
|
|
padding: 2rpx 10rpx !important;
|
|
}
|
|
|
|
.task-type-tag {
|
|
.type-badge {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 4rpx 16rpx;
|
|
border-radius: 8rpx;
|
|
|
|
&.type-f2 {
|
|
background-color: #e6f7ff;
|
|
color: #1890ff;
|
|
}
|
|
|
|
&.type-f6 {
|
|
background-color: #e6fffb;
|
|
color: #13c2c2;
|
|
}
|
|
|
|
&.type-f4 {
|
|
background-color: #f9f0ff;
|
|
color: #722ed1;
|
|
}
|
|
}
|
|
}
|
|
</style> |