ouList

pages/drawCard_infinite/drawCard_infinite.vue

@@ -32,7 +32,7 @@
     </view>
     <div v-if="detail.subType.includes('110')" class="oubox flex justify-around items-center">
       <div class="flex items-center" @click="showList">
-        <img src="https://file.rongcyl.cn/festatic/bkm/ouking.png" class="w-10 h-10" />
+        <img src="https://file.rongcyl.cn/festatic/bkm/ouking_a.png" class="w-10 h-10" />
         <div class="ml-1">
           <div class="fontPFSCS" style="font-size: 15px">欧王奖励</div>
           <div style="font-size: 12px">{{ ouCount }}届欧王</div>
@@ -179,8 +179,42 @@
     <uni-popup ref="popup">
       <view class="popup-content oulist">
         <img src="https://file.rongcyl.cn/festatic/bkm/oulist.png" class="w-full h-full" />
-        <div class="absolute left-0 right-0 bottom-0 overflow-scroll" style="height: 300px">
-          <div v-for="ou in ouList">{{ ou.userName }}</div>
+        <div class="absolute left-0 right-0 bottom-0 overflow-scroll py-2" style="height: 270px">
+          <div v-for="(ou, i) in ouList" :key="i" class="flex justify-between items-center px-2 py-2">
+            <div class="flex mr-2">
+              <img
+                :src="`https://file.rongcyl.cn/festatic/bkm/${i + 1}.png`"
+                v-if="i < 3"
+                class="inline-block mt-1"
+                style="width: 28px; height: 28px"
+              />
+              <span
+                v-else
+                class="bold inline-block mt-1"
+                style="width: 28px; height: 28px; text-align: center; line-height: 28px"
+              >
+                {{ i + 1 }}
+              </span>
+              <img
+                :src="ou.userAvtar"
+                style="width: 34px; height: 34px; border-radius: 50%"
+                class="inline-block ml-2"
+              />
+            </div>
+            <div class="flex-1">
+              <div style="font-size: 14px" class="bold">{{ ou.userName }}</div>
+              <div style="font-size: 11px; color: #666666">
+                <span style="margin-right: 18px">在线{{ ou.onlineTime }}分钟</span>
+                <img src="https://file.rongcyl.cn/festatic/bkm/tri.png" class="w-4 h-4 inline-block relative top-1" />
+                <span style="font-size: 12px; color: #666666">{{ ou.reward }} 奖励</span>
+              </div>
+            </div>
+
+            <div>
+              <span v-if="!ou.status" style="color: #00c537; font-size: 12px">在线中</span>
+              <span v-else style="font-size: 12px; color: #666666">{{ ou.downTime | formatTime }}下线</span>
+            </div>
+          </div>
         </div>
       </view>
       <div @click="closeList">
@@ -232,6 +266,14 @@ export default {
       ouList: [],
     }
   },
+  filters: {
+    formatTime(dateString) {
+      let month = dateString.substring(5, 7)
+      let day = dateString.substring(8, 10)
+      let time = dateString.substring(11, 16)
+      return month + '/' + day + ' ' + time
+    },
+  },
   methods: {
     showList() {
       this.$refs.popup.open('center')
@@ -287,7 +329,7 @@ export default {
         this.detail = res.data
         if (res.data.subType.includes('110')) {
           getOuCount(params).then(rs => {
-            this.ouCount = rs.data.count
+            this.ouCount = rs.data
           })
           getOuList({ ...params, page: 1, limit: 1000 }).then(rs => {
             this.ouList = rs.data

static/style.scss

@@ -16,6 +16,9 @@
 .fontPFSCS {
   font-family: 'PingFangSCSemibold';
 }
+.bold {
+  font-family: 'PingFangSCSemibold';
+}
 .fontPFR {
   font-family: 'PingFangRegular';
 }