首页列表

components/contentList/contentList.vue

@@ -1,45 +1,38 @@
 <template>
   <scroll-view scroll-y="true" class="scroll" lower-threshold="100" @scrolltolower="onScrollToLower" >
-    <uni-card class="content-list" v-for="(item, index) in list">
+    <uni-card  v-for="(item, index) in list">
+      <view class="content-list" @click="goDetail(item)">
       <!-- `````````````````````````` -->
-      <image class="headShot" src="../../static/logo.png" mode="scaleToFill" />
+      <image class="headShot" :src="item.anchorIcon" mode="scaleToFill" />
       <!-- `````````````````````````````````````` -->
       <view class="content-list-title">
-        <view class="cardname">{{ item.title }}</view>
+        <view class="cardname">{{ item.anchorId }}</view>
         <view class="content-list-info">
-          <view  :class="{Gendermale:Gender,Genderfemale:!Gender}"><!-- 性别换背景 -->
-            <image v-if="Gender"  class="Genderimg" src="../../static/female.png" mode="scaleToFill" />
-            <image v-else class="Genderimg" src="../../static/female.png" mode="scaleToFill" />
-            <view class="age">{{ item.gender }}</view>
+          <view  :class="{Gendermale:item.sex === '1',Genderfemale:item.sex === '2'}">
+            <image v-if="item.sex === '2'"  class="Genderimg" src="../../static/female.png" mode="scaleToFill" />
+            <image v-else class="Genderimg" src="../../static/male.png" mode="scaleToFill" />
+            <view class="age">{{ item.sex === '1'? "男" : "女" }}</view>
           </view>
-          <view class="RoomID">房间ID:{{ item.id }}</view>
-          <view class="Charm">魅力值</view>
-          <view class="charmValue"> {{ item.score }}W</view>
+          <view class="RoomID">PK时间:&nbsp;{{formatDate(item.pkTime)}}</view>
+          <view class="Charm">金币:</view>
+          <view class="charmValue"> {{item.coin+'K'}}</view>
         </view>
       </view>
       <!-- `````````````````````````````````````````````````````` -->
+      </view>
     </uni-card>
   </scroll-view>
 </template>
 
 <script>
 import request from "../../components/request.js";
+import formatDate from "../../components/formatDate.js";
 export default {
   data() {
     return {
-      title: "Hello",
-      Gender: true,
-      page: 0,
-      // 列表数据
-      list: [
-        {
-          title: "极乐世界",
-          id: "9088",
-          gender: "男",
-          score: 8.8,
-        },
-      ],
-      // 列表数据结束
+      page: 0,//页码
+      size: 10, //每页条数
+      list: [],    // 列表数据
     };
   },
   mounted() {
@@ -47,6 +40,16 @@ export default {
     this.pkList()
   },
   methods: {
+    goDetail(item) {
+      uni.navigateTo({
+        url: '/pages/pkDetail/pkDetail',
+        success: function(res) {
+          res.eventChannel.emit('itemDetail', { 
+            item: item,
+            });
+        },
+      })
+    },
    async pkList(){
       const res = await request({
         url: "pk/pkList",
@@ -54,13 +57,13 @@ export default {
         data: {
           status: 0,
           page: this.page,
-          Size: 10,
+          size: this.size,
           },
           userInfo: false,
       });
       console.log(res);
       if (res.code === 200) {
-        this.list.concat(res.data)
+        this.list.push(...res.data)
         console.log(this.list)
       }
     },
@@ -68,8 +71,6 @@ export default {
       this.page++;
       this.pkList();
     },
-
-
   },
 };
 </script>
@@ -141,13 +142,14 @@ export default {
   font-size: 23rpx;
   color: #a3a3a3;
   line-height: 38rpx;
-  margin-right: 152rpx;
+
 }
 .Charm {
   font-size: 23rpx;
   color: #a3a3a3;
   line-height: 38rpx;
   margin-right: 12rpx;
+  margin-left: 20rpx;
 }
 .charmValue {
   font-size: 23rpx;

components/formatDate.js

@@ -0,0 +1,12 @@
+function formatDate(timestamp) {
+    const date = new Date(timestamp * 1000); // 秒级转毫秒级
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hour = String(date.getHours()).padStart(2, '0');
+    const minute = String(date.getMinutes()).padStart(2, '0');
+    const second = String(date.getSeconds()).padStart(2, '0');
+    
+    return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+  }
+  export default formatDate;