279 lines
6.2 KiB
Vue
279 lines
6.2 KiB
Vue
<template>
|
||
<view class="section-panel room-section">
|
||
<view class="section-header tn-flex tn-flex-row-between tn-flex-col-center">
|
||
<view class="title-wrap tn-flex tn-flex-col-center">
|
||
<view class="title-bar"></view>
|
||
<text class="section-title">{{ $tr('在租房型（{count}）', { count: roomTypes.length }) }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="room-list-vertical">
|
||
<view
|
||
class="room-card-v"
|
||
v-for="room in roomTypes"
|
||
:key="room.code"
|
||
@click="goToRoomDetail(room)"
|
||
>
|
||
<view class="room-img-v">
|
||
<image class="img" :src="room.images && room.images[0] ? room.images[0] : ''" mode="aspectFill"></image>
|
||
<view class="pay-method-tag" v-if="room.payMethod">{{ getPayMethodText(room.payMethod) }}</view>
|
||
</view>
|
||
<view class="room-info-v">
|
||
<view class="room-header-v tn-flex tn-flex-row-between tn-flex-col-center">
|
||
<view class="room-name-v tn-text-ellipsis">{{ getRoomName(room) }}</view>
|
||
</view>
|
||
|
||
<view v-if="room.tags && room.tags.length" class="room-tags-v tn-flex tn-flex-wrap">
|
||
<view class="tag-v" v-for="(tag, index) in room.tags.slice(0, 3)" :key="index">{{ getDisplayTag(tag) }}</view>
|
||
</view>
|
||
|
||
<view v-if="getRoomDescription(room)" class="room-desc-v tn-text-ellipsis">{{ getRoomDescription(room) }}</view>
|
||
|
||
<view class="room-bottom-v tn-flex tn-flex-row-between tn-flex-col-bottom">
|
||
<view class="room-price-v">
|
||
<text class="price-symbol">¥</text>
|
||
<text class="price-val">{{ formatPriceValue(room.price) || $tr('待定') }}</text>
|
||
<text class="price-unit">{{ $tr('/月') }}</text>
|
||
</view>
|
||
<view class="go-btn-v tn-flex tn-flex-col-center tn-flex-row-center">
|
||
<text>{{ $tr('查看详情') }}</text>
|
||
<text class="tn-icon-right"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { localizeHousingTag, localizePayMethodText } from '../../../utils/select-room-normalizers'
|
||
|
||
function stripHtmlTags(value = '') {
|
||
return String(value || '')
|
||
.replace(/<[^>]+>/g, ' ')
|
||
.replace(/ /gi, ' ')
|
||
.replace(/\s+/g, ' ')
|
||
.trim()
|
||
}
|
||
|
||
export default {
|
||
props: {
|
||
roomTypes: {
|
||
type: Array,
|
||
default: () => []
|
||
},
|
||
language: {
|
||
type: String,
|
||
default: 'zh'
|
||
}
|
||
},
|
||
methods: {
|
||
formatPriceValue(priceText) {
|
||
if (!priceText) {
|
||
return ''
|
||
}
|
||
const matched = String(priceText).match(/(\d+(\.\d+)?)/)
|
||
return matched ? matched[1] : ''
|
||
},
|
||
getPayMethodText(payMethod = '') {
|
||
return localizePayMethodText(payMethod, this.language)
|
||
},
|
||
getDisplayTag(tag = '') {
|
||
return localizeHousingTag(tag, this.language)
|
||
},
|
||
getRoomName(room = {}) {
|
||
if (this.language === 'en') {
|
||
return room.nameEnDisplay || room.nameEn || room.name || ''
|
||
}
|
||
return room.name || room.nameEn || ''
|
||
},
|
||
getRoomDescription(room = {}) {
|
||
const rawDescription = this.language === 'en'
|
||
? (room.descriptionEnDisplay || room.descriptionEn || room.description || '')
|
||
: (room.description || room.descriptionEn || '')
|
||
|
||
return stripHtmlTags(rawDescription)
|
||
},
|
||
goToRoomDetail(room) {
|
||
this.$emit('go-detail', room)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
$navy-deep: #1E3A5F;
|
||
$navy-light: #2E4A73;
|
||
$gold: #C9A96E;
|
||
$gold-light: #D4BC8C;
|
||
$text-primary: #0F172A;
|
||
$text-secondary: #64748B;
|
||
$text-tertiary: #94A3B8;
|
||
|
||
.section-panel {
|
||
background: #FFFFFF;
|
||
border: 1rpx solid rgba($navy-deep, 0.08);
|
||
box-shadow: 0 8rpx 28rpx rgba(30, 58, 95, 0.06);
|
||
margin: 24rpx 32rpx 0;
|
||
padding: 32rpx;
|
||
border-radius: 28rpx;
|
||
}
|
||
|
||
.section-header {
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.title-wrap {
|
||
flex: 1;
|
||
}
|
||
|
||
.title-bar {
|
||
width: 6rpx;
|
||
height: 32rpx;
|
||
background: linear-gradient(180deg, $gold 0%, $gold-light 100%);
|
||
border-radius: 999rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 32rpx;
|
||
font-weight: 800;
|
||
color: $navy-deep;
|
||
}
|
||
|
||
.room-list-vertical {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.room-card-v {
|
||
width: 100%;
|
||
display: flex;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
background: #FFFFFF;
|
||
border: 1rpx solid rgba($navy-deep, 0.08);
|
||
box-shadow: 0 8rpx 24rpx rgba(30, 58, 95, 0.05);
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.room-card-v:active {
|
||
transform: translateY(-4rpx);
|
||
box-shadow: 0 16rpx 40rpx rgba(30, 58, 95, 0.1);
|
||
}
|
||
|
||
.room-img-v {
|
||
width: 220rpx;
|
||
height: 220rpx;
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
}
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(135deg, #E2E8F0 0%, #CBD5E1 100%);
|
||
}
|
||
|
||
.pay-method-tag {
|
||
position: absolute;
|
||
top: 12rpx;
|
||
left: 12rpx;
|
||
background: rgba($navy-deep, 0.85);
|
||
backdrop-filter: blur(8rpx);
|
||
color: $gold-light;
|
||
font-size: 18rpx;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 8rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.room-info-v {
|
||
flex: 1;
|
||
padding: 20rpx 24rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-width: 0;
|
||
}
|
||
|
||
.room-header-v {
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.room-name-v {
|
||
font-size: 30rpx;
|
||
font-weight: 800;
|
||
color: $navy-deep;
|
||
flex: 1;
|
||
}
|
||
|
||
.room-tags-v {
|
||
gap: 12rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.tag-v {
|
||
font-size: 20rpx;
|
||
color: $navy-deep;
|
||
background: rgba($navy-deep, 0.06);
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 8rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.room-desc-v {
|
||
font-size: 22rpx;
|
||
color: $text-tertiary;
|
||
margin-bottom: auto;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.room-bottom-v {
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.room-price-v {
|
||
color: $navy-deep;
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
|
||
.price-symbol {
|
||
font-size: 20rpx;
|
||
font-weight: 800;
|
||
margin-right: 2rpx;
|
||
color: $gold;
|
||
}
|
||
|
||
.price-val {
|
||
font-size: 36rpx;
|
||
font-weight: 800;
|
||
line-height: 1;
|
||
color: $navy-deep;
|
||
}
|
||
|
||
.price-unit {
|
||
font-size: 20rpx;
|
||
color: $text-tertiary;
|
||
margin-left: 4rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.go-btn-v {
|
||
background: linear-gradient(135deg, $navy-light 0%, $navy-deep 100%);
|
||
color: #FFFFFF;
|
||
font-size: 22rpx;
|
||
padding: 10rpx 22rpx;
|
||
border-radius: 30rpx;
|
||
font-weight: 600;
|
||
box-shadow: 0 6rpx 16rpx rgba($navy-deep, 0.2);
|
||
}
|
||
|
||
.go-btn-v .tn-icon-right {
|
||
font-size: 20rpx;
|
||
margin-left: 4rpx;
|
||
color: $gold-light;
|
||
}
|
||
</style>
|