优化代码

src/components/Appaside.vue

@@ -397,7 +397,6 @@ const chatList = ref({
 //监听会话消息
 function onConversationsUpdated(conversations) {
   chatList.value = conversations;
-  console.log(chatList.value);
 }
 //获取会话列表
 function getChatList() {
@@ -539,7 +538,6 @@ const handleAvatarSuccess = (
   uploadFile
 ) => {
   avatar.value = URL.createObjectURL(uploadFile.raw)
-  console.log(info.value);
   editUserInfo({
     id: info.value.id,
     headerIcon: response.data.filename,
@@ -759,7 +757,6 @@ onMounted(() => {
     });
     getPromiseStorage('user').then(res => {
       info.value = res;
-      console.log(res);
       avatar.value = info.value.headerIcon;
       getAnchorLibrary()
       UserInfo();
@@ -821,6 +818,10 @@ onUnmounted(() => {
 .Avatar-content{
     width: 100%;
     height: 250px;
+    -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 .Avatar-content-name{
     width: 100%;

src/components/mineSubComponent/PKRecord.vue

@@ -30,14 +30,24 @@
           <!-- list -->
           <div class="list" style="overflow: auto" v-infinite-scroll="load">
             <div v-for="(item, index) in list" :key="index" class="list-item">
-              <div class="list-content" @click="detail(item)" :style="{ backgroundImage: item == selectedData ? '' : '',background: item == selectedData ? '#FFFBFA' : '',border: item == selectedData ? '1px solid #F4D0C9' : ''}">
+              <div
+                class="list-content"
+                @click="detail(item)"
+                :style="{
+                  backgroundImage: item == selectedData ? '' : '',
+                  background: item == selectedData ? '#FFFBFA' : '',
+                  border: item == selectedData ? '1px solid #F4D0C9' : '',
+                }"
+              >
                 <div class="information">
                   <div class="avatar">
-                    <img class="avatar-img" :src="item.anchorIconA" alt="">
+                    <img class="avatar-img" :src="item.anchorIconA" alt="" />
                   </div>
                   <div class="content-left">
                     <div class="name">{{ item.anchorIdA }}</div>
-                    <div class="time">PK时间：{{ TimestamptolocalTime(item.pkTime*1000) }}</div>
+                    <div class="time">
+                      PK时间：{{ TimestamptolocalTime(item.pkTime * 1000) }}
+                    </div>
                     <div class="gold" v-if="item.userACoins != null">
                       <img
                         class="goldimg"
@@ -45,7 +55,9 @@
                         alt=""
                       />
                       实际金币数：
-                      <div class="gold-num">{{ goldCoinCalculation(item.userACoins) }}</div>
+                      <div class="gold-num">
+                        {{ goldCoinCalculation(item.userACoins) }}
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -59,19 +71,23 @@
                 <div class="information">
                   <div class="content-right">
                     <div class="name">{{ item.anchorIdB }}</div>
-                    <div class="time">PK时间：{{ TimestamptolocalTime(item.pkTime*1000) }}</div>
+                    <div class="time">
-                    <div class="gold" v-if="item.userBCoins!= null">
+                      PK时间：{{ TimestamptolocalTime(item.pkTime * 1000) }}
+                    </div>
+                    <div class="gold" v-if="item.userBCoins != null">
                       <img
                         class="goldimg"
                         src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
                         alt=""
                       />
                       实际金币数：
-                      <div class="gold-num" >{{ goldCoinCalculation(item.userBCoins) }}</div>
+                      <div class="gold-num">
+                        {{ goldCoinCalculation(item.userBCoins) }}
+                      </div>
                     </div>
                   </div>
                   <div class="avatar">
-                    <img class="avatar-img" :src="item.anchorIconA" alt="">
+                    <img class="avatar-img" :src="item.anchorIconA" alt="" />
                   </div>
                 </div>
               </div>
@@ -83,37 +99,64 @@
       <el-splitter-panel size="30%" :resizable="false" collapsible>
         <div class="demo-panel" v-if="selectedData != null">
           <div class="particularsAvatar">
-            <img class="particularsAvatar-avatar" :src="selectedData.anchorIconA" alt="" />
+            <img
-            <img class="particularsAvatar-avatar" :src="selectedData.anchorIconB" alt="" />
+              class="particularsAvatar-avatar"
+              :src="selectedData.anchorIconA"
+              alt=""
+            />
+            <img
+              class="particularsAvatar-avatar"
+              :src="selectedData.anchorIconB"
+              alt=""
+            />
           </div>
           <!--  -->
           <div class="altogether">
             <div class="altogethercard">
-              <div class="altogether-num">总共：{{ goldCoinCalculation(selectedData.userACoins) }}</div>
+              <div class="altogether-num">
+                总共：{{ goldCoinCalculation(selectedData.userACoins) }}
+              </div>
               <img
                 class="altogether-icon"
                 src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
                 alt=""
               />
-              <div class="altogether-num">总共：{{ goldCoinCalculation(selectedData.userBCoins) }}</div>
+              <div class="altogether-num">
+                总共：{{ goldCoinCalculation(selectedData.userBCoins) }}
+              </div>
             </div>
           </div>
           <!--  -->
           <div class="goldlist">
             <div class="goldlist-card goldlist-card-left">
-              <div class="goldlist-list" v-for="(item, index) in fetchDetailPkDataWithId" :style="{background:item.anchorCoinA > item.anchorCoinB? '#D1F6F7' : '#F9DFD9'}">
+              <div
-                第{{index+1}}局:
+                class="goldlist-list"
+                v-for="(item, index) in fetchDetailPkDataWithId"
+                :style="{
+                  background: item.anchorCoinA > item.anchorCoinB ? '#D1F6F7' : '#F9DFD9',
+                }"
+              >
+                第{{ index + 1 }}局:
                 {{ goldCoinCalculation(item.anchorCoinA) }}
               </div>
             </div>
             <div class="goldlist-card goldlist-card-right">
-              <div class="goldlist-list" v-for="(item, index) in fetchDetailPkDataWithId" :key="index" :style="{background: item.anchorCoinB > item.anchorCoinA? '#D1F6F7' : '#F9DFD9'}">
+              <div
-                第{{index+1}}局:
+                class="goldlist-list"
+                v-for="(item, index) in fetchDetailPkDataWithId"
+                :key="index"
+                :style="{
+                  background: item.anchorCoinB > item.anchorCoinA ? '#D1F6F7' : '#F9DFD9',
+                }"
+              >
+                第{{ index + 1 }}局:
                 {{ goldCoinCalculation(item.anchorCoinB) }}
               </div>
             </div>
           </div>
-
+        </div>
+        <div class="notdata" v-if="selectedData == null">
+          <div class="chatNotDeta-text">右方选择记录立即查看详情</div>
         </div>
       </el-splitter-panel>
     </el-splitter>
@@ -128,9 +171,9 @@ import {
   onUpdated, // 组件更新后执行
   onUnmounted, // 组件销毁前执行
 } from "vue";
-import {getPkRecord,queryPkDetail} from "@/api/account";
+import { getPkRecord, queryPkDetail } from "@/api/account";
 import { ElMessage } from "element-plus";
-import {getPromiseStorage } from "@/utils/storage.js";
+import { getPromiseStorage } from "@/utils/storage.js";
 import { TimestamptolocalTime } from "@/utils/timeConversion.js";
 import { goldCoinCalculation } from "@/utils/goldCoinCalculation.js";
 
@@ -151,14 +194,13 @@ const options = [
     SelectedIcon: require("@/assets/InvitationSelected.png"),
   },
 ];
-const list = ref([]);// PK记录列表
+const list = ref([]); // PK记录列表
-const page = ref(0);// 页数
+const page = ref(0); // 页数
-const IPKPostedData = ref([]);//我发布的PK
+const IPKPostedData = ref([]); //我发布的PK
-const  InvitationData = ref([]);//我邀请的PK
+const InvitationData = ref([]); //我邀请的PK
 const selectedData = ref(null); //被选中的PK数据
 const fetchDetailPkDataWithId = ref([]); // PK详情数据
 
-
 //选中PK数据
 function detail(item) {
   selectedData.value = item;
@@ -171,12 +213,13 @@ function detail(item) {
 //切换选项卡
 function optionsclick(value) {
   segmentedvalue.value = value;
+  selectedData.value = null;
   if (value === 1) {
     list.value = IPKPostedData.value;
-    console.log("我发布的PK",list.value);
+    console.log("我发布的PK", list.value);
   } else {
     list.value = InvitationData.value;
-    console.log("我邀请的PK",list.value);
+    console.log("我邀请的PK", list.value);
   }
 }
 
@@ -191,16 +234,16 @@ function PkRecord(type) {
     console.log(res);
     if (type === 1) {
       IPKPostedData.value.push(...res);
-      if(segmentedvalue.value === type){
+      if (segmentedvalue.value === type) {
         list.value = IPKPostedData.value;
       }
-    }else{
+    } else {
       InvitationData.value.push(...res);
-      if(segmentedvalue.value === type){
+      if (segmentedvalue.value === type) {
         list.value = InvitationData.value;
       }
     }
-  })
+  });
 }
 
 // 加载更多
@@ -242,6 +285,19 @@ onUnmounted(() => {
   flex-direction: column;
   align-items: center;
 }
+.notdata {
+  width: 99%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-left: #03aba8 solid 1px;
+}
+.chatNotDeta-text {
+  font-size: 20px;
+  color: #03aba8;
+  font-weight: bold;
+}
 .custom-style {
   width: 90%;
   height: 150px;
@@ -396,7 +452,7 @@ onUnmounted(() => {
   border-radius: 50%;
   background-color: #fff;
 }
-.avatar-img{
+.avatar-img {
   width: 100%;
   height: 100%;
   border-radius: 50%;
@@ -615,7 +671,7 @@ onUnmounted(() => {
   background-color: #fbece9;
   border: 1px solid #f4d0c9;
 }
-.goldlist-list{
+.goldlist-list {
   width: 85%;
   padding-left: 2.5%;
   padding-right: 2.5%;

src/components/mineSubComponent/PKmessage.vue

@@ -877,7 +877,7 @@ watch(refname, async (newQuestion, oldQuestion) => {
   resize: none;
 }
 .Confirm {
-  width: 400px;
+  width: 300px;
   height: 50px;
   margin-top: 40px;
   text-align: center;
@@ -898,7 +898,7 @@ watch(refname, async (newQuestion, oldQuestion) => {
   opacity: 0.8;
 }
 .Reset {
-  width: 400px;
+  width: 300px;
   height: 50px;
   margin-top: 30px;
   text-align: center;

src/views/hosts/pk.vue

@@ -191,8 +191,8 @@
                 </el-splitter-panel>
                 <el-splitter-panel collapsible size="27%" :resizable="false">
                   <!-- 聊天面板 -->
-                  <div class="demo-panel">
+                  <div class="demo-panel" >
-                    <div class="chat">
+                    <div class="chat" v-if="handleClickdata != null">
                       <div class="chat-name">{{ info.nickName }}</div>
                       <!-- 聊天列表 -->
                       <div class="chat-content">
@@ -272,7 +272,7 @@
                         </div>
                       </div>
                       <!-- 聊天输入框 -->
-                      <div class="chat-input" v-if="handleClickdata != null">
+                      <div class="chat-input">
                         <!-- 控件 -->
                         <div class="chat-input-Controls">
                           <!-- 其他的消息 -->
@@ -317,6 +317,11 @@
                         </div>
                       </div>
                     </div>
+                    <div class="chatNotDeta" v-if="handleClickdata == null">
+                        <div class="chatNotDeta-text">
+                          右方选择主播立即聊天
+                        </div>
+                    </div>
                   </div>
                   <!--  -->
                 </el-splitter-panel>
@@ -788,7 +793,6 @@ function reminderDialogConfirm() {
       nickname: info.value.nickName,
     };
     goEasySendPKMessage(data).then((res) => {
-      console.log(res);
       messageslist.value.push(res);
       reminder.value = false;
       resets();
@@ -885,17 +889,14 @@ function handleClick(time) {
   handleClickdata.value = time;
   isPage.value = true;
   messageRead();
-  console.log(time);
   getUserInfo({
     id: handleClickdata.value.senderId,
   }).then((res) => {
-    console.log(res);
     info.value = res;
     goEasyGetMessages({
       id: String(handleClickdata.value.senderId),
       timestamp: null,
     }).then((res) => {
-      console.log(res);
       messageslist.value = res;
       nextTick(() => {
         if (chatlistContainer.value) {
@@ -993,14 +994,19 @@ function scrollHandler() {
 
 
 // 获取pk列表
-function PkList(body) {
+function PkList(body,type) {
+  console.log("body", body);
   getPkList(body).then((res) => {
+    console.log("res", res);
+    if (type == "load" && res.length == []) {
+      page.value--;
+    }
     if (body.condition.type == 2 || body.condition.type == undefined) {
       HallList.value.push(...res);
       if (PKistodayorhall.value) {
         list.value = HallList.value;
       }
-    } else {
+    } else if (body.condition.type == 1) {
       TodayList.value.push(...res);
       if (!PKistodayorhall.value) {
         list.value = TodayList.value;
@@ -1008,13 +1014,13 @@ function PkList(body) {
     }
   });
 }
+
 // 加载更多
 function load() {
-  page.value++;
   if (searchStatus.value) {
     const body = {
       status: 0,
-      page: page.value,
+      page: page.value++,
       size: 10,
       userId: user.value.id,
       condition: {},
@@ -1023,7 +1029,7 @@ function load() {
       if (PKistodayorhall.value) {
         body.condition.type = 2;
       } else {
-        body.condition.type = 2;
+        body.condition.type = 1;
       }
     } else {
       if (PKistodayorhall.value) {
@@ -1065,7 +1071,7 @@ function load() {
   } else {
     const body = {
       status: 0,
-      page: page.value,
+      page: page.value++,
       size: 10,
       userId: user.value.id,
       condition: {},
@@ -1074,7 +1080,7 @@ function load() {
       if (PKistodayorhall.value) {
         body.condition.type = 2;
       } else {
-        body.condition.type = 2;
+        body.condition.type = 1;
       }
     } else {
       if (PKistodayorhall.value) {
@@ -1082,7 +1088,7 @@ function load() {
         body.condition.type = 1;
       }
     }
-    PkList(body);
+    PkList(body,"load");
   }
 }
 
@@ -1090,6 +1096,7 @@ function load() {
 function Switch() {
   searchStatus.value = false;
   PKistodayorhall.value = !PKistodayorhall.value;
+  handleClickdata.value = null;
   if (PKistodayorhall.value) {
     list.value = HallList.value;
   } else {
@@ -1099,17 +1106,19 @@ function Switch() {
 
 //搜索按钮
 function search(data) {
+  handleClickdata.value = null;
   const body = {
     status: 0,
     size: 10,
     userId: user.value.id,
     condition: {},
   };
+
   if (timevalue.value == null) {
     if (PKistodayorhall.value) {
       body.condition.type = 2;
     } else {
-      body.condition.type = 2;
+      body.condition.type = 1;
     }
   } else {
     if (PKistodayorhall.value) {
@@ -1117,6 +1126,7 @@ function search(data) {
       body.condition.type = 1;
     }
   }
+
   if (countryvalue.value != null) {
     body.condition.country = countryvalue.value;
   }
@@ -1147,11 +1157,13 @@ function search(data) {
       end: timevalue.value[1] / 1000,
     };
   }
-  if (PKistodayorhall) {
+  
+  if (PKistodayorhall.value) {
     HallList.value = [];
   } else {
     TodayList.value = [];
   }
+
   body.page = 0;
   page.value = 0;
   list.value = [];
@@ -1161,7 +1173,9 @@ function search(data) {
     searchStatus.value = true;
   }
   PkList(body);
+  page.value = 1;
 }
+
 //重置按钮
 function reset() {
   searchStatus.value = false;
@@ -1204,7 +1218,7 @@ onMounted(() => {
       user.value = res;
       PkList({
         status: 0,
-        page: 1,
+        page: 0,
         size: 10,
         userId: user.value.id,
         condition: {
@@ -1213,13 +1227,14 @@ onMounted(() => {
       });
       PkList({
         status: 0,
-        page: 1,
+        page: 0,
         size: 10,
         userId: user.value.id,
         condition: {
           type: 2,
         },
       });
+      page.value = 1;
     })
     .catch((err) => {
       console.log(err);
@@ -1396,7 +1411,8 @@ onBeforeUnmount(() => {
 .infinite-list {
   width: 100%;
   height: 100%;
-  border-radius: 16px;
+  border-top-left-radius: 16px;
+  border-bottom-right-radius: 16px;
   background-color: #ffffff;
 }
 .infinite-list-item {
@@ -1519,6 +1535,21 @@ onBeforeUnmount(() => {
   border-top-right-radius: 16px;
   border-left: 1px solid #03aba82f;
 }
+.chatNotDeta{
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-top-right-radius: 16px;
+  border-left: 1px solid #03aba82f;
+}
+.chatNotDeta-text{
+  font-size: 20px;
+  color: #03aba8;
+  font-weight: bold;
+}
 .chat-name {
   width: 100%;
   height: 50px;