431 lines
10 KiB
Vue
431 lines
10 KiB
Vue
<template>
|
|
<view class="floor-selector">
|
|
<view
|
|
class="selector-card tn-flex tn-flex-row-between tn-flex-col-center"
|
|
@click="handleOpen"
|
|
>
|
|
<view class="selected-info">
|
|
<view class="selected-label">{{ $tr('楼层') }}</view>
|
|
<view class="selected-name tn-text-ellipsis" :class="{ 'is-empty': !selectedFloor }">
|
|
{{ selectedFloor ? getFloorDisplayName(selectedFloor) : placeholderText }}
|
|
</view>
|
|
</view>
|
|
<view class="selector-arrow">
|
|
<text class="tn-icon-right"></text>
|
|
</view>
|
|
</view>
|
|
|
|
<tn-popup v-model="showPopup" mode="bottom" length="72%" :borderRadius="32" :closeBtn="true">
|
|
<view class="popup-content">
|
|
<view class="popup-header">
|
|
<view class="popup-title">{{ $tr('选择意向楼层') }}</view>
|
|
<view class="popup-subtitle">{{ $tr('选择您期望入住的楼层') }}</view>
|
|
</view>
|
|
|
|
<scroll-view scroll-y class="floor-list-scroll">
|
|
<view v-if="isLoading" class="loading-state tn-padding-xl tn-text-center">
|
|
<tn-loading mode="circle" :size="48"></tn-loading>
|
|
<view class="tn-margin-top tn-color-gray">{{ $tr('楼层加载中...') }}</view>
|
|
</view>
|
|
|
|
<view v-else-if="!floorList.length" class="empty-state tn-padding-xl tn-text-center">
|
|
<view class="empty-icon">
|
|
<text class="tn-icon-empty-data"></text>
|
|
</view>
|
|
<view class="empty-title">{{ $tr('暂无可选楼层') }}</view>
|
|
<view class="empty-desc">{{ $tr('当前暂无可用楼层，请稍后再试') }}</view>
|
|
</view>
|
|
|
|
<view v-else class="floor-list">
|
|
<view
|
|
class="floor-item floor-item--clear"
|
|
:class="{ 'is-active': !selectedFloor }"
|
|
@click="handleClear"
|
|
>
|
|
<view class="floor-name-left tn-flex tn-flex-col-center">
|
|
<view class="floor-icon-wrap">
|
|
<text class="tn-icon-close" style="font-size: 22rpx;"></text>
|
|
</view>
|
|
<text class="floor-name">{{ $tr('不选择') }}</text>
|
|
</view>
|
|
<text v-if="!selectedFloor" class="tn-icon-check floor-check"></text>
|
|
</view>
|
|
<view
|
|
v-for="item in floorList"
|
|
:key="item.value"
|
|
class="floor-item"
|
|
:class="{ 'is-active': selectedFloor && selectedFloor.value === item.value }"
|
|
@click="handleSelect(item)"
|
|
>
|
|
<view class="floor-name-left tn-flex tn-flex-col-center">
|
|
<view class="floor-icon-wrap">
|
|
<text class="tn-icon-building"></text>
|
|
</view>
|
|
<text class="floor-name">{{ getFloorDisplayName(item) }}</text>
|
|
</view>
|
|
<text v-if="selectedFloor && selectedFloor.value === item.value" class="tn-icon-check floor-check"></text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</tn-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getEnums } from '@/api/index.js'
|
|
|
|
function pickFirstDefined(...values) {
|
|
const matched = values.find(value => value !== undefined && value !== null && value !== '')
|
|
return matched === undefined ? '' : matched
|
|
}
|
|
|
|
function normalizeFloorValue(value) {
|
|
if (value === undefined || value === null) {
|
|
return ''
|
|
}
|
|
return String(value).trim()
|
|
}
|
|
|
|
function resolveFloorList(response) {
|
|
const payload = response && response.data !== undefined ? response.data : response
|
|
|
|
if (Array.isArray(payload)) {
|
|
const floorEnum = payload.find(item => item && item.code === 'FloorLevelEnum')
|
|
if (floorEnum && Array.isArray(floorEnum.data)) {
|
|
return floorEnum.data
|
|
}
|
|
return payload
|
|
}
|
|
|
|
if (payload && Array.isArray(payload.data)) {
|
|
return payload.data
|
|
}
|
|
|
|
if (payload && payload.data && Array.isArray(payload.data.data)) {
|
|
return payload.data.data
|
|
}
|
|
|
|
if (payload && Array.isArray(payload.items)) {
|
|
return payload.items
|
|
}
|
|
|
|
if (payload && Array.isArray(payload.records)) {
|
|
return payload.records
|
|
}
|
|
|
|
return []
|
|
}
|
|
|
|
function normalizeFloorItem(item = {}) {
|
|
const code = normalizeFloorValue(pickFirstDefined(item.key, item.code, item.value))
|
|
const name = normalizeFloorValue(pickFirstDefined(item.cname, item.nameZh, item.labelZh, item.name, item.value))
|
|
const nameEn = normalizeFloorValue(pickFirstDefined(item.ename, item.nameEn, item.labelEn, item.descriptionEn, ''))
|
|
return {
|
|
value: code || name,
|
|
code,
|
|
name,
|
|
nameEn,
|
|
sort: Number(pickFirstDefined(item.sort, item.key, 0))
|
|
}
|
|
}
|
|
|
|
export default {
|
|
name: 'FloorSelector',
|
|
props: {
|
|
value: {
|
|
type: [String, Number],
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showPopup: false,
|
|
isLoading: false,
|
|
floorList: [],
|
|
selectedFloor: null
|
|
}
|
|
},
|
|
computed: {
|
|
language() {
|
|
return this.$getLanguage ? this.$getLanguage() : 'zh'
|
|
},
|
|
placeholderText() {
|
|
return this.$tr('请选择楼层')
|
|
}
|
|
},
|
|
watch: {
|
|
value() {
|
|
this.syncSelection()
|
|
},
|
|
language() {
|
|
this.loadData(true)
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loadData()
|
|
},
|
|
methods: {
|
|
handleOpen() {
|
|
this.showPopup = true
|
|
this.loadData()
|
|
},
|
|
loadData(force = false) {
|
|
if (!force && this.floorList.length) {
|
|
this.syncSelection()
|
|
return Promise.resolve()
|
|
}
|
|
|
|
this.isLoading = true
|
|
return getEnums({}, this.language)
|
|
.then((res) => {
|
|
const rawList = resolveFloorList(res)
|
|
this.floorList = rawList
|
|
.map(item => normalizeFloorItem(item))
|
|
.filter(item => item.value)
|
|
.sort((a, b) => a.sort - b.sort || a.value.localeCompare(b.value))
|
|
this.syncSelection()
|
|
})
|
|
.catch((error) => {
|
|
console.error('load floor list error', error)
|
|
this.floorList = []
|
|
this.selectedFloor = null
|
|
uni.showToast({
|
|
title: this.$tr('楼层加载失败'),
|
|
icon: 'none'
|
|
})
|
|
})
|
|
.finally(() => {
|
|
this.isLoading = false
|
|
})
|
|
},
|
|
syncSelection() {
|
|
const currentValue = normalizeFloorValue(this.value)
|
|
if (!currentValue || !this.floorList.length) {
|
|
this.selectedFloor = null
|
|
return
|
|
}
|
|
this.selectedFloor = this.floorList.find(item => item.value === currentValue) || null
|
|
},
|
|
handleSelect(item) {
|
|
this.selectedFloor = item
|
|
this.$emit('input', item.value)
|
|
this.$emit('change', { floor: item })
|
|
this.showPopup = false
|
|
},
|
|
handleClear() {
|
|
this.selectedFloor = null
|
|
this.$emit('input', '')
|
|
this.$emit('change', { floor: null })
|
|
this.showPopup = false
|
|
},
|
|
getFloorDisplayName(item = {}) {
|
|
if (this.language === 'en') {
|
|
return item.nameEn || item.name || item.code || ''
|
|
}
|
|
return item.name || item.nameEn || item.code || ''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
$text-primary: #1A2233;
|
|
$text-secondary: #6A7A99;
|
|
$text-tertiary: #A1B0C4;
|
|
$surface: #FFFFFF;
|
|
$bg-popup: #F8FAFF;
|
|
|
|
.floor-selector {
|
|
width: 100%;
|
|
}
|
|
|
|
.selector-card {
|
|
background: $surface;
|
|
border-radius: 20rpx;
|
|
padding: 26rpx 30rpx;
|
|
border: 2rpx solid rgba($brand-primary, 0.12);
|
|
box-shadow: 0 6rpx 20rpx rgba($brand-primary, 0.05);
|
|
min-height: 120rpx;
|
|
transition: all 0.25s ease;
|
|
}
|
|
|
|
.selector-card:active {
|
|
background: #FAFCFF;
|
|
border-color: rgba($brand-primary, 0.25);
|
|
}
|
|
|
|
.selected-info {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.selected-label {
|
|
font-size: 22rpx;
|
|
color: $text-tertiary;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.selected-name {
|
|
font-size: 30rpx;
|
|
color: $text-primary;
|
|
font-weight: 700;
|
|
|
|
&.is-empty {
|
|
color: $text-tertiary;
|
|
font-weight: normal;
|
|
}
|
|
}
|
|
|
|
.selector-arrow {
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
border-radius: 50%;
|
|
background: #F4F8FF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 20rpx;
|
|
flex-shrink: 0;
|
|
|
|
text {
|
|
font-size: 28rpx;
|
|
color: $text-secondary;
|
|
}
|
|
}
|
|
|
|
.popup-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background: $bg-popup;
|
|
}
|
|
|
|
.popup-header {
|
|
padding: 40rpx 30rpx 28rpx;
|
|
text-align: center;
|
|
background: $surface;
|
|
border-bottom: 1rpx solid rgba($brand-primary, 0.08);
|
|
}
|
|
|
|
.popup-title {
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
color: $text-primary;
|
|
margin-bottom: 8rpx;
|
|
letter-spacing: 1rpx;
|
|
}
|
|
|
|
.popup-subtitle {
|
|
font-size: 24rpx;
|
|
color: $text-secondary;
|
|
}
|
|
|
|
.floor-list-scroll {
|
|
flex: 1;
|
|
height: 0;
|
|
padding: 24rpx 30rpx 60rpx;
|
|
}
|
|
|
|
.loading-state,
|
|
.empty-state {
|
|
padding-top: 120rpx;
|
|
}
|
|
|
|
.empty-icon {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
background: rgba($brand-primary, 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 24rpx;
|
|
|
|
text {
|
|
font-size: 56rpx;
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
.empty-title {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
color: $text-primary;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.empty-desc {
|
|
font-size: 24rpx;
|
|
color: $text-secondary;
|
|
}
|
|
|
|
.floor-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18rpx;
|
|
}
|
|
|
|
.floor-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
padding: 24rpx 28rpx;
|
|
border: 2rpx solid rgba($brand-primary, 0.1);
|
|
transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
|
|
&.is-active {
|
|
background: #FFFFFF;
|
|
border-color: $brand-primary;
|
|
box-shadow: 0 8rpx 24rpx rgba($brand-primary, 0.14);
|
|
|
|
.floor-name {
|
|
color: $brand-primary;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.floor-icon-wrap {
|
|
background: rgba($brand-primary, 0.15);
|
|
}
|
|
}
|
|
}
|
|
|
|
.floor-item--clear {
|
|
border-style: dashed;
|
|
}
|
|
|
|
.floor-name-left {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.floor-icon-wrap {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
border-radius: 12rpx;
|
|
background: rgba($brand-primary, 0.08);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 16rpx;
|
|
transition: all 0.25s ease;
|
|
|
|
text {
|
|
font-size: 24rpx;
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
.floor-name {
|
|
font-size: 28rpx;
|
|
color: $text-primary;
|
|
}
|
|
|
|
.floor-check {
|
|
color: $brand-primary;
|
|
font-size: 32rpx;
|
|
}
|
|
</style>
|