优化代码

2025-08-12 22:05:06 +08:00
parent b260caa2bd
commit 784a19bdda
39 changed files with 2258 additions and 525 deletions
--- a/src/components/mineSubComponent/PKmessage.vue
+++ b/src/components/mineSubComponent/PKmessage.vue
@@ -11,52 +11,75 @@
          >
            <div class="anchor-library-card" v-for="(item, index) in list" :key="index">
              <div class="card-content">
-                <div class="card-avatar"></div>
+                <div class="card-avatar">
+                  <img
+                    :src="item.anchorIcon"
+                    style="width: 100%; height: 100%; border-radius: 100px"
+                    alt=""
+                  />
+                </div>
                <div class="personalInformation">
-                  <div class="name">来自世界上最长名的国家的某个人</div>
+                  <div class="name">{{ item.anchorId }}</div>
                  <div class="GenderAndCountry">
-                    <div class="Gender">女</div>
-                    <div class="Country">来自世界上最长名的国家的名称很长很长哦</div>
+                    <div
+                      class="Gender"
+                      :style="{
+                        background: item.sex == 1 ? '#59D8DB' : '#F3876F',
+                      }"
+                    >
+                      {{ item.sex == 1 ? "男" : "女" }}
+                    </div>
+                    <div class="Country">{{ item.country }}</div>
                    <div class="goldbox">
                      <img
                        class="gold-icon"
-                        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/species.png"
+                        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/gold.png"
                        alt=""
                      />
                      <div class="gold">
                        金币：
-                        <div class="gold-num">999999k</div>
+                        <div class="gold-num">{{ item.coin }}K</div>
+                      </div>
+                    </div>
+                    <div class="goldbox">
+                      <img
+                        class="gold-icon"
+                        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/session.png"
+                        alt=""
+                      />
+                      <div class="gold">
+                        场次：
+                        <div class="gold-num">{{ item.pkNumber }}场</div>
                      </div>
                    </div>
                  </div>
-                  <div class="time">PK时间:2025-08-31 14:06</div>
+                  <div class="time">
+                    PK时间:{{ TimestamptolocalTime(item.pkTime * 1000) }}
+                  </div>
                </div>
                <div class="card-Operation">
-                  <div class="modify">
-                    <img
-                      class="modify-icon"
-                      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/pin.png"
-                      alt=""
-                    />
-                    <!-- <img
-                      class="modify-icon"
-                      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/cancelPin.png"
-                      alt=""
-                    /> -->
-                  </div>
-                  <div class="modify">
-                    <img
-                      class="modify-icon"
-                      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/recompose.png"
-                      alt=""
-                    />
-                  </div>
-                  <div class="delete">
+                  <div class="modify" @click="topPosition(item)">
+                    <!-- 置顶 -->
                    <img
+                      v-if="item.isPin == false"
                      class="delete-icon"
-                      src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/expurgate.png"
+                      src="@/assets/topPosition.png"
                      alt=""
                    />
+                    <img
+                      v-if="item.isPin == true"
+                      class="delete-icon"
+                      src="@/assets/unpinned.png"
+                      alt=""
+                    />
+                  </div>
+                  <!-- 修改 -->
+                  <div class="modify" @click="modify(item)">
+                    <img class="modify-icon" src="@/assets/Editor.png" alt="" />
+                  </div>
+                  <!-- 删除 -->
+                  <div class="delete" @click="deletePKInfo(item)">
+                    <img class="modify-icon" src="@/assets/Delete.png" alt="" />
                  </div>
                </div>
              </div>
@@ -68,10 +91,12 @@
        <!-- 添加或修改主播 -->
        <div class="demo-panel">
          <div class="add-anchor-library">
-            <div class="title">发布新PK</div>
-            <!-- <div class="title">
-                    修改PK信息
-                </div> -->
+            <div class="title">
+              <img class="titleimg" src="@/assets/embellish.png" alt="" />
+              <div v-if="!modifyDialogstate">发布新PK</div>
+              <div v-if="modifyDialogstate">修改PK信息</div>
+              <img class="titleimg" src="@/assets/embellish.png" alt="" />
+            </div>
            <div class="add-anchor-library-content">
              <div class="input-name">
                <!-- 主播名称 -->
