From 103013c1bf8f34c23a6c42b0a3a8a1a0b9e38a0e Mon Sep 17 00:00:00 2001
From: maclien <421129572@qq.com>
Date: Tue, 24 Jun 2025 06:31:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=A0=B8=E9=94=80=E8=AE=B0=E5=BD=95):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=A0=B8=E9=94=80=E8=AE=B0=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=8A=9F=E8=83=BD=E5=8F=8A=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

实现核销记录页面的完整功能，包括：
- 日期选择器组件
- 订单列表展示
- 优惠券信息卡片
- 搜索功能
- 订单详情查看
- 完整的页面样式
---
 pages/customer/score/exchange.js   |  68 +++++++
 pages/customer/score/exchange.wxml |  85 ++++++++-
 pages/customer/score/exchange.wxss | 278 ++++++++++++++++++++++++++++-
 3 files changed, 428 insertions(+), 3 deletions(-)

diff --git a/pages/customer/score/exchange.js b/pages/customer/score/exchange.js
index e2a7ee5..4294d81 100644
--- a/pages/customer/score/exchange.js
+++ b/pages/customer/score/exchange.js
@@ -5,7 +5,75 @@ Page({
    * 页面的初始数据
    */
   data: {
+    startDate: '2025-05-18',
+    endDate: '',
+    orderList: [
+      {
+        id: 1,
+        orderNumber: 'LC202505101913247',
+        customerName: '李先生',
+        customerPhone: '138****382',
+        points: 3000,
+        couponAmount: 2000,
+        couponTitle: '购车补贴',
+        validityPeriod: '2025-01-01~2025-12-12',
+        orderTime: '2025-05-10 19:13'
+      },
+      {
+        id: 2,
+        orderNumber: 'LC202505101913247',
+        customerName: '李先生',
+        customerPhone: '138****382',
+        points: 3000,
+        couponAmount: 2000,
+        couponTitle: '购车补贴',
+        validityPeriod: '2025-01-01~2025-12-12',
+        orderTime: '2025-05-10 19:13'
+      }
+    ]
+  },
 
+  /**
+   * 开始日期选择
+   */
+  onStartDateChange(e) {
+    this.setData({
+      startDate: e.detail.value
+    });
+  },
+
+  /**
+   * 结束日期选择
+   */
+  onEndDateChange(e) {
+    this.setData({
+      endDate: e.detail.value
+    });
+  },
+
+  /**
+   * 搜索按钮点击
+   */
+  onSearch() {
+    console.log('搜索', this.data.startDate, this.data.endDate);
+    // 这里可以添加搜索逻辑
+  },
+
+  /**
+   * 查看订单详情
+   */
+  viewOrderDetail(e) {
+    const orderId = e.currentTarget.dataset.id;
+    console.log('查看订单详情', orderId);
+    // 这里可以跳转到订单详情页面
+  },
+
+  /**
+   * 查看优惠券使用规则
+   */
+  viewCouponRules() {
+    console.log('查看优惠券使用规则');
+    // 这里可以显示优惠券使用规则弹窗
   },
 
   /**
diff --git a/pages/customer/score/exchange.wxml b/pages/customer/score/exchange.wxml
index 62f9bf8..bb3951c 100644
--- a/pages/customer/score/exchange.wxml
+++ b/pages/customer/score/exchange.wxml
@@ -1,4 +1,85 @@
 <!--pages/customer/score/exchange.wxml-->
-<view class="container" style="min-height:100vh;">
-    
+<view class="container">
+  <!-- 顶部导航栏 -->
+  <view class="header">
+    <view class="back-btn">
+      <text class="iconfont icon-back">‹</text>
+    </view>
+    <view class="title">核销记录</view>
+    <view class="menu-btn">
+      <text class="dots">⋯</text>
+      <view class="record-btn">📹</view>
+    </view>
+  </view>
+
+  <!-- 日期选择区域 -->
+  <view class="date-section">
+    <view class="date-picker">
+      <picker mode="date" value="{{startDate}}" bindchange="onStartDateChange">
+        <view class="date-input">
+          <text class="date-icon">📅</text>
+          <text class="date-text">{{startDate || '2025.05.18 12'}}</text>
+        </view>
+      </picker>
+      <text class="date-separator">-</text>
+      <picker mode="date" value="{{endDate}}" bindchange="onEndDateChange">
+        <view class="date-input">
+          <text class="date-icon">📅</text>
+          <text class="date-text">{{endDate || '请选择结束时间'}}</text>
+        </view>
+      </picker>
+    </view>
+    <view class="search-btn" bindtap="onSearch">
+      <text>搜索</text>
+    </view>
+  </view>
+
+  <!-- 订单列表 -->
+  <view class="order-list">
+    <view class="order-item" wx:for="{{orderList}}" wx:key="id">
+      <!-- 订单编号和详情按钮 -->
+      <view class="order-header">
+        <text class="order-number">订单编号 {{item.orderNumber}}</text>
+        <view class="order-detail-btn" bindtap="viewOrderDetail" data-id="{{item.id}}">
+          <text>订单详情 ></text>
+        </view>
+      </view>
+
+      <!-- 客户信息 -->
+      <view class="customer-info">
+        <text class="customer-name">{{item.customerName}}</text>
+        <text class="customer-phone">({{item.customerPhone}})</text>
+        <view class="points-info">
+          <text class="points-label">消耗积分:</text>
+          <text class="points-value">{{item.points}}</text>
+        </view>
+      </view>
+
+      <!-- 优惠券信息 -->
+      <view class="coupon-card">
+        <view class="coupon-left">
+          <text class="coupon-amount">{{item.couponAmount}}</text>
+          <text class="coupon-unit">元</text>
+          <view class="coupon-rules" bindtap="viewCouponRules">
+            <text>使用规则 ></text>
+          </view>
+        </view>
+        <view class="coupon-divider"></view>
+        <view class="coupon-right">
+          <text class="coupon-title">{{item.couponTitle}}</text>
+          <text class="coupon-validity">时限 {{item.validityPeriod}}</text>
+        </view>
+      </view>
+
+      <!-- 下单时间 -->
+      <view class="order-time">
+        <text>下单时间: {{item.orderTime}}</text>
+      </view>
+    </view>
+  </view>
+
+  <!-- 空状态 -->
+  <view class="empty-state" wx:if="{{orderList.length === 0}}">
+    <text>暂无核销记录</text>
+  </view>
 </view>
\ No newline at end of file
diff --git a/pages/customer/score/exchange.wxss b/pages/customer/score/exchange.wxss
index 3fe6e89..467a036 100644
--- a/pages/customer/score/exchange.wxss
+++ b/pages/customer/score/exchange.wxss
@@ -1 +1,277 @@
-/* pages/customer/score/exchange.wxss */
\ No newline at end of file
+/* pages/customer/score/exchange.wxss */
+
+.container {
+  min-height: 100vh;
+  background-color: #f5f5f5;
+}
+
+/* 顶部导航栏 */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 15px;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+}
+
+.back-btn {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.back-btn .icon-back {
+  font-size: 24px;
+  color: #333;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+}
+
+.menu-btn {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.dots {
+  font-size: 20px;
+  color: #666;
+}
+
+.record-btn {
+  width: 30px;
+  height: 30px;
+  background-color: #666;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+}
+
+/* 日期选择区域 */
+.date-section {
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  background-color: #fff;
+  margin-bottom: 10px;
+  gap: 15px;
+}
+
+.date-picker {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.date-input {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #fff;
+}
+
+.date-icon {
+  font-size: 16px;
+}
+
+.date-text {
+  font-size: 14px;
+  color: #333;
+}
+
+.date-separator {
+  font-size: 16px;
+  color: #666;
+}
+
+.search-btn {
+  padding: 8px 20px;
+  background-color: #4CAF50;
+  color: white;
+  border-radius: 20px;
+  font-size: 14px;
+}
+
+/* 订单列表 */
+.order-list {
+  padding: 0 15px;
+}
+
+.order-item {
+  background-color: #fff;
+  border-radius: 8px;
+  margin-bottom: 15px;
+  padding: 15px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* 订单头部 */
+.order-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 15px;
+}
+
+.order-number {
+  font-size: 14px;
+  color: #4CAF50;
+}
+
+.order-detail-btn {
+  color: #4CAF50;
+  font-size: 14px;
+}
+
+/* 客户信息 */
+.customer-info {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  gap: 10px;
+}
+
+.customer-name {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+
+.customer-phone {
+  font-size: 14px;
+  color: #666;
+}
+
+.points-info {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.points-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.points-value {
+  font-size: 14px;
+  color: #ff4444;
+  font-weight: 500;
+}
+
+/* 优惠券卡片 */
+.coupon-card {
+  display: flex;
+  background: linear-gradient(135deg, #ffebee 0%, #fff 100%);
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: 15px;
+  position: relative;
+}
+
+.coupon-left {
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 120px;
+  background-color: #ffebee;
+}
+
+.coupon-amount {
+  font-size: 32px;
+  font-weight: bold;
+  color: #ff4444;
+  line-height: 1;
+}
+
+.coupon-unit {
+  font-size: 16px;
+  color: #ff4444;
+  margin-bottom: 10px;
+}
+
+.coupon-rules {
+  font-size: 12px;
+  color: #666;
+}
+
+.coupon-divider {
+  width: 2px;
+  background: repeating-linear-gradient(
+    to bottom,
+    transparent 0px,
+    transparent 5px,
+    #ddd 5px,
+    #ddd 10px
+  );
+  position: relative;
+}
+
+.coupon-divider::before,
+.coupon-divider::after {
+  content: '';
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background-color: #f5f5f5;
+  border-radius: 50%;
+  left: -5px;
+}
+
+.coupon-divider::before {
+  top: -6px;
+}
+
+.coupon-divider::after {
+  bottom: -6px;
+}
+
+.coupon-right {
+  flex: 1;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.coupon-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.coupon-validity {
+  font-size: 14px;
+  color: #666;
+}
+
+/* 下单时间 */
+.order-time {
+  font-size: 12px;
+  color: #999;
+}
+
+/* 空状态 */
+.empty-state {
+  text-align: center;
+  padding: 50px 20px;
+  color: #999;
+  font-size: 14px;
+}
\ No newline at end of file