财富金轮抽奖记录

src/api/goldenWheel.js

@@ -19,4 +19,12 @@ export const lotteryApi = function (params) {
         method: "post",
         data: params,
     });
+};
+//Link财富金轮---历史记录
+export const historyApi = function (params) {
+    return request({
+        url: `${LinkScmsUrl}/api/goldWheel/getRecords`,
+        method: "post",
+        data: params,
+    });
 };

src/router/index.js

@@ -75,14 +75,7 @@ const routes = [
         name: 'goldenWheel',
         component: () => import('@/views/wealth/goldenWheel.vue')
 
-    },
-    {
-
-        path: '/history',
-        name: 'history',
-        component: () => import('@/views/wealth/history.vue')
-
-    },
+    }
 
 ]
 // 创建路由实例

src/views/wealth/goldenWheel.vue

@@ -4,7 +4,7 @@
     <div class="top-section">
       <div class="expire-time">财富金轮到期时间：{{ expireTime }}</div>
       <div class="top-right">
-        <div class="icon-item" @click="goToHistory">
+        <div class="icon-item" @click="toggleHistory">
           <img :src="historyImg" class="history-icon" alt="历史记录">
           <span class="icon-text">历史记录</span>
         </div>
@@ -124,12 +124,109 @@
         </div>
       </div>
     </div>
