<script setup lang="ts">
|
import { fetchMyApprovalAll, fetchMyApprovalHistory, fetchMyApprovalTodos } from '@/api/appointment'
|
import type { MiniAppointmentListItem, MiniApprovalAllItem, MiniApprovalTodoItem } from '@/types/appointment'
|
import { normalizeVisitReasonText } from '@/utils/visitReason'
|
|
definePage({
|
name: 'reviewList',
|
layout: 'default',
|
style: {
|
navigationStyle: 'custom',
|
},
|
})
|
|
type ReviewRecord = {
|
key: string
|
status: 'PENDING' | 'APPROVED' | 'REJECTED' | 'CANCELLED' | 'OTHER'
|
statusText: string
|
visitorText: string
|
plateText: string
|
nodeText: string
|
orderNo: string
|
time: string
|
reasonText: string
|
reasonOtherText: string
|
createTime: string
|
taskId?: number
|
taskUuid?: string
|
orderId: number
|
orderUuid: string
|
}
|
|
const router = useRouter()
|
const sysInfo = uni.getSystemInfoSync()
|
const statusBarHeight = sysInfo.statusBarHeight || 0
|
const navBarHeight = 44
|
const fixedHeaderHeightPx = computed(() =>
|
statusBarHeight + navBarHeight + uni.upx2px(36) + uni.upx2px(220) + uni.upx2px(24) + uni.upx2px(24),
|
)
|
|
const searchKeyword = ref('')
|
const dateValue = ref('')
|
const showDatePicker = ref(false)
|
const activeTab = ref(0)
|
const loading = ref(false)
|
const loadingMore = ref(false)
|
const records = ref<ReviewRecord[]>([])
|
const page = ref(1)
|
const pageSize = 20
|
const hasMore = ref(true)
|
const refreshing = ref(false)
|
const scrollIntoViewId = ref('')
|
const listRenderKey = ref(0)
|
const scrollLoadLocked = ref(false)
|
|
const tabs = [
|
{ title: '待审核' },
|
{ title: '已拒绝' },
|
{ title: '已同意' },
|
{ title: '全部' },
|
]
|
|
const dateColumns = ref<string[][]>([[], [], []])
|
const datePickerIndex = ref([0, 0, 0])
|
|
function handleBack() {
|
router.back()
|
}
|
|
function getCurrentDate() {
|
return new Date()
|
}
|
|
function getDaysInMonth(year: number, month: number) {
|
return new Date(year, month, 0).getDate()
|
}
|
|
function updateDateColumns(selection?: { year?: number, month?: number, day?: number }) {
|
const now = getCurrentDate()
|
const currentYear = now.getFullYear()
|
const currentMonth = now.getMonth() + 1
|
const currentDay = now.getDate()
|
|
const years = Array.from({ length: 11 }, (_, index) => (currentYear - 5 + index).toString())
|
const selectedYear = selection?.year && years.includes(selection.year.toString()) ? selection.year : currentYear
|
const months = Array.from({ length: 12 }, (_, index) => (1 + index).toString())
|
const selectedMonth = selection?.month && months.includes(selection.month.toString()) ? selection.month : currentMonth
|
const maxDay = getDaysInMonth(selectedYear, selectedMonth)
|
const days = Array.from({ length: maxDay }, (_, index) => (1 + index).toString())
|
const selectedDay = selection?.day && days.includes(selection.day.toString()) ? selection.day : currentDay
|
|
dateColumns.value = [years, months, days]
|
datePickerIndex.value = [
|
years.findIndex(item => item === selectedYear.toString()),
|
months.findIndex(item => item === selectedMonth.toString()),
|
days.findIndex(item => item === selectedDay.toString()),
|
]
|
}
|
|
function handleDateChange(e: any) {
|
const selectedIndex = e.detail.value as number[]
|
updateDateColumns({
|
year: Number(dateColumns.value[0][selectedIndex[0]]),
|
month: Number(dateColumns.value[1][selectedIndex[1]]),
|
day: Number(dateColumns.value[2][selectedIndex[2]]),
|
})
|
}
|
|
function handleDateConfirm() {
|
const year = dateColumns.value[0][datePickerIndex.value[0]]
|
const month = dateColumns.value[1][datePickerIndex.value[1]]
|
const day = dateColumns.value[2][datePickerIndex.value[2]]
|
dateValue.value = `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
|
showDatePicker.value = false
|
void loadRecords()
|
}
|
|
function openDatePicker() {
|
if (dateValue.value) {
|
const [year, month, day] = dateValue.value.split('-').map(Number)
|
updateDateColumns({ year, month, day })
|
}
|
else {
|
updateDateColumns()
|
}
|
showDatePicker.value = true
|
}
|
|
function mapTodo(item: MiniApprovalTodoItem): ReviewRecord {
|
return {
|
key: `todo-${item.taskId}`,
|
status: 'PENDING',
|
statusText: '待审核',
|
visitorText: item.visitorDisplayText || '-',
|
plateText: item.plateNoText || '',
|
nodeText: item.nodeName || '待审核',
|
orderNo: item.orderNo,
|
time: normalizeVisitTimeText(item.visitTimeText || `${item.visitStartDate || '-'}${item.visitEndDate && item.visitEndDate !== item.visitStartDate ? ` 至 ${item.visitEndDate}` : ''}`),
|
reasonText: normalizeVisitReasonText(item.visitReasonText) || item.visitReasonCode || '-',
|
reasonOtherText: (item.visitReasonOther || '').trim() || '-',
|
createTime: item.createTime,
|
taskId: item.taskId,
|
taskUuid: item.taskUuid,
|
orderId: item.orderId,
|
orderUuid: item.orderUuid,
|
}
|
}
|
|
function mapHistory(item: MiniAppointmentListItem): ReviewRecord {
|
let status: ReviewRecord['status'] = 'OTHER'
|
let statusText = item.status || '已处理'
|
let nodeText = statusText
|
if (item.status === 'APPROVED') {
|
status = 'APPROVED'
|
statusText = '已同意'
|
nodeText = '已同意'
|
}
|
else if (item.status === 'REJECTED') {
|
status = 'REJECTED'
|
statusText = '已拒绝'
|
nodeText = '已拒绝'
|
}
|
else if (item.status === 'CANCELLED') {
|
status = 'CANCELLED'
|
statusText = '已取消'
|
nodeText = '已取消'
|
}
|
|
return {
|
key: `history-${item.id}`,
|
status,
|
statusText,
|
visitorText: item.visitorDisplayText || '-',
|
plateText: item.plateNoText || '',
|
nodeText,
|
orderNo: item.orderNo,
|
time: normalizeVisitTimeText(item.visitTimeText),
|
reasonText: normalizeVisitReasonText(item.visitReasonText) || item.visitReasonCode || '-',
|
reasonOtherText: (item.visitReasonOther || '').trim() || '-',
|
createTime: item.createTime,
|
orderId: item.id,
|
orderUuid: item.uuid,
|
}
|
}
|
|
function mapAll(item: MiniApprovalAllItem): ReviewRecord {
|
return {
|
key: item.taskId ? `todo-${item.taskId}` : `history-${item.orderId}`,
|
status: (item.status as ReviewRecord['status']) || 'OTHER',
|
statusText: item.statusText || '已处理',
|
visitorText: item.visitorDisplayText || '-',
|
plateText: item.plateNoText || '',
|
nodeText: item.nodeText || (item.statusText || '已处理'),
|
orderNo: item.orderNo,
|
time: normalizeVisitTimeText(item.visitTimeText || '-'),
|
reasonText: normalizeVisitReasonText(item.visitReasonText) || item.visitReasonCode || '-',
|
reasonOtherText: (item.visitReasonOther || '').trim() || '-',
|
createTime: item.createTime,
|
taskId: item.taskId || undefined,
|
taskUuid: item.taskUuid || undefined,
|
orderId: item.orderId,
|
orderUuid: item.orderUuid,
|
}
|
}
|
|
function sortRecords(rows: ReviewRecord[]) {
|
return [...rows].sort((a, b) => (b.createTime || '').localeCompare(a.createTime || ''))
|
}
|
|
function formatDateTime(value?: string | null) {
|
if (!value) {
|
return '-'
|
}
|
return value.replace('T', ' ').slice(0, 16)
|
}
|
|
function normalizeVisitTimeText(value?: string | null) {
|
const text = (value || '').trim()
|
if (!text) {
|
return '-'
|
}
|
return text
|
.replace(' 全天', ' 00:00-23:59')
|
.replace(' 上午', ' 00:00-11:59')
|
.replace(' 下午', ' 12:00-23:59')
|
}
|
|
async function loadRecords() {
|
if (loading.value || loadingMore.value) {
|
return
|
}
|
loading.value = true
|
try {
|
const targetPage = 1
|
const params = {
|
page: targetPage,
|
size: pageSize,
|
visitorNameKeyword: searchKeyword.value.trim() || undefined,
|
visitDate: dateValue.value || undefined,
|
}
|
|
if (activeTab.value === 0) {
|
const todoResult = await fetchMyApprovalTodos(params)
|
records.value = todoResult.records.map(mapTodo)
|
page.value = targetPage
|
hasMore.value = todoResult.page < todoResult.pages
|
}
|
else if (activeTab.value === 1) {
|
const historyResult = await fetchMyApprovalHistory({
|
...params,
|
status: 'REJECTED',
|
})
|
records.value = historyResult.records.map(mapHistory)
|
page.value = targetPage
|
hasMore.value = historyResult.page < historyResult.pages
|
}
|
else if (activeTab.value === 2) {
|
const historyResult = await fetchMyApprovalHistory({
|
...params,
|
status: 'APPROVED',
|
})
|
records.value = historyResult.records.map(mapHistory)
|
page.value = targetPage
|
hasMore.value = historyResult.page < historyResult.pages
|
}
|
else {
|
const allResult = await fetchMyApprovalAll(params)
|
records.value = allResult.records.map(mapAll)
|
page.value = targetPage
|
hasMore.value = allResult.page < allResult.pages
|
}
|
}
|
catch (error) {
|
uni.showToast({
|
title: error instanceof Error ? error.message : '加载审批列表失败',
|
icon: 'none',
|
})
|
}
|
finally {
|
loading.value = false
|
}
|
}
|
|
async function loadMoreRecords() {
|
if (loading.value || loadingMore.value || !hasMore.value) {
|
return
|
}
|
loadingMore.value = true
|
const nextPage = page.value + 1
|
try {
|
const params = {
|
page: nextPage,
|
size: pageSize,
|
visitorNameKeyword: searchKeyword.value.trim() || undefined,
|
visitDate: dateValue.value || undefined,
|
}
|
|
if (activeTab.value === 0) {
|
const todoResult = await fetchMyApprovalTodos(params)
|
records.value = [...records.value, ...todoResult.records.map(mapTodo)]
|
page.value = nextPage
|
hasMore.value = todoResult.page < todoResult.pages
|
return
|
}
|
|
if (activeTab.value === 1) {
|
const historyResult = await fetchMyApprovalHistory({
|
...params,
|
status: 'REJECTED',
|
})
|
records.value = [...records.value, ...historyResult.records.map(mapHistory)]
|
page.value = nextPage
|
hasMore.value = historyResult.page < historyResult.pages
|
return
|
}
|
|
if (activeTab.value === 2) {
|
const historyResult = await fetchMyApprovalHistory({
|
...params,
|
status: 'APPROVED',
|
})
|
records.value = [...records.value, ...historyResult.records.map(mapHistory)]
|
page.value = nextPage
|
hasMore.value = historyResult.page < historyResult.pages
|
return
|
}
|
|
const allResult = await fetchMyApprovalAll(params)
|
records.value = [...records.value, ...allResult.records.map(mapAll)]
|
page.value = nextPage
|
hasMore.value = allResult.page < allResult.pages
|
}
|
catch (error) {
|
uni.showToast({
|
title: error instanceof Error ? error.message : '加载更多失败',
|
icon: 'none',
|
})
|
}
|
finally {
|
loadingMore.value = false
|
scrollLoadLocked.value = false
|
}
|
}
|
|
function handleListScroll(e: any) {
|
const detail = e?.detail
|
if (!detail || scrollLoadLocked.value || loading.value || loadingMore.value || !hasMore.value) {
|
return
|
}
|
const scrollTop = Number(detail.scrollTop || 0)
|
const clientHeight = Number(detail.clientHeight || 0)
|
const scrollHeight = Number(detail.scrollHeight || 0)
|
if (scrollHeight <= 0 || clientHeight <= 0) {
|
return
|
}
|
const remain = scrollHeight - (scrollTop + clientHeight)
|
if (remain <= 120) {
|
scrollLoadLocked.value = true
|
void loadMoreRecords()
|
}
|
}
|
|
function handleTabClick(index: number) {
|
activeTab.value = index
|
listRenderKey.value += 1
|
scrollIntoViewId.value = ''
|
nextTick(() => {
|
scrollIntoViewId.value = 'review-list-top-anchor'
|
})
|
void loadRecords()
|
}
|
|
function handleSearch() {
|
void loadRecords()
|
}
|
|
function handleRecordClick(item: ReviewRecord) {
|
const query = item.taskId && item.taskUuid
|
? `taskId=${item.taskId}&taskUuid=${item.taskUuid}`
|
: `orderId=${item.orderId}&orderUuid=${item.orderUuid}`
|
|
uni.navigateTo({
|
url: `/pages/reviewDetail/index?${query}`,
|
})
|
}
|
|
updateDateColumns()
|
|
onShow(() => {
|
void loadRecords()
|
})
|
|
function handleScrollRefresh() {
|
if (refreshing.value) {
|
return
|
}
|
refreshing.value = true
|
void loadRecords().finally(() => {
|
refreshing.value = false
|
})
|
}
|
</script>
|
|
<template>
|
<view class="h-screen bg-[#F6FBFF] w-full relative box-border flex flex-col overflow-hidden">
|
<view class="fixed left-0 top-0 z-0 h-[500rpx] w-full" style="background: linear-gradient(180deg, #5398FF 0%, #A9D0FF 50%, #F6FBFF 100%);" />
|
|
<view class="fixed top-0 left-0 w-full z-50 flex flex-col pointer-events-none">
|
<view class="absolute left-0 top-0 z-[-1] w-full overflow-hidden" :style="{ height: `${fixedHeaderHeightPx}px` }">
|
<view class="w-full h-[500rpx] absolute top-0 left-0" style="background: linear-gradient(180deg, #5398FF 0%, #A9D0FF 50%, #F6FBFF 100%);" />
|
</view>
|
|
<view class="relative w-full shrink-0 pointer-events-auto" :style="{ height: (statusBarHeight + navBarHeight) + 'px' }">
|
<view class="flex items-center justify-between w-full absolute left-0" :style="{ top: statusBarHeight + 'px', height: navBarHeight + 'px' }">
|
<view class="flex h-full w-[88rpx] items-center justify-center relative z-10" @click="handleBack">
|
<wd-icon name="arrow-left" size="40rpx" color="#ffffff" />
|
</view>
|
<view class="absolute left-0 w-full text-center text-[34rpx] font-medium text-white z-0">
|
待办
|
</view>
|
<view class="w-[88rpx]" />
|
</view>
|
</view>
|
|
<view class="px-[24rpx] pt-[36rpx] pb-[24rpx] w-full box-border pointer-events-auto">
|
<view class="bg-white rounded-[16rpx] search-card shadow-[0_4rpx_8rpx_rgba(6,47,108,0.1608)] w-full shrink-0 flex flex-col">
|
<view class="flex h-[88rpx] px-[16rpx] mt-[16rpx]">
|
<view v-for="(tab, index) in tabs" :key="tab.title" class="flex-1 flex flex-col items-center justify-center relative" @click="handleTabClick(index)">
|
<view class="flex items-center relative">
|
<text class="text-[28rpx] transition-colors duration-200" :class="activeTab === index ? 'text-[#0068FF] font-medium' : 'text-[#999999]'">
|
{{ tab.title }}
|
</text>
|
</view>
|
<view class="absolute bottom-[0rpx] w-[40rpx] h-[4rpx] rounded-[2rpx] transition-all duration-200" :class="activeTab === index ? 'bg-[#0068FF]' : 'bg-transparent'" />
|
</view>
|
</view>
|
|
<view class="px-[24rpx] pt-[24rpx] pb-[24rpx] flex items-center justify-between w-full box-border">
|
<view class="bg-[#F5F5F5] w-[200rpx] px-[32rpx] h-[64rpx] rounded-[44rpx] flex items-center">
|
<input
|
v-model="searchKeyword"
|
type="text"
|
placeholder="搜索访客姓名"
|
placeholder-class="text-[#B3B3B3] text-[26rpx]"
|
class="w-full text-[26rpx] text-[#333333] h-full"
|
confirm-type="search"
|
@confirm="handleSearch"
|
/>
|
</view>
|
<view class="flex items-center bg-[#F5F5F5] w-[220rpx] h-[64rpx] rounded-[44rpx]" @click="openDatePicker">
|
<view class="flex items-center w-full justify-center">
|
<text class="text-[26rpx] mr-[10rpx]" :class="dateValue ? 'text-[#0068FF] font-medium' : 'text-[#B3B3B3]'">{{ dateValue || '来访日期' }}</text>
|
<wd-icon name="arrow-down" size="28rpx" :color="dateValue ? '#0068FF' : '#B3B3B3'" />
|
</view>
|
</view>
|
<view class="w-[140rpx] h-[64rpx] rounded-[32rpx] border-[2rpx] border-solid border-[#0068FF] flex items-center justify-center box-border bg-white" @click="handleSearch">
|
<wd-icon name="search" size="28rpx" color="#0068FF" class="mr-[8rpx]" />
|
<text class="text-[#0068FF] text-[26rpx] font-medium">查询</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view :style="{ height: `${fixedHeaderHeightPx}px` }" class="shrink-0" />
|
|
<view class="relative z-10 px-[24rpx] flex-1 flex flex-col min-h-0 box-border">
|
<scroll-view
|
:key="listRenderKey"
|
scroll-y
|
class="flex-1 min-h-0"
|
:show-scrollbar="false"
|
:scroll-into-view="scrollIntoViewId"
|
:lower-threshold="120"
|
refresher-enabled
|
:refresher-triggered="refreshing"
|
@refresherrefresh="handleScrollRefresh"
|
@scroll="handleListScroll"
|
@scrolltolower="loadMoreRecords"
|
>
|
<view class="pb-[24rpx]">
|
<view id="review-list-top-anchor" class="h-[2rpx]" />
|
<view
|
v-for="item in records"
|
:key="item.key"
|
class="bg-white rounded-[16rpx] shadow-[0_4rpx_8rpx_rgba(6,47,108,0.1608)] mb-[24rpx] overflow-hidden"
|
@click="handleRecordClick(item)"
|
>
|
<view class="w-full h-[12rpx]" :class="{
|
'bg-[#0068FF]': item.status === 'PENDING',
|
'bg-[#52C41A]': item.status === 'APPROVED',
|
'bg-[#FF4D4F]': item.status === 'REJECTED',
|
'bg-[#D8D8D8]': item.status === 'CANCELLED' || item.status === 'OTHER'
|
}" />
|
|
<view class="pt-[28rpx] pb-[16rpx]">
|
<view class="flex justify-between items-center pb-[24rpx] px-[40rpx] status-border">
|
<view class="px-[16rpx] py-[4rpx] rounded-[4rpx]" :class="{
|
'bg-[#E6F0FF] text-[#0068FF]': item.status === 'PENDING',
|
'bg-[#E8F8E3] text-[#52C41A]': item.status === 'APPROVED',
|
'bg-[#FFEBEB] text-[#FF4D4F]': item.status === 'REJECTED',
|
'bg-[#F5F5F5] text-[#999999]': item.status === 'CANCELLED' || item.status === 'OTHER'
|
}">
|
<text class="text-[24rpx] font-medium">{{ item.statusText }}</text>
|
</view>
|
<wd-icon name="arrow-right" size="32rpx" color="#999999" />
|
</view>
|
|
<view class="flex flex-col px-[40rpx] pt-[8rpx]">
|
<view class="flex items-center h-[80rpx]">
|
<text class="text-[#333333] text-[28rpx] font-bold shrink-0 w-[140rpx]">访客姓名：</text>
|
<view class="flex-1 h-full flex items-center border-b1">
|
<text class="text-[#666666] text-[28rpx]">{{ item.visitorText || '-' }}</text>
|
</view>
|
</view>
|
<view v-if="item.plateText" class="flex items-center h-[80rpx]">
|
<text class="text-[#333333] text-[28rpx] font-bold shrink-0 w-[140rpx]">访客车辆：</text>
|
<view class="flex-1 h-full flex items-center border-b1">
|
<text class="text-[#666666] text-[28rpx]">{{ item.plateText }}</text>
|
</view>
|
</view>
|
<view class="flex items-center h-[80rpx]">
|
<text class="text-[#333333] text-[28rpx] font-bold shrink-0 w-[140rpx]">来访时间：</text>
|
<view class="flex-1 h-full flex items-center border-b1">
|
<text class="text-[#666666] text-[28rpx]">{{ item.time }}</text>
|
</view>
|
</view>
|
<view class="flex items-center h-[80rpx]">
|
<text class="text-[#333333] text-[28rpx] font-bold shrink-0 w-[140rpx]">来访事由：</text>
|
<view class="flex-1 h-full flex items-center border-b1">
|
<text class="text-[#666666] text-[28rpx]">{{ item.reasonText }}</text>
|
</view>
|
</view>
|
<view class="flex items-center min-h-[80rpx]">
|
<text class="text-[#333333] text-[28rpx] font-bold shrink-0 w-[140rpx]">事由说明：</text>
|
<view class="flex-1 min-h-[80rpx] flex items-center border-b1 py-[16rpx] box-border">
|
<text class="text-[#666666] text-[28rpx] line-clamp-2 break-all">{{ item.reasonOtherText }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view v-if="loading" class="text-center text-[#999999] text-[24rpx] mt-[32rpx] mb-[32rpx]">
|
加载中...
|
</view>
|
<view v-else-if="records.length === 0" class="text-center text-[#999999] text-[24rpx] mt-[32rpx] mb-[32rpx]">
|
暂无待办记录
|
</view>
|
<view v-else-if="loadingMore" class="text-center text-[#999999] text-[24rpx] mt-[32rpx] mb-[32rpx]">
|
加载更多中...
|
</view>
|
<view v-else-if="hasMore" class="text-center text-[#999999] text-[24rpx] mt-[32rpx] mb-[32rpx]">
|
上拉加载更多
|
</view>
|
<view v-else class="text-center text-[#999999] text-[24rpx] mt-[32rpx] mb-[32rpx]">
|
-最多显示3个月数据-
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
|
<wd-popup v-model="showDatePicker" position="bottom" custom-class="date-popup" z-index="100">
|
<view class="flex flex-col bg-white rounded-t-[32rpx] overflow-hidden h-[830rpx]">
|
<view class="relative flex items-center justify-center shrink-0 h-[96rpx] border-b border-[#F5F5F5] border-solid">
|
<view class="absolute left-[32rpx] flex items-center justify-center w-[48rpx] h-[48rpx]" @click="showDatePicker = false">
|
<wd-icon name="close-outline" size="40rpx" color="#333333" />
|
</view>
|
<text class="text-[32rpx] text-[#333333] font-medium">选择来访日期</text>
|
</view>
|
|
<view class="px-[32rpx] flex-1 flex flex-col justify-center relative">
|
<view class="flex items-center absolute top-[40rpx] left-[32rpx] right-[32rpx] z-10 text-[24rpx] text-[#333333] font-medium">
|
<view class="flex-1 flex justify-center"><text class="bg-[#F5F5F5] rounded-[8rpx] px-[24rpx] py-[8rpx]">年</text></view>
|
<view class="flex-1 flex justify-center"><text class="bg-[#F5F5F5] rounded-[8rpx] px-[24rpx] py-[8rpx]">月</text></view>
|
<view class="flex-1 flex justify-center"><text class="bg-[#F5F5F5] rounded-[8rpx] px-[24rpx] py-[8rpx]">日</text></view>
|
</view>
|
<picker-view class="custom-picker-view date-picker-view mt-[60rpx]" :value="datePickerIndex" indicator-style="height: 48px;" style="width: 100%; height: 192px;" @change="handleDateChange">
|
<picker-view-column v-for="(col, index) in dateColumns" :key="index">
|
<view v-for="(item, itemIndex) in col" :key="itemIndex" class="flex items-center justify-center h-[48px]" :class="{ 'wd-picker-view-column__item--active': datePickerIndex[index] === itemIndex, 'wd-picker-view-column__item': true }">
|
{{ item }}
|
</view>
|
</picker-view-column>
|
</picker-view>
|
</view>
|
|
<view class="px-[32rpx] pb-[48rpx] shrink-0">
|
<wd-button type="primary" size="large" block custom-class="popup-submit-btn" @click="handleDateConfirm">
|
确认
|
</wd-button>
|
</view>
|
</view>
|
</wd-popup>
|
</view>
|
</template>
|
|
<style scoped>
|
.search-card {
|
width: 702rpx;
|
height: 220rpx;
|
border-radius: 8rpx;
|
opacity: 1;
|
background: linear-gradient(180deg, #DEF4FF 0%, #FFFFFF 37%);
|
box-sizing: border-box;
|
border: 2rpx solid;
|
border-image: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%) 2;
|
box-shadow: 0px 4px 8px 0px rgba(6, 47, 108, 0.1608);
|
overflow: hidden;
|
}
|
|
.status-border {
|
border-bottom: 2rpx solid #F5F5F5;
|
}
|
|
.border-b1 {
|
border-bottom: 2rpx solid #F5F5F5;
|
}
|
|
::-webkit-scrollbar {
|
display: none;
|
width: 0 !important;
|
height: 0 !important;
|
-webkit-appearance: none;
|
background: transparent;
|
}
|
|
:deep(.date-popup) {
|
border-top-left-radius: 32rpx;
|
border-top-right-radius: 32rpx;
|
overflow: hidden;
|
background-color: transparent !important;
|
}
|
|
.wd-picker-view-column__item {
|
color: #B3B3B3 !important;
|
font-size: 28rpx !important;
|
background-color: transparent !important;
|
transition: all 0.3s;
|
z-index: 10;
|
position: relative;
|
}
|
|
:deep(picker-view-column) {
|
background-color: transparent !important;
|
}
|
|
.custom-picker-view .wd-picker-view-column__item {
|
font-size: 28rpx;
|
color: #999999;
|
transition: all 0.3s;
|
position: relative;
|
z-index: 10;
|
}
|
|
.wd-picker-view-column__item--active {
|
color: #0068FF !important;
|
font-weight: 500;
|
font-size: 28rpx !important;
|
background-color: #F4F8FF !important;
|
z-index: 10;
|
}
|
|
:deep(.custom-picker-view .wx-picker-view-indicator) {
|
border-top: none !important;
|
border-bottom: none !important;
|
background-color: #F4F8FF !important;
|
border-radius: 8rpx;
|
z-index: 1 !important;
|
}
|
|
:deep(.custom-picker-view .wx-picker-view-indicator::before),
|
:deep(.custom-picker-view .wx-picker-view-indicator::after) {
|
display: none !important;
|
}
|
|
:deep(.date-picker-view picker-view-column:nth-child(1)),
|
:deep(.date-picker-view picker-view-column:nth-child(2)),
|
:deep(.date-picker-view picker-view-column:nth-child(3)) {
|
flex: 1 !important;
|
width: auto;
|
padding: 0 !important;
|
z-index: 10;
|
}
|
|
:deep(.date-picker-view picker-view-column:nth-child(1) .wd-picker-view-column__item),
|
:deep(.date-picker-view picker-view-column:nth-child(2) .wd-picker-view-column__item),
|
:deep(.date-picker-view picker-view-column:nth-child(3) .wd-picker-view-column__item) {
|
width: 100% !important;
|
text-align: center;
|
padding: 0 !important;
|
}
|
|
:deep(.popup-submit-btn) {
|
height: 96rpx !important;
|
border-radius: 48rpx !important;
|
font-size: 32rpx !important;
|
font-weight: 500 !important;
|
background: #0068FF !important;
|
}
|
</style>
|
