cfc/cfc-frontend/components/DimensionVisitorCard.vue

<template>
  <view class="dvc">
    <!-- 价值预览卡：维度浅底 + 维度色 CTA -->
    <view class="dvc-card" :style="{ background: softColor }">
      <view class="dvc-head">
        <text class="dvc-title">{{ cardTitle }}</text>
        <text class="dvc-sub">登录后即可解锁你的专属内容</text>
      </view>

      <view class="dvc-benefits">
        <view class="dvc-benefit" v-for="(b, i) in benefits" :key="i">
          <text class="dvc-dot" :style="{ background: mainColor }"></text>
          <text class="dvc-benefit-text">{{ b }}</text>
        </view>
      </view>

      <view class="dvc-actions">
        <button class="dvc-btn-primary" :style="{ background: mainColor }" @click="onLogin">{{ ctaText }}</button>
        <button
          v-if="secondaryText"
          class="dvc-btn-secondary"
          :style="{ color: mainColor, borderColor: mainColor }"
          @click="onSecondary">{{ secondaryText }}</button>
      </view>
    </view>

    <!-- 维度专属预览占位（登录后展示真实数据） -->
    <view class="dvc-preview" v-if="previewText">
      <text class="dvc-preview-icon">{{ previewIcon }}</text>
      <text class="dvc-preview-text">{{ previewText }}</text>
    </view>
  </view>
</template>

<script>
import { BrandColors } from '../utils/brand-colors.js'
/**
 * 维度游客价值卡 —— 五维主页面登录前统一复用
 *
 * 维度色严格对齐 uni.scss 五维令牌（v4.0）：
 *   身 body   #FF8C42   心 mind   #FF6B9D
 *   智 wisdom #6366F1   行 action #10B981   富 wealth #F59E0B
 * 此处用显式 hex（与令牌值一致）而非 var(--x)，确保 mp-weixin 运行时稳定渲染。
 *
 * 登录行为复用全局 mixin 的 openLoginSheet()（main.js 已全局注册）。
 */
var DIM_TOKENS = {
  body:   { main: BrandColors.body, soft: 'rgba(255, 140, 66, 0.15)',  icon: '🌿' },
  mind:   { main: BrandColors.mind, soft: 'rgba(255, 107, 157, 0.15)', icon: '🔥' },
  wisdom: { main: BrandColors.wisdom, soft: 'rgba(99, 102, 241, 0.15)',  icon: '⚡' },
  action: { main: BrandColors.success, soft: 'rgba(16, 185, 129, 0.15)',  icon: '🤝' },
  wealth: { main: BrandColors.wealth, soft: 'rgba(245, 158, 11, 0.15)',  icon: '💧' }
}

export default {
  props: {
    /** 维度编码：body | mind | wisdom | action | wealth */
    dimCode: { type: String, default: 'body' },
    /** 卡片标题 */
    cardTitle: { type: String, default: '登录后查看专属内容' },
    /** 价值收益列表（2–3 条） */
    benefits: {
      type: Array,
      default: function() { return [] }
    },
    /** 主登录按钮文案 */
    ctaText: { type: String, default: '立即登录' },
    /** 次级动作文案（可选） */
    secondaryText: { type: String, default: '' },
    /** 次级动作跳转地址（可选）；留空则 emit('secondary') */
    secondaryUrl: { type: String, default: '' },
    /** 维度专属预览占位文案（可选）；留空则不渲染预览块 */
    previewText: { type: String, default: '' }
  },
  computed: {
    token: function() {
      return DIM_TOKENS[this.dimCode] || DIM_TOKENS.body
    },
    mainColor: function() { return this.token.main },
    softColor: function() { return this.token.soft },
    previewIcon: function() { return this.token.icon }
  },
  methods: {
    onLogin: function() {
      // 全局 mixin 提供 openLoginSheet；极端情况下回退整页登录
      if (typeof this.openLoginSheet === 'function') {
        this.openLoginSheet()
      } else {
        uni.navigateTo({ url: '/pages/login/login' })
      }
    },
    onSecondary: function() {
      if (this.secondaryUrl) {
        uni.navigateTo({ url: this.secondaryUrl })
      } else {
        this.$emit('secondary')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.dvc {
  margin: 12rpx 30rpx 0;
}

.dvc-card {
  border-radius: 24rpx;
  padding: 32rpx 28rpx;
}

.dvc-head {
  margin-bottom: 22rpx;
}
.dvc-title {
  font-size: 30rpx;
  font-weight: 600;
  color: $facade-text-gray-800;
  display: block;
  line-height: 1.4;
}
.dvc-sub {
  font-size: 22rpx;
  color: $facade-text-muted;
  margin-top: 6rpx;
  display: block;
}

.dvc-benefits {
  margin-bottom: 26rpx;
}
.dvc-benefit {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 16rpx;
}
.dvc-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  margin-right: 16rpx;
  flex-shrink: 0;
}
.dvc-benefit-text {
  font-size: 26rpx;
  color: $facade-text-strong;
  line-height: 1.5;
}

.dvc-actions {
  display: flex;
  flex-direction: row;
  gap: 20rpx;
}
.dvc-btn-primary {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  color: $app-surface;
  font-size: 28rpx;
  font-weight: 600;
  border: none;
  padding: 0;
}
.dvc-btn-primary:active { opacity: 0.85; }
.dvc-btn-secondary {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  background: $app-surface;
  font-size: 28rpx;
  font-weight: 500;
  border: 2rpx solid;
  padding: 0;
}
.dvc-btn-secondary:active { opacity: 0.7; }

.dvc-preview {
  margin-top: 24rpx;
  background: $app-surface;
  border: 1rpx dashed $facade-gray-200;
  border-radius: 20rpx;
  padding: 40rpx 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dvc-preview-icon {
  font-size: 44rpx;
  margin-bottom: 14rpx;
}
.dvc-preview-text {
  font-size: 24rpx;
  color: $facade-text-muted;
  text-align: center;
  line-height: 1.6;
}
</style>