316 lines
12 KiB
Plaintext
316 lines
12 KiB
Plaintext
<!-- pages/penalty/penalty.wxml -->
|
||
<view class="cfss-container">
|
||
<!-- 顶部统计卡片 -->
|
||
<view class="tongji-card">
|
||
<view class="tongji-title">处罚统计</view>
|
||
<view class="tongji-content">
|
||
<view class="tongji-item">
|
||
<text class="tongji-label">总记录</text>
|
||
<text class="tongji-value">{{ zongshu }}</text>
|
||
</view>
|
||
<view class="tongji-item">
|
||
<text class="tongji-label">待处理</text>
|
||
<text class="tongji-value daichuli-value">{{ daichuli }}</text>
|
||
</view>
|
||
<view class="tongji-item">
|
||
<text class="tongji-label">已处理</text>
|
||
<text class="tongji-value yichuli-value">{{ yichuli }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 类型切换 -->
|
||
<view class="leixing-qiehuan">
|
||
<view
|
||
class="leixing-item {{ shenfen === 0 ? 'leixing-active' : '' }}"
|
||
bindtap="qiehuanShenfen"
|
||
data-type="0"
|
||
>
|
||
<text class="leixing-text">待处理</text>
|
||
<text class="leixing-count">{{ daichuli }}</text>
|
||
</view>
|
||
<view
|
||
class="leixing-item {{ shenfen === 1 ? 'leixing-active' : '' }}"
|
||
bindtap="qiehuanShenfen"
|
||
data-type="1"
|
||
>
|
||
<text class="leixing-text">已处理</text>
|
||
<text class="leixing-count">{{ yichuli }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 处罚记录列表 -->
|
||
<scroll-view
|
||
class="chufa-list"
|
||
scroll-y
|
||
enable-back-to-top
|
||
scroll-with-animation
|
||
style="height: {{ scrollHeight }}px"
|
||
bindscrolltolower="shanglaShuaxin"
|
||
>
|
||
<!-- 加载中 -->
|
||
<view wx:if="{{ jiazhaozhong && chufaList.length === 0 }}" class="jiazai-zhong">
|
||
<view class="loading-animation">
|
||
<view class="loading-dot"></view>
|
||
<view class="loading-dot"></view>
|
||
<view class="loading-dot"></view>
|
||
</view>
|
||
<text>加载中...</text>
|
||
</view>
|
||
|
||
<!-- 🔴【关键修改】处罚记录卡片列表 - 直接使用处理好的字段 -->
|
||
<block wx:for="{{ chufaList }}" wx:key="index">
|
||
<view
|
||
class="chufa-card"
|
||
bindtap="chakanXiangqing"
|
||
data-item="{{ item }}"
|
||
>
|
||
<!-- 卡片顶部：时间和状态 -->
|
||
<view class="card-top">
|
||
<!-- 🔴 直接使用display_time -->
|
||
<text class="shijian">{{ item.display_time }}</text>
|
||
<!-- 🔴 直接使用display_status和status_class -->
|
||
<view class="zhuangtai-badge {{ item.status_class }}">
|
||
{{ item.display_status }}
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 申请人信息 -->
|
||
<view class="qingqiu-row">
|
||
<text class="qingqiu-label">申请人：</text>
|
||
<text class="qingqiu-value">{{ item.qingqiuid || '--' }}</text>
|
||
</view>
|
||
|
||
<!-- 处罚理由 -->
|
||
<view class="liyou-row">
|
||
<text class="liyou-label">处罚理由：</text>
|
||
<text class="liyou-value">{{ item.cfliyou || '无' }}</text>
|
||
</view>
|
||
|
||
<!-- 订单编号 -->
|
||
<view class="dingdan-row">
|
||
<text class="dingdan-label">订单编号：</text>
|
||
<text class="dingdan-value">{{ item.dingdan_id || '--' }}</text>
|
||
</view>
|
||
|
||
<!-- 卡片边框效果 -->
|
||
<view class="card-border"></view>
|
||
<view class="card-glow"></view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 加载更多 -->
|
||
<view wx:if="{{ jiazhaigengduo }}" class="jiazai-gengduo">
|
||
<view class="scan-line"></view>
|
||
<text>加载更多...</text>
|
||
</view>
|
||
|
||
<!-- 没有更多数据 -->
|
||
<view wx:if="{{ !haiyougengduo && chufaList.length > 0 }}" class="meiyou-gengduo">
|
||
<text>—— 没有更多记录了 ——</text>
|
||
</view>
|
||
|
||
<!-- 空状态 -->
|
||
<view wx:if="{{ !jiazhaozhong && chufaList.length === 0 }}" class="kong-zhuangtai">
|
||
<view class="empty-icon">⚡</view>
|
||
<text class="empty-text">暂无处罚记录</text>
|
||
<text class="empty-subtext">所有事务已处理完毕</text>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 处罚详情弹窗 -->
|
||
<view wx:if="{{ showXiangqing }}" class="xiangqing-modal">
|
||
<view class="modal-mask" bindtap="guanbiXiangqing"></view>
|
||
<view class="modal-content">
|
||
<!-- 弹窗头部 -->
|
||
<view class="modal-header">
|
||
<text class="modal-title">处罚详情</text>
|
||
<view class="modal-close" bindtap="guanbiXiangqing">
|
||
<text class="close-icon">×</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 🔴【弹窗主体 - 确保可以滚动】 -->
|
||
<scroll-view class="modal-body" scroll-y style="max-height: 1000rpx;">
|
||
<!-- 基本信息 -->
|
||
<view class="detail-section">
|
||
<view class="section-title">基本信息</view>
|
||
<view class="detail-row">
|
||
<text class="detail-label">订单编号：</text>
|
||
<view class="detail-value-container">
|
||
<text class="detail-value">{{ xuanzhongChufa.dingdan_id || '--' }}</text>
|
||
<text class="fuzhi-btn" bindtap="fuzhiWenben" data-text="{{ xuanzhongChufa.dingdan_id }}">复制</text>
|
||
</view>
|
||
</view>
|
||
<view class="detail-row">
|
||
<text class="detail-label">申请人ID：</text>
|
||
<view class="detail-value-container">
|
||
<text class="detail-value">{{ xuanzhongChufa.qingqiuid || '--' }}</text>
|
||
<text class="fuzhi-btn" bindtap="fuzhiWenben" data-text="{{ xuanzhongChufa.qingqiuid }}">复制</text>
|
||
</view>
|
||
</view>
|
||
<view class="detail-row">
|
||
<!-- 🔴 直接使用display_time -->
|
||
<text class="detail-label">创建时间：</text>
|
||
<text class="detail-value">{{ xuanzhongChufa.display_time || '--' }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 处罚信息 -->
|
||
<view class="detail-section">
|
||
<view class="section-title">处罚信息</view>
|
||
<view class="detail-row">
|
||
<text class="detail-label">处罚状态：</text>
|
||
<!-- 🔴 直接使用display_status和status_class -->
|
||
<view class="zhuangtai-badge-inline {{ xuanzhongChufa.status_class }}">
|
||
{{ xuanzhongChufa.display_status }}
|
||
</view>
|
||
</view>
|
||
<view class="detail-row full-row">
|
||
<text class="detail-label">处罚理由：</text>
|
||
<text class="detail-value liyou-full">{{ xuanzhongChufa.cfliyou || '无' }}</text>
|
||
</view>
|
||
|
||
<!-- 🔴 证据图片展示 - 直接使用full_zhengju_tupian -->
|
||
<view wx:if="{{ xuanzhongChufa.full_zhengju_tupian && xuanzhongChufa.full_zhengju_tupian.length > 0 }}" class="detail-row full-row">
|
||
<text class="detail-label">证据图片：</text>
|
||
<view class="tupian-grid">
|
||
<block wx:for="{{ xuanzhongChufa.full_zhengju_tupian }}" wx:key="index">
|
||
<view class="tupian-item" bindtap="yulanTupian" data-url="{{ item }}" data-urls="{{ xuanzhongChufa.full_zhengju_tupian }}">
|
||
<image
|
||
src="{{ item }}"
|
||
class="tupian-image"
|
||
mode="aspectFill"
|
||
/>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 申诉信息 -->
|
||
<view wx:if="{{ xuanzhongChufa.ssliyou || (xuanzhongChufa.full_shensu_tupian && xuanzhongChufa.full_shensu_tupian.length > 0) }}" class="detail-section">
|
||
<view class="section-title">申诉信息</view>
|
||
<view wx:if="{{ xuanzhongChufa.ssliyou }}" class="detail-row full-row">
|
||
<text class="detail-label">申诉理由：</text>
|
||
<text class="detail-value liyou-full">{{ xuanzhongChufa.ssliyou }}</text>
|
||
</view>
|
||
<!-- 🔴 申诉图片展示 - 直接使用full_shensu_tupian -->
|
||
<view wx:if="{{ xuanzhongChufa.full_shensu_tupian && xuanzhongChufa.full_shensu_tupian.length > 0 }}" class="detail-row full-row">
|
||
<text class="detail-label">申诉图片：</text>
|
||
<view class="tupian-grid">
|
||
<block wx:for="{{ xuanzhongChufa.full_shensu_tupian }}" wx:key="index">
|
||
<view class="tupian-item" bindtap="yulanTupian" data-url="{{ item }}" data-urls="{{ xuanzhongChufa.full_shensu_tupian }}">
|
||
<image
|
||
src="{{ item }}"
|
||
class="tupian-image"
|
||
mode="aspectFill"
|
||
/>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 弹窗底部按钮 -->
|
||
<view class="modal-footer">
|
||
<view class="cbtn-group">
|
||
<!-- 联系客服按钮（始终显示） -->
|
||
<view class="cbtn cbtn-kefu" bindtap="lianxiKefu">
|
||
<text>联系客服</text>
|
||
</view>
|
||
<!-- 申诉按钮（只有待处罚状态可点击） -->
|
||
<view
|
||
class="cbtn {{ xuanzhongChufa.sqzhuangtai === 0 ? 'cbtn-shensu' : 'cbtn-shensu-disabled' }}"
|
||
bindtap="{{ xuanzhongChufa.sqzhuangtai === 0 ? 'openShensuModal' : '' }}"
|
||
>
|
||
<text>申诉</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 申诉弹窗 -->
|
||
<view wx:if="{{ showShensuModal }}" class="shensu-modal">
|
||
<view class="modal-mask" bindtap="closeShensuModal"></view>
|
||
<view class="modal-content small-modal">
|
||
<view class="modal-header">
|
||
<text class="modal-title">提交申诉</text>
|
||
</view>
|
||
<view class="modal-body">
|
||
<!-- 申诉理由输入 -->
|
||
<view class="input-group">
|
||
<view class="input-label">申诉理由</view>
|
||
<textarea
|
||
class="shensu-textarea"
|
||
value="{{ shensuLiyou }}"
|
||
bindinput="onShensuLiyouInput"
|
||
placeholder="请输入申诉理由（最多500字）..."
|
||
maxlength="500"
|
||
auto-height
|
||
/>
|
||
<view class="word-count">{{ shensuLiyou.length }}/500</view>
|
||
</view>
|
||
|
||
<!-- 申诉图片上传 -->
|
||
<view class="input-group">
|
||
<view class="input-label">申诉图片</view>
|
||
<view class="upload-tip">最多可上传9张图片</view>
|
||
|
||
<!-- 图片网格 -->
|
||
<view class="tupian-grid-upload">
|
||
<!-- 已上传图片 -->
|
||
<block wx:for="{{ shensuTupian }}" wx:key="index">
|
||
<view class="tupian-item-upload">
|
||
<image
|
||
src="{{ item }}"
|
||
class="tupian-image-upload"
|
||
mode="aspectFill"
|
||
bindtap="yulanShensuTupian"
|
||
data-index="{{ index }}"
|
||
/>
|
||
<view class="tupian-delete" bindtap="deleteShensuTupian" data-index="{{ index }}">
|
||
<text>×</text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
|
||
<!-- 添加按钮 -->
|
||
<view
|
||
wx:if="{{ shensuTupian.length < 9 }}"
|
||
class="tupian-add-btn"
|
||
bindtap="chooseShensuTupian"
|
||
>
|
||
<view class="add-icon">+</view>
|
||
<text class="add-text">添加图片</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 上传进度 -->
|
||
<view wx:if="{{ shangchuanZongshu > 0 }}" class="upload-progress">
|
||
<view class="progress-title">上传进度</view>
|
||
<view class="progress-bar">
|
||
<view class="progress-inner" style="width: {{ jinduWidth }}"></view>
|
||
</view>
|
||
<view class="progress-text">{{ shangchuanJindu }}/{{ shangchuanZongshu }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="modal-footer">
|
||
<view class="cbtn-group">
|
||
<view class="cbtn cbtn-quxiao" bindtap="closeShensuModal">
|
||
<text>取消</text>
|
||
</view>
|
||
<view class="cbtn cbtn-queren" bindtap="submitShensu">
|
||
<text>提交申诉</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 全局通知组件 -->
|
||
<global-notification id="global-notification" />
|
||
</view> |