优化代码

src/components/mineSubComponent/PKmessage.vue

@@ -108,7 +108,9 @@
                   @blur="handleChange()"
                 />
                 <div class="myanchor">
-                  <div class="myanchor-btn" @click="myAnchorDialogVisible = true">选择我的主播</div>
+                  <div class="myanchor-btn" @click="myAnchorDialogVisible = true">
+                    选择我的主播
+                  </div>
                 </div>
               </div>
               <div class="country">
@@ -176,7 +178,8 @@
     </el-splitter>
   </div>
   <!-- 确认删除弹窗 -->
-  <el-dialog
+  <el-dialog 
+  center
     class="center-dialog"
     v-model="centerDialogVisible"
     title="提示"
@@ -192,41 +195,82 @@
     </template>
   </el-dialog>
   <!-- 选择我的主播弹窗 -->
-  <el-dialog v-model="myAnchorDialogVisible" title="选择我的主播库主播" width="800">
+  <el-dialog align-center center v-model="myAnchorDialogVisible" title="选择我的主播库主播" width="800">
     <div class="myanchor-content">
       <div class="myanchor-list">
-        <div class="anchor-library-card" v-for="(item, index) in anchorLibrary" :key="index" @click="selectStreamerLibrary(item)" :style="{transform: item == selectAnchor? 'scale(1.05)':'scale(1)'}">
-              <div class="card-content">
-                <div class="card-avatar">
-                  <img
-                    style="width: 100%; height: 100%; border-radius: 100px"
-                    :src="item.headerIcon"
-                    alt=""
-                  />
-                </div>
-                <div class="personalInformation">
-                  <div class="name">{{ item.anchorId }}</div>
-                  <div class="GenderAndCountry">
-                    <div
-                      class="Gender"
-                      :style="{
-                        background: item.gender == 1 ? '#59D8DB' : '#F3876F',
-                      }"
-                    >
-                      {{ item.gender == 1 ? "男" : "女" }}
-                    </div>
-                    <div class="Country">{{ item.country }}</div>
-                  </div>
+        <div
+          class="anchor-library-card"
+          v-for="(item, index) in anchorLibrary"
+          :key="index"
+          @click="selectStreamerLibrary(item)"
+        >
+          <div class="card-content" :style="{ backgroundImage: item == selectAnchor ? '' : '',background: item == selectAnchor ? '#FFFBFA' : '',border: item == selectAnchor ? '1px solid #F4D0C9' : ''}">
+            <div class="card-avatar">
+              <img
+                style="width: 100%; height: 100%; border-radius: 100px"
+                :src="item.headerIcon"
+                alt=""
+              />
+            </div>
+            <div class="personalInformation">
+              <div class="name">{{ item.anchorId }}</div>
+              <div class="GenderAndCountry">
+                <div
+                  class="Gender"
+                  :style="{
+                    background: item.gender == 1 ? '#59D8DB' : '#F3876F',
+                  }"
+                >
+                  {{ item.gender == 1 ? "男" : "女" }}
                 </div>
+                <div class="Country">{{ item.country }}</div>
               </div>
             </div>
+          </div>
+        </div>
       </div>
       <div class="myanchor-dialog-btn">
         <div class="Reset" @click="myAnchorDialogVisible = false">取消</div>
-        <div class="Confirm" @click="handleSelect">确认</div>
+        <div class="Confirm" @click="myAnchorDialogConfirm()">确认</div>
       </div>
     </div>
   </el-dialog>
