QSY-lvjuxcx/pkgExplore/store_detail/components/StoreInfo.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': isDescCollapsed}">
        {{ displayDescription }}
      </view>
      <view 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>
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 || ''
    },
    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;
}

.store-desc--collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.expand-btn {
  margin-top: 16rpx;
  font-size: 24rpx;
  color: #fff;
}

.expand-icon {
  margin-left: 8rpx;
  font-size: 28rpx;
  line-height: 1;
}
</style>