----/前端源码/uni-app/components/NamingPayModal.vue

<template>
  <view v-if="visible" class="pay-modal-overlay" @click="handleClose">
    <view class="pay-modal" @click.stop>
      <view class="pay-modal-header">
        <text class="pay-modal-title">解锁完整报告</text>
        <view class="pay-modal-close" @click="handleClose">✕</view>
      </view>

      <view class="pay-modal-content">
        <view class="pay-modal-preview">
          <view class="pay-modal-name">{{ data?.name || '吉名' }}</view>
          <view class="pay-modal-pinyin">{{ data?.pinyin || '' }}</view>
          <view class="pay-modal-lock-icon">🔒</view>
          <text class="pay-modal-lock-text">详细解析已加密</text>
        </view>

        <view class="pay-modal-features">
          <view class="pay-modal-feature">
            <text class="pay-modal-feature-icon">✦</text>
            <text class="pay-modal-feature-text">字义与生肖解析</text>
          </view>
          <view class="pay-modal-feature">
            <text class="pay-modal-feature-icon">✦</text>
            <text class="pay-modal-feature-text">三才五格数理分析</text>
          </view>
          <view class="pay-modal-feature">
            <text class="pay-modal-feature-icon">✦</text>
            <text class="pay-modal-feature-text">六维格局与周易卦象</text>
          </view>
          <view class="pay-modal-feature">
            <text class="pay-modal-feature-icon">✦</text>
            <text class="pay-modal-feature-text">开运锦囊与人生运程</text>
          </view>
        </view>

        <view class="pay-modal-price">
          <text class="pay-modal-price-label">限时特惠</text>
          <text class="pay-modal-price-value">¥9.9</text>
          <text class="pay-modal-price-original">¥29.9</text>
        </view>
      </view>

      <view class="pay-modal-actions">
        <button class="pay-modal-btn pay-modal-btn-share" open-type="share" @click="handleShare">
          <text class="pay-modal-btn-text">分享解锁</text>
        </button>
        <button class="pay-modal-btn pay-modal-btn-pay" @click="handlePay">
          <text class="pay-modal-btn-text">立即解锁</text>
        </button>
      </view>

      <view class="pay-modal-tip">
        <text>分享给好友即可免费解锁完整报告</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import type { GeneratedName } from "./NamingResult.vue";

const props = defineProps<{
  visible: boolean;
  data: GeneratedName | null;
}>();

const emit = defineEmits<{
  close: [];
  pay: [data: GeneratedName];
  share: [];
  unlock: [data: GeneratedName];
}>();

const handleClose = () => {
  emit("close");
};

const handlePay = () => {
  // 支付成功后直接跳转到详情页
  if (props.data) {
    emit("pay", props.data);
  }
};

const handleShare = () => {
  emit("share");
};
</script>

<style scoped>
.pay-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.pay-modal {
  width: 85%;
  max-width: 600rpx;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 24rpx;
  border: 1px solid rgba(212, 175, 55, 0.3);
  overflow: hidden;
}

.pay-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pay-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #d4af37;
  letter-spacing: 0.1em;
}

.pay-modal-close {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a0a0a0;
  font-size: 16px;
}

.pay-modal-content {
  padding: 32rpx;
}

.pay-modal-preview {
  text-align: center;
  padding: 32rpx;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16rpx;
  margin-bottom: 24rpx;
}

.pay-modal-name {
  font-size: 28px;
  font-weight: 700;
  color: #e2e2e2;
  letter-spacing: 0.2em;
  margin-bottom: 8rpx;
}

.pay-modal-pinyin {
  font-size: 12px;
  color: #a0a0a0;
  margin-bottom: 24rpx;
}

.pay-modal-lock-icon {
  font-size: 32px;
  margin-bottom: 12rpx;
}

.pay-modal-lock-text {
  font-size: 12px;
  color: #5a5a5a;
}

.pay-modal-features {
  margin-bottom: 24rpx;
}

.pay-modal-feature {
  display: flex;
  align-items: center;
  padding: 12rpx 0;
}

.pay-modal-feature-icon {
  color: #d4af37;
  margin-right: 16rpx;
  font-size: 12px;
}

.pay-modal-feature-text {
  font-size: 13px;
  color: #a0a0a0;
}

.pay-modal-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding: 24rpx;
  background: rgba(212, 175, 55, 0.1);
  border-radius: 12rpx;
  margin-bottom: 24rpx;
}

.pay-modal-price-label {
  font-size: 12px;
  color: #d4af37;
  margin-right: 16rpx;
}

.pay-modal-price-value {
  font-size: 28px;
  font-weight: 700;
  color: #d4af37;
}

.pay-modal-price-original {
  font-size: 14px;
  color: #5a5a5a;
  text-decoration: line-through;
  margin-left: 12rpx;
}

.pay-modal-actions {
  display: flex;
  gap: 16rpx;
  padding: 0 32rpx 32rpx;
}

.pay-modal-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12rpx;
  border-radius: 12rpx;
  border: none;
  font-size: 14px;
}

.pay-modal-btn-share {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e2e2e2;
}

.pay-modal-btn-pay {
  background: linear-gradient(135deg, #d4af37 0%, #8a6e1e 100%);
  color: #1a1a2e;
  font-weight: 700;
}

.pay-modal-btn-icon {
  margin-right: 8rpx;
}

.pay-modal-btn-text {
  font-size: 14px;
}

.pay-modal-tip {
  text-align: center;
  padding: 0 32rpx 32rpx;
}

.pay-modal-tip text {
  font-size: 11px;
  color: #5a5a5a;
}
</style>