You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

633 lines
25 KiB
Vue

<template>
<view class="page-container">
<NavBar :title="t('productCheck.moduleName')" />
<view class="filter-bar">
<view class="keyword-box">
<input
id="product-check-keyword-input"
v-model="searchKeyword"
class="keyword-input"
type="text"
:placeholder="t('productCheck.searchDocumentPlaceholder')"
placeholder-class="placeholder"
:focus="keywordFocus"
confirm-type="search"
@blur="keywordFocus = false"
@confirm="handleSearch"
/>
</view>
<view class="status-box" @click="openStatusPicker">
<text class="status-box-text">{{ selectedStatusLabel || t('productCheck.checkStatus') }}</text>
<uni-icons type="bottom" size="14" color="#9ca3af" />
</view>
<view class="reset-filter-btn" @click="resetFilters">{{ t('productCheck.reset') }}</view>
</view>
<scroll-view
scroll-y
class="list-scroll"
:scroll-top="scrollTop"
:lower-threshold="80"
@scroll="onScroll"
@scrolltolower="loadMore"
>
<view class="list-wrap">
<view v-for="item in list" :key="item.id" class="task-card" hover-class="task-card-hover" @click="goDetail(item)">
<view class="card-header">
<view class="header-main">
<text class="task-no">{{ textValue(item.no) }}</text>
<text :class="['record-tag', statusClass(item.status)]">{{ statusText(item.status) }}</text>
</view>
</view>
<view class="card-body">
<view class="row">
<text class="label">{{ t('productCheck.productInfo') }}</text>
<text class="value">{{ textValue(item.productNames || getProductNames(item)) }}</text>
</view>
<view class="row">
<text class="label">{{ t('productCheck.checkTime') }}</text>
<text class="value">{{ formatDateTime(item.checkTime || item.createTime) }}</text>
</view>
<view class="row">
<text class="label">{{ t('productCheck.warehouse') }}</text>
<text class="value">{{ textValue(getWarehouseNames(item)) }}</text>
</view>
<view class="row">
<text class="label">{{ t('productCheck.checkStatus') }}</text>
<text :class="['value', isChecked(item) ? 'success' : 'warning']">{{ checkStatusText(item.checkStatus) }}</text>
</view>
<view class="row">
<text class="label">{{ t('productCheck.creator') }}</text>
<text class="value">{{ textValue(item.creatorName || item.creator) }}</text>
</view>
<view class="row">
<text class="label">{{ t('productCheck.reviewer') }}</text>
<text class="value">{{ textValue(item.auditUserName) }}</text>
</view>
</view>
<view v-if="hasActions(item)" class="card-actions">
<view
v-if="shouldShowExecute(item)"
:class="['action-btn', 'execute-btn', isExecuteDisabled(item) ? 'action-btn-disabled' : '']"
@click.stop="handleExecute(item)"
>
{{ t('productCheck.execute') }}
</view>
<view v-if="canSubmitAudit(item)" class="action-btn submit-btn" @click.stop="openSubmitAudit(item)">{{ t('productCheck.submitAudit') }}</view>
<view v-if="canAudit(item)" class="action-btn approve-btn" @click.stop="handleApprove(item)">{{ t('productCheck.auditPass') }}</view>
<view v-if="canAudit(item)" class="action-btn reject-btn" @click.stop="handleReject(item)">{{ t('productCheck.auditReject') }}</view>
<view v-if="canDelete(item)" class="action-btn delete-btn" @click.stop="handleDelete(item)">
{{ t('productCheck.delete') }}
</view>
</view>
</view>
<view v-if="loading && pageNo === 1" class="hint">{{ t('productCheck.loading') }}</view>
<view v-else-if="!list.length" class="hint">{{ t('productCheck.emptyList') }}</view>
<view v-else-if="loadingMore" class="hint">{{ t('productCheck.loadingMore') }}</view>
<view v-else-if="finished" class="hint">{{ t('productCheck.noMoreData') }}</view>
</view>
</scroll-view>
<view v-if="showGoTop" class="go-top-btn" @click="goTop">
<uni-icons type="arrow-up" size="20" color="#1f4b79" />
</view>
<view class="add-btn" @click="goAdd">
<text class="add-icon">+</text>
</view>
<view v-if="showAuditModal" class="modal-overlay" @click="closeAuditModal">
<view class="modal-card" @click.stop>
<view class="modal-header">
<text class="modal-title">{{ t('productCheck.submitAudit') }}</text>
<text class="modal-close" @click="closeAuditModal">x</text>
</view>
<view class="modal-body">
<view v-if="!isAuditDisabled" class="modal-field">
<text class="modal-label"><text class="required">*</text>{{ t('productCheck.auditor') }}</text>
<view class="modal-select-field" @click="goSelectAuditor">
<text :class="['modal-select-text', selectedAuditor ? '' : 'placeholder']">{{ selectedAuditor ? selectedAuditor.label : t('productCheck.choose') }}</text>
<uni-icons type="right" size="18" color="#9ca3af"></uni-icons>
</view>
</view>
<view class="modal-field">
<text class="modal-label">{{ t('productCheck.remark') }}</text>
<textarea v-model="auditRemark" class="modal-textarea" :placeholder="t('productCheck.remarkPlaceholder')" placeholder-class="textarea-placeholder" :maxlength="200" />
</view>
</view>
<view class="modal-footer">
<view class="modal-btn cancel-btn" @click="closeAuditModal">{{ t('productCheck.cancel') }}</view>
<view class="modal-btn confirm-btn" @click="confirmSubmitAudit">{{ t('productCheck.submit') }}</view>
</view>
</view>
</view>
<uni-popup ref="statusPickerRef" type="bottom" background-color="#fff">
<view class="picker-content">
<view class="picker-header">
<text class="picker-title">{{ t('productCheck.selectStatus') }}</text>
<view class="picker-clear" @click="resetStatus">
<text class="picker-clear-text">{{ t('productCheck.clear') }}</text>
</view>
</view>
<scroll-view scroll-y class="picker-list">
<view
v-for="option in statusOptions"
:key="String(option.value)"
class="picker-item"
@click="selectStatus(option)"
>
<text class="picker-text">{{ option.label }}</text>
<uni-icons v-if="selectedStatus === option.value" class="picker-check" type="checkmarkempty" size="18" color="#1f61ff"></uni-icons>
</view>
</scroll-view>
</view>
</uni-popup>
<sv-focus-no-keyboard ref="focusNoKeyboardRef"></sv-focus-no-keyboard>
</view>
</template>
<script setup>
import { computed, nextTick, ref } from 'vue'
import { onReady, onShow, onUnload } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import NavBar from '@/components/common/NavBar.vue'
import { auditProductCheck, deleteProductCheck, getProductCheckPage, submitProductCheck } from '@/api/mes/productCheck'
import { getConfigPage } from '@/api/infra/config'
import { DICT_TYPE, useDict } from '@/utils/dict'
const { t } = useI18n()
const { erp_audit_status } = useDict(DICT_TYPE.ERP_AUDIT_STATUS)
const selectedStatus = ref('')
const searchKeyword = ref('')
const statusPickerRef = ref(null)
const fallbackStatusOptions = computed(() => [
{ label: t('productCheck.statusDraft'), value: '0' },
{ label: t('productCheck.statusAuditing'), value: '10' },
{ label: t('productCheck.statusApproved'), value: '20' },
{ label: t('productCheck.statusRejected'), value: '1' }
])
const statusOptions = computed(() => {
const dictOptions = (erp_audit_status.value || [])
.filter((item) => item?.label !== undefined && item?.value !== undefined)
.map((item) => ({ ...item, value: String(item.value) }))
return dictOptions.length ? dictOptions : fallbackStatusOptions.value
})
const selectedStatusLabel = computed(() => {
const current = statusOptions.value.find((item) => String(item.value) === String(selectedStatus.value))
return current ? current.label : ''
})
const list = ref([])
const loading = ref(false)
const loadingMore = ref(false)
const finished = ref(false)
const pageNo = ref(1)
const pageSize = ref(10)
const scrollTop = ref(0)
const showGoTop = ref(false)
const keywordFocus = ref(false)
const focusNoKeyboardRef = ref(null)
const keywordInputSelector = '#product-check-keyword-input input, input#product-check-keyword-input'
let searchTimer = null
const showAuditModal = ref(false)
const currentAuditItem = ref(null)
const selectedAuditor = ref(null)
const auditRemark = ref('')
const isAuditDisabled = ref(false)
function textValue(v) {
if (v === 0) return '0'
if (v == null) return '-'
const s = String(v).trim()
return s || '-'
}
function formatDateTime(value) {
if (!value) return '-'
if (Array.isArray(value) && value.length >= 3) {
const [year, month, day, hour = 0, minute = 0, second = 0] = value
const pad = (n) => String(n).padStart(2, '0')
return `${year}-${pad(month)}-${pad(day)} ${pad(hour)}:${pad(minute)}:${pad(second)}`
}
const date = new Date(Number(value))
if (Number.isNaN(date.getTime())) return String(value)
const pad = (n) => String(n).padStart(2, '0')
return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
}
function normalizePageData(res) {
const root = res && res.data !== undefined ? res.data : res
const candidateList = root?.list || root?.rows || root?.records || root?.data?.list || root?.data?.rows || []
const candidateTotal = root?.total ?? root?.data?.total ?? (Array.isArray(candidateList) ? candidateList.length : 0)
return {
list: Array.isArray(candidateList) ? candidateList : [],
total: Number(candidateTotal || 0)
}
}
function statusText(s) {
const current = statusOptions.value.find((item) => String(item.value) === String(s))
return current ? current.label : textValue(s)
}
function statusClass(s) {
const num = Number(s)
if (num === 0) return 'text-primary'
if (num === 10) return 'text-warning'
if (num === 20) return 'text-success'
if (num === 1) return 'text-danger'
return ''
}
function isChecked(item) {
return Number(item?.checkStatus) === 1
}
function checkStatusText(s) {
return Number(s) === 1 ? t('productCheck.checked') : t('productCheck.unchecked')
}
function statusValue(item) {
return Number(item?.status)
}
function getProductNames(item) {
const items = Array.isArray(item?.items) ? item.items : []
return [...new Set(items.map((row) => row.productName).filter(Boolean))].join('、')
}
function getWarehouseNames(item) {
const items = Array.isArray(item?.items) ? item.items : []
return [...new Set(items.map((row) => row.warehouseName).filter(Boolean))].join('、')
}
function shouldShowExecute(item) {
return !isChecked(item) || statusValue(item) === 1
}
function isExecuteDisabled(item) {
return statusValue(item) === 20
}
function canExecute(item) {
return shouldShowExecute(item) && !isExecuteDisabled(item)
}
function canSubmitAudit(item) {
const status = statusValue(item)
const submitStatuses = isAuditDisabled.value ? [0, 1, 10] : [0, 1]
return submitStatuses.includes(status) && isChecked(item)
}
function canAudit(item) {
return !isAuditDisabled.value && statusValue(item) === 10 && isChecked(item)
}
function canDelete(item) {
return statusValue(item) !== 20
}
function hasActions(item) {
return shouldShowExecute(item) || canSubmitAudit(item) || canAudit(item) || canDelete(item)
}
function hasIncompleteActualCount(item) {
const rows = Array.isArray(item?.items) ? item.items : []
return rows.some((row) => row.actualCount === undefined || row.actualCount === null || row.actualCount === '')
}
async function loadAuditConfig() {
try {
const res = await getConfigPage({ pageNo: 1, pageSize: 10, key: 'inventoryAudit' })
const root = res && res.data !== undefined ? res.data : res
const rows = root?.list || root?.rows || root?.records || []
const config = Array.isArray(rows) ? rows.find((item) => item?.key === 'inventoryAudit') : null
isAuditDisabled.value = config?.value === '0'
} catch (e) {
isAuditDisabled.value = false
}
}
async function fetchList(reset) {
if (reset) {
pageNo.value = 1
finished.value = false
}
if (pageNo.value === 1) loading.value = true
else loadingMore.value = true
try {
const keyword = searchKeyword.value.trim()
const res = await getProductCheckPage({
pageNo: pageNo.value,
pageSize: pageSize.value,
no: keyword || undefined,
status: selectedStatus.value || undefined
})
const page = normalizePageData(res)
list.value = reset ? page.list : [...list.value, ...page.list]
finished.value = list.value.length >= page.total || page.list.length < pageSize.value
} catch (e) {
if (!reset) pageNo.value = Math.max(1, pageNo.value - 1)
uni.showToast({ title: t('productCheck.loadFailed'), icon: 'none' })
} finally {
loading.value = false
loadingMore.value = false
}
}
async function handleSearch() {
clearSearchTimer()
uni.hideKeyboard()
await fetchList(true)
}
function activateKeywordFocus() {
keywordFocus.value = false
nextTick(() => {
keywordFocus.value = true
})
}
function focusKeywordNoKeyboard() {
nextTick(() => {
setTimeout(() => {
focusNoKeyboardRef.value?.focus(keywordInputSelector)
}, 80)
})
}
async function resetFilters() {
clearSearchTimer()
searchKeyword.value = ''
selectedStatus.value = ''
activateKeywordFocus()
await fetchList(true)
}
function openStatusPicker() {
statusPickerRef.value?.open()
}
async function selectStatus(option) {
selectedStatus.value = String(option.value)
statusPickerRef.value?.close()
await fetchList(true)
}
async function resetStatus() {
selectedStatus.value = ''
statusPickerRef.value?.close()
await fetchList(true)
}
async function loadMore() {
if (loading.value || loadingMore.value || finished.value) return
pageNo.value += 1
await fetchList(false)
}
function goAdd() {
uni.navigateTo({ url: '/pages_function/pages/productCheck/create' })
}
function goExecute(item) {
if (!item?.id) return
uni.navigateTo({ url: `/pages_function/pages/productCheck/execute?id=${encodeURIComponent(String(item.id))}` })
}
function handleExecute(item) {
if (!canExecute(item)) return
goExecute(item)
}
function goDetail(item) {
if (!item?.id) return
uni.navigateTo({ url: `/pages_function/pages/productCheck/execute?id=${encodeURIComponent(String(item.id))}&mode=detail` })
}
function openSubmitAudit(item) {
if (hasIncompleteActualCount(item)) {
uni.showToast({ title: t('productCheck.enterActualCount'), icon: 'none' })
return
}
currentAuditItem.value = item
selectedAuditor.value = item?.auditUserId ? { value: item.auditUserId, label: item.auditUserName || String(item.auditUserId) } : null
auditRemark.value = ''
showAuditModal.value = true
}
function closeAuditModal() {
showAuditModal.value = false
currentAuditItem.value = null
}
function goSelectAuditor() {
const suffix = selectedAuditor.value?.value ? `&selectedId=${encodeURIComponent(String(selectedAuditor.value.value))}` : ''
uni.navigateTo({ url: `/pages_function/pages/moldRepair/userSelect?field=auditUser&from=productCheck${suffix}` })
}
function consumeSelectedAuditor() {
const result = getApp().globalData?._productCheckUserSelectResult
if (!result?.user) return
const user = result.user
selectedAuditor.value = {
value: user.id || user.userId,
label: user.nickname || user.userName || user.name || String(user.id || '')
}
getApp().globalData._productCheckUserSelectResult = null
}
async function confirmSubmitAudit() {
if (!currentAuditItem.value?.id) return
if (!isAuditDisabled.value && !selectedAuditor.value) {
uni.showToast({ title: t('productCheck.selectAuditor'), icon: 'none' })
return
}
try {
uni.showLoading({ title: t('productCheck.submitting'), mask: true })
if (isAuditDisabled.value) {
await auditProductCheck({
id: currentAuditItem.value.id,
status: 20,
remark: auditRemark.value || undefined
})
uni.hideLoading()
uni.showToast({ title: t('productCheck.auditPassSuccess'), icon: 'success' })
closeAuditModal()
fetchList(true)
return
}
await submitProductCheck({
id: currentAuditItem.value.id,
auditUserId: selectedAuditor.value.value,
remark: auditRemark.value || undefined
})
uni.hideLoading()
uni.showToast({ title: t('productCheck.submitAuditSuccess'), icon: 'success' })
closeAuditModal()
fetchList(true)
} catch (e) {
uni.hideLoading()
uni.showToast({ title: t('productCheck.submitFailed'), icon: 'none' })
}
}
async function handleApprove(item) {
if (!item?.id || !canAudit(item)) return
uni.showModal({
title: t('productCheck.tip'),
content: t('productCheck.confirmAuditPass'),
confirmColor: '#16a34a',
success: async (res) => {
if (!res.confirm) return
try {
await auditProductCheck({ id: item.id, status: 20 })
uni.showToast({ title: t('productCheck.auditPassSuccess'), icon: 'success' })
fetchList(true)
} catch (e) {
uni.showToast({ title: t('productCheck.operationFailed'), icon: 'none' })
}
}
})
}
async function handleReject(item) {
if (!item?.id || !canAudit(item)) return
uni.showModal({
title: t('productCheck.tip'),
content: t('productCheck.confirmAuditReject'),
confirmColor: '#dc2626',
success: async (res) => {
if (!res.confirm) return
try {
await auditProductCheck({ id: item.id, status: 1 })
uni.showToast({ title: t('productCheck.auditRejectSuccess'), icon: 'success' })
fetchList(true)
} catch (e) {
uni.showToast({ title: t('productCheck.operationFailed'), icon: 'none' })
}
}
})
}
async function handleDelete(item) {
if (!item?.id || !canDelete(item)) return
uni.showModal({
title: t('productCheck.tip'),
content: t('productCheck.confirmDelete'),
confirmColor: '#dc2626',
success: async (res) => {
if (!res.confirm) return
try {
await deleteProductCheck(item.id)
uni.showToast({ title: t('productCheck.deleteSuccess'), icon: 'success' })
fetchList(true)
} catch (e) {
uni.showToast({ title: t('productCheck.operationFailed'), icon: 'none' })
}
}
})
}
function onScroll(event) {
showGoTop.value = (event?.detail?.scrollTop || 0) > 600
}
function goTop() {
scrollTop.value = 0
}
function clearSearchTimer() {
if (searchTimer) {
clearTimeout(searchTimer)
searchTimer = null
}
}
onReady(() => {
focusKeywordNoKeyboard()
})
onShow(() => {
consumeSelectedAuditor()
loadAuditConfig()
fetchList(true)
})
onUnload(() => clearSearchTimer())
</script>
<style lang="scss" scoped>
.page-container { min-height: 100vh; background: #f4f5f7; }
.filter-bar { display: grid; grid-template-columns: minmax(0, 1fr) 188rpx 96rpx; align-items: center; gap: 14rpx; padding: 18rpx 28rpx 20rpx; }
.keyword-box,
.status-box,
.reset-filter-btn { height: var(--app-form-control-height, 70rpx); background: #ffffff; border: 1rpx solid #d9dde5; box-sizing: border-box; display: flex; align-items: center; }
.keyword-box { padding: 0 20rpx; }
.keyword-input { width: 100%; font-size: 26rpx; color: #374151; }
.status-box { justify-content: space-between; padding: 0 18rpx; }
.status-box-text,
.placeholder { font-size: 26rpx; }
.status-box-text { flex: 1; min-width: 0; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reset-filter-btn { justify-content: center; font-size: 24rpx; color: #4b5563; }
.list-scroll { height: calc(100vh - 194rpx); }
.list-wrap { padding: 0 24rpx 60rpx; }
.task-card { margin-top: 20rpx; padding: 28rpx; background: #fff; border-radius: 22rpx; box-shadow: 0 8rpx 28rpx rgba(15, 23, 42, 0.06); }
.task-card-hover { opacity: 0.86; }
.card-header { margin-bottom: 18rpx; }
.header-main { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; }
.task-no { flex: 1; min-width: 0; font-size: 32rpx; font-weight: 700; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-tag { flex-shrink: 0; padding: 8rpx 18rpx; border-radius: 999rpx; font-size: 22rpx; line-height: 1; background: #e2e8f0; color: #64748b; }
.card-body .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20rpx; margin-top: 12rpx; }
.card-body .row:first-child { margin-top: 0; }
.label { width: 150rpx; font-size: 25rpx; color: #94a3b8; flex-shrink: 0; }
.value { flex: 1; text-align: right; font-size: 27rpx; color: #334155; line-height: 1.5; }
.value.success { color: #15803d; font-weight: 600; }
.value.warning { color: #d97706; font-weight: 600; }
.card-actions { display: flex; flex-wrap: wrap; gap: 16rpx; margin-top: 20rpx; padding-top: 20rpx; border-top: 1rpx solid #f0f0f0; }
.action-btn { flex: 1 0 180rpx; height: 64rpx; line-height: 64rpx; text-align: center; border-radius: 10rpx; font-size: 26rpx; font-weight: 500; }
.execute-btn { background: #e0f2fe; color: #0369a1; }
.approve-btn { background: #dcfce7; color: #16a34a; }
.reject-btn,
.delete-btn { background: #fee2e2; color: #dc2626; }
.submit-btn { background: #dbeafe; color: #1d4ed8; }
.action-btn-disabled { background: #f1f5f9; color: #94a3b8; }
.record-tag.text-success { color: #15803d; background: #dcfce7; }
.record-tag.text-danger { color: #dc2626; background: #fee2e2; }
.record-tag.text-warning { color: #d97706; background: #fef3c7; }
.record-tag.text-primary { color: #1d4ed8; background: #dbeafe; }
.hint { padding: 36rpx 0; text-align: center; color: #94a3b8; font-size: 26rpx; }
.go-top-btn { position: fixed; right: 28rpx; bottom: calc(140rpx + env(safe-area-inset-bottom)); width: 92rpx; height: 92rpx; border-radius: 46rpx; background: rgba(255, 255, 255, 0.96); box-shadow: 0 8rpx 24rpx rgba(15, 23, 42, 0.12); display: flex; align-items: center; justify-content: center; }
.add-btn { position: fixed; right: 28rpx; bottom: calc(56rpx + env(safe-area-inset-bottom)); width: 92rpx; height: 92rpx; border-radius: 46rpx; background: #1f4b79; box-shadow: 0 14rpx 30rpx rgba(24, 63, 108, 0.24); display: flex; align-items: center; justify-content: center; }
.add-icon { color: #fff; font-size: 64rpx; line-height: 1; margin-top: -4rpx; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 999; display: flex; align-items: flex-end; justify-content: center; }
.modal-card { width: 100%; background: #fff; border-radius: 28rpx 28rpx 0 0; box-shadow: 0 -12rpx 42rpx rgba(0, 0, 0, 0.14); padding-bottom: env(safe-area-inset-bottom); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 32rpx 32rpx 20rpx; border-bottom: 1rpx solid #f0f0f0; }
.modal-title { font-size: 32rpx; font-weight: 700; color: #1a1a1a; }
.modal-close { font-size: 36rpx; color: #999; padding: 8rpx; }
.modal-body { padding: 28rpx 32rpx; }
.modal-field { margin-bottom: 28rpx; }
.modal-field:last-child { margin-bottom: 0; }
.modal-label { font-size: 28rpx; color: #374151; font-weight: 500; margin-bottom: 14rpx; display: block; }
.required { color: #ef4444; }
.modal-select-field { display: flex; align-items: center; justify-content: space-between; height: 80rpx; padding: 0 24rpx; background: #f8fafc; border: 1rpx solid #e0e0e0; border-radius: 12rpx; box-sizing: border-box; }
.modal-select-text { flex: 1; min-width: 0; font-size: 28rpx; color: #374151; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.placeholder { color: #bbb; }
.modal-textarea { width: 100%; min-height: var(--app-textarea-field-height, 100rpx); padding: 20rpx; background: #f8fafc; border: 1rpx solid #e0e0e0; border-radius: 12rpx; font-size: 27rpx; color: #374151; box-sizing: border-box; }
.modal-footer { display: flex; gap: 18rpx; padding: 24rpx 32rpx; border-top: 1rpx solid #f0f0f0; }
.modal-btn { flex: 1; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 14rpx; font-size: 30rpx; font-weight: 600; }
.cancel-btn { background: #f0f0f0; color: #6b7280; }
.confirm-btn { background: #1f4b79; color: #fff; }
.picker-content { padding: 24rpx 24rpx 36rpx; border-radius: 28rpx 28rpx 0 0; }
.picker-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rpx; }
.picker-title { color: #1f2d3d; font-size: 30rpx; font-weight: 700; }
.picker-clear-text { color: #1f61ff; font-size: 26rpx; }
.picker-list { max-height: 480rpx; }
.picker-item { display: flex; align-items: center; justify-content: space-between; padding: 26rpx 6rpx; border-bottom: 1rpx solid #edf1f6; }
.picker-text { color: #243447; font-size: 28rpx; }
.picker-check { color: #1f61ff; font-size: 30rpx; }
</style>