110 lines
4.4 KiB
Plaintext
110 lines
4.4 KiB
Plaintext
<!-- Soul创业派对 - 代付详情页（参考 yulan：代付视角+发起视角，忽略 nav） -->
|
||
<view class="page">
|
||
<view class="nav-bar" style="padding-top: {{statusBarHeight}}px;">
|
||
<view class="nav-content">
|
||
<view class="nav-back" bindtap="goBack">
|
||
<text class="back-arrow">←</text>
|
||
</view>
|
||
<view class="nav-info">
|
||
<text class="nav-title">{{isInitiator ? '找朋友代付' : '帮他付款'}}</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="loading-box">
|
||
<view class="loading-spinner"></view>
|
||
<text class="loading-text">加载中...</text>
|
||
</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">
|
||
<text class="hero-amount-label">应付金额</text>
|
||
<view class="hero-amount-row">
|
||
<text class="hero-currency">¥</text>
|
||
<text class="hero-amount">{{amountDisplay}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="hero-arrow-wrap" bindtap="goToArticle" wx:if="{{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:else></view>
|
||
</view>
|
||
</view>
|
||
</section>
|
||
|
||
<!-- 发起人信息 -->
|
||
<section class="requester-card">
|
||
<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">
|
||
<text class="security-icon">🛡</text>
|
||
<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>
|
||
<!-- 发起人：分享给好友 -->
|
||
<button wx:if="{{isInitiator}}" class="footer-btn share-btn" open-type="share">
|
||
<image class="btn-icon" src="/assets/icons/share.svg" mode="aspectFit"/>
|
||
<text>发送给好友</text>
|
||
</button>
|
||
<!-- 好友：帮他付款 -->
|
||
<button wx:else class="footer-btn pay-btn" bindtap="doPay" disabled="{{paying}}">
|
||
<image class="btn-icon" src="/assets/icons/wallet.svg" mode="aspectFit"/>
|
||
<text>{{paying ? '支付中...' : '立即帮他付款'}}</text>
|
||
</button>
|
||
</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>
|