tk-mini-program-PC/src/components/mineSubComponent/PKmessage.vue

<template>
  <!-- PK信息 -->
  <div class="pk-message">
    <el-splitter>
      <el-splitter-panel>
        <div class="demo-panel">
          <div
            class="anchor-library-list"
            style="overflow: auto"
            v-infinite-scroll="load"
          >
            <div class="anchor-library-card" v-for="(item, index) in list" :key="index">
              <div class="card-content">
                <div class="card-avatar">
                  <img
                    :src="item.anchorIcon"
                    style="width: 100%; height: 100%; border-radius: 100px"
                    alt=""
                  />
                </div>
                <div class="personalInformation">
                  <div class="name">{{ item.anchorId }}</div>
                  <div class="GenderAndCountry">
                    <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/gold.png"
                        alt=""
                      />
                      <div class="gold">
                        金币：
                        <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时间:{{ TimestamptolocalTime(item.pkTime * 1000) }}
                  </div>
                </div>
                <div class="card-Operation">
                  <div class="modify" @click="topPosition(item)">
                    <!-- 置顶 -->
                    <img
                      v-if="item.isPin == false"
                      class="delete-icon"
                      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>
            </div>
          </div>
        </div>
      </el-splitter-panel>
      <el-splitter-panel size="25%" :resizable="false" collapsible>
        <!-- 添加或修改主播 -->
        <div class="demo-panel">
          <div class="add-anchor-library">
            <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">
                <!-- 主播名称 -->
                <el-input
                  class="input-name-input"
                  v-model="anchorName"
                  size="large"
                  placeholder="请输入主播名称"
                  @blur="handleChange()"
                />
                <div class="myanchor">
                  <div class="myanchor-btn" @click="myAnchorDialogVisible = true">选择我的主播</div>
                </div>
              </div>
              <div class="country">
                <!-- 国家 -->
                <el-select-v2
                  v-model="countryvalue"
                  filterable
                  :options="country"
                  placeholder="请选择国家"
                  size="large"
                  style="vertical-align: middle"
                  class="select"
                />
              </div>
              <div class="gender">
                <!-- 性别 -->
                <el-select-v2
                  v-model="gendervalue"
                  filterable
                  :options="genderOptions"
                  size="large"
                  placeholder="请选择性别"
                  style="vertical-align: middle"
                  class="select"
                />
              </div>
              <div class="timeselect">
                <el-date-picker
                  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="goldvalue" controls-position="right" />
                </div>
                <div class="Goldcoinbox-right">
                  <div class="Goldcoinbox-text">场次</div>
                  <el-input-number v-model="sessionnum" controls-position="right" />
                </div>
              </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>
import {
  ref, // 响应式基础
  watch, // 侦听器
  onMounted, // 组件挂载完成后执行
  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(); //国家条目
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 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
}


//获取我的主播库数据
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(() => {
  // 组件更新后执行
});
onUnmounted(() => {
  // 组件销毁前执行
});
const refname = ref(""); //
watch(refname, async (newQuestion, oldQuestion) => {
  // 变化后执行
});
</script>

<style scoped lang="less">
.pk-message {
  width: 100%;
  height: 100%;
}
.demo-panel {
  width: 100%;
  height: 100%;
}
.anchor-library-list {
  width: 100%;
  height: 100%;
}
.anchor-library-card {
  width: 100%;
  height: 150px;
  margin-bottom: 15px;
  margin-top: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-content {
  width: 90%;
  height: 100%;
  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.3);
  transform: scale(1.08);
  opacity: 0.8;
}
.card-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ffffff;
  margin-left: 20px;
}
.personalInformation {
  width: calc(100% - 340px);
  height: 100px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.name {
  font-size: 20px;
  font-weight: bold;
  color: #333333;
}
.GenderAndCountry {
  display: flex;
  align-items: center;
}
.Gender {
  font-size: 16px;
  color: #ffffff;
  border-radius: 50px;
  padding: 5px 20px 5px 20px;
  margin-right: 20px;
  line-height: 100%;
}
.Country {
  font-size: 16px;
  color: #03aba8;
  border-radius: 50px;
  background-color: #e4f9f9;
  padding: 2px 20px 2px 20px;
}
.goldbox {
  margin-left: 20px;
  display: flex;
  align-items: center;
}
.gold-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.gold {
  color: @Prompt-text-color;
  font-size: 16px;
  display: flex;
  align-items: center;
}
.gold-num {
  font-size: 16px;
  color: @font-color;
  font-weight: bold;
}
.time {
  font-size: 14px;
  color: @Prompt-text-color;
}
.card-Operation {
  width: 200px;
  height: 100px;
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.modify-icon {
  width: 30px;
  height: 30px;
  transition: all 0.4s ease;
}
.modify-icon:hover {
  transform: scale(1.3);
}
.delete-icon {
  width: 20px;
  height: 28px;
  transition: all 0.4s ease;
}
.delete-icon:hover {
  transform: scale(1.3);
}
.add-anchor-library {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  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%;
  height: calc(100% - 70px);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.input-name {
  width: 90%;
  height: 50px;
  margin-top: 20px;
  display: flex;
}
.input-name-input {
  width: 70%;
  height: 40px;
}
.myanchor {
  width: 30%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.myanchor-btn {
  width: 90%;
  height: 40px;
  border-radius: 2px;
  font-size: 12px;
  background-image: linear-gradient(to top, #4fcacd, #5fdbde);
  text-align: center;
  line-height: 40px;
  transition: all 0.4s ease;
  color: #ffffff;
}
.myanchor-btn:hover {
  transform: scale(1.03);
}
.country {
  width: 90%;
  height: 50px;
  margin-top: 20px;
}
.gender {
  width: 90%;
  height: 50px;
  margin-top: 20px;
}
.select {
  width: 100%;
}
.timeselect {
  width: 90%;
  height: 40px;
  margin-top: 20px;
}
.Gold-sessions {
  width: 90%;
  height: 50px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.Goldcoinbox-right {
  display: flex;
  flex-direction: column;
}
.Goldcoinbox-text {
  font-size: 12px;
  color: @Prompt-text-color;
}
.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: 40px;
  text-align: center;
  line-height: 50px;
  background-image: linear-gradient(to top, #4fcacd, #5fdbde);
  color: #ffffff;
  font-size: 22px;
  transition: all 0.4s ease;
  border-radius: 25px;
}
.Confirm:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
  opacity: 0.8;
}
.Reset {
  width: 400px;
  height: 50px;
  margin-top: 30px;
  text-align: center;
  line-height: 50px;
  background-image: linear-gradient(to top, #e4ffff, #ffffff);
  border: 1px solid #4fcacd;
  color: #03aba8;
  font-size: 22px;
  transition: all 0.4s ease;
  border-radius: 25px;
}
.Reset:hover {
  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>