Task：抽奖

pkg-video/views/county-my-tickets.vue

@@ -25,9 +25,31 @@
     </view> -->
 
     <scroll-view class="page-body" scroll-y>
-      <view class="tip-bar" v-if="summaryText">
-        <view class="tip-text one-t">{{ summaryText }}</view>
-        <view class="tip-btn" @click="goWinnersPage">查看全部 <text class="icon-expand">⤢</text></view>
+      <view class="tip-bar">
+        <view class="tip-text" v-if="!winnerSortedList.length">暂时无人中奖</view>
+        <view class="tip-text one-t" v-else-if="winnerSortedList.length === 1">
+          恭喜 <text class="blue">{{ winnerSortedList[0].name }}</text>
+          在第 <text class="blue">{{ winnerSortedList[0].periodNo }}</text> 期抽奖活动中获得
+          <text class="red">{{ winnerSortedList[0].prizeName }}</text>
+        </view>
+        <swiper
+          v-else
+          class="winner-swiper"
+          vertical
+          circular
+          autoplay
+          :interval="3000"
+          :duration="500"
+        >
+          <swiper-item v-for="(winner, index) in winnerSortedList" :key="index">
+            <view class="tip-text one-t">
+              恭喜 <text class="blue">{{ winner.name }}</text>
+              在第 <text class="blue">{{ winner.periodNo }}</text> 期抽奖活动中获得
+              <text class="red">{{ winner.prizeName }}</text>
+            </view>
+          </swiper-item>
+        </swiper>
+        <view class="tip-btn" @click="goWinnersPage">查看全部 <text class="icon-expand">➔</text></view>
       </view>
 
       <view class="ticket-list" v-if="displayList.length">
@@ -56,7 +78,7 @@
 
           <view class="ticket-footer" v-if="item.status === 1">
             <template v-if="item.claimStatus === 0">
-              <view class="footer-note">注意：请在7天内领取，过期不予发放</view>
+              <view class="footer-note">注意：请在{{ getClaimDaysText(item) }}内领取，过期不予发放</view>
               <view class="footer-btn btn-claim" @click="onClaim(item)">立 即 领 取</view>
             </template>
             <template v-else-if="item.claimStatus === 1">
@@ -91,7 +113,7 @@
 </template>
 
 <script>
-import { claimCoupon, getDrawMyTickets } from '@/api/lottery'
+import { claimCoupon, getDrawLatestWinners, getDrawMyTickets } from '@/api/lottery'
 
 export default {
   name: 'CountyMyTicketsPage',
@@ -110,6 +132,7 @@ export default {
       ],
       list: [],
       openedList: [],
+      latestWinnerList: [],
       showCouponSuccessPopup: false,
       claiming: false
     }
@@ -118,8 +141,15 @@ export default {
     displayList() {
       return this.activeTab === 'opened' ? this.openedList : this.list
     },
-    summaryText() {
-      return `恭喜海*在第01期抽奖活动中获得 iPhone17 pro 手机`
+    winnerSortedList() {
+      const list = this.latestWinnerList || []
+      if (!list.length) return []
+      const mapped = list.map(item => ({
+        name: item.realName || item.phone || '用户',
+        periodNo: item.periodNo || '-',
+        prizeName: item.prizeName || '神秘奖品'
+      }))
+      return mapped.sort((a, b) => this.getPeriodNoValue(b.periodNo) - this.getPeriodNoValue(a.periodNo))
     }
   },
   onLoad(options) {
@@ -129,9 +159,28 @@ export default {
   },
   onShow() {
     this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 20
+    this.fetchLatestWinners()
     this.fetchList()
   },
   methods: {
+    getPeriodNoValue(periodNo) {
+      const text = String(periodNo || '')
+      const match = text.match(/\d+/g)
+      if (!match || !match.length) return 0
+      return Number(match.join('')) || 0
+    },
+    async fetchLatestWinners() {
+      try {
+        const res = await getDrawLatestWinners()
+        const winnersData = res && res.data
+        const list = Array.isArray(winnersData)
+          ? winnersData
+          : (Array.isArray(winnersData && winnersData.list) ? winnersData.list : [])
+        this.latestWinnerList = list
+      } catch (e) {
+        this.latestWinnerList = []
+      }
+    },
     mapTabToStatus(tab) {
       const map = {
         wait: 0,
@@ -158,6 +207,7 @@ export default {
         claimStatus: Number.isNaN(claimStatusNum) ? 0 : claimStatusNum,
         sourceOrderId: item.sourceOrderId || item.orderId || item.orderNo || '',
         drawTime: item.drawTime || item.openTime || '',
+        claimDeadline: item.claimDeadline || '',
         prizeName: item.prizeName || item.awardName || '',
         prizeType: item.prizeType || item.awardType || '',
         prizeTypeName: item.prizeTypeName || item.awardTypeName || ''
@@ -241,6 +291,34 @@ export default {
       const mm = String(date.getMinutes()).padStart(2, '0')
       return `${y}年${m}月${d}日 ${hh}:${mm}`
     },
+    formatDateTime(time) {
+      if (!time) return '--'
+      const text = String(time).trim()
+      const date = new Date(text.replace(/-/g, '/'))
+      if (Number.isNaN(date.getTime())) return text
+      const y = date.getFullYear()
+      const m = String(date.getMonth() + 1).padStart(2, '0')
+      const d = String(date.getDate()).padStart(2, '0')
+      const hh = String(date.getHours()).padStart(2, '0')
+      const mm = String(date.getMinutes()).padStart(2, '0')
+      const ss = String(date.getSeconds()).padStart(2, '0')
+      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
+    },
+    getClaimDeadlineText(item = {}) {
+      return this.formatDateTime(item.claimDeadline || '')
+    },
+    getClaimDaysText(item = {}) {
+      const drawTime = String(item.drawTime || '').trim()
+      const claimDeadline = String(item.claimDeadline || '').trim()
+      if (!drawTime || !claimDeadline) return '--'
+      const drawDate = new Date(drawTime.replace(/-/g, '/'))
+      const deadlineDate = new Date(claimDeadline.replace(/-/g, '/'))
+      if (Number.isNaN(drawDate.getTime()) || Number.isNaN(deadlineDate.getTime())) return '--'
+      const diff = deadlineDate.getTime() - drawDate.getTime()
+      if (diff <= 0) return '0天'
+      const days = Math.ceil(diff / (24 * 60 * 60 * 1000))
+      return `${days}天`
+    },
     async onClaim(item) {
       if (!item.id) return
       if (this.claiming) return
@@ -428,6 +506,20 @@ export default {
   flex: 1;
   font-weight: 500;
   color: #333;
+
+  .blue {
+    color: #3b7cf6;
+  }
+
+  .red {
+    color: #cb302c;
+  }
+}
+
+.winner-swiper {
+  flex: 1;
+  height: 36rpx;
+  margin-right: 8rpx;
 }
 
 .tip-btn {