优化页面

pages/Home/Home.vue

@@ -3,13 +3,59 @@
     <image src="../../static/HomeBackground.png" class="HomeBackground"></image>
   </view>
   <view class="top-navigation-container">
-    <top-navigation></top-navigation>
+    <top-navigation
+      @RealTimePk="goRealTimePk"
+      @MakeAppointmentPK="goMakeAppointmentPK"
+    ></top-navigation>
   </view>
   <view class="Advertisement" @click="goAdvertisement">
     <advertisement></advertisement>
   </view>
   <view class="contentList">
-    <contentList></contentList>
+    <scroll-view
+      scroll-y="true"
+      class="scroll"
+      refresher-enabled="true"
+      refresher-threshold="40"
+      @refresherrefresh="onRefresherRefresh"
+      lower-threshold="100"
+      @scrolltolower="onScrollToLower"
+      :refresher-triggered="triggered"
+    >
+      <uni-card v-for="(item, index) in list">
+        <view class="content-list" @click="goDetail(item)">
+          <!-- `````````````````````````` -->
+          <image class="headShot" :src="item.anchorIcon" mode="scaleToFill" />
+          <!-- `````````````````````````````````````` -->
+          <view class="content-list-title">
+            <view class="cardname">{{ item.anchorId }}</view>
+            <view class="content-list-info">
+              <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">PK时间:&nbsp;{{ formatDate(item.pkTime) }}</view>
+              <view class="Charm">金币:</view>
+              <view class="charmValue"> {{ item.coin + "K" }}</view>
+            </view>
+          </view>
+          <!-- `````````````````````````````````````````````````````` -->
+        </view>
+      </uni-card>
+    </scroll-view>
   </view>
   <view class="tabBar">
     <tabBar></tabBar>
@@ -19,11 +65,12 @@
 <script>
 import topNavigation from "../../components/topNavigation/topNavigation";
 import Advertisement from "../../components/Advertisement/Advertisement";
-import contentList from "../../components/contentList/contentList";
 import tabBar from "../../components/tabBar/tabBar";
 import TUIlogin from "../../components/TUILogin.js";
-import { useCounterStore } from '@/stores/counter'
-const counter = useCounterStore()
+import request from "../../components/request.js";
+import formatDate from "../../components/formatDate.js";
+import { useCounterStore } from "@/stores/counter";
+const counter = useCounterStore();
 export default {
   inject: ["$global"],
   data() {
@@ -31,14 +78,23 @@ export default {
       info: {},
       myuserSig: "",
       chatInfo: {},
+      page: 0, //页码
+      size: 10, //每页条数
+      list: [], // 列表数据
+      detailsdata: {}, //详情数据
+      triggered: false, //下拉刷新标识
     };
   },
+  mounted() {
+    // 页面加载完成后请求数据
+    this.pkList();
+  },
   onLoad() {
     uni.getStorage({
       key: "userinfo",
       success: (res) => {
         this.info = res.data;
-        counter.$patch({ myitem:this.info})
+        counter.$patch({ myitem: this.info });
         uni.getStorage({
           key: "myuserSig",
           success: (res) => {
@@ -61,18 +117,92 @@ export default {
         });
       },
     });
-    
   },
   methods: {
+    goRealTimePk() {
+      console.log("goRealTimePk");
+    },
+    goMakeAppointmentPK() {
+      console.log("goMakeAppointmentPK");
+    },
     goAdvertisement() {
       // this.$global.lastPage = getCurrentPages().router;
       uni.navigateTo({ url: "/pages/pkDetail/pkDetail" });
     },
+    onRefresherRefresh() {
+      this.page = 0;
+      this.list = [];
+      this.triggered = true;
+      this.pkList();
+    },
+    async goDetail(item) {
+      uni.showLoading({
+        title: "加载中...",
+        mask: true,
+      });
+      console.log("id", item.id);
+      const res = await request({
+        url: "pk/pkInfoDetail",
+        method: "POST",
+        data: {
+          id: item.id,
+        },
+        userInfo: true,
+      });
+      console.log("res", res);
+      this.detailsdata = res.data;
+      if (res.code === 200) {
+        if (res.data.length !== 0) {
+          uni.hideLoading();
+          console.log("res.data", res.data);
+          uni.navigateTo({
+            url: "/pages/pkDetail/pkDetail",
+            success: (res) => {
+              res.eventChannel.emit("itemDetail", {
+                item: this.detailsdata,
+              });
+            },
+          });
+        } else {
+          uni.hideLoading();
+          this.openPopupQuantity();
+        }
+      } else {
+        uni.hideLoading();
+        uni.showToast({
+          title: "加载失败",
+          icon: "none",
+          duration: 2000,
+        });
+      }
+    },
+    formatDate: formatDate,
+    async pkList() {
+      const res = await request({
+        url: "pk/pkList",
+        method: "POST",
+        data: {
+          status: 0,
+          page: this.page,
+          size: this.size,
+        },
+        userInfo: false,
+      });
+      console.log(res);
+      if (res.code === 200) {
+        this.list.push(...res.data);
+        console.log(this.list);
+        this.triggered = false;
+      }
+    },
+    onScrollToLower() {
+      this.page++;
+      this.pkList();
+    },
   },
   components: {
     topNavigation,
     Advertisement,
-    contentList,
     tabBar,
   },
 };
@@ -110,10 +240,90 @@ export default {
 }
 .contentList {
   position: fixed;
-  top: 400rpx;
+  top: 412rpx;
   left: 0;
-  bottom: -30rpx;
+  bottom: 114.5rpx;
   width: 100%;
   /* height: 1300rpx; */
 }
+.scroll {
+  height: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.content-list {
+  display: flex;
+  align-items: center;
+  width: 712rpx;
+  height: 161rpx;
+  background: #ffffff;
+  border-radius: 15rpx;
+  margin-bottom: 12rpx;
+  margin-left: 20rpx;
+}
+.headShot {
+  width: 101rpx;
+  height: 101rpx;
+  border-radius: 50rpx;
+  margin-left: 30rpx;
+  margin-right: 33rpx;
+}
+.content-list-info {
+  display: flex;
+  align-items: center;
+}
+.cardname {
+  font-size: 31rpx;
+  color: #161616;
+  line-height: 38rpx;
+}
+.Genderimg {
+  width: 15rpx;
+  height: 15rpx;
+  margin-left: 10rpx;
+  margin-right: 10rpx;
+}
+.age {
+  color: #ffffff;
+  font-size: 14rpx;
+}
+
+.Gendermale {
+  background: url(../../static/maleimg.png) no-repeat center;
+  width: 56.3rpx;
+  height: 29.58rpx;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  margin-right: 10rpx;
+}
+.Genderfemale {
+  background: url(../../static/femaleimg.png) no-repeat center;
+  width: 56.3rpx;
+  height: 29.58rpx;
+  background-size: 100% 100%;
+  display: flex;
+  align-items: center;
+  margin-right: 10rpx;
+}
+.RoomID {
+  font-size: 23rpx;
+  color: #a3a3a3;
+  line-height: 38rpx;
+}
+.Charm {
+  font-size: 23rpx;
+  color: #a3a3a3;
+  line-height: 38rpx;
+  margin-right: 12rpx;
+  margin-left: 20rpx;
+}
+.charmValue {
+  font-size: 23rpx;
+  color: #161616;
+  line-height: 38rpx;
+  font-weight: 600;
+}
 </style>