兑换记录

src/api/profile.js

@@ -76,3 +76,5 @@ export const getLotteryPrize = () => request({ url: "/index/get_lottery_prize",
 export const exchangePrize = (data) => request({ url: "/index/exchange_prize", method: "post", data, loading: true });
 // 设置收货地址 
 export const bindAddress = (data) => request({ url: "/index/bind_address", method: "post", data, loading: true });
+// 获取兑换记录
+export const getLotteryRecord = () => request({ url: "/index/get_lottery_record", method: "get", loading: true });

src/views/dhjilu.vue

@@ -12,20 +12,42 @@
     <div class="dhjilu-container">
       <div class="content-wrapper">
         <!-- 记录列表 -->
-        <div class="records-list">
-          <div 
-            v-for="(record, index) in exchangeRecords" 
-            :key="record.id"
-            class="record-item"
-          >
-            <div class="record-content">
-              <div class="record-number">奖品{{ getChineseNumber(index + 1) }}</div>
-              <div class="record-name">{{ record.productName }}</div>
-              <div class="record-price">价值{{ record.value }}元</div>
-              <div class="record-count">{{ record.count }}份</div>
+        <div v-if="exchangeRecords.length > 0" class="record-list">
+          <div class="record-card" v-for="item in exchangeRecords" :key="item.id">
+            <div class="row main-row">
+              <span class="label">商品名称：</span>
+              <span class="value name">{{ item.prize_name }}</span>
+            </div>
+            <div class="row">
+              <span class="label">兑换时间：</span>
+              <span class="value">{{ formatTime(item.create_time) }}</span>
+            </div>
+            <div class="row">
+              <span class="label">发货状态：</span>
+              <span class="value status" :class="'status-' + item.status">{{ getStatusText(item.status) }}</span>
+            </div>
+            <div class="row">
+              <span class="label">快递单号：</span>
+              <span class="value">{{ item.tranumber || '-' }}</span>
+            </div>
+            <div class="row">
+              <span class="label">收货人：</span>
+              <span class="value">{{ item.name || '-' }}</span>
+            </div>
+            <div class="row">
+              <span class="label">电话：</span>
+              <span class="value">{{ item.phone || '-' }}</span>
+            </div>
+            <div class="row">
+              <span class="label">地址：</span>
+              <span class="value">{{ item.address || '-' }}</span>
             </div>
           </div>
         </div>
+        <div v-else class="empty-state">
+          <div class="icon">😕</div>
+          <div class="text">暂无记录</div>
+        </div>
       </div>
     </div>
 
@@ -36,6 +58,7 @@
 
 <script>
 import Toast from '@/components/Toast.vue';
+import { getLotteryRecord } from '@/api/profile';
 
 export default {
   name: 'DhjiluPage',
@@ -44,53 +67,7 @@ export default {
   },
   data() {
     return {
-      exchangeRecords: [
-        {
-          id: 1,
-          productName: '小米手机',
-          value: 5999,
-          count: 0,
-          points: 100,
-          exchangeTime: '2024-01-15 14:30:00',
-          status: 'completed'
-        },
-        {
-          id: 2,
-          productName: '片仔癀',
-          value: 18000,
-          count: 0,
-          points: 200,
-          exchangeTime: '2024-01-14 16:20:00',
-          status: 'pending'
-        },
-        {
-          id: 3,
-          productName: '野山参',
-          value: 38888,
-          count: 1,
-          points: 300,
-          exchangeTime: '2024-01-13 09:15:00',
-          status: 'completed'
-        },
-        {
-          id: 4,
-          productName: '纪念金条',
-          value: 78000,
-          count: 0,
-          points: 400,
-          exchangeTime: '2024-01-12 11:45:00',
-          status: 'pending'
-        },
-        {
-          id: 5,
-          productName: '劳力士金表',
-          value: 88000,
-          count: 0,
-          points: 500,
-          exchangeTime: '2024-01-11 15:30:00',
-          status: 'pending'
-        }
-      ]
+      exchangeRecords: []
     }
   },
   mounted() {
@@ -100,22 +77,42 @@ export default {
     // 加载兑换记录
     async loadExchangeRecords() {
       try {
-        // 这里应该调用真实的API
-        // const response = await getExchangeRecords();
-        // this.exchangeRecords = response.data;
-        
-        // 当前使用模拟数据，实际开发时替换为API调用
-        console.log('兑换记录加载完成');
+        const res = await getLotteryRecord();
+        console.log('res:', res);
+        this.exchangeRecords = Array.isArray(res.data) ? res.data : [];
+        console.log('records:', this.exchangeRecords);
       } catch (error) {
-        console.error('加载兑换记录失败:', error);
-        this.$refs.toast.show('加载记录失败', 'error');
+        this.exchangeRecords = [];
+        this.$refs.toast && this.$refs.toast.show('加载记录失败', 'error');
       }
     },
-
-    // 转换数字为中文
-    getChineseNumber(num) {
-      const chineseNumbers = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十'];
-      return chineseNumbers[num - 1] || num;
+    // 状态文本
+    getStatusText(status) {
+      const map = {
+        '0': '备货中',
+        '1': '已发货'
+      };
+      return map[String(status)] || status || '-';
+    },
+    // 时间格式化
+    formatTime(ts) {
+      if (!ts) return '-';
+      // 支持时间戳（秒/毫秒）或字符串
+      let date;
+      if (typeof ts === 'number' || /^\d+$/.test(ts)) {
+        if (String(ts).length === 10) date = new Date(ts * 1000);
+        else date = new Date(Number(ts));
+      } else {
+        date = new Date(ts);
+      }
+      if (isNaN(date.getTime())) return '-';
+      const y = date.getFullYear();
+      const m = String(date.getMonth() + 1).padStart(2, '0');
+      const d = String(date.getDate()).padStart(2, '0');
+      const h = String(date.getHours()).padStart(2, '0');
+      const min = String(date.getMinutes()).padStart(2, '0');
+      const s = String(date.getSeconds()).padStart(2, '0');
+      return `${y}-${m}-${d} ${h}:${min}:${s}`;
     }
   }
 }
@@ -174,59 +171,62 @@ export default {
 }
 
 /* 记录列表 */
-.records-list {
+.record-list {
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 18px;
 }
 
-.record-item {
-  background: linear-gradient(135deg, #f5a5a5 0%, #f0b8b8 100%);
-  border-radius: 12px;
-  padding: 20px 15px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-  transition: transform 0.2s ease;
+.record-card {
+  background: #fff0f0;
+  border-radius: 14px;
+  padding: 18px 16px;
+  box-shadow: 0 2px 8px rgba(180,58,57,0.08);
+  margin-bottom: 0;
 }
 
-.record-item:active {
-  transform: scale(0.98);
+.row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 7px;
+  font-size: 15px;
 }
 
-.record-content {
-  display: grid;
-  grid-template-columns: auto 1fr auto auto;
-  align-items: center;
-  gap: 15px;
+.row:last-child {
+  margin-bottom: 0;
 }
 
-.record-number {
-  font-size: 16px;
+.label {
+  color: #b43a39;
   font-weight: 600;
-  color: #d91d42;
-  min-width: 50px;
+  min-width: 80px;
 }
 
-.record-name {
-  font-size: 16px;
-  font-weight: 500;
+.value {
   color: #333;
-  text-align: left;
+  font-weight: 500;
+  word-break: break-all;
 }
 
-.record-price {
+.value.name {
   font-size: 16px;
-  font-weight: 600;
-  color: #d91d42;
-  text-align: right;
-  min-width: 90px;
+  font-weight: bold;
 }
 
-.record-count {
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-  text-align: right;
-  min-width: 30px;
+.value.status {
+  font-weight: bold;
+}
+
+.status-0 {
+  color: #e67c00;
+}
+
+.status-1 {
+  color: #1bbf1b;
+}
+
+.main-row {
+  margin-bottom: 10px;
 }
 
 /* 响应式优化 */
@@ -235,37 +235,28 @@ export default {
     padding: 15px;
   }
   
-  .record-content {
-    gap: 10px;
+  .record-card {
+    padding: 12px 8px;
   }
   
-  .record-number,
-  .record-name,
-  .record-price,
-  .record-count {
+  .label {
+    min-width: 60px;
     font-size: 14px;
   }
   
-  .record-item {
-    padding: 15px 12px;
+  .value {
+    font-size: 14px;
   }
 }
 
 @media screen and (max-width: 320px) {
-  .record-content {
-    gap: 8px;
+  .label {
+    min-width: 80px;
   }
   
-  .record-number,
-  .record-name,
-  .record-price,
-  .record-count {
+  .value {
     font-size: 13px;
   }
-  
-  .record-price {
-    min-width: 80px;
-  }
 }
 
 /* 空状态 */