153 lines
5.8 KiB
Plaintext
153 lines
5.8 KiB
Plaintext
<!-- 订单详情页 -->
|
||
<view class="page-container">
|
||
<!-- 自定义导航栏 -->
|
||
<view class="custom-nav">
|
||
<view class="status-bar" style="height: {{statusBarHeight}}px;"></view>
|
||
<view class="nav-bar">
|
||
<view class="nav-left" bindtap="goBack">
|
||
<image src="/images/icon-chevron-left.png" class="nav-back-icon" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="nav-title">订单详情</view>
|
||
<view class="nav-right"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容区域 -->
|
||
<scroll-view scroll-y class="content" enhanced show-scrollbar="{{false}}" style="padding-top: {{totalNavHeight}}px;">
|
||
<!-- 订单状态卡片 -->
|
||
<view class="status-card">
|
||
<view class="status-icon-wrap {{order.iconBg}}">
|
||
<image src="{{order.icon}}" class="status-icon" mode="aspectFit"></image>
|
||
</view>
|
||
<text class="status-title">{{order.status}}</text>
|
||
<text class="status-desc">{{order.statusDesc}}</text>
|
||
</view>
|
||
|
||
<!-- 订单信息卡片 -->
|
||
<view class="info-card">
|
||
<view class="card-title">订单信息</view>
|
||
|
||
<view class="info-row">
|
||
<text class="info-label">订单类型</text>
|
||
<text class="info-value">{{order.typeName}}</text>
|
||
</view>
|
||
|
||
<view class="info-row">
|
||
<text class="info-label">商品名称</text>
|
||
<text class="info-value">{{order.productName}}</text>
|
||
</view>
|
||
|
||
<view class="info-row">
|
||
<text class="info-label">订单金额</text>
|
||
<view class="info-price">
|
||
<text class="price-symbol">{{order.priceSymbol}}</text>
|
||
<text class="price-value">{{order.price}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="info-row">
|
||
<text class="info-label">支付方式</text>
|
||
<text class="info-value">{{order.payMethod}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单编号卡片 -->
|
||
<view class="info-card">
|
||
<view class="card-title">订单编号</view>
|
||
|
||
<view class="info-row">
|
||
<text class="info-label">订单号</text>
|
||
<view class="info-copy">
|
||
<text class="info-value">{{order.orderNo}}</text>
|
||
<text class="copy-btn" bindtap="onCopyOrderNo">复制</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="info-row">
|
||
<text class="info-label">创建时间</text>
|
||
<text class="info-value">{{order.createTime}}</text>
|
||
</view>
|
||
|
||
<view class="info-row">
|
||
<text class="info-label">支付时间</text>
|
||
<text class="info-value">{{order.payTime}}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部按钮 -->
|
||
<view class="bottom-actions">
|
||
<view class="action-btn outline" bindtap="onContactService">联系客服</view>
|
||
<view class="action-btn primary" wx:if="{{order.canReview}}" bindtap="onReview">评价订单</view>
|
||
<view class="action-btn primary" wx:elif="{{order.canRefund}}" bindtap="onRefund">申请退款</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 评价弹窗 -->
|
||
<view class="review-modal-mask" wx:if="{{showReviewModal}}" bindtap="closeReviewModal"></view>
|
||
<view class="review-modal {{showReviewModal ? 'show' : ''}}" wx:if="{{showReviewModal}}">
|
||
<!-- 弹窗头部 -->
|
||
<view class="review-modal-header">
|
||
<text class="review-modal-title">评价订单</text>
|
||
<view class="review-modal-close" bindtap="closeReviewModal">
|
||
<text class="close-icon">×</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 弹窗内容 -->
|
||
<scroll-view scroll-y class="review-modal-content">
|
||
<!-- 评分选择 -->
|
||
<view class="review-section">
|
||
<text class="section-title">服务评分</text>
|
||
<view class="rating-stars">
|
||
<view class="star-item {{reviewRating >= 1 ? 'active' : ''}}" bindtap="selectRating" data-rating="1">⭐</view>
|
||
<view class="star-item {{reviewRating >= 2 ? 'active' : ''}}" bindtap="selectRating" data-rating="2">⭐</view>
|
||
<view class="star-item {{reviewRating >= 3 ? 'active' : ''}}" bindtap="selectRating" data-rating="3">⭐</view>
|
||
<view class="star-item {{reviewRating >= 4 ? 'active' : ''}}" bindtap="selectRating" data-rating="4">⭐</view>
|
||
<view class="star-item {{reviewRating >= 5 ? 'active' : ''}}" bindtap="selectRating" data-rating="5">⭐</view>
|
||
</view>
|
||
<text class="rating-text">{{reviewRating}}分 - {{reviewRating >= 4 ? '非常满意' : (reviewRating >= 3 ? '一般' : '不满意')}}</text>
|
||
</view>
|
||
|
||
<!-- 标签选择 -->
|
||
<view class="review-section">
|
||
<text class="section-title">选择标签（最多5个）</text>
|
||
<view class="tag-list">
|
||
<view class="tag-item {{selectedTags.indexOf(item) > -1 ? 'active' : ''}}"
|
||
wx:for="{{reviewTags}}" wx:key="*this"
|
||
bindtap="toggleTag" data-tag="{{item}}">
|
||
{{item}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 评价内容 -->
|
||
<view class="review-section">
|
||
<text class="section-title">评价内容</text>
|
||
<textarea class="review-textarea"
|
||
placeholder="请输入您的评价内容（选填）"
|
||
value="{{reviewContent}}"
|
||
bindinput="onReviewInput"
|
||
maxlength="500"></textarea>
|
||
<text class="char-count">{{reviewContent.length}}/500</text>
|
||
</view>
|
||
|
||
<!-- 匿名选项 -->
|
||
<view class="anonymous-section" bindtap="toggleAnonymous">
|
||
<view class="checkbox {{isAnonymous ? 'checked' : ''}}">
|
||
<text wx:if="{{isAnonymous}}">✓</text>
|
||
</view>
|
||
<text class="anonymous-text">匿名评价</text>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<view class="review-modal-footer">
|
||
<button class="submit-btn {{submittingReview ? 'disabled' : ''}}"
|
||
bindtap="submitReview"
|
||
disabled="{{submittingReview}}">
|
||
{{submittingReview ? '提交中...' : '提交评价'}}
|
||
</button>
|
||
</view>
|
||
</view>
|