176 lines
8.7 KiB
Plaintext
176 lines
8.7 KiB
Plaintext
<!-- 卡若创业派对 - 代付详情页（改造后：发起人支付，好友领取） -->
|
||
<view class="page">
|
||
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
|
||
<view class="nav-content">
|
||
<view class="nav-back" bindtap="goBack">
|
||
<icon name="chevron-left" size="44" color="#ffffff" customClass="back-arrow"></icon>
|
||
</view>
|
||
<view class="nav-info">
|
||
<text class="nav-title">{{isInitiator ? '代付分享' : (detail.action === 'redeem' ? '免费领取' : '代付详情')}}</text>
|
||
</view>
|
||
<view class="nav-right-placeholder"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="content" style="padding-top: calc({{statusBarHeight}}px + 88rpx);">
|
||
<block wx:if="{{loading}}">
|
||
<view class="skeleton-wrap">
|
||
<view class="skeleton-hero">
|
||
<view class="skeleton-hero-badge"></view>
|
||
<view class="skeleton-hero-title"></view>
|
||
<view class="skeleton-hero-desc"></view>
|
||
<view class="skeleton-hero-amount"></view>
|
||
</view>
|
||
<view class="skeleton-card">
|
||
<view class="skeleton-avatar"></view>
|
||
<view class="skeleton-info">
|
||
<view class="skeleton-line"></view>
|
||
<view class="skeleton-line short"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<block wx:elif="{{detail}}">
|
||
<!-- 产品 Hero 卡片（订单详情） -->
|
||
<section class="hero-card">
|
||
<view class="hero-glow"></view>
|
||
<view class="hero-inner">
|
||
<view class="hero-decor">
|
||
<image class="hero-decor-img" src="/assets/icons/info.svg" mode="aspectFit"/>
|
||
</view>
|
||
<view class="hero-badge">订单详情</view>
|
||
<text class="hero-title">{{detail.sectionTitle || detail.description || '代付商品'}}</text>
|
||
<text class="hero-desc" wx:if="{{detail.contentPreview}}">{{detail.contentPreview}}</text>
|
||
<view class="hero-footer">
|
||
<view class="hero-amount-wrap" wx:if="{{!isCreateMode}}">
|
||
<text class="hero-amount-label">{{detail.quantity > 1 ? '应付金额（' + detail.quantity + '份）' : '应付金额'}}</text>
|
||
<view class="hero-amount-row">
|
||
<text class="hero-currency">¥</text>
|
||
<text class="hero-amount">{{amountDisplay}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="hero-amount-wrap" wx:elif="{{isCreateMode}}">
|
||
<text class="hero-amount-label">发放份数</text>
|
||
<view class="gift-quantity-row">
|
||
<input class="gift-quantity-input" type="number" value="{{giftQuantity}}" bindinput="onGiftQuantityInput" placeholder="请输入份数"/>
|
||
<text class="hero-amount-label">份 × ¥{{detail.unitPrice || 0}}</text>
|
||
</view>
|
||
<view class="hero-amount-row">
|
||
<text class="hero-currency">¥</text>
|
||
<text class="hero-amount">{{amountDisplay}}</text>
|
||
</view>
|
||
<view class="create-tip">创建后无法退款</view>
|
||
</view>
|
||
<view class="hero-arrow-wrap" bindtap="goToArticle" wx:if="{{!isCreateMode && !isInitiator && detail.productType === 'section' && detail.productId}}">
|
||
<image class="hero-arrow" src="/assets/icons/arrow-right.svg" mode="aspectFit"/>
|
||
</view>
|
||
<view class="hero-arrow-wrap hero-arrow-placeholder" wx:elif="{{!isCreateMode && !isInitiator}}"></view>
|
||
</view>
|
||
</view>
|
||
</section>
|
||
|
||
<!-- 发起人信息（发起人视角不展示） -->
|
||
<section class="requester-card" wx:if="{{!isCreateMode && !isInitiator}}">
|
||
<view class="requester-header" bindtap="goToInitiatorProfile">
|
||
<view class="requester-avatar">
|
||
<image wx:if="{{detail.initiatorAvatar}}" class="avatar-img" src="{{detail.initiatorAvatar}}" mode="aspectFill"/>
|
||
<image wx:else class="avatar-img icon-avatar" src="/assets/icons/user.svg" mode="aspectFit"/>
|
||
</view>
|
||
<view class="requester-info">
|
||
<text class="requester-name">{{detail.initiatorNickname || '好友'}}</text>
|
||
<text class="requester-label">发起代付请求</text>
|
||
</view>
|
||
</view>
|
||
<view class="requester-msg-wrap">
|
||
<view class="requester-msg-bar"></view>
|
||
<text class="requester-msg">{{requesterMsg}}</text>
|
||
</view>
|
||
</section>
|
||
|
||
<!-- 安全徽章（发起人视角不展示） -->
|
||
<view class="security-badge" wx:if="{{!isCreateMode && !isInitiator}}">
|
||
<icon name="shield" size="40" color="#00CED1" customClass="security-icon"></icon>
|
||
<text class="security-text">安全支付保障 · 资金由平台托管</text>
|
||
</view>
|
||
</block>
|
||
<block wx:else>
|
||
<view class="empty">
|
||
<text>代付请求不存在或已处理</text>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<!-- 底部浮动操作栏 -->
|
||
<view class="footer-bar" wx:if="{{detail && !loading}}">
|
||
<view class="footer-bg"></view>
|
||
<view class="footer-inner">
|
||
<view class="footer-summary">
|
||
<text class="footer-label">合计</text>
|
||
<text class="footer-amount">
|
||
<text class="footer-currency">¥</text>{{amountDisplay}}
|
||
</text>
|
||
</view>
|
||
<!-- 单页模式：引导前往小程序 -->
|
||
<view wx:if="{{isSinglePageMode}}" class="footer-tip-single">
|
||
<text>请点击底部「前往小程序」进入完整版后再操作</text>
|
||
</view>
|
||
<!-- 发起人 创建态 或 action=pay：去支付 -->
|
||
<button wx:elif="{{(isCreateMode || (isInitiator && detail.action === 'pay'))}}" class="footer-btn pay-btn" bindtap="doInitiatorPay" disabled="{{paying}}">
|
||
<image class="btn-icon" src="/assets/icons/wallet.svg" mode="aspectFit"/>
|
||
<text>{{paying ? '支付中...' : (isCreateMode ? '去支付' : '立即支付')}}</text>
|
||
</button>
|
||
<!-- 发起人 action=share：发送给好友 -->
|
||
<button wx:elif="{{isInitiator && detail.action === 'share'}}" class="footer-btn share-btn" open-type="share">
|
||
<image class="btn-icon" src="/assets/icons/share.svg" mode="aspectFit"/>
|
||
<text>发送给好友</text>
|
||
</button>
|
||
<!-- 已退款：不可再分享/领取 -->
|
||
<view wx:elif="{{detail.status === 'refunded' || detail.action === 'refunded'}}" class="footer-btn footer-btn-disabled">
|
||
<text>已退款</text>
|
||
</view>
|
||
<!-- 好友 action=redeem：领取并阅读 -->
|
||
<button wx:elif="{{!isInitiator && detail.action === 'redeem'}}" class="footer-btn redeem-btn" bindtap="doRedeem" disabled="{{redeeming}}">
|
||
<image class="btn-icon" src="/assets/icons/arrow-right.svg" mode="aspectFit"/>
|
||
<text>{{redeeming ? '领取中...' : '领取并阅读'}}</text>
|
||
</button>
|
||
<!-- 好友 action=alreadyRedeemed：已领取，去阅读 -->
|
||
<button wx:elif="{{!isInitiator && detail.action === 'alreadyRedeemed'}}" class="footer-btn redeem-btn" bindtap="goToArticle">
|
||
<image class="btn-icon" src="/assets/icons/arrow-right.svg" mode="aspectFit"/>
|
||
<text>已领取，去阅读</text>
|
||
</button>
|
||
<!-- 好友 action=wait：待发起人支付 -->
|
||
<view wx:else class="footer-btn footer-btn-disabled">
|
||
<text>待发起人支付</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 登录弹窗（好友领取时未登录） -->
|
||
<view class="modal-overlay" wx:if="{{showLoginModal}}" bindtap="closeLoginModal">
|
||
<view class="modal-content login-modal" catchtap="stopPropagation">
|
||
<view class="modal-close" bindtap="closeLoginModal"><icon name="x" size="36" color="#8e8e93"></icon></view>
|
||
<view class="login-icon"><icon name="lock" size="80" color="#00CED1"></icon></view>
|
||
<text class="login-title">登录 卡若创业派对</text>
|
||
<text class="login-desc">登录后可免费领取并阅读</text>
|
||
<button class="btn-wechat {{agreeProtocol ? '' : 'btn-wechat-disabled'}}" bindtap="handleWechatLogin" disabled="{{!agreeProtocol}}">
|
||
<text class="btn-wechat-icon">微</text>
|
||
<text>微信快捷登录</text>
|
||
</button>
|
||
<view class="login-agree-row" catchtap="toggleAgree">
|
||
<view class="agree-checkbox {{agreeProtocol ? 'agree-checked' : ''}}"><icon wx:if="{{agreeProtocol}}" name="check" size="24" color="#34C759"></icon></view>
|
||
<text class="agree-text">我已阅读并同意</text>
|
||
<text class="agree-link" bindtap="openUserProtocol">《用户协议》</text>
|
||
<text class="agree-text">和</text>
|
||
<text class="agree-link" bindtap="openPrivacy">《隐私政策》</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 背景光效 -->
|
||
<view class="bg-effects">
|
||
<view class="bg-glow bg-glow-1"></view>
|
||
<view class="bg-glow bg-glow-2"></view>
|
||
<view class="bg-dots"></view>
|
||
</view>
|
||
</view>
|