新会员页面
This commit is contained in:
+443
-92
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<!-- 会员购买弹窗 — 通过 Teleport 挂载到 body -->
|
||||
<!-- 会员弹窗 — 通过 Teleport 挂载到 body -->
|
||||
<Teleport to="body">
|
||||
<!-- 遮罩层 — 点击关闭弹窗 -->
|
||||
<div v-if="modelValue" class="member-dialog-overlay" @click="$emit('update:modelValue', false)">
|
||||
@@ -8,73 +8,342 @@
|
||||
<!-- 右上角关闭按钮 -->
|
||||
<span class="member-dialog__close" @click="$emit('update:modelValue', false)">✕</span>
|
||||
|
||||
<!-- 顶部标语 -->
|
||||
<div class="member-dialog__slogan">每天不到一元，获得三倍面试机会！</div>
|
||||
<!-- ==================== 会员介绍步骤一：简介页 ==================== -->
|
||||
<div v-if="currentView === 'intro1'" class="member-dialog__intro-step1">
|
||||
<h1 class="member-dialog__intro-title">Offer 派 - AI 智能求职引擎</h1>
|
||||
<p class="member-dialog__intro-subtitle">全自动海投、简历精修、模拟面试，助你轻松拿高薪。</p>
|
||||
<button class="member-dialog__intro-btn" @click="currentView = 'intro2'">
|
||||
<span class="member-dialog__intro-btn-icon">⚡</span>
|
||||
升级 Pro 开启求职加速
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 套餐卡片区域 -->
|
||||
<div class="member-dialog__plans">
|
||||
<div
|
||||
v-for="plan in plans"
|
||||
:key="plan.key"
|
||||
class="member-dialog__plan-card"
|
||||
:class="{ 'member-dialog__plan-card--active': selectedPlan === plan.key }"
|
||||
@click="selectedPlan = plan.key"
|
||||
>
|
||||
<!-- 套餐名称 -->
|
||||
<div class="member-dialog__plan-name">{{ plan.name }}</div>
|
||||
<!-- 原价（划线） -->
|
||||
<div class="member-dialog__plan-original">{{ plan.originalPrice }}</div>
|
||||
<!-- 现价 -->
|
||||
<div class="member-dialog__plan-price">
|
||||
<span class="member-dialog__plan-price-num">¥{{ plan.price }}</span>
|
||||
<span class="member-dialog__plan-price-unit">/{{ plan.unit }}</span>
|
||||
<!-- 省钱标签 -->
|
||||
<span v-if="plan.discount" class="member-dialog__plan-discount">省{{ plan.discount }}</span>
|
||||
<!-- ==================== 会员介绍步骤二：详细介绍页（可滚动） ==================== -->
|
||||
<div v-else-if="currentView === 'intro2'" class="member-dialog__intro-step2">
|
||||
<div class="member-dialog__step2-badge">⚡ 求职加速会员</div>
|
||||
<h1 class="member-dialog__step2-title">offer派，收 offer 就是快！</h1>
|
||||
<p class="member-dialog__step2-subtitle">每天不到 1 元，少投无效岗位，把时间花在更可能拿面试的机会。</p>
|
||||
|
||||
<!-- 套餐卡片区域 -->
|
||||
<div class="member-dialog__plans">
|
||||
<div
|
||||
v-for="plan in plans"
|
||||
:key="plan.key"
|
||||
class="member-dialog__plan-card"
|
||||
:class="{ 'member-dialog__plan-card--active': selectedPlan === plan.key }"
|
||||
@click="selectedPlan = plan.key"
|
||||
>
|
||||
<div v-if="plan.recommend" class="member-dialog__plan-recommend">★ 推荐：覆盖求职周期，性价比最高</div>
|
||||
<div v-if="plan.tag" class="member-dialog__plan-tag">{{ plan.tag }}</div>
|
||||
<div class="member-dialog__plan-name">{{ plan.name }}</div>
|
||||
<div class="member-dialog__plan-price">
|
||||
<span class="member-dialog__plan-price-symbol">¥</span>
|
||||
<span class="member-dialog__plan-price-num">{{ plan.price }}</span>
|
||||
<span class="member-dialog__plan-price-unit">/{{ plan.unit }}</span>
|
||||
</div>
|
||||
<div v-if="plan.perMonth" class="member-dialog__plan-per-month">折合仅 ¥{{ plan.perMonth }}/月</div>
|
||||
<button class="member-dialog__plan-btn" @click.stop="handleUpgrade(plan)">{{ plan.btnText }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 提示信息 -->
|
||||
<div class="member-dialog__tip">
|
||||
<span class="member-dialog__tip-icon">⏰</span>
|
||||
<span class="member-dialog__tip-label">时间就是机会：</span>
|
||||
<span class="member-dialog__tip-text">热门岗位通常在发布后 24-48 小时内收到大量申请。使用 AI 加速工具，越早投递越容易被 HR 看到!</span>
|
||||
</div>
|
||||
|
||||
<!-- 底部内容：左侧能力列表 + 右侧对比表格 -->
|
||||
<div class="member-dialog__content-row">
|
||||
<div class="member-dialog__abilities">
|
||||
<h3 class="member-dialog__abilities-title">求职加速能力</h3>
|
||||
<div v-for="ability in abilities" :key="ability.text" class="member-dialog__ability-item">
|
||||
<span class="member-dialog__ability-icon" :style="{ color: ability.color }">{{ ability.icon }}</span>
|
||||
<span class="member-dialog__ability-text">{{ ability.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-dialog__compare">
|
||||
<h3 class="member-dialog__compare-title">会员能力对比</h3>
|
||||
<table class="member-dialog__compare-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>核心能力</th>
|
||||
<th>免费版</th>
|
||||
<th class="member-dialog__compare-th-pro">⚡ 会员版</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="row in compareData" :key="row.name">
|
||||
<td>{{ row.name }}</td>
|
||||
<td class="member-dialog__compare-free">{{ row.free }}</td>
|
||||
<td class="member-dialog__compare-pro">✓ {{ row.pro }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="member-dialog__compare-footer">
|
||||
<span>🔒 支付安全保障</span>
|
||||
<span>⏰ 支持随时取消</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户评价 -->
|
||||
<div class="member-dialog__testimonial">
|
||||
<div class="member-dialog__testimonial-avatar">
|
||||
<img src="@/assets/images/home/avatar-temporary.png" alt="用户头像" />
|
||||
</div>
|
||||
<div class="member-dialog__testimonial-content">
|
||||
<div class="member-dialog__testimonial-stars">★★★★★</div>
|
||||
<p class="member-dialog__testimonial-text">"开通后我主要用 AI 简历优化和岗位匹配，投递效率明显提升，每次网申节省了十几分钟，终于知道该重点投哪些岗位了。"</p>
|
||||
<div class="member-dialog__testimonial-author">
|
||||
<span class="member-dialog__testimonial-name">张同学</span>
|
||||
<span class="member-dialog__testimonial-desc">· 成功入职某大厂运营</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 立刻升级按钮 -->
|
||||
<button class="member-dialog__plan-btn" @click.stop="handleUpgrade(plan)">立刻升级</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 权益对比区域 -->
|
||||
<div class="member-dialog__benefits">
|
||||
<!-- 左列：面试率提升工具 -->
|
||||
<div class="member-dialog__benefit-col">
|
||||
<div class="member-dialog__benefit-title">面试率提升工具</div>
|
||||
<div
|
||||
v-for="item in toolList"
|
||||
:key="item"
|
||||
class="member-dialog__benefit-item"
|
||||
>{{ item }}</div>
|
||||
<div class="member-dialog__benefit-other">
|
||||
其他渠道购买 <span class="member-dialog__benefit-highlight">¥210/月</span>
|
||||
<!-- ==================== 下单步骤一：选择套餐 ==================== -->
|
||||
<div v-else-if="currentView === 'order1'" class="member-dialog__order">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="member-dialog__order-header">
|
||||
<span class="member-dialog__order-back" @click="currentView = 'intro2'">‹ 返回会员介绍</span>
|
||||
<!-- 步骤条 -->
|
||||
<div class="member-dialog__steps">
|
||||
<div class="member-dialog__step member-dialog__step--active">
|
||||
<span class="member-dialog__step-num">1</span>
|
||||
<span class="member-dialog__step-label">选择套餐</span>
|
||||
</div>
|
||||
<div class="member-dialog__step-line"></div>
|
||||
<div class="member-dialog__step">
|
||||
<span class="member-dialog__step-num">2</span>
|
||||
<span class="member-dialog__step-label">支付方式</span>
|
||||
</div>
|
||||
<div class="member-dialog__step-line"></div>
|
||||
<div class="member-dialog__step">
|
||||
<span class="member-dialog__step-num">3</span>
|
||||
<span class="member-dialog__step-label">完成</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 中列：会员权益 -->
|
||||
<div class="member-dialog__benefit-col member-dialog__benefit-col--center">
|
||||
<div class="member-dialog__benefit-title member-dialog__benefit-title--accent">会员权益</div>
|
||||
<div
|
||||
v-for="item in memberBenefits"
|
||||
:key="item.label"
|
||||
class="member-dialog__benefit-item"
|
||||
>
|
||||
<span class="member-dialog__benefit-badge">{{ item.badge }}</span>
|
||||
<span>{{ item.label }}</span>
|
||||
<!-- 主内容区域（可滚动） -->
|
||||
<div class="member-dialog__order-body">
|
||||
<!-- 左侧内容 -->
|
||||
<div class="member-dialog__order-left">
|
||||
<h2 class="member-dialog__order-title">开启你的 AI 求职加速计划</h2>
|
||||
<p class="member-dialog__order-desc">解锁简历优化、岗位匹配、投递追踪、面试准备等能力，让你的求职过程更高效、更有方向。</p>
|
||||
|
||||
<!-- 套餐选择卡片 -->
|
||||
<div class="member-dialog__order-plans">
|
||||
<div
|
||||
v-for="plan in plans"
|
||||
:key="plan.key"
|
||||
class="member-dialog__order-plan-card"
|
||||
:class="{ 'member-dialog__order-plan-card--active': selectedPlan === plan.key }"
|
||||
@click="selectedPlan = plan.key"
|
||||
>
|
||||
<div v-if="plan.recommend" class="member-dialog__order-plan-badge">★ 推荐</div>
|
||||
<!-- 选中圆圈 -->
|
||||
<div class="member-dialog__order-plan-radio">
|
||||
<div v-if="selectedPlan === plan.key" class="member-dialog__order-plan-radio-inner"></div>
|
||||
</div>
|
||||
<div class="member-dialog__order-plan-info">
|
||||
<div class="member-dialog__order-plan-name">{{ plan.name }}</div>
|
||||
<div class="member-dialog__order-plan-price">
|
||||
<span class="member-dialog__order-plan-price-symbol">¥</span>
|
||||
<span class="member-dialog__order-plan-price-num">{{ plan.price }}</span>
|
||||
<span class="member-dialog__order-plan-price-unit">/{{ plan.unit }}</span>
|
||||
</div>
|
||||
<div class="member-dialog__order-plan-desc">{{ plan.orderDesc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 支付方式 -->
|
||||
<div class="member-dialog__order-payment">
|
||||
<h3 class="member-dialog__order-payment-title">支付方式</h3>
|
||||
<div class="member-dialog__order-payment-methods">
|
||||
<div
|
||||
v-for="method in paymentMethods"
|
||||
:key="method.key"
|
||||
class="member-dialog__order-payment-item"
|
||||
:class="{ 'member-dialog__order-payment-item--active': selectedPayment === method.key }"
|
||||
@click="selectedPayment = method.key"
|
||||
>
|
||||
<span class="member-dialog__order-payment-icon">{{ method.icon }}</span>
|
||||
<span class="member-dialog__order-payment-name">{{ method.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 支付提示 -->
|
||||
<div class="member-dialog__order-payment-hint">
|
||||
点击右侧"立即开启求职加速"后，将弹出二维码完成支付。
|
||||
</div>
|
||||
<div class="member-dialog__order-payment-safe">支付信息将通过安全通道加密处理，请放心支付。</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部保障标签 -->
|
||||
<div class="member-dialog__order-guarantees">
|
||||
<span class="member-dialog__order-guarantee-item">🔒 安全支付</span>
|
||||
<span class="member-dialog__order-guarantee-item">⚡ 立即解锁</span>
|
||||
<span class="member-dialog__order-guarantee-item">⏰ 支持取消续费</span>
|
||||
<span class="member-dialog__order-guarantee-item">🎧 客服支持</span>
|
||||
</div>
|
||||
|
||||
<!-- 常见问题 -->
|
||||
<div class="member-dialog__order-faq">
|
||||
<h3 class="member-dialog__order-faq-title">常见问题</h3>
|
||||
<div
|
||||
v-for="faq in faqList"
|
||||
:key="faq.question"
|
||||
class="member-dialog__order-faq-item"
|
||||
@click="faq.open = !faq.open"
|
||||
>
|
||||
<div class="member-dialog__order-faq-question">
|
||||
<span>{{ faq.question }}</span>
|
||||
<span class="member-dialog__order-faq-arrow" :class="{ 'member-dialog__order-faq-arrow--open': faq.open }">›</span>
|
||||
</div>
|
||||
<div v-if="faq.open" class="member-dialog__order-faq-answer">{{ faq.answer }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-dialog__benefit-other">
|
||||
打包价 <span class="member-dialog__benefit-highlight">¥19.99/月</span>
|
||||
|
||||
<!-- 右侧订单摘要 -->
|
||||
<div class="member-dialog__order-right">
|
||||
<div class="member-dialog__order-summary">
|
||||
<h3 class="member-dialog__order-summary-title">订单摘要</h3>
|
||||
<!-- 套餐信息 -->
|
||||
<div class="member-dialog__order-summary-row">
|
||||
<div>
|
||||
<div class="member-dialog__order-summary-plan">{{ currentPlan.name }}</div>
|
||||
<div class="member-dialog__order-summary-duration">{{ currentPlan.unit }}</div>
|
||||
</div>
|
||||
<span class="member-dialog__order-summary-price">¥{{ currentPlan.price }}</span>
|
||||
</div>
|
||||
<!-- 分割线 -->
|
||||
<div class="member-dialog__order-summary-divider"></div>
|
||||
<!-- 今日支付 -->
|
||||
<div class="member-dialog__order-summary-row">
|
||||
<span class="member-dialog__order-summary-label">今日支付</span>
|
||||
<span class="member-dialog__order-summary-total">¥{{ currentPlan.price }}</span>
|
||||
</div>
|
||||
<!-- 协议勾选 -->
|
||||
<div class="member-dialog__order-summary-agree">
|
||||
<label class="member-dialog__order-checkbox">
|
||||
<input type="checkbox" v-model="agreeProtocol" />
|
||||
<span class="member-dialog__order-checkbox-mark"></span>
|
||||
</label>
|
||||
<span>我已阅读并同意 <a href="javascript:;">《会员服务协议》</a> <a href="javascript:;">《自动续费协议》</a></span>
|
||||
</div>
|
||||
<!-- 立即开启按钮 -->
|
||||
<button
|
||||
class="member-dialog__order-submit-btn"
|
||||
:disabled="!agreeProtocol"
|
||||
@click="handleShowQrCode"
|
||||
>立即开启求职加速</button>
|
||||
<div class="member-dialog__order-submit-tip">支付成功后立即解锁全部权益，可随时取消续费。</div>
|
||||
|
||||
<!-- 你将获得 -->
|
||||
<div class="member-dialog__order-benefits">
|
||||
<h4 class="member-dialog__order-benefits-title">你将获得</h4>
|
||||
<div v-for="item in orderBenefits" :key="item" class="member-dialog__order-benefits-item">
|
||||
<span class="member-dialog__order-benefits-check">✓</span>
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右列：免费权益（当前） -->
|
||||
<div class="member-dialog__benefit-col">
|
||||
<div class="member-dialog__benefit-title">免费权益（当前）</div>
|
||||
<div
|
||||
v-for="item in freeBenefits"
|
||||
:key="item"
|
||||
class="member-dialog__benefit-item"
|
||||
>{{ item }}</div>
|
||||
<!-- ==================== 下单步骤二：确认支付结果 ==================== -->
|
||||
<div v-else-if="currentView === 'order2'" class="member-dialog__order">
|
||||
<div class="member-dialog__order-header">
|
||||
<span class="member-dialog__order-back"></span>
|
||||
<div class="member-dialog__steps">
|
||||
<div class="member-dialog__step member-dialog__step--done">
|
||||
<span class="member-dialog__step-num">✓</span>
|
||||
<span class="member-dialog__step-label">选择套餐</span>
|
||||
</div>
|
||||
<div class="member-dialog__step-line member-dialog__step-line--done"></div>
|
||||
<div class="member-dialog__step member-dialog__step--active">
|
||||
<span class="member-dialog__step-num">2</span>
|
||||
<span class="member-dialog__step-label">支付方式</span>
|
||||
</div>
|
||||
<div class="member-dialog__step-line"></div>
|
||||
<div class="member-dialog__step">
|
||||
<span class="member-dialog__step-num">3</span>
|
||||
<span class="member-dialog__step-label">完成</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 确认中内容 -->
|
||||
<div class="member-dialog__order-confirming">
|
||||
<div class="member-dialog__order-confirming-card">
|
||||
<!-- 加载动画 -->
|
||||
<div class="member-dialog__order-loading-spinner"></div>
|
||||
<h2 class="member-dialog__order-confirming-title">正在确认支付结果</h2>
|
||||
<p class="member-dialog__order-confirming-desc">请稍候，请勿关闭此页面。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 下单步骤三：支付完成 ==================== -->
|
||||
<div v-else-if="currentView === 'order3'" class="member-dialog__order">
|
||||
<div class="member-dialog__order-header">
|
||||
<span class="member-dialog__order-back"></span>
|
||||
<div class="member-dialog__steps">
|
||||
<div class="member-dialog__step member-dialog__step--done">
|
||||
<span class="member-dialog__step-num">✓</span>
|
||||
<span class="member-dialog__step-label">选择套餐</span>
|
||||
</div>
|
||||
<div class="member-dialog__step-line member-dialog__step-line--done"></div>
|
||||
<div class="member-dialog__step member-dialog__step--done">
|
||||
<span class="member-dialog__step-num">✓</span>
|
||||
<span class="member-dialog__step-label">支付方式</span>
|
||||
</div>
|
||||
<div class="member-dialog__step-line member-dialog__step-line--done"></div>
|
||||
<div class="member-dialog__step member-dialog__step--active">
|
||||
<span class="member-dialog__step-num">3</span>
|
||||
<span class="member-dialog__step-label">完成</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 支付成功内容 -->
|
||||
<div class="member-dialog__order-success">
|
||||
<div class="member-dialog__order-success-card">
|
||||
<!-- 成功图标 -->
|
||||
<div class="member-dialog__order-success-icon">✓</div>
|
||||
<h2 class="member-dialog__order-success-title">支付成功，求职加速已开启</h2>
|
||||
<p class="member-dialog__order-success-desc">你已成功解锁 AI 求职加速权益，现在可以开始优化简历、匹配岗位并准备面试。</p>
|
||||
<button class="member-dialog__order-success-btn" @click="handleGoResume">开始优化我的简历</button>
|
||||
<button class="member-dialog__order-success-btn-secondary" @click="$emit('update:modelValue', false)">查看会员权益</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ==================== 付款二维码遮罩层 ==================== -->
|
||||
<div v-if="showQrCode" class="member-dialog__qrcode-overlay" @click="showQrCode = false">
|
||||
<div class="member-dialog__qrcode-modal" @click.stop>
|
||||
<!-- 关闭按钮 -->
|
||||
<span class="member-dialog__qrcode-close" @click="showQrCode = false">✕</span>
|
||||
<!-- 支付方式标题 -->
|
||||
<div class="member-dialog__qrcode-title">
|
||||
<span class="member-dialog__qrcode-title-icon">{{ selectedPayment === 'wechat' ? '💬' : '🔷' }}</span>
|
||||
<span>{{ selectedPayment === 'wechat' ? '微信支付' : '支付宝' }}</span>
|
||||
</div>
|
||||
<!-- 扫码提示 -->
|
||||
<h3 class="member-dialog__qrcode-subtitle">扫码完成支付</h3>
|
||||
<p class="member-dialog__qrcode-desc">请使用{{ selectedPayment === 'wechat' ? '微信' : '支付宝' }} App 扫描二维码完成支付，完成后此窗口会自动关闭。</p>
|
||||
<!-- 二维码占位 -->
|
||||
<div class="member-dialog__qrcode-image">
|
||||
<!-- TODO: 替换为真实二维码图片 -->
|
||||
<div class="member-dialog__qrcode-placeholder"></div>
|
||||
</div>
|
||||
<!-- 金额 -->
|
||||
<div class="member-dialog__qrcode-amount">¥{{ currentPlan.price }}</div>
|
||||
<!-- 我已完成支付按钮 -->
|
||||
<button class="member-dialog__qrcode-confirm-btn" @click="handlePaymentDone">我已完成支付</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -83,7 +352,8 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue'
|
||||
import { ref, computed, watch, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
/** 组件 Props — 控制弹窗显示/隐藏 */
|
||||
const props = defineProps<{ modelValue: boolean }>()
|
||||
@@ -91,72 +361,153 @@ const props = defineProps<{ modelValue: boolean }>()
|
||||
/** 组件 Emits — 通知父组件更新 modelValue */
|
||||
defineEmits<{ (e: 'update:modelValue', value: boolean): void }>()
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// ==================== 类型定义 ====================
|
||||
|
||||
/** 套餐项类型 */
|
||||
interface PlanItem {
|
||||
key: string
|
||||
name: string
|
||||
originalPrice: string
|
||||
price: string
|
||||
unit: string
|
||||
discount: string
|
||||
tag?: string
|
||||
recommend?: boolean
|
||||
perMonth?: string
|
||||
btnText: string
|
||||
orderDesc: string
|
||||
}
|
||||
|
||||
/** 支付方式类型 */
|
||||
interface PaymentMethod {
|
||||
key: string
|
||||
name: string
|
||||
icon: string
|
||||
}
|
||||
|
||||
/** FAQ 项类型 */
|
||||
interface FaqItem {
|
||||
question: string
|
||||
answer: string
|
||||
open: boolean
|
||||
}
|
||||
|
||||
// ==================== 状态 ====================
|
||||
|
||||
/** 当前选中的套餐 */
|
||||
const selectedPlan = ref('monthly')
|
||||
/** 当前视图（intro1/intro2/order1/order2/order3） */
|
||||
const currentView = ref<'intro1' | 'intro2' | 'order1' | 'order2' | 'order3'>('intro2')
|
||||
|
||||
/** 监听弹窗开关 — 打开时锁定背景滚动，关闭时恢复 */
|
||||
/** 当前选中的套餐 */
|
||||
const selectedPlan = ref('quarterly')
|
||||
|
||||
/** 当前选中的支付方式 */
|
||||
const selectedPayment = ref('wechat')
|
||||
|
||||
/** 是否同意协议 */
|
||||
const agreeProtocol = ref(false)
|
||||
|
||||
/** 是否显示二维码弹窗 */
|
||||
const showQrCode = ref(false)
|
||||
|
||||
/** 监听弹窗开关 — 打开时锁定背景滚动，关闭时恢复并重置状态 */
|
||||
watch(() => props.modelValue, (val) => {
|
||||
document.body.style.overflow = val ? 'hidden' : ''
|
||||
if (!val) {
|
||||
currentView.value = 'intro2'
|
||||
showQrCode.value = false
|
||||
agreeProtocol.value = false
|
||||
}
|
||||
})
|
||||
|
||||
// ==================== 计算属性 ====================
|
||||
|
||||
/** 当前选中的套餐对象 */
|
||||
const currentPlan = computed(() => {
|
||||
return plans.find(p => p.key === selectedPlan.value) || plans[1]
|
||||
})
|
||||
|
||||
// ==================== 常量数据 ====================
|
||||
|
||||
/** 套餐列表 */
|
||||
const plans: PlanItem[] = [
|
||||
{ key: 'quarterly', name: '季度会员', originalPrice: '¥149.97 / 3个月', price: '49.99', unit: '3个月', discount: '67%' },
|
||||
{ key: 'monthly', name: '月度会员', originalPrice: '¥49.99 / 1个月', price: '19.99', unit: '月', discount: '60%' },
|
||||
{ key: 'weekly', name: '周会员', originalPrice: '¥71.96 / 1个月', price: '17.99', unit: '1周', discount: '' },
|
||||
{ key: 'weekly', name: '周会员', price: '17.99', unit: '周', tag: '临时体验 / 急用一次', btnText: '立即体验', orderDesc: '适合临时体验，急用一次的求职者' },
|
||||
{ key: 'quarterly', name: '季度会员', price: '49.99', unit: '3个月', recommend: true, perMonth: '16.66', btnText: '开启完整求职冲刺', orderDesc: '推荐正在集中投递、准备面试的求职者，性价比最高' },
|
||||
{ key: 'monthly', name: '月度会员', price: '19.99', unit: '月', tag: '标准求职', btnText: '开始求职加速', orderDesc: '标准求职周期，持续使用 AI 求职加速能力' },
|
||||
]
|
||||
|
||||
/** 面试率提升工具列表 */
|
||||
const toolList = [
|
||||
'AI 求职助手',
|
||||
'AI 针对性简历优化',
|
||||
'1V1真人导师',
|
||||
'一键自动填写网申信息',
|
||||
'内推码',
|
||||
'实时岗位更新提醒',
|
||||
/** 求职加速能力列表 */
|
||||
const abilities = [
|
||||
{ icon: '◉', color: '#4FC2C9', text: '个性化岗位匹配，量大极速又精准' },
|
||||
{ icon: '◉', color: '#4FC2C9', text: '针对岗位 JD 自动优化简历，提高简历通过率' },
|
||||
{ icon: '⚡', color: '#4FC2C9', text: '自动填写申请表，每次投递节省 10-15 分钟' },
|
||||
{ icon: '↗', color: '#E85635', text: '内推码，提高简历被 HR 看到的概率' },
|
||||
{ icon: '⏰', color: '#777777', text: '第一时间提醒高匹配岗位，抢占面试机会' },
|
||||
]
|
||||
|
||||
/** 会员权益列表 */
|
||||
const memberBenefits = [
|
||||
{ badge: '无限', label: '自动化网申流程' },
|
||||
{ badge: '无限', label: '简历过筛率提升' },
|
||||
{ badge: '✓', label: '找工作不孤单' },
|
||||
{ badge: '无限', label: '每一次网申节约15Min' },
|
||||
{ badge: '无限', label: '自动填写最新内推码' },
|
||||
{ badge: '无限', label: '第一时间投递高质量岗位' },
|
||||
/** 会员能力对比数据 */
|
||||
const compareData = [
|
||||
{ name: 'AI 岗位匹配', free: '免费 3 天', pro: '不限次数' },
|
||||
{ name: '简历针对性优化', free: '免费 3 天', pro: '不限次数' },
|
||||
{ name: '自动填写网申', free: '免费 3 天', pro: '不限次数' },
|
||||
{ name: '内推码获取', free: '免费 3 天', pro: '不限次数' },
|
||||
{ name: '高匹配岗位推送', free: '免费 3 天', pro: '不限次数' },
|
||||
]
|
||||
|
||||
/** 免费权益列表 */
|
||||
const freeBenefits = [
|
||||
'受限',
|
||||
'2次/天',
|
||||
'不支持',
|
||||
'4次/天',
|
||||
'4次/天',
|
||||
'1次/天',
|
||||
/** 支付方式列表 */
|
||||
const paymentMethods: PaymentMethod[] = [
|
||||
{ key: 'wechat', name: '微信支付', icon: '💬' },
|
||||
{ key: 'alipay', name: '支付宝', icon: '🔷' },
|
||||
]
|
||||
|
||||
/** 订单权益列表 */
|
||||
const orderBenefits = [
|
||||
'AI 简历深度优化',
|
||||
'智能岗位匹配分析',
|
||||
'求职信快速生成',
|
||||
'面试准备指导',
|
||||
'投递进度追踪',
|
||||
'求职策略建议',
|
||||
]
|
||||
|
||||
/** 常见问题列表 */
|
||||
const faqList = reactive<FaqItem[]>([
|
||||
{ question: '支付后如何开通？', answer: '支付成功后立即生效，无需等待，登录账号即可使用全部会员权益。', open: true },
|
||||
{ question: '可以随时取消吗？', answer: '可以，您可以在设置中随时取消自动续费，当前周期内的权益仍然有效。', open: false },
|
||||
{ question: '支持哪些支付方式？', answer: '目前支持微信支付和支付宝两种支付方式。', open: false },
|
||||
{ question: '可以开发票吗？', answer: '支持开具电子发票，请在支付完成后联系客服申请。', open: false },
|
||||
])
|
||||
|
||||
// ==================== 事件处理 ====================
|
||||
|
||||
/** 点击立刻升级按钮 */
|
||||
/** 从介绍页点击升级按钮 — 进入下单步骤一 */
|
||||
function handleUpgrade(plan: PlanItem) {
|
||||
// TODO: 接入支付接口
|
||||
ElMessage.success(`正在跳转 ${plan.name} 支付页面...`)
|
||||
selectedPlan.value = plan.key
|
||||
currentView.value = 'order1'
|
||||
}
|
||||
|
||||
/** 点击立即开启求职加速 — 显示二维码弹窗 */
|
||||
function handleShowQrCode() {
|
||||
if (!agreeProtocol.value) return
|
||||
showQrCode.value = true
|
||||
}
|
||||
|
||||
/** 点击我已完成支付 — 进入确认支付结果步骤 */
|
||||
function handlePaymentDone() {
|
||||
showQrCode.value = false
|
||||
currentView.value = 'order2'
|
||||
// 模拟接口确认支付结果，成功后进入步骤三
|
||||
confirmPayment()
|
||||
}
|
||||
|
||||
/** 模拟确认支付结果接口 */
|
||||
async function confirmPayment() {
|
||||
// TODO: 替换为真实支付确认接口
|
||||
await new Promise(resolve => setTimeout(resolve, 2000))
|
||||
currentView.value = 'order3'
|
||||
}
|
||||
|
||||
/** 支付成功后跳转简历页 */
|
||||
function handleGoResume() {
|
||||
router.push('/resume')
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user