214 lines
6.6 KiB
Vue
214 lines
6.6 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="value1" :options="option1" @change="handleChange1" />
|
|
<wd-drop-menu-item v-model="value2" :options="option2" @change="handleChange2" />
|
|
</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.number}}</text>
|
|
<view class="li-flex li-items-center">
|
|
<text class="ri-bookmark-3-line li-text-32 li-text-#9a9a9a"></text>
|
|
<text
|
|
class="li-text-26 li-text-#323232 li-ml-6">{{item.type==1?'商城':(item.type==2?'维修':'量房')}}</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.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.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 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">
|
|
<text>{{item.remarks}}</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 } from '@dcloudio/uni-app'
|
|
import { useNavigation } from '@/hooks/useNavigation'
|
|
// 使用导航 composable
|
|
const {
|
|
hasMultiplePages, // 是否有多个页面在路由栈中
|
|
isTabBarPage, // 当前页面是否为 tabBar 页面
|
|
checkRouteStack // 检查当前路由栈状态的方法
|
|
} = useNavigation()
|
|
|
|
onLoad(() => {
|
|
checkRouteStack()
|
|
})
|
|
|
|
const value1 = ref<number>(0)
|
|
const value2 = ref<number>(0)
|
|
const option1 = ref<Record<string, any>>([
|
|
{ label: '全部类型', value: 0 },
|
|
{ label: '商品工单', value: 1 },
|
|
{ label: '维修工单', value: 2 },
|
|
{ label: '量房工单', value: 2 }
|
|
])
|
|
const option2 = ref<Record<string, any>>([
|
|
{ label: '全部时间', value: 0 },
|
|
{ label: '今天', value: 1 },
|
|
{ label: '最近7天', value: 2 },
|
|
{ label: '最近30天', value: 3 },
|
|
])
|
|
|
|
const taskList = ref([
|
|
{
|
|
number: 'JD1232122932919',
|
|
type: 1, //1 商城 2 维修 3量房
|
|
time: '2025/02/21',
|
|
name: '王先生',
|
|
phone: "177****4485",
|
|
address: '中金北区17号楼一单元201室',
|
|
commission: 7.65,
|
|
remarks: "最近不在家，送到了就放在门口吧，谢谢。",
|
|
},
|
|
{
|
|
number: 'JD57656575675545',
|
|
type: 2, //1 商城 2 维修 3量房
|
|
time: '2025/02/18',
|
|
name: '李先生',
|
|
phone: "164****7544",
|
|
RepairType: 1, // 1公共维修 2房屋维修
|
|
address: '中金北区6栋左侧第二个路灯',
|
|
remarks: "路灯一个星期前坏了，到现在还没修，影响出行，请尽快维修。",
|
|
},
|
|
{
|
|
number: 'JD423343243243422',
|
|
type: 3, //1 商城 2 维修 3量房
|
|
time: '2025/02/21',
|
|
name: '张先生',
|
|
phone: "134****6556",
|
|
address: '中金北区14号楼三单元3301室',
|
|
remarks: "新房需要量房装修，麻烦物业尽快上门",
|
|
}
|
|
])
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
function handleChange1({ value }) {
|
|
console.log(value)
|
|
}
|
|
function handleChange2({ value }) {
|
|
console.log(value)
|
|
}
|
|
</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> |