432 lines
9.8 KiB
Vue
432 lines
9.8 KiB
Vue
<template>
|
|
<view class="building-selector">
|
|
<view
|
|
class="selector-card tn-flex tn-flex-row-between tn-flex-col-center"
|
|
:class="{ 'selector-card--disabled': !areaCode }"
|
|
@click="handleOpen"
|
|
>
|
|
<view class="selected-info">
|
|
<view class="selected-label">{{ $tr('楼栋') }}</view>
|
|
<view class="selected-name tn-text-ellipsis" :class="{ 'is-empty': !selectedBuilding }">
|
|
{{ selectedBuilding ? getBuildingDisplayName(selectedBuilding) : 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="building-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="!buildingList.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="building-list">
|
|
<view
|
|
v-for="item in buildingList"
|
|
:key="item.code"
|
|
class="building-item"
|
|
:class="{ 'is-active': selectedBuilding && selectedBuilding.code === item.code }"
|
|
@click="handleSelect(item)"
|
|
>
|
|
<view class="building-name-left tn-flex tn-flex-col-center">
|
|
<view class="building-icon-wrap">
|
|
<text class="tn-icon-building"></text>
|
|
</view>
|
|
<text class="building-name">{{ getBuildingDisplayName(item) }}</text>
|
|
</view>
|
|
<text v-if="selectedBuilding && selectedBuilding.code === item.code" class="tn-icon-check building-check"></text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</tn-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { buildingPagination } from '@/api/index.js'
|
|
|
|
function normalizeText(value) {
|
|
if (value === undefined || value === null) {
|
|
return ''
|
|
}
|
|
return String(value).trim()
|
|
}
|
|
|
|
function normalizeBuildingItem(item = {}) {
|
|
return {
|
|
areaCode: normalizeText(item.areaCode),
|
|
code: normalizeText(item.code),
|
|
name: normalizeText(item.name),
|
|
nameEn: normalizeText(item.nameEn),
|
|
sort: Number(item.sort || 0),
|
|
buildingSections: Array.isArray(item.buildingSections) ? item.buildingSections : []
|
|
}
|
|
}
|
|
|
|
export default {
|
|
name: 'BuildingSelector',
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
areaCode: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
roomTypeCode: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showPopup: false,
|
|
isLoading: false,
|
|
buildingList: [],
|
|
selectedBuilding: null
|
|
}
|
|
},
|
|
computed: {
|
|
language() {
|
|
return this.$getLanguage ? this.$getLanguage() : 'zh'
|
|
},
|
|
placeholderText() {
|
|
return this.areaCode ? this.$tr('请选择楼栋') : this.$tr('请先选择区域')
|
|
}
|
|
},
|
|
watch: {
|
|
value() {
|
|
this.syncSelection()
|
|
},
|
|
language() {
|
|
this.loadData(true)
|
|
},
|
|
areaCode() {
|
|
this.handleAreaChange()
|
|
},
|
|
roomTypeCode(newVal, oldVal) {
|
|
if (newVal !== oldVal) {
|
|
this.handleRoomTypeChange()
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loadData()
|
|
},
|
|
methods: {
|
|
handleOpen() {
|
|
if (!this.areaCode) {
|
|
uni.showToast({
|
|
title: this.$tr('请先选择区域'),
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.showPopup = true
|
|
this.loadData()
|
|
},
|
|
handleAreaChange() {
|
|
this.buildingList = []
|
|
this.selectedBuilding = null
|
|
if (this.value) {
|
|
this.$emit('input', '')
|
|
this.$emit('change', { building: null })
|
|
}
|
|
if (!this.areaCode) {
|
|
return
|
|
}
|
|
this.loadData(true)
|
|
},
|
|
handleRoomTypeChange() {
|
|
this.buildingList = []
|
|
this.selectedBuilding = null
|
|
if (this.value) {
|
|
this.$emit('input', '')
|
|
this.$emit('change', { building: null })
|
|
}
|
|
if (!this.areaCode) {
|
|
return
|
|
}
|
|
this.loadData(true)
|
|
},
|
|
loadData(force = false) {
|
|
if (!this.areaCode) {
|
|
return Promise.resolve()
|
|
}
|
|
if (!force && this.buildingList.length) {
|
|
this.syncSelection()
|
|
return Promise.resolve()
|
|
}
|
|
|
|
this.isLoading = true
|
|
return buildingPagination({
|
|
AreaCode: this.areaCode,
|
|
PageIndex: 1,
|
|
PageSize: 100
|
|
}, this.language)
|
|
.then((res) => {
|
|
const payload = res && res.data ? res.data : res
|
|
const rawList = Array.isArray(payload && payload.data)
|
|
? payload.data
|
|
: (Array.isArray(payload) ? payload : [])
|
|
this.buildingList = rawList
|
|
.map(item => normalizeBuildingItem(item))
|
|
.filter(item => item.code)
|
|
.sort((a, b) => a.sort - b.sort || a.code.localeCompare(b.code))
|
|
this.syncSelection()
|
|
})
|
|
.catch((error) => {
|
|
console.error('load building list error', error)
|
|
this.buildingList = []
|
|
this.selectedBuilding = null
|
|
uni.showToast({
|
|
title: this.$tr('楼栋加载失败'),
|
|
icon: 'none'
|
|
})
|
|
})
|
|
.finally(() => {
|
|
this.isLoading = false
|
|
})
|
|
},
|
|
syncSelection() {
|
|
if (!this.value || !this.buildingList.length) {
|
|
this.selectedBuilding = null
|
|
return
|
|
}
|
|
this.selectedBuilding = this.buildingList.find(item => item.code === this.value) || null
|
|
},
|
|
handleSelect(item) {
|
|
this.selectedBuilding = item
|
|
this.$emit('input', item.code)
|
|
this.$emit('change', { building: item })
|
|
this.showPopup = false
|
|
},
|
|
getBuildingDisplayName(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;
|
|
|
|
.building-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);
|
|
}
|
|
|
|
.selector-card--disabled {
|
|
opacity: 0.72;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.building-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;
|
|
}
|
|
|
|
.building-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18rpx;
|
|
}
|
|
|
|
.building-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);
|
|
|
|
.building-name {
|
|
color: $brand-primary;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.building-icon-wrap {
|
|
background: rgba($brand-primary, 0.15);
|
|
}
|
|
}
|
|
}
|
|
|
|
.building-name-left {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.building-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;
|
|
}
|
|
}
|
|
|
|
.building-name {
|
|
font-size: 28rpx;
|
|
color: $text-primary;
|
|
}
|
|
|
|
.building-check {
|
|
color: $brand-primary;
|
|
font-size: 32rpx;
|
|
}
|
|
</style>
|