@@ -80,9 +105,10 @@
                  v-model="anchorName"
                  size="large"
                  placeholder="请输入主播名称"
+                  @blur="handleChange()"
                />
                <div class="myanchor">
-                  <div class="myanchor-btn">选择我的主播</div>
+                  <div class="myanchor-btn" @click="myAnchorDialogVisible = true">选择我的主播</div>
                </div>
              </div>
              <div class="country">
@@ -111,39 +137,96 @@
              </div>
              <div class="timeselect">
                <el-date-picker
-                  v-model="value1"
+                  v-model="timevalue"
                  type="datetime"
                  placeholder="选择PK时间"
                  size="large"
                  style="width: 100%; height: 100%"
+                  format="YYYY/MM/DD hh:mm"
+                  value-format="x"
                />
              </div>
              <div class="Gold-sessions">
                <div class="Goldcoinbox-right">
                  <div class="Goldcoinbox-text">金币数（单位为K）</div>
-                  <el-input-number
-                    v-model="maxnum"
-                    controls-position="right"
-                    @change="handleChange"
-                  />
+                  <el-input-number v-model="goldvalue" controls-position="right" />
                </div>
                <div class="Goldcoinbox-right">
                  <div class="Goldcoinbox-text">场次</div>
-                  <el-input-number
-                    v-model="maxnum"
-                    controls-position="right"
-                    @change="handleChange"
-                  />
+                  <el-input-number v-model="sessionnum" controls-position="right" />
                </div>
              </div>
-              <div class="Confirm">确认</div>
-              <div class="Reset">重置</div>
+              <div class="remark">
+                <!-- 备注 -->
+                <textarea
+                  v-model="remark"
+                  class="textarea"
+                  style="width: 100%; height: 100%"
+                  maxlength="50"
+                  placeholder="请输入备注（选填）"
+                />
+              </div>
+              <div class="Confirm" @click="Confirm()">确认</div>
+              <div class="Reset" @click="Reset()">重置</div>
+              <div class="Reset" v-if="modifyDialogstate" @click="cancel()">取消</div>
            </div>
          </div>
        </div>
      </el-splitter-panel>
    </el-splitter>
  </div>
+  <!-- 确认删除弹窗 -->
+  <el-dialog
+    class="center-dialog"
+    v-model="centerDialogVisible"
+    title="提示"
+    width="200"
+    align-center
+  >
+    <span>确认删除该条主播PK信息？</span>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="centerDialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="deleteAnchor()"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  <!-- 选择我的主播弹窗 -->
+  <el-dialog 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>
+              </div>
+            </div>
+      </div>
+      <div class="myanchor-dialog-btn">
+        <div class="Reset" @click="myAnchorDialogVisible = false">取消</div>
+        <div class="Confirm" @click="handleSelect">确认</div>
+      </div>
+    </div>
+  </el-dialog>
 </template>

 <script setup>
@@ -154,7 +237,21 @@ import {
  onUpdated, // 组件更新后执行
  onUnmounted, // 组件销毁前执行
 } from "vue";
+import {
+  getPkInfo,
+  getAnchorAvatar,
+  releasePkInfo,
+  editPkInfo,
+  delPkInfo,
+  topPkInfo,
+  cancelTopPkInfo,
+  getAnchorList
+} from "@/api/account";
+import { TimestamptolocalTime } from "@/utils/timeConversion.js";
 import { getCountryNamesArray } from "../../utils/countryUtil";
+import { ElLoading } from "element-plus";
+import { ElMessage } from "element-plus";
+import { setStorage, getStorage, getPromiseStorage } from "@/utils/storage.js";

 const country = ref([]);
 country.value = getCountryNamesArray(); //国家条目
@@ -162,20 +259,237 @@ const genderOptions = [
  { value: 1, label: "男" },
  { value: 2, label: "女" },
 ]; // 性别选项
+const user = ref(null); // 用户信息
 const gendervalue = ref(null); // 性别值
 const countryvalue = ref(null); //国家
 const anchorName = ref(null); // 主播名称