+  <!-- 置顶弹窗 -->
+  <el-dialog align-center center v-model="topPositionstate" title="置顶" width="800">
+    <div class="topPosition-content">
+      <div class="topPosition-content-title">
+        置顶后，该用户将在首页置顶，并在指定时长内享有置顶特权。置顶时长
+        不足1小时，系统将按1小时计算积分扣除。请选择置顶时长：
+      </div>
+      <div class="topPosition-input">
+        <el-select-v2
+          v-model="topPositionvalue"
+          :options="topPositionOptions"
+          placeholder="请选择置顶时长"
+          style="width: 100%"
+          size="large"
+          filterable
+        />
+      </div>
+      <div class="myanchor-dialog-btn">
+        <div class="Reset" @click="topPositionstate = false">取消</div>
+        <div class="Confirm" @click="topPositionstateConfirm()">确认</div>
+      </div>
+    </div>
+  </el-dialog>
+  <!-- 取消置顶弹窗 -->
+  <el-dialog center v-model="cancelTopPositionstate" title="取消置顶" width="700" align-center>
+    <div class="cancelTopPosition">
+    <div class="cancelTopPosition-content">
+      您确定要取消置顶吗?取消置顶后，该用户将不再享有置顶特权，但仍可继续参与
+      PK挑战。若置顶时长不足1小时，系统将按1小时计算积分扣除。取消后按实际使用时长比例返还剩余积分，是否确认执行此操作?
+    </div>
+    <div class="myanchor-dialog-btn">
+      <div class="Reset" @click="cancelTopPositionstate = false">取消</div>
+      <div class="Confirm" @click="cancelTopPositionstateConfirm()">确认</div>
+    </div>
+  </div>
+  </el-dialog>
 </template>
 
 <script setup>
@@ -245,7 +289,7 @@ import {
   delPkInfo,
   topPkInfo,
   cancelTopPkInfo,
-  getAnchorList
+  getAnchorList,
 } from "@/api/account";
 import { TimestamptolocalTime } from "@/utils/timeConversion.js";
 import { getCountryNamesArray } from "../../utils/countryUtil";
@@ -276,25 +320,88 @@ const modifyDialogstateID = ref(null); // 修改弹窗ID
 const myAnchorDialogVisible = ref(false); // 选择我的主播弹窗
 const anchorLibrary = ref([]); // 我的主播库
 const selectAnchor = ref(null); //选中的主播信息
+const topPositionstate = ref(false); // 置顶弹窗
+const cancelTopPositionstate = ref(false); // 取消置顶弹窗
+const topPositiondata = ref(null); // 置顶or取消置顶数据
+const topPositionvalue = ref(null); // 置顶时长
+const topPositionOptions = ref([]); // 置顶时长选项
 // 选择我的主播
 function selectStreamerLibrary(item) {
-  selectAnchor.value = item
+  selectAnchor.value = item;
+}
+function myAnchorDialogConfirm() {
+  AnchorProfilePicture.value = selectAnchor.value.headerIcon.split("/").pop();
+  anchorName.value = selectAnchor.value.anchorId;
+  gendervalue.value = selectAnchor.value.gender;
+  countryvalue.value = selectAnchor.value.country;
+  myAnchorDialogVisible.value = false;
 }
-
 
 //获取我的主播库数据
 function getMyAnchorLibrary() {
-  getAnchorList({id: user.value.id}).then((res) => {
+  getAnchorList({ id: user.value.id }).then((res) => {
     console.log("anchorLibrary", res);
-    anchorLibrary.value = res
-  })
+    anchorLibrary.value = res;
+  });
 }
 // 置顶or取消置顶
 function topPosition(item) {
-
-
+  if (item.isPin == false) {
+    topPositionstate.value = true;
+    const currentTime = Math.floor(Date.now() / 1000);
+    topPositionOptions.value = generateTimeOptions(currentTime, item.pkTime);
+  } else {
+    cancelTopPositionstate.value = true;
+  }
+  topPositiondata.value = item;
 }