+
+    <!-- 右侧历史记录侧板 -->
+    <div class="history-record" v-if="historyRecordListVisible">
+      <!-- 折叠按钮（点击再次关闭） -->
+      <img src="../../assets/img/wealthGoldenWheel/foldUpIcon.png"
+           class="fold-up" @click="toggleHistory" />
+
+      <div class="history-title">中奖记录</div>
+
+      <div style="margin-left: 45px; margin-top: 18px;">
+        <button v-for="item in options" :key="item.value"
+                :style="{
+                  backgroundColor: selected === item.value ? '#0003bf' : '#7475b2',
+                  borderColor: selected === item.value ? '#0003bf' : '#7475b2',
+                  color: '#fff',
+                  marginRight: '24px',
+                  padding: '6px 18px',
+                  borderRadius: '8px',
+                  border: 'none',
+                  cursor: 'pointer'
+                }"
+                @click="changeTypeHistoryList(item)">
+          {{ item.label }}
+        </button>
+      </div>
+
+      <div class="history-contents">
+        <!-- nowMonths（当前年） -->
+        <div v-if="nowMonths && nowMonths.length > 0" style="padding-left:45px;">
+          <div v-for="m in nowMonths" :key="m.month">
+            <div class="month-row" @click="toggleMonthNow(m)">
+              <span class="month-text">{{ m.month }}</span>
+              <span class="month-caret">{{ m.open ? '▼' : '▲' }}</span>
+            </div>
+
+            <div v-if="m.open">
+              <div v-if="!m.records || m.records.length === 0" class="empty-month">暂无记录</div>
+              <div v-for="(item, idx) in m.records" :key="item.id || idx" class="history-record-item">
+                <div class="left">
+                  <div class="title" v-if="selected == 1">
+                    <span class="circle"></span>财富金轮—{{ item.type }}
+                  </div>
+                  <div class="title" v-else-if="selected == 3">
+                    <span class="circle"></span>{{ item.type }}
+                  </div>
+                  <div class="time">{{ item.time }}</div>
+                </div>
+                <div class="right">
+                  <span class="token">+ {{ item.amount }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 历史年列表 -->
+        <div v-if="years && years.length > 0">
+          <div v-for="y in years" :key="y.year">
+            <div class="year-header" @click="toggleYear(y)" style="padding-left:14px;">
+              <span class="year-text">{{ y.year }}年</span>
+              <span class="year-caret">{{ y.expanded ? '▼' : '▲' }}</span>
+            </div>
+            <div v-if="y.expanded" class="months" style="padding-left:45px;">
+              <div v-for="m in y.months" :key="m.month">
+                <div class="month-row" @click="toggleMonth(m)">
+                  <span class="month-text">{{ m.month }}</span>
+                  <span class="month-caret">{{ m.open ? '▼' : '▲' }}</span>
+                </div>
+
+                <div v-if="m.open">
+                  <div v-if="!m.records || m.records.length === 0" class="empty-month">暂无记录</div>
+                  <div v-for="(item, idx) in m.records" :key="item.id || idx" class="history-record-item">
+                    <div class="left">
+                      <div class="title" v-if="selected == 1">
+                        <span class="circle"></span>财富金轮—{{ item.type }}
+                      </div>
+                      <div class="title" v-else-if="selected == 3">
+                        <span class="circle"></span>{{ item.type }}
+                      </div>
+                      <div class="time">{{ item.time }}</div>
+                    </div>
+                    <div class="right">
+                      <span class="token">+ {{ item.amount }}</span>
+                    </div>
+                  </div>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- 底部装饰 -->
+      <div class="history-decoration" aria-hidden="true"></div>
+    </div>
   </div>
 </template>
 
 <script>
 import api from '@/utils/common.js'
-import { permissionApi, lotteryApi } from '@/api/goldenWheel'
+import { permissionApi, lotteryApi,historyApi } from '@/api/goldenWheel'
 
 export default {
   name: 'FortuneWheel',
@@ -165,7 +262,16 @@ export default {
       noTimesTimer: null,
       prizeMessage: '',
       prizeAmount: '',
-      textWidth: 0
+      textWidth: 0,
+      
+      historyRecordListVisible: false,
+      nowMonths: [],
+      years: [],
+      selected: 1,
+      options: [
+        { label: 'Token', value: 1 },
+        { label: '卡券', value: 3 }
+      ],
     }
   },
   computed: {
@@ -195,6 +301,70 @@ export default {
     })
   },
   methods: {
+    toggleHistory() {
+      this.historyRecordListVisible = !this.historyRecordListVisible
+      if (this.historyRecordListVisible) {
+        this.loadHistoryRecord()
+      }
+    },
+    changeTypeHistoryList(item) {
+      this.selected = item.value
+      this.loadHistoryRecord()
+    },
+async loadHistoryRecord() {
+      try {
+        const res = await historyApi({
+          token: this.token,
+          type: this.selected
+        });
+        if (res.code === 200) {
+          const now_year = res.data.now_year || []
+          const last_year_list = res.data.last_year_list || []
+
+          this.nowMonths = (Array.isArray(now_year) ? now_year : []).map((m, idx) => ({
+            month: m.month,
+            open: idx === 0,
+            records: (m.list || []).map((r, ridx) => ({
+              id: ridx,
+              time: r.time,
+              amount: parseFloat(r.num),
+              type: r.name
+            }))
+          }))
+
+          this.years = (Array.isArray(last_year_list) ? last_year_list : []).map((y) => ({
+            year: y.year,
+            expanded: false,
+            months: (y.list || []).map((m) => ({
+              month: m.month,
+              open: false,
+              records: (m.list || []).map((r, ridx) => ({
+                id: ridx,
+                time: r.time,
+                amount: parseFloat(r.num),
+                type: r.name
+              }))
+            }))
+          }))
+        } else {
+          this.nowMonths = []
+          this.years = []
+        }
+      } catch (err) {
+        this.nowMonths = []
+        this.years = []
+      }
+    },
+
+    toggleMonthNow(m) {
+      m.open = !m.open
+    },
+    toggleYear(y) {
+      y.expanded = !y.expanded
+    },
+    toggleMonth(m) {
+      m.open = !m.open
+    },
     // 预加载图片以提高性能
     preloadImages() {
       const images = [
@@ -975,4 +1145,201 @@ export default {
     width: calc(100% - 48px);
   }
 }
+.fold-up {
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  top: 20px;
+  left: 45px;
+  cursor: pointer;
+  z-index: 999;
+}
+
+.history-title {
+  padding-top: 12px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  color: #00e5ff;
+  font-size: 32px;
+  font-weight: 700;
+}
+
+.history-record {
+  background: #080A6D;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  width: 90%; 
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  --bottom-cut-height: 220px;
+  overflow: hidden;
+  z-index: 2000;
+  box-shadow: -8px 0 24px rgba(0,0,0,0.6);
+  border-left: 1px solid rgba(255,255,255,0.03);
+  padding-bottom: 0;
+}
+
+.history-contents {
+  margin-top: 20px;
+  padding-right: 10px;
+  flex: 1 1 auto;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  direction: rtl;
+}
+.history-contents > * { direction: ltr; }
+.history-contents * { direction: ltr; }
+
+.history-contents::-webkit-scrollbar {
+  width: 14px;
+  background-color: #20086d;
+}
+.history-contents::-webkit-scrollbar-thumb {
+  background-color: #4a4de6;
+  border-radius: 4px;
+}
+.history-contents::-webkit-scrollbar-thumb:hover {
+  background-color: #6b6ef5;
+}
+
+.history-decoration {
+  flex: 0 0 200px;
+  height: var(--bottom-cut-height);
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  pointer-events: none;
+  z-index: 0;
+  background-image: url('../../assets/img/wealthGoldenWheel/bottomDecoration.png'); 
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  background-size: contain;
+  margin-top: 0;
+}
+
+/* 记录项样式 */
+.history-record-item {
+  background: #0b0d99;
+  margin-bottom: 10px;
+  display: flex;
+  justify-content: space-between;
+  width: 80%;
+  padding: 8px;
+  border-radius: 8px;
+}
+
+.history-record-item .left {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  padding: 5px;
+}
+
+.history-record-item .title {
+  color: #f2f5ff;
+  font-size: 16px;
+  font-weight: 700;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+.history-record-item .time {
+  font-size: 12px;
+  color: #e6ecff;
+  font-weight: 700;
+  margin-left: 28px;
+}
+
+.history-record-item .right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 72px;
+  padding-right: 10px;
+}
+
+.history-record-item .token {
+  color: #00e6ff;
+  font-size: 16px;
+  font-weight: 700;
+}
+.circle {
+  width: 10px;
+  height: 10px;
+  background-color: #fff;
+  margin-right: 8px;
+  flex-shrink: 0;
+  margin-left: 10px;
+  border-radius: 50%;
+}
+
+.month-row,
+.year-header {
+  display: flex;
+  align-items: center;
+  padding-bottom: 12px;
+  cursor: pointer;
+  color: #ffffff;
+  font-weight: 700;
+}
+
+.month-text,
+.year-text {
+  font-weight: 700;
+  font-size: 16px;
+  color: #ffffff;
+}
+
+.month-caret,
+.year-caret {
+  margin-left: 10px;
+  font-size: 16px;
+  color: #ffffff;
+}
+
+.empty-month {
+  padding: 8px;
+  color: #cfd9ff;
+  background: transparent;
+}
+
+@media (max-width: 900px) {
+  .history-record { width: 90%; }
+  .history-record-item { width: calc(100% - 60px); }
+}
+@media (max-width: 430px) {
+  .history-record-item .title {
+  font-size: 12px;
+}
+
+.history-record-item .time {
+  font-size: 10px;
+   margin-left:10px;
+}
+
+.history-record-item .token {
+  font-size: 14px;
+}
+
+.history-record-item .right {
+  padding-right: 5px;
+}
+.circle {
+  width: 8px;
+  height: 8px;
+  margin-left: 0px;
+}
+.month-caret,
+.year-caret {
+  margin-left: 5px;
+}
+}
 </style>

src/views/wealth/history.vue

@@ -1,136 +0,0 @@
-<template>
-  <div class="history-page">
-    <div class="header">
-      <button class="back-btn" @click="goBack">← 返回</button>
-      <h2>抽奖历史记录</h2>
-      <div class="placeholder"></div>
-    </div>
-    
-    <div class="history-list">
-      <div v-if="historyList.length === 0" class="empty-state">
-        <p>暂无历史记录</p>
-      </div>
-      
-      <div v-else class="history-items">
-        <div class="history-item" v-for="(item, index) in historyList" :key="index">
-          <div class="item-date">{{ item.date }}</div>
-          <div class="item-prize">{{ item.prize }}</div>
-          <div class="item-status" :class="item.status">{{ item.statusText }}</div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HistoryPage',
-  data() {
-    return {
-      historyList: [
-        { date: '2023-10-01 10:30', prize: '卡券 2张', status: 'completed', statusText: '已领取' },
-        { date: '2023-10-02 14:15', prize: '背包礼物 1个', status: 'completed', statusText: '已领取' },
-        { date: '2023-10-03 16:45', prize: 'Tonken 5个', status: 'pending', statusText: '待领取' }
-      ]
-    }
-  },
-  methods: {
-    goBack() {
-      // 使用路由器返回上一页
-      if (this.$router) {
-        this.$router.back();
-      } else {
-        window.history.back();
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-.history-page {
-  padding: 20px;
-  min-height: 100vh;
-  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-  color: white;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 30px;
-  padding-bottom: 15px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.back-btn {
-  background: rgba(255, 255, 255, 0.1);
-  border: none;
-  color: white;
-  padding: 8px 15px;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.back-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
-}
-
-.placeholder {
-  width: 80px;
-}
-
-.empty-state {
-  text-align: center;
-  padding: 50px 0;
-  color: rgba(255, 255, 255, 0.6);
-}
-
-.history-items {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
-
-.history-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.05);
-  padding: 15px;
-  border-radius: 8px;
-  border-left: 4px solid #4e4376;
-}
-
-.item-date {
-  color: rgba(255, 255, 255, 0.7);
-  font-size: 14px;
-  flex: 1;
-}
-
-.item-prize {
-  font-weight: bold;
-  flex: 1;
-  text-align: center;
-}
-
-.item-status {
-  flex: 1;
-  text-align: right;
-  font-size: 14px;
-  padding: 5px 10px;
-  border-radius: 12px;
-  display: inline-block;
-}
-
-.item-status.completed {
-  background: rgba(76, 175, 80, 0.2);
-  color: #4caf50;
-}
-
-.item-status.pending {
-  background: rgba(255, 193, 7, 0.2);
-  color: #ffc107;
-}
-</style>