You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
653 lines
14 KiB
653 lines
14 KiB
<template> |
|
<BasicContainer :option="option"> |
|
<template #body> |
|
<view class="main"> |
|
<view class="search_container"> |
|
<view class="input_container flex-c-sb"> |
|
<view class="first_icon flex-c-c"> |
|
<u-icon name="search" color="#999" size="45"></u-icon> |
|
</view> |
|
|
|
<MyInput type="text" class="flex1 h100" :border="false" v-model="details.searchText" placeholder="请输入" |
|
clearale /> |
|
|
|
<view class="search_text flex-c-c"> |
|
搜 索 |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="flex-c-sa search_row"> |
|
<!-- 大区 --> |
|
<view class="flex1 flex-c-c" @click="() => handleShowChooseTime('year')"> |
|
<text class="mr10"> |
|
大区 |
|
</text> |
|
<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon> |
|
</view> |
|
|
|
<!-- 时间 --> |
|
<view class="flex1 flex-c-c" @click="() => handleShowChooseTime('month')"> |
|
<text class="mr10"> |
|
{{ details.time.year + '.' + details.time.month }} |
|
</text> |
|
<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon> |
|
</view> |
|
|
|
<!-- 项目组 --> |
|
<view class="flex1 flex-c-c" @click="() => handleShowChooseTime('year')"> |
|
<text class="mr10"> |
|
项目组 |
|
</text> |
|
<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon> |
|
</view> |
|
|
|
<!-- 名称 --> |
|
<view class="flex1 flex-c-c" @click="() => handleShowChooseTime('year')"> |
|
<text class="mr10"> |
|
名称 |
|
</text> |
|
<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon> |
|
</view> |
|
|
|
<!-- 筛选 --> |
|
<view class="flex1 flex-c-c" @click="()=> handleShowMoreSearch(true)"> |
|
<text class="mr10"> |
|
筛选 |
|
</text> |
|
<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon> |
|
</view> |
|
|
|
</view> |
|
|
|
<scroll-view class="scvmabx" :style="{height: details.scrollheight}" @scrolltolower="()=>{}" scroll-y="true" |
|
@touchmove.stop> |
|
|
|
<view class="list_container"> |
|
<!-- 工人 --> |
|
<!-- <block v-for="(item, index) in details.renderData" :key="item.id"> --> |
|
<view :class="{'box': true, first: false, second: true, third: false}" @click="handleGoDetails"> |
|
<view class="title flex-c-sb"> |
|
<view class="">预计<text>2024年5月12日</text>完成</view> |
|
|
|
<view class="tip">{{details.status_map}}</view> |
|
</view> |
|
|
|
<view class="info"> |
|
<view class="">客户联系人：{{details.type_map}}</view> |
|
|
|
<view class="mt20">售后类型：{{details.area}}</view> |
|
|
|
<view class="mt20">售后人员：{{details.estimated_finish_time}}</view> |
|
</view> |
|
</view> |
|
<!-- </block> --> |
|
|
|
</view> |
|
</scroll-view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
</BasicContainer> |
|
|
|
<!-- 蒙层 --> |
|
<view :class="details.maskClassName"> |
|
<view class="mask_container"> |
|
<view class="search_container"> |
|
<view class="input_container flex-c-sb"> |
|
<view class="first_icon flex-c-c"> |
|
<u-icon name="search" color="#999" size="45"></u-icon> |
|
</view> |
|
|
|
<MyInput type="text" class="flex1 h100" :border="false" v-model="details.searchText" placeholder="请输入" |
|
clearale /> |
|
|
|
<view class="search_text flex-c-c"> |
|
搜 索 |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="flex-c-sa search_row"> |
|
<!-- 大区 --> |
|
<view class="flex1 flex-c-c" @click="() => handleShowChooseTime('year')"> |
|
<text class="mr10"> |
|
大区 |
|
</text> |
|
<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon> |
|
</view> |
|
|
|
<!-- 时间 --> |
|
<view class="flex1 flex-c-c" @click="() => handleShowChooseTime('month')"> |
|
<text class="mr10"> |
|
{{ details.time.year + '.' + details.time.month }} |
|
</text> |
|
<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon> |
|
</view> |
|
|
|
<!-- 项目组 --> |
|
<view class="flex1 flex-c-c" @click="() => handleShowChooseTime('year')"> |
|
<text class="mr10"> |
|
项目组 |
|
</text> |
|
<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon> |
|
</view> |
|
|
|
<!-- 名称 --> |
|
<view class="flex1 flex-c-c" @click="() => handleShowChooseTime('year')"> |
|
<text class="mr10"> |
|
名称 |
|
</text> |
|
<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon> |
|
</view> |
|
|
|
<!-- 筛选 --> |
|
<view class="flex1 flex-c-c" @click="()=> handleShowMoreSearch(false)"> |
|
<text class="mr10"> |
|
筛选 |
|
</text> |
|
<u-icon name="arrow-up-fill" color="#000" size="20"></u-icon> |
|
</view> |
|
|
|
</view> |
|
|
|
|
|
<view class="mask_row flex-c-sb"> |
|
<view class=""> |
|
城市 |
|
</view> |
|
|
|
<view class="flex"> |
|
<view class="flex-c-c mr20" @click="() => handleShowChooseTime('year')"> |
|
<text class="mr10"> |
|
省份 |
|
</text> |
|
<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon> |
|
</view> |
|
|
|
<view class="flex1 flex-c-c" @click="() => handleShowChooseTime('year')"> |
|
<text class="mr10"> |
|
市 |
|
</text> |
|
<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<view class="mask_row flex-c-sb"> |
|
<view class=""> |
|
安装类型 |
|
</view> |
|
|
|
<view class="flex-c-c" @click="() => handleShowChooseTime('year')"> |
|
<text class="mr10"> |
|
省份 |
|
</text> |
|
<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon> |
|
</view> |
|
</view> |
|
|
|
<view class="mask_row flex-c-sb"> |
|
<view class=""> |
|
安装状态 |
|
</view> |
|
|
|
<view class="flex-c-c" @click="() => handleShowChooseTime('year')"> |
|
<text class="mr10"> |
|
省份 |
|
</text> |
|
<u-icon name="arrow-down-fill" color="#000" size="20"></u-icon> |
|
</view> |
|
</view> |
|
|
|
<view class="flex button_row"> |
|
<view class="flex-c-c mr20" @click="()=>handleShowMoreSearch(false)"> |
|
关 闭 |
|
</view> |
|
|
|
<view class="flex-c-c subBtn"> |
|
确 认 |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
|
|
<MyDrawer ref="myDrawerByTime"> |
|
<template #content> |
|
<picker-view v-if="details.visible" :indicator-style="details.indicatorStyle" :immediate-change="true" |
|
:value="details.value" @change="bindChangeByTime" class="picker-view"> |
|
<picker-view-column> |
|
<view class="item" v-for="(item, index) in details.years" :key="index"> |
|
{{ item }} |
|
</view> |
|
</picker-view-column> |
|
|
|
<picker-view-column> |
|
<view class="item" v-for="(item, index) in details.months" :key="index"> |
|
{{ item }} |
|
</view> |
|
</picker-view-column> |
|
</picker-view> |
|
</template> |
|
</MyDrawer> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
import { onLoad, onShow, onHide, onUnload, onPullDownRefresh } from '@dcloudio/uni-app' |
|
|
|
// import Tabber from '@/compoment/Tabber/Tabber.vue' |
|
import { nextTick, ref, reactive } from 'vue' |
|
import utils from '@/utils/utils' |
|
import { getMasterTaskList } from '@/api/user.js' |
|
|
|
// 组件实例 |
|
const tip = ref(null) |
|
const calendar = ref() |
|
const myDrawerByTime = ref() |
|
|
|
const option = reactive({ |
|
// 标题 |
|
title: '下属售后任务', |
|
// 下拉刷新回调函数 |
|
async pullDownRefreshInitPage() { |
|
|
|
return null |
|
}, |
|
// 触底加载回到函数 |
|
reachBottomInitPage: async () => { return null }, |
|
haveData: true, |
|
isEnd: false |
|
}) |
|
|
|
const details = reactive({ |
|
/** 列表容器高度 */ |
|
scrollheight: '60vh', |
|
/** picker被选中的索引位置 */ |
|
value: [3], |
|
/** picker行高度 */ |
|
indicatorStyle: `height: 40px;`, |
|
/** 年 */ |
|
years: [], |
|
/** 月 */ |
|
months: [], |
|
/** 当前picker使用的数组 */ |
|
pickerArr: [], |
|
/** 当前时间 */ |
|
time: { |
|
year: '', |
|
month: '', |
|
}, |
|
visible: false, |
|
pageType: 2, |
|
/** 渲染数据 */ |
|
renderData: [], |
|
/** 输入框搜索的值 */ |
|
searchText: '', |
|
/** 蒙层类名 */ |
|
maskClassName: { |
|
mask: true, |
|
show: false, |
|
done: false |
|
} |
|
}) |
|
|
|
onShow(async () => { |
|
if (details.maskClassName.done) details.maskClassName.done = false |
|
|
|
await nextTick() |
|
details.scrollheight = await utils.getViewDistanceFormTop('.scvmabx') |
|
}) |
|
onLoad(() => { |
|
}) |
|
|
|
// 初始化设置时间 |
|
const initTime = () => { |
|
// 获取当前时间 |
|
const now = new Date() |
|
// 获取当前年份 |
|
const year = now.getFullYear() |
|
|
|
for (let index = 1990; index <= year + 1; index++) { |
|
details.years.push(index + '') |
|
} |
|
|
|
// 获取当前月份 |
|
const month = now.getMonth() + 1 |
|
for (let index = 1; index <= 12; index++) { |
|
details.months.push(index < 10 ? '0' + index : index + '') |
|
} |
|
|
|
// 设置默认时间 |
|
details.time.year = year + '' |
|
details.time.month = month < 10 ? '0' + month : '' + month |
|
} |
|
|
|
initTime() |
|
|
|
/** 去详情 */ |
|
const handleGoDetails = () => { |
|
const jupPatch = |
|
details.tabbarCode === 1 |
|
? // 任务详情 |
|
'/pagesHome/pages/taskDetails/taskDetails' |
|
: // 异常详情 |
|
'/pagesHome/pages/afterSalesDetails/afterSalesDetails' |
|
|
|
uni.navigateTo({ |
|
url: jupPatch, |
|
}) |
|
} |
|
|
|
/** 获取页面数据 */ |
|
const initPage = async () => { |
|
try { |
|
details.renderData = [] |
|
|
|
const submitData = { |
|
type: 1, |
|
month: details.time.year + '-' + details.time.month, |
|
} |
|
|
|
const res = await getMasterTaskList(submitData) |
|
|
|
const { code, data } = res |
|
if (code !== 200) return |
|
details.renderData = data || [] |
|
} catch (err) { |
|
console.log('err :>> ', err) |
|
//TODO handle the exception |
|
} |
|
} |
|
|
|
initPage() |
|
|
|
/** picker切换时执行 -- 时间 */ |
|
const bindChangeByTime = function (e) { |
|
details.value = e.detail.value |
|
} |
|
|
|
/** 选择时间 */ |
|
const handleShowChooseTime = (type : 'year' | 'month' | 'day') => { |
|
details.pickerArr = details[type + 's'] |
|
|
|
const _time = details.time[type] |
|
|
|
console.log('details.time.year :>> ', details.time.year); |
|
|
|
const { year, month } = details.time |
|
|
|
|
|
for (let i = 0; i < details.years.length; i++) { |
|
const value = details.years[i] |
|
if (value !== year) continue |
|
details.value[0] = i |
|
break |
|
} |
|
|
|
for (let i = 0; i < details.months.length; i++) { |
|
const value = details.months[i] |
|
if (value !== month) continue |
|
details.value[1] = i |
|
break |
|
} |
|
|
|
|
|
details.visible = true |
|
|
|
console.log('details.value :>> ', details.value); |
|
|
|
myDrawerByTime.value.setDetails({ |
|
showPopUp: true, |
|
title: '选择时间', |
|
async success() { |
|
details.time.year = details.years[details.value[0]] |
|
details.time.month = details.months[details.value[1]] |
|
myDrawerByTime.value.details.showPopUp = false |
|
initPage() |
|
await nextTick() |
|
details.visible = false |
|
}, |
|
async close() { |
|
myDrawerByTime.value.details.showPopUp = false |
|
|
|
await nextTick() |
|
details.visible = false |
|
} |
|
}) |
|
} |
|
|
|
/** 显示更多筛选搜索条件 */ |
|
const handleShowMoreSearch = (_flag : boolean) => { |
|
if (_flag) { |
|
details.maskClassName.show = true |
|
details.maskClassName.done = false |
|
} |
|
else { |
|
details.maskClassName.show = false |
|
details.maskClassName.done = true |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
@import url('@/utils/style/common.scss'); |
|
|
|
.header_title { |
|
background-color: var(--subjectColor); |
|
color: #fff; |
|
height: 100upx; |
|
} |
|
|
|
// 顶部搜索 |
|
.search_container { |
|
background: #fff; |
|
padding: 20upx; |
|
|
|
.input_container { |
|
// padding: 20upx 100upx; |
|
background: #F4F6F8; |
|
border-radius: 50upx; |
|
height: 80upx; |
|
|
|
.first_icon { |
|
width: 100upx; |
|
} |
|
|
|
input {} |
|
|
|
.search_text { |
|
width: 150upx; |
|
color: var(--subjectColor); |
|
} |
|
} |
|
} |
|
|
|
// 时间行 |
|
.search_row { |
|
background: #F5F5F6; |
|
// border-bottom: 2upx solid #eee; |
|
|
|
&>view { |
|
padding: 20upx 0; |
|
} |
|
} |
|
|
|
.main { |
|
font-size: 0.9rem; |
|
position: relative; |
|
// padding: 20upx; |
|
|
|
// 任务列表 |
|
.list_container { |
|
position: relative; |
|
color: #000; |
|
z-index: 10; |
|
// padding: 20upx; |
|
|
|
// 工人样式 |
|
.box { |
|
border-radius: 10upx; |
|
overflow: hidden; |
|
margin: 20upx; |
|
|
|
&:last-child { |
|
margin-bottom: 0; |
|
} |
|
|
|
.title { |
|
padding: 20upx 20upx; |
|
background: linear-gradient(90deg, #d8f7f2 0%, #fff 100%); |
|
font-weight: 600; |
|
|
|
.tip { |
|
font-weight: normal; |
|
color: #3ad8bc; |
|
} |
|
} |
|
|
|
.info { |
|
padding: 30upx 20upx; |
|
background-color: #fff; |
|
font-size: 0.9rem; |
|
} |
|
|
|
// 待签收 |
|
&.first { |
|
.title { |
|
background: linear-gradient(90deg, #fee8d0 0%, #fff 100%); |
|
|
|
.tip { |
|
color: var(--subjectColor); |
|
} |
|
} |
|
} |
|
|
|
// 服务中 |
|
&.second { |
|
.title { |
|
background: linear-gradient(90deg, #cde7fc 0%, #fff 100%); |
|
|
|
.tip { |
|
color: var(--primaryColor); |
|
} |
|
} |
|
} |
|
|
|
// 已指派 |
|
&.third { |
|
.title { |
|
background: linear-gradient(90deg, #d8f7f2 0%, #fff 100%); |
|
|
|
.tip { |
|
color: #3ad8bc; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
// picker样式 |
|
.picker-view { |
|
height: 40vh; |
|
|
|
.item { |
|
text-align: center; |
|
line-height: 40px; |
|
} |
|
} |
|
|
|
@keyframes ShowMaskAn { |
|
0% { |
|
// display: block; |
|
opacity: 0; |
|
transform: translateY(-100%); |
|
} |
|
|
|
40% { |
|
transform: translateY(5%); |
|
opacity: 1; |
|
} |
|
|
|
60% { |
|
transform: translateY(-5%); |
|
} |
|
|
|
80% { |
|
transform: translateY(1%); |
|
} |
|
|
|
100% { |
|
// display: block; |
|
transform: translateY(0%); |
|
} |
|
} |
|
|
|
@keyframes DoneMaskAn { |
|
0% { |
|
// display: block; |
|
opacity: 1; |
|
transform: translateY(0%); |
|
} |
|
|
|
100% { |
|
// display: block; |
|
opacity: 0; |
|
transform: translateY(-100%); |
|
} |
|
} |
|
|
|
// 蒙层 |
|
.mask { |
|
width: 100vw; |
|
height: 100vh; |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
padding-top: 44px; |
|
background: rgba(0, 0, 0, 0.5); |
|
font-size: 0.9rem; |
|
z-index: 10; |
|
transform: translate(-100%); |
|
|
|
$animationTime: 0.6s; |
|
|
|
&.show { |
|
animation: ShowMaskAn 1s forwards; |
|
} |
|
|
|
&.done { |
|
animation: DoneMaskAn $animationTime forwards; |
|
} |
|
|
|
.mask_container { |
|
background-color: #fff; |
|
|
|
// 蒙层行 |
|
.mask_row { |
|
padding: 20upx 60upx; |
|
border-bottom: 2upx solid #eee; |
|
} |
|
|
|
// 按钮行 |
|
.button_row { |
|
padding: 20upx 60upx; |
|
|
|
&>view { |
|
height: 80upx; |
|
flex: 1; |
|
border-radius: 40upx; |
|
background-color: #f5f5f6; |
|
|
|
&.subBtn { |
|
color: #fff; |
|
background-color: var(--subjectColor); |
|
} |
|
} |
|
} |
|
} |
|
} |
|
</style> |