-// 修改
+
+// 确认置顶
+function topPositionstateConfirm() {
+  if (topPositionvalue.value == 0) {
+    topPositionstate.value = false;
+    return;
+  }
+  topPkInfo({
+    articleId: topPositiondata.value.id,
+    pinExpireTime: topPositionvalue.value,
+  }).then((res) => {
+    ElMessage.success("置顶成功");
+    topPositionstate.value = false;
+    list.value = [];
+    page.value = 0;
+    PKInfo();
+  });
+}
+
+// 确认取消置顶
+function cancelTopPositionstateConfirm() {
+  cancelTopPkInfo({articleId: topPositiondata.value.id}).then((res) => {
+    ElMessage.success(res);
+    cancelTopPositionstate.value = false;
+    list.value = [];
+    page.value = 0;
+    PKInfo();
+  });
+}
+
+//计算置顶时长
+function generateTimeOptions(currentTimestamp, targetTimestamp) {
+  const timeDiff = targetTimestamp - currentTimestamp;
+  // 时间差小于0，说明已过期
+  if (timeDiff <= 0) return [{ value: 0, label: "已过期" }];
+  const hours = Math.ceil(timeDiff / 3600);
+  const options = Array.from({ length: hours }, (_, i) => {
+    const hour = i + 1;
+    return {
+      value: currentTimestamp + hour * 3600,
+      label: `${hour}个小时`,
+    };
+  });
+  return options;
+}
+
+//修改
 function modify(item) {
   if (modifyDialogstate.value) {
     cancel();
@@ -311,7 +418,7 @@ function modify(item) {
   sessionnum.value = item.pkNumber;
   remark.value = item.remark;
 }
-// 取消
+// 取消修改
 function cancel() {
   modifyDialogstateID.value = null;
   modifyDialogstate.value = false;
@@ -324,12 +431,14 @@ function cancel() {
   sessionnum.value = null;
   remark.value = null;
 }
+
 // 删除
 const deletePKInfodata = ref(null);
 function deletePKInfo(item) {
   deletePKInfodata.value = item;
   centerDialogVisible.value = true;
 }
+
 // 确认删除
 function deleteAnchor() {
   centerDialogVisible.value = false;
@@ -436,7 +545,7 @@ function Reset() {
   goldvalue.value = null;
   sessionnum.value = null;
   remark.value = null;
-  countryvalue.value = null 
+  countryvalue.value = null;
 }
 
 //输入框失去焦点
@@ -530,7 +639,7 @@ watch(refname, async (newQuestion, oldQuestion) => {
   width: 90%;
   height: 100%;
   border-radius: 10px;
-  background-image: url(../../assets/PKbackground.png);
+  background-image: url(@/assets/PKbackground.png);
   background-size: 100% 100%;
   transition: all 0.4s ease;
   display: flex;
@@ -623,6 +732,10 @@ watch(refname, async (newQuestion, oldQuestion) => {
 .modify-icon:hover {
   transform: scale(1.3);
 }
+.modify-icon:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
 .delete-icon {
   width: 20px;
   height: 28px;
@@ -631,6 +744,10 @@ watch(refname, async (newQuestion, oldQuestion) => {
 .delete-icon:hover {
   transform: scale(1.3);
 }
+.delete-icon:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
 .add-anchor-library {
   width: 100%;
   height: 100%;
@@ -692,6 +809,10 @@ watch(refname, async (newQuestion, oldQuestion) => {
 .myanchor-btn:hover {
   transform: scale(1.03);
 }
+.myanchor-btn:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
 .country {
   width: 90%;
   height: 50px;
@@ -763,6 +884,10 @@ watch(refname, async (newQuestion, oldQuestion) => {
   transition: all 0.4s ease;
   border-radius: 25px;
 }
+.Confirm:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
 .Confirm:hover {
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
   transform: scale(1.05);
@@ -786,14 +911,18 @@ watch(refname, async (newQuestion, oldQuestion) => {
   transform: scale(1.05);
   opacity: 0.8;
 }
-.myanchor-content{
+.Reset:active {
+  transition: all 0.1s ease;
+  transform: scale(0.95) !important;
+}
+.myanchor-content {
   width: 100%;
   height: 600px;
 }
-.myanchor-list{
+.myanchor-list {
   width: 100%;
   height: 500px;
-  background-color: #E0F4F1;
+  background-color: #e0f4f1;
   border-radius: 16px;
   border: 1px solid #4fcacd;
   overflow: auto;
@@ -801,11 +930,43 @@ watch(refname, async (newQuestion, oldQuestion) => {
 .myanchor-list::-webkit-scrollbar {
   display: none;
 }
-.myanchor-dialog-btn{
+.myanchor-dialog-btn {
   width: 100%;
   height: 100px;
   display: flex;
-  justify-content:space-around;
+  justify-content: space-around;
   align-items: center;
 }
+.topPosition-content {
+  width: 100%;
+  height: 500px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+.topPosition-content-title {
+  width: 80%;
+  height: 100px;
+  margin-top: 50px;
+  color: #999999;
+  font-size: 24px;
+}
+.topPosition-input {
+  width: 80%;
+  margin-top: 70px;
+  margin-bottom: 70px;
+}
+.cancelTopPosition{
+  width: 100%;
+  height: 400px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.cancelTopPosition-content{
+  width: 80%;
+  color: #999999;
+  font-size: 24px;
+  height: 300px;
+}
 </style>