-const refname = ref("");
-const list = ref([{}, {}, {}, {}, {}]);
-
-function load() {
-  // 加载更多数据
+const AnchorProfilePicture = ref(""); // 主播头像
+const timevalue = ref(null); // PK时间
+const goldvalue = ref(null); // 金币数
+const sessionnum = ref(null); // 场次
+const remark = ref(null); // 备注
+const list = ref([]); // PK信息列表
+const page = ref(0); // 页码
+const centerDialogVisible = ref(false); // 确认删除弹窗
+const modifyDialogstate = ref(false); // 修改弹窗
+const modifyDialogstateID = ref(null); // 修改弹窗ID
+const myAnchorDialogVisible = ref(false); // 选择我的主播弹窗
+const anchorLibrary = ref([]); // 我的主播库
+const selectAnchor = ref(null); //选中的主播信息
+// 选择我的主播
+function selectStreamerLibrary(item) {
+  selectAnchor.value = item
 }
-watch(refname, async (newQuestion, oldQuestion) => {
-  // 变化后执行
-});
+
+
+//获取我的主播库数据
+function getMyAnchorLibrary() {
+  getAnchorList({id: user.value.id}).then((res) => {
+    console.log("anchorLibrary", res);
+    anchorLibrary.value = res
+  })
+}
+// 置顶or取消置顶
+function topPosition(item) {
+
+
+}
+// 修改
+function modify(item) {
+  if (modifyDialogstate.value) {
+    cancel();
+    return;
+  }
+  modifyDialogstateID.value = item.id;
+  modifyDialogstate.value = true;
+  countryvalue.value = item.country;
+  gendervalue.value = item.sex;
+  anchorName.value = item.anchorId;
+  AnchorProfilePicture.value = item.anchorIcon.split("/").pop();
+  timevalue.value = item.pkTime * 1000;
+  goldvalue.value = item.coin;
+  sessionnum.value = item.pkNumber;
+  remark.value = item.remark;
+}
+// 取消
+function cancel() {
+  modifyDialogstateID.value = null;
+  modifyDialogstate.value = false;
+  countryvalue.value = null;
+  gendervalue.value = null;
+  anchorName.value = null;
+  AnchorProfilePicture.value = null;
+  timevalue.value = null;
+  goldvalue.value = null;
+  sessionnum.value = null;
+  remark.value = null;
+}
+// 删除
+const deletePKInfodata = ref(null);
+function deletePKInfo(item) {
+  deletePKInfodata.value = item;
+  centerDialogVisible.value = true;
+}
+// 确认删除
+function deleteAnchor() {
+  centerDialogVisible.value = false;
+  delPkInfo({
+    id: deletePKInfodata.value.id,
+  }).then((res) => {
+    ElMessage.success("删除成功");
+    list.value = [];
+    page.value = 0;
+    PKInfo();
+  });
+}
+
+// 确认发布
+function Confirm() {
+  const currentTime = Date.now();
+  if (anchorName.value == null || anchorName.value == "") {
+    ElMessage.error("请输入主播名称");
+    return;
+  }
+  if (gendervalue.value == null || gendervalue.value == "") {
+    ElMessage.error("请选择性别");
+    return;
+  }
+  if (timevalue.value == null || timevalue.value == "") {
+    ElMessage.error("请选择PK时间");
+    return;
+  }
+  if (currentTime > timevalue.value) {
+    ElMessage.error("PK时间不能早于当前时间");
+    return;
+  }
+  if (countryvalue.value == null || countryvalue.value == "") {
+    ElMessage.error("请选择国家");
+    return;
+  }
+  if (goldvalue.value == null || goldvalue.value == "") {
+    ElMessage.error("请输入金币数");
+    return;
+  }
+  if (sessionnum.value == null || sessionnum.value == "") {
+    ElMessage.error("请输入场次");
+    return;
+  }
+  const loading = ElLoading.service({
+    lock: true,
+    text: "发布中....",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+  if (modifyDialogstate.value) {
+    editPkInfo({
+      id: modifyDialogstateID.value,
+      anchorId: anchorName.value,
+      pkTime: timevalue.value / 1000,
+      sex: gendervalue.value,
+      country: countryvalue.value,
+      coin: goldvalue.value,
+      remark: remark.value,
+      status: 0,
+      senderId: user.value.id,
+      anchorIcon: AnchorProfilePicture.value,
+      pkNumber: sessionnum.value,
+    }).then((res) => {
+      loading.close();
+      ElMessage.success("修改成功");
+      list.value = [];
+      page.value = 0;
+      PKInfo();
+      cancel();
+    });
+  } else {
+    releasePkInfo({
+      anchorId: anchorName.value,
+      pkTime: timevalue.value / 1000,
+      sex: gendervalue.value,
+      country: countryvalue.value,
+      coin: goldvalue.value,
+      remark: remark.value,
+      status: 0,
+      senderId: user.value.id,
+      anchorIcon: AnchorProfilePicture.value,
+      pkNumber: sessionnum.value,
+    })
+      .then((res) => {
+        loading.close();
+        ElMessage.success("发布成功");
+        list.value = [];
+        page.value = 0;
+        PKInfo();
+        Reset();
+      })
+      .catch((err) => {
+        loading.close();
+        console.log(err);
+      });
+  }
+}
+
+// 重置
+function Reset() {
+  anchorName.value = null;
+  gendervalue.value = null;
+  timevalue.value = null;
+  goldvalue.value = null;
+  sessionnum.value = null;
+  remark.value = null;
+  countryvalue.value = null 
+}
+
+//输入框失去焦点
+function handleChange() {
+  if (anchorName.value == null || anchorName.value == "") {
+    ElMessage.error("请输入主播名称");
+    return;
+  }
+  const loading = ElLoading.service({
+    lock: true,
+    text: "查询主播中....",
+    background: "rgba(0, 0, 0, 0.7)",
+  });
+  getAnchorAvatar({ name: anchorName.value })
+    .then((res) => {
+      loading.close();
+      AnchorProfilePicture.value = res;
+      ElMessage.success("查询成功");
+    })
+    .catch((err) => {
+      loading.close();
+    });
+}
+
+// 加载更多
+function load() {
+  page.value++;
+  PKInfo();
+}
+
+//PK信息列表
+function PKInfo() {
+  getPkInfo({
+    userId: user.value.id,
+    page: page.value,
+    size: 10,
+  }).then((res) => {
+    console.log("list", res);
+    list.value.push(...res);
+  });
+}
+
+// 组件挂载完成后执行
 onMounted(() => {
-  // 组件挂载完成后执行
+  getPromiseStorage("user")
+    .then((res) => {
+      user.value = res;
+      PKInfo();
+      getMyAnchorLibrary();
+    })
+    .catch((err) => {
+      console.log(err);
+    });
 });
 onUpdated(() => {
  // 组件更新后执行
@@ -183,6 +497,10 @@ onUpdated(() => {
 onUnmounted(() => {
  // 组件销毁前执行
 });
+const refname = ref(""); //
+watch(refname, async (newQuestion, oldQuestion) => {
+  // 变化后执行
+});
 </script>

 <style scoped lang="less">
@@ -211,15 +529,15 @@ onUnmounted(() => {
 .card-content {
  width: 90%;
  height: 100%;
-  border-radius: 20px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-  background-image: linear-gradient(45deg, @bg-Sidebar-color-bottom, @bg-color);
+  border-radius: 10px;
+  background-image: url(../../assets/PKbackground.png);
+  background-size: 100% 100%;
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
 }
 .card-content:hover {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.08);
  opacity: 0.8;
 }
@@ -250,17 +568,17 @@ onUnmounted(() => {
 }
 .Gender {
  font-size: 16px;
-  color: #666666;
+  color: #ffffff;
  border-radius: 50px;
-  background-color: #ffffff;
-  padding: 2px 20px 2px 20px;
+  padding: 5px 20px 5px 20px;
  margin-right: 20px;
+  line-height: 100%;
 }
 .Country {
  font-size: 16px;
-  color: #666666;
+  color: #03aba8;
  border-radius: 50px;
-  background-color: #ffffff;
+  background-color: #e4f9f9;
  padding: 2px 20px 2px 20px;
 }
 .goldbox {
@@ -300,10 +618,18 @@ onUnmounted(() => {
 .modify-icon {
  width: 30px;
  height: 30px;
+  transition: all 0.4s ease;
+}
+.modify-icon:hover {
+  transform: scale(1.3);
 }
 .delete-icon {
-  width: 30px;
-  height: 30px;
+  width: 20px;
+  height: 28px;
+  transition: all 0.4s ease;
+}
+.delete-icon:hover {
+  transform: scale(1.3);
 }
 .add-anchor-library {
  width: 100%;
@@ -313,13 +639,20 @@ onUnmounted(() => {
  align-items: center;
 }
 .title {
-  width: 100%;
+  width: 80%;
  height: 70px;
  font-size: 24px;
  font-weight: bold;
  color: #333333;
  text-align: center;
  line-height: 70px;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+.titleimg {
+  width: 44px;
+  height: 30px;
 }
 .add-anchor-library-content {
  width: 100%;
@@ -335,11 +668,11 @@ onUnmounted(() => {
  display: flex;
 }
 .input-name-input {
-  width: 50%;
+  width: 70%;
  height: 40px;
 }
 .myanchor {
-  width: 50%;
+  width: 30%;
  height: 40px;
  display: flex;
  justify-content: center;
@@ -347,19 +680,17 @@ onUnmounted(() => {
 }
 .myanchor-btn {
  width: 90%;
-  height: 35px;
-  border-radius: 5px;
-  font-size: 16px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  height: 40px;
+  border-radius: 2px;
+  font-size: 12px;
+  background-image: linear-gradient(to top, #4fcacd, #5fdbde);
  text-align: center;
-  line-height: 35px;
+  line-height: 40px;
  transition: all 0.4s ease;
-  color: @Prompt-text-color;
+  color: #ffffff;
 }
 .myanchor-btn:hover {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-  transform: scale(1.1);
-  opacity: 0.8;
+  transform: scale(1.03);
 }
 .country {
  width: 90%;
@@ -387,7 +718,7 @@ onUnmounted(() => {
  justify-content: space-between;
  align-items: center;
 }
-.Goldcoinbox-right{
+.Goldcoinbox-right {
  display: flex;
  flex-direction: column;
 }
@@ -395,40 +726,86 @@ onUnmounted(() => {
  font-size: 12px;
  color: @Prompt-text-color;
 }
-.Confirm {
+.remark {
+  margin-top: 30px;
+  width: 98%;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  // margin-top: 10px;
+}
+.textarea {
  width: 90%;
+  height: 90%;
+  max-height: 90%;
+  border: 1px solid #4fcacd;
+  border-radius: 10px;
+  outline: none;
+  overflow: hidden;
+  background-color: #ff000000;
+  font-size: 16px;
+  margin-left: 5px;
+  margin-right: 5px;
+  color: #000000;
+  letter-spacing: 1px;
+  resize: none;
+}
+.Confirm {
+  width: 400px;
  height: 50px;
-  margin-top: 100px;
+  margin-top: 40px;
  text-align: center;
  line-height: 50px;
-  background-color: #ffffff;
-  color: @Prompt-text-color;
-  font-size: 20px;
+  background-image: linear-gradient(to top, #4fcacd, #5fdbde);
+  color: #ffffff;
+  font-size: 22px;
  transition: all 0.4s ease;
-  border-radius: 20px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 25px;
 }
 .Confirm:hover {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-  transform: scale(1.1);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  transform: scale(1.05);
  opacity: 0.8;
 }
 .Reset {
-  width: 90%;
+  width: 400px;
  height: 50px;
  margin-top: 30px;
  text-align: center;
  line-height: 50px;
-  background-color: #ffffff;
-  color: @Prompt-text-color;
-  font-size: 20px;
+  background-image: linear-gradient(to top, #e4ffff, #ffffff);
+  border: 1px solid #4fcacd;
+  color: #03aba8;
+  font-size: 22px;
  transition: all 0.4s ease;
-  border-radius: 20px;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  border-radius: 25px;
 }
 .Reset:hover {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
-  transform: scale(1.1);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  transform: scale(1.05);
  opacity: 0.8;
 }
+.myanchor-content{
+  width: 100%;
+  height: 600px;
+}
+.myanchor-list{
+  width: 100%;
+  height: 500px;
+  background-color: #E0F4F1;
+  border-radius: 16px;
+  border: 1px solid #4fcacd;
+  overflow: auto;
+}
+.myanchor-list::-webkit-scrollbar {
+  display: none;
+}
+.myanchor-dialog-btn{
+  width: 100%;
+  height: 100px;
+  display: flex;
+  justify-content:space-around;
+  align-items: center;
+}
 </style>