445bd850f4
- 新增工单中心(ticket_center)与工单工作台(ticket_workbench)页面 - 新增房间巡查(room_inspection)与失物招领发布(lost_found_publish)页面 - 预约看样流程新增房型/楼栋/楼层选择器组件 - 新增工具模块: booking-entry、privacy、reservation-flow - api/index.js 补充楼层列表、看样提交等接口 - locales/messages.js 补充多语言文案 - manifest.json 开启微信小程序隐私检查 - 完善登录、注册、申请详情、账单等相关页面交互
250 lines
6.6 KiB
Vue
250 lines
6.6 KiB
Vue
<template>
|
|
<view class="store-info-panel">
|
|
<!-- 核心信息卡片 -->
|
|
<view class="info-card tn-flex tn-flex-row-between tn-flex-col-center" @click="openMap">
|
|
<view class="address-left tn-flex tn-flex-col-center">
|
|
<view class="icon-wrap tn-flex tn-flex-row-center tn-flex-col-center">
|
|
<text class="tn-icon-location-fill location-icon"></text>
|
|
</view>
|
|
<text class="address-title tn-text-ellipsis">{{ shortAddress }}</text>
|
|
</view>
|
|
<view class="address-right tn-flex tn-flex-col-center">
|
|
<text class="nav-text">{{ t('navigate') }}</text>
|
|
<text class="tn-icon-right nav-arrow"></text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 小区简介 -->
|
|
<view class="section-panel" v-if="displayDescription">
|
|
<view class="section-header">
|
|
<text class="section-title">{{ t('storeIntro') }}</text>
|
|
</view>
|
|
<view
|
|
class="store-desc"
|
|
:class="{
|
|
'store-desc--collapsed': !isRichDescription && isDescCollapsed
|
|
}"
|
|
>
|
|
<rich-text v-if="isRichDescription" class="store-desc-rich" :nodes="displayDescriptionNodes"></rich-text>
|
|
<text v-else>{{ displayDescription }}</text>
|
|
</view>
|
|
<view v-if="shouldShowToggle" class="expand-btn tn-flex tn-flex-row-center tn-flex-col-center" @click="toggleDesc">
|
|
<text>{{ isDescCollapsed ? t('expandAll') : t('collapse') }}</text>
|
|
<text :class="isDescCollapsed ? 'tn-icon-down' : 'tn-icon-up'" class="expand-icon"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { normalizeRichTextImages } from '../../../utils/rich-text'
|
|
|
|
function hasHtmlTag(value = '') {
|
|
return /<\/?(p|div|img|br|span|h[1-6]|ul|li|ol|table|td|tr|strong|em|section|article|blockquote)[^>]*>/i.test(String(value || ''))
|
|
}
|
|
|
|
function normalizeRichDescription(value = '') {
|
|
let html = String(value || '').trim()
|
|
if (!html) {
|
|
return ''
|
|
}
|
|
|
|
html = normalizeRichTextImages(
|
|
html,
|
|
'display:block;width:100%;max-width:100%;height:auto;box-sizing:border-box;border-radius:16rpx;margin:16rpx 0;vertical-align:top;'
|
|
)
|
|
html = html.replace(/<p\b([^>]*)>/gi, '<p$1 style="line-height:1.9;color:rgba(255,255,255,0.78);margin:0 0 20rpx;word-break:break-word;">')
|
|
html = html.replace(/<div\b([^>]*)>/gi, '<div$1 style="line-height:1.9;color:rgba(255,255,255,0.78);margin:0 0 20rpx;word-break:break-word;">')
|
|
html = html.replace(/<ul\b([^>]*)>/gi, '<ul$1 style="padding-left:28rpx;margin:0 0 20rpx;color:rgba(255,255,255,0.78);line-height:1.9;">')
|
|
html = html.replace(/<ol\b([^>]*)>/gi, '<ol$1 style="padding-left:32rpx;margin:0 0 20rpx;color:rgba(255,255,255,0.78);line-height:1.9;">')
|
|
html = html.replace(/<li\b([^>]*)>/gi, '<li$1 style="margin-bottom:12rpx;">')
|
|
html = html.replace(/<h([1-6])\b([^>]*)>/gi, '<h$1$2 style="color:#FFFFFF;line-height:1.5;margin:0 0 20rpx;font-weight:600;">')
|
|
html = html.replace(/<strong\b([^>]*)>/gi, '<strong$1 style="color:#FFFFFF;font-weight:600;">')
|
|
html = html.replace(/<a\b([^>]*)>/gi, '<a$1 style="color:#9EC5FF;text-decoration:underline;">')
|
|
return html
|
|
}
|
|
|
|
export default {
|
|
props: {
|
|
storeData: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
language: {
|
|
type: String,
|
|
default: 'zh'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isDescCollapsed: true
|
|
}
|
|
},
|
|
computed: {
|
|
displayDescription() {
|
|
if (this.language === 'en') {
|
|
return this.storeData.descriptionEnDisplay || this.storeData.descriptionEn || this.storeData.description || ''
|
|
}
|
|
return this.storeData.description || this.storeData.descriptionEn || ''
|
|
},
|
|
isRichDescription() {
|
|
return hasHtmlTag(this.displayDescription)
|
|
},
|
|
displayDescriptionNodes() {
|
|
return this.isRichDescription ? normalizeRichDescription(this.displayDescription) : ''
|
|
},
|
|
shouldShowToggle() {
|
|
if (this.isRichDescription) {
|
|
return false
|
|
}
|
|
return String(this.displayDescription || '').length > 90
|
|
},
|
|
shortAddress() {
|
|
const addr = this.language === 'en'
|
|
? (this.storeData.addressEnDisplay || this.storeData.addressEn || this.storeData.address || '')
|
|
: (this.storeData.address || this.storeData.addressEn || '')
|
|
if (!addr) {
|
|
return this.t('noAddress')
|
|
}
|
|
if (this.language === 'en') {
|
|
return addr
|
|
}
|
|
const short = addr.replace(/^(?:.*?省|.*?自治区)?(?:.*?市|.*?自治州)?/, '');
|
|
return short.trim() ? short : (addr || this.t('noAddress'));
|
|
}
|
|
},
|
|
methods: {
|
|
t(key) {
|
|
return this.$tm('pkgExplore.store_detail.store_detail', key)
|
|
},
|
|
toggleDesc() {
|
|
this.isDescCollapsed = !this.isDescCollapsed;
|
|
},
|
|
openMap() {
|
|
this.$emit('open-map');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.store-info-panel {
|
|
padding: 0 32rpx;
|
|
margin-top: 24rpx;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.info-card {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1rpx solid rgba(255, 255, 255, 0.15);
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
|
|
border-radius: 24rpx;
|
|
padding: 32rpx;
|
|
transition: all 0.2s;
|
|
|
|
&:active {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
.address-left {
|
|
flex: 1;
|
|
min-width: 0;
|
|
padding-right: 20rpx;
|
|
}
|
|
|
|
.icon-wrap {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 16rpx;
|
|
margin-right: 16rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.location-icon {
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.address-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
flex: 1;
|
|
}
|
|
|
|
.address-right {
|
|
flex-shrink: 0;
|
|
padding-left: 20rpx;
|
|
border-left: 1rpx solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.nav-text {
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.nav-arrow {
|
|
font-size: 24rpx;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin-left: 6rpx;
|
|
}
|
|
|
|
.section-panel {
|
|
background: rgba(255, 255, 255, 0.08);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border: 1rpx solid rgba(255, 255, 255, 0.15);
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
|
|
margin-top: 24rpx;
|
|
padding: 32rpx;
|
|
border-radius: 24rpx;
|
|
}
|
|
|
|
.section-header {
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
.store-desc {
|
|
font-size: 28rpx;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
line-height: 1.6;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.store-desc--collapsed {
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.store-desc-rich {
|
|
display: block;
|
|
}
|
|
|
|
.expand-btn {
|
|
margin-top: 16rpx;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.expand-icon {
|
|
margin-left: 8rpx;
|
|
font-size: 28rpx;
|
|
line-height: 1;
|
|
}
|
|
</style>
|