290 lines
13 KiB
Plaintext
290 lines
13 KiB
Plaintext
<!-- 神仙 AI · 对话页（精选推荐嵌入第 2 轮及以后的助手气泡 · MBTI 去测进测评列表） -->
|
||
<view class="ai-page">
|
||
<view class="container audit-purchase" wx:if="{{auditPurchaseMode}}">
|
||
<view class="success-mask" wx:if="{{auditSuccessModal.visible}}" bindtap="closeAuditSuccessModal">
|
||
<view class="success-dialog" catchtap="catchTapAuditSuccess">
|
||
<view class="success-icon-wrap">
|
||
<view class="success-icon-circle">
|
||
<text class="success-icon-check">✓</text>
|
||
</view>
|
||
</view>
|
||
<text class="success-dialog-title">{{auditSuccessModal.title}}</text>
|
||
<text class="success-dialog-content">{{auditSuccessModal.content}}</text>
|
||
<text class="success-dialog-hint">顾问将通过您预留的联系方式与您沟通，请留意来电或短信。</text>
|
||
<view class="success-dialog-btns success-dialog-btns--single">
|
||
<button class="success-btn-close success-btn-close--primary" bindtap="closeAuditSuccessModal">我知道了</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="deep-hero">
|
||
<text class="deep-hero__eyebrow">UNDERSTAND YOURSELF · 了解自己</text>
|
||
<text class="deep-hero__title">更深入地看见你自己</text>
|
||
<text class="deep-hero__desc">{{auditDeepHeroDesc}}</text>
|
||
</view>
|
||
|
||
<view class="tabs-container deep-tabs">
|
||
<view class="tabs-list">
|
||
<view class="tab-item {{auditPurchaseTab === 'personal' ? 'active' : ''}}" data-tab="personal" bindtap="onAuditPurchaseSwitchTab">
|
||
<text class="tab-text">个人解读</text>
|
||
</view>
|
||
<view class="tab-item {{auditPurchaseTab === 'enterprise' ? 'active' : ''}}" data-tab="enterprise" bindtap="onAuditPurchaseSwitchTab">
|
||
<text class="tab-text">团队与企业</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view wx:if="{{auditPurchaseLoading}}" class="loading-wrap">
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
<view wx:elif="{{auditPurchaseError}}" class="purchase-error-state">
|
||
<view class="purchase-error-ic">⚠️</view>
|
||
<text class="purchase-error-title">加载失败</text>
|
||
<text class="purchase-error-msg">{{auditPurchaseError}}</text>
|
||
<text class="purchase-error-hint">请稍后重试</text>
|
||
</view>
|
||
<block wx:else>
|
||
<view wx:if="{{auditPurchaseTab === 'personal'}}">
|
||
<view wx:for="{{auditPurchasePersonal}}" wx:key="id" class="pricing-card {{index === 0 ? 'featured' : ''}}" style="margin: 24rpx;">
|
||
<view class="card-header">
|
||
<text class="plan-title">{{item.title}}</text>
|
||
<view class="price-section" wx:if="{{item.price !== undefined}}">
|
||
<text class="price-symbol">¥</text>
|
||
<text class="price-amount">{{item.price}}</text>
|
||
<text class="price-unit">{{item.priceUnit || '/次'}}</text>
|
||
</view>
|
||
<text class="plan-subtitle" wx:if="{{item.subtitle}}">{{item.subtitle}}</text>
|
||
</view>
|
||
<view class="features-list" wx:if="{{item.features && item.features.length}}">
|
||
<view class="feature-item" wx:for="{{item.features}}" wx:for-item="f" wx:key="*this">
|
||
<view class="check-icon">✓</view>
|
||
<text class="feature-text">{{f}}</text>
|
||
</view>
|
||
</view>
|
||
<button
|
||
class="purchase-button primary"
|
||
wx:if="{{item.actionType === 'buy' && !auditHasPhone}}"
|
||
open-type="getPhoneNumber"
|
||
bindgetphonenumber="onGetPhoneNumberForAuditPurchase"
|
||
data-tab="personal"
|
||
data-index="{{index}}"
|
||
disabled="{{auditPurchasing}}"
|
||
>
|
||
<text class="button-text">{{item.purchaseButtonText || '了解自己并付款'}}</text>
|
||
</button>
|
||
<button
|
||
class="purchase-button primary"
|
||
wx:elif="{{item.actionType === 'buy' && auditHasPhone}}"
|
||
bindtap="handleAuditPurchaseTap"
|
||
data-tab="personal"
|
||
data-index="{{index}}"
|
||
disabled="{{auditPurchasing}}"
|
||
>
|
||
<text class="button-text">{{item.purchaseButtonText || '了解自己并付款'}}</text>
|
||
</button>
|
||
<button
|
||
class="purchase-button primary"
|
||
wx:else
|
||
bindtap="handleAuditPurchaseTap"
|
||
data-tab="personal"
|
||
data-index="{{index}}"
|
||
disabled="{{auditPurchasing}}"
|
||
>
|
||
<text class="button-text">{{item.buttonText || '申请咨询'}}</text>
|
||
</button>
|
||
</view>
|
||
<view wx:if="{{!auditPurchaseLoading && auditPurchasePersonal.length === 0}}" class="empty-tip">
|
||
<text>暂无可用的个人版套餐</text>
|
||
</view>
|
||
</view>
|
||
<view wx:else>
|
||
<view wx:for="{{auditPurchaseEnterprise}}" wx:key="id" class="pricing-card {{index === 1 ? 'featured-blue' : ''}}" style="margin: 24rpx;">
|
||
<view class="card-header-flex">
|
||
<view class="header-left">
|
||
<text class="plan-title-sm">{{item.title}}</text>
|
||
<text class="plan-desc" wx:if="{{item.subtitle}}">{{item.subtitle}}</text>
|
||
</view>
|
||
<view class="header-right" wx:if="{{item.priceDisplay || item.price}}">
|
||
<text class="price-amount-small">{{item.priceDisplay || '¥' + item.price}}</text>
|
||
<text class="price-limit" wx:if="{{item.userLimit}}">{{item.userLimit}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="features-list" wx:if="{{item.features && item.features.length}}">
|
||
<view class="feature-item" wx:for="{{item.features}}" wx:for-item="f" wx:key="*this">
|
||
<view class="check-icon blue">✓</view>
|
||
<text class="feature-text">{{f}}</text>
|
||
</view>
|
||
</view>
|
||
<button
|
||
class="purchase-button secondary"
|
||
wx:if="{{!auditHasPhone}}"
|
||
open-type="getPhoneNumber"
|
||
bindgetphonenumber="onGetPhoneNumberForAuditPurchase"
|
||
data-tab="enterprise"
|
||
data-index="{{index}}"
|
||
disabled="{{auditPurchasing}}"
|
||
>
|
||
<text class="button-text">{{item.buttonText || '申请咨询并降低30%成本'}}</text>
|
||
</button>
|
||
<button
|
||
class="purchase-button secondary"
|
||
wx:else
|
||
bindtap="handleAuditPurchaseTap"
|
||
data-tab="enterprise"
|
||
data-index="{{index}}"
|
||
disabled="{{auditPurchasing}}"
|
||
>
|
||
<text class="button-text">{{item.buttonText || '申请咨询并降低30%成本'}}</text>
|
||
</button>
|
||
</view>
|
||
<view wx:if="{{!auditPurchaseLoading && auditPurchaseEnterprise.length === 0}}" class="empty-tip">
|
||
<text>暂无可用的企业版套餐</text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<scroll-view
|
||
wx:else
|
||
class="chat-scroll"
|
||
style="height: {{chatScrollHeightPx}}px;"
|
||
scroll-y="true"
|
||
scroll-into-view="{{scrollTarget}}"
|
||
scroll-with-animation="true"
|
||
enhanced
|
||
show-scrollbar="{{false}}"
|
||
>
|
||
<!-- MBTI 引导：去测 → 详细性格测试列表（不直跳拍摄） -->
|
||
<view class="mbti-remind-card" wx:if="{{messages.length === 0}}">
|
||
<image class="mbti-remind-avatar" src="/images/shenxian-ai-logo.png" mode="aspectFill" />
|
||
<view class="mbti-remind-body">
|
||
<view class="mbti-remind-title">我是神仙 AI</view>
|
||
<view class="mbti-remind-sub" wx:if="{{mbtiType}}">
|
||
已了解你的 <text class="mbti-badge">{{mbtiType}}</text>，继续聊～
|
||
</view>
|
||
<view class="mbti-remind-sub" wx:else>先做一下 MBTI 测评，我能帮你聊得更懂你哦～</view>
|
||
<view class="mbti-remind-actions">
|
||
<text class="mbti-remind-tag">MBTI</text>
|
||
<view class="mbti-remind-btn" hover-class="mbti-remind-btn--press" bindtap="onGoMbtiTest">去测 MBTI</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="msg-wrap" wx:for="{{messages}}" wx:key="id" id="msg-{{item.id}}">
|
||
<view wx:if="{{item.role === 'assistant'}}" class="msg msg-ai">
|
||
<image class="avatar-ai" src="/images/shenxian-ai-logo.png" mode="aspectFill" />
|
||
<view class="bubble bubble-ai {{item.isDegraded ? 'bubble-degraded' : ''}}">
|
||
<view class="bubble-ai-inner">
|
||
<text class="bubble-ai-text" user-select="true">{{item.content}}</text>
|
||
</view>
|
||
<!-- 精选推荐：周期抽检 + 意图与正文相关；功能卡点击跳转，文章卡走原文/外链 -->
|
||
<view
|
||
wx:if="{{item.inlineArticle}}"
|
||
class="inline-reco"
|
||
catchtap="onTapArticle"
|
||
data-id="{{item.inlineArticle.id}}"
|
||
data-url="{{item.inlineArticle.url}}"
|
||
data-title="{{item.inlineArticle.title}}"
|
||
data-source-id="{{item.inlineArticle.sourceId}}"
|
||
data-nav-path="{{item.inlineArticle.navPath}}"
|
||
>
|
||
<view class="inline-reco-icons" wx:if="{{item.inlineArticle.icons && item.inlineArticle.icons.length}}">
|
||
<text class="inline-reco-ic" wx:for="{{item.inlineArticle.icons}}" wx:for-item="ic" wx:key="*this">{{ic}}</text>
|
||
</view>
|
||
<view class="inline-reco-bar">
|
||
<text class="inline-reco-label">精选推荐</text>
|
||
<text class="inline-reco-hint">{{item.inlineArticle.readCountLabel || '阅读'}}</text>
|
||
</view>
|
||
<view class="inline-reco-card">
|
||
<image class="inline-reco-cover" src="{{item.inlineArticle.cover || defaultCover}}" mode="aspectFill" />
|
||
<view class="inline-reco-body">
|
||
<text class="inline-reco-title">{{item.inlineArticle.title}}</text>
|
||
<view class="inline-reco-meta">
|
||
<text class="inline-reco-tag">{{item.inlineArticle.tag || 'MBTI'}}</text>
|
||
<text class="inline-reco-time">{{item.inlineArticle.publishedAt}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bubble-meta" wx:if="{{item.isDegraded}}">（降级兜底）</view>
|
||
</view>
|
||
</view>
|
||
<view wx:else class="msg msg-me">
|
||
<view class="bubble bubble-me">
|
||
<text user-select="true">{{item.content}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="typing" wx:if="{{sending}}" id="msg-typing">
|
||
<image class="avatar-ai" src="/images/shenxian-ai-logo.png" mode="aspectFill" />
|
||
<view class="bubble bubble-ai">
|
||
<view class="bubble-ai-inner"><text class="bubble-ai-text">神仙，AI在思考…</text></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="report-cta" wx:if="{{showReportCta}}" bindtap="onTapReportCta">
|
||
<view class="report-cta-text">✨ 聊了这么多，来份专属 AI 深度画像报告？¥9.9</view>
|
||
<view class="report-cta-btn">立即生成</view>
|
||
</view>
|
||
|
||
<view class="scroll-bottom" id="bottom"></view>
|
||
</scroll-view>
|
||
|
||
<!-- 与 Tab 之间的白底垫层，避免聊天记录从输入条/底栏缝隙透出（pointer-events:none 不挡操作） -->
|
||
<view class="ai-bottom-solid" aria-hidden="true" wx:if="{{!auditPurchaseMode}}"></view>
|
||
|
||
<!-- 底部：快捷语（横滑）+ 输入区，固定在 Tab 之上 -->
|
||
<view class="composer-wrap {{quickQuestions.length > 0 ? 'composer-wrap--has-chips' : ''}}" wx:if="{{!auditPurchaseMode}}">
|
||
<view class="quick-chips-outer" wx:if="{{quickQuestions.length > 0}}">
|
||
<scroll-view
|
||
class="quick-chips-scroll"
|
||
scroll-x="{{true}}"
|
||
enhanced="{{true}}"
|
||
show-scrollbar="{{false}}"
|
||
>
|
||
<view class="quick-chips-row">
|
||
<view
|
||
class="quick-chip"
|
||
wx:for="{{quickQuestions}}"
|
||
wx:for-item="q"
|
||
wx:key="*this"
|
||
data-q="{{q}}"
|
||
bindtap="onTapQuick"
|
||
>{{q}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
<view class="quick-chips-edge-fade" aria-hidden="true"></view>
|
||
</view>
|
||
<view class="input-bar">
|
||
<view class="resume-entry" bindtap="onTapUploadResume" hover-class="resume-entry--press">
|
||
<view class="resume-entry-icon" aria-hidden="true"></view>
|
||
<text class="resume-entry-txt">简历</text>
|
||
</view>
|
||
<input
|
||
class="input"
|
||
placeholder="问你想了解的自己"
|
||
placeholder-class="input-ph"
|
||
value="{{draft}}"
|
||
bindinput="onInput"
|
||
bindfocus="onInputFocus"
|
||
bindconfirm="onSend"
|
||
confirm-type="send"
|
||
confirm-hold="true"
|
||
adjust-position="{{true}}"
|
||
maxlength="800"
|
||
disabled="{{sending}}"
|
||
/>
|
||
|
||
<button
|
||
class="send-icon-btn {{draft ? 'send-icon-btn--active' : ''}}"
|
||
bindtap="onSend"
|
||
disabled="{{sending || !draft}}"
|
||
hover-class="send-icon-btn--hover"
|
||
>
|
||
<view class="send-icon-plane"></view>
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|