212 lines
6.4 KiB
Vue
212 lines
6.4 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="refresh" />
|
|
</wd-drop-menu>
|
|
</view>
|
|
<!-- list -->
|
|
<view class="li-w-92% li-mx-auto">
|
|
<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 class="li-flex li-items-center li-justify-between li-bottom-border2 li-pb-15">
|
|
<text class="li-text-28">工单编号: {{item.ticket_no}}</text>
|
|
<view class="li-flex li-items-center">
|
|
<text class="ri-bookmark-3-line li-text-32 li-text-#9a9a9a"></text>
|
|
<text v-if="item.type=='F2'" class="li-text-26 li-text-#323232 li-ml-6">商城</text>
|
|
<text v-if="item.type=='F6'" class="li-text-26 li-text-#323232 li-ml-6">维修</text>
|
|
<text v-if="item.type=='F4'" class="li-text-26 li-text-#323232 li-ml-6">量房</text>
|
|
</view>
|
|
</view>
|
|
<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 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-20">
|
|
<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>
|
|
<wd-button custom-class="custom-shadow" size="small"> 接单 </wd-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import SafeAreaTop from '@/components/SafeAreaTop/index.vue'
|
|
import { ref } from 'vue'
|
|
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
|
|
import { useNavigation } from '@/hooks/useNavigation'
|
|
import { ticketPoolList } from '@/api/ticket'
|
|
|
|
// 使用导航 composable
|
|
const {
|
|
hasMultiplePages, // 是否有多个页面在路由栈中
|
|
isTabBarPage, // 当前页面是否为 tabBar 页面
|
|
checkRouteStack // 检查当前路由栈状态的方法
|
|
} = useNavigation()
|
|
|
|
onLoad(() => {
|
|
checkRouteStack()
|
|
poolList()
|
|
})
|
|
|
|
onPullDownRefresh(() => {
|
|
refresh()
|
|
uni.stopPullDownRefresh()
|
|
})
|
|
|
|
onReachBottom(() => {
|
|
if (finish.value) return
|
|
query.value.page++
|
|
poolList()
|
|
})
|
|
|
|
const query = ref({
|
|
page: 1,
|
|
limit: 10,
|
|
type: "",
|
|
timeRange: 0
|
|
})
|
|
|
|
var finish = ref<boolean>()
|
|
|
|
const option1 = ref<Record<string, any>>([
|
|
{ label: '全部类型', value: '' },
|
|
{ label: '商品工单', value: 'F2' },
|
|
{ label: '维修工单', value: 'F6' },
|
|
{ label: '量房工单', value: 'F4' }
|
|
])
|
|
const option2 = ref<Record<string, any>>([
|
|
{ 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;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
const refresh = () => {
|
|
taskList.value = []
|
|
poolList()
|
|
}
|
|
|
|
const poolList = async () => {
|
|
const res = await ticketPoolList(query.value)
|
|
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: #ffffff !important;
|
|
background: linear-gradient(to right, #7bbfff, #009aff) !important // box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%);
|
|
}
|
|
|
|
::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;
|
|
}
|
|
</style> |