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

<template>
  <!-- 主播库 -->
  <div class="anchor-library">
    <el-splitter>
      <el-splitter-panel size="75%">
        <!-- 主播列表 -->
        <div class="demo-panel">
          <div
            class="anchor-library-list"
            style="overflow: auto"
            v-infinite-scroll="load"
            v-if="list.length !== 0"
          >
            <div class="anchor-library-card" v-for="(item, index) in list" :key="index">
              <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 ?t('man') : t('woman') }}
                      <!-- gj男女 -->
                    </div>
                    <div class="Country">{{ item.country }}</div>
                  </div>
                </div>
                <div class="card-Operation">
                  <!-- 编辑 -->
                  <div class="modify" @click="anchormodify(item)">
                    <img class="modify-icon" src="@/assets/Editor.png" alt="" />
                  </div>
                  <!-- 删除 -->
                  <div class="delete" @click="anchordelete(item.id)">
                    <img class="delete-icon" src="@/assets/Delete.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="chatNotDeta" v-if="list.length === 0">
            <div class="chatNotDeta-text">{{ t('YouDonHaveALiveStreamerYetHurryUpAndAddOne') }}</div>
            <!-- gj您还没有主播，快去添加吧！ -->
          </div>
        </div>
      </el-splitter-panel>
      <el-splitter-panel size="25%" :collapsible="true" :resizable="false">
        <!-- 添加或修改主播 -->
        <div class="demo-panel">
          <div class="add-anchor-library">
            <div class="title">
              <img class="titleimg" src="@/assets/embellish.png" alt="" />
              <div v-if="!anchormodifystate">{{ t('AddMyStreamer') }}</div>
              <!-- gj添加主播 -->
              <div v-if="anchormodifystate">{{ t('ModifyMyStreamer') }}</div>
              <!-- gj修改主播 -->
              <img class="titleimg" src="@/assets/embellish.png" alt="" />
            </div>
            <div class="add-anchor-library-content">
              <div class="input-name">
                <!-- 主播名称 -->
                <el-input
                  @blur="blur()"
                  v-model="anchorName"
                  size="large"
                  :placeholder="t('PleaseEnterTheNameOfTheHost')"
                />
              </div>
              <div class="country">
                <!-- 国家 -->
                <el-select-v2
                  v-model="countryvalue"
                  filterable
                  :options="country"
                  :placeholder="t('PleaseSelectACountry')"
                  size="large"
                  style="vertical-align: middle"
                  class="select"
                />
              </div>
              <!-- gj选择国家 -->
              <div class="gender">
                <!-- 性别 -->
                <el-select-v2
                  v-model="gendervalue"
                  filterable
                  :options="genderOptions"
                  size="large"
                  :placeholder="t('PleaseSelectACountry')"
                  style="vertical-align: middle"
                  class="select"
                />
                <!-- gj男女 -->
              </div>
              <div class="Confirm" @click="Confirm()">{{ t('Confirm') }}</div>
              <div class="Reset" @click="Reset()">{{ t('Reset') }}</div>
              <div class="Reset" v-if="anchormodifystate" @click="cancel()">{{ t('Cancel') }}</div>
            </div>
          </div>
        </div>
      </el-splitter-panel>
    </el-splitter>
  </div>
  <!-- 确认删除弹窗 -->
  <el-dialog
    center
    class="center-dialog"
    v-model="centerDialogVisible"
    :title="t('Hint')"
    width="200"
    align-center
  >
  <!-- gj提示 -->
    <span>{{ t('ConfirmTheDeletionOfThisStreamer') }}</span>
    <!-- gj确认删除此主播 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">{{ t('Cancel') }}</el-button>
        <!-- gj取消 -->
        <el-button type="primary" @click="deleteAnchor()"> {{ t('Confirm') }}</el-button>
        <!-- gj确认 -->
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {
  ref, // 响应式基础
  watch, // 侦听器
  onMounted, // 组件挂载完成后执行
  onUpdated, // 组件更新后执行
  onUnmounted, // 组件销毁前执行
} from "vue";
import {
  getAnchorList,
  getAnchorAvatar,
  addAnchor,
  delAnchor,
  editAnchor,
} from "@/api/account";
import { getCountryNamesArray } from "../../utils/countryUtil";
import { ElLoading } from "element-plus";
import { ElMessage } from "element-plus";
import { setStorage, getStorage, getPromiseStorage } from "@/utils/storage.js";
// 
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
window['$t'] = t
// 
const country = ref([]);
country.value = getCountryNamesArray(); //国家条目
const genderOptions = [
  { value: 1, label: t('man') },
  { value: 2, label: t('woman') },
]; // 性别选项
const gendervalue = ref(null); // 性别值
const countryvalue = ref(null); //国家
const anchorName = ref(null); // 主播名称
const list = ref([]);
const user = ref(null); // 用户信息
const AnchorProfilePicture = ref(null); // 主播头像
const centerDialogVisible = ref(false); // 确认删除弹窗
const anchormodifystate = ref(false); // 编辑
const anchormodifystateId = ref(null); // 主播头像
// 获取主播列表
function AnchorList() {
  getAnchorList({ id: user.value.id })
    .then((res) => {
      list.value = res;
    })
    .catch((err) => {
      console.log(err);
    });
}
//编辑主播
function anchormodify(item) {
  if (anchormodifystate.value == true) {
    cancel();
    return;
  }
  anchormodifystateId.value = item.id;
  anchorName.value = item.anchorId;
  gendervalue.value = item.gender;
  countryvalue.value = item.country;
  AnchorProfilePicture.value = item.headerIcon.split("/").pop();
  anchormodifystate.value = true;
}
// 取消编辑
function cancel() {
  anchormodifystateId.value = null;
  anchorName.value = null;
  gendervalue.value = null;
  countryvalue.value = null;
  AnchorProfilePicture.value = null;
  anchormodifystate.value = false;
}
// 删除主播
const deleteAnchorID = ref(null);
const deleteAnchor = () => {
  delAnchor({ id: deleteAnchorID.value })
    .then((res) => {
      centerDialogVisible.value = false;
      ElMessage.success(t('DeletedSuccessfully'));
      // gj删除成功
      AnchorList();
      cancel();
    })
    .catch((err) => {});
};
function anchordelete(id) {
  deleteAnchorID.value = id;
  centerDialogVisible.value = true;
}
// 加载更多
function load() {}
// 确认添加或修改主播
function Confirm() {
  if (anchorName.value == null || anchorName.value == "") {
    ElMessage.error(t('PleaseEnterTheNameOfTheHost'));
    // gj请输入主播名称
    return;
  }
  if (gendervalue.value == null) {
    ElMessage.error(t('PleaseSelectGender'));
    // gj请选择性别
    return;
  }
  if (countryvalue.value == null) {
    ElMessage.error(t('PleaseSelectACountry'));
    //gj请选择国家
    return;
  }
  //修改主播还是添加
  if (anchormodifystate.value) {
    //修改主播
    editAnchor({
      id: anchormodifystateId.value,
      anchorId: anchorName.value,
      headerIcon: AnchorProfilePicture.value,
      gender: gendervalue.value,
      country: countryvalue.value,
      createUserId: user.value.id,
    })
      .then((res) => {
        ElMessage.success(t('ModificationSuccessful'));
        // gj修改成功
        cancel();
        AnchorList();
      })
      .catch((err) => {
        console.log(err);
      });
  } else {
    //添加主播
    addAnchor({
      anchorId: anchorName.value,
      headerIcon: AnchorProfilePicture.value,
      gender: gendervalue.value,
      country: countryvalue.value,
      createUserId: user.value.id,
    })
      .then((res) => {
        ElMessage.success(t('AddedSuccessfully'));
        AnchorList();
      })
      .catch((err) => {
        console.log(err);
      });
  }
}
// 重置
function Reset() {
  anchorName.value = null;
  gendervalue.value = null;
  countryvalue.value = null;
}
//输入框失去焦点
function blur() {
  if (anchorName.value == null || anchorName.value == "") {
    ElMessage.error(t('PleaseEnterTheNameOfTheHost'));
    // gj请输入主播名称
    return;
  }
  const loading = ElLoading.service({
    lock: true,
    text: t('CheckTheStreamerAt'),
    // gj正在检查主播
    background: "rgba(0, 0, 0, 0.7)",
  });
  getAnchorAvatar({ name: anchorName.value })
    .then((res) => {
      loading.close();
      AnchorProfilePicture.value = res;
    })
    .catch((err) => {
      loading.close();
      console.log(err);
    });
}

// 组件挂载完成后执行
onMounted(() => {
  getPromiseStorage("user")
    .then((res) => {
      user.value = res;
      AnchorList();
    })
    .catch((err) => {
      console.log(err);
    });
});

const refname = ref("");
watch(refname, async (newQuestion, oldQuestion) => {
  // 变化后执行
});
onUpdated(() => {
  // 组件更新后执行
});
onUnmounted(() => {
  // 组件销毁前执行
});
</script>

<style scoped lang="less">
.anchor-library {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.anchor-library-list {
  width: 100%;
  height: 100%;
}
.chatNotDeta{
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.chatNotDeta-text{
  font-size: 20px;
  color: #03aba8;
  font-weight: bold;
}
.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.05);
  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-around;
}

.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: 2px 20px 2px 20px;
  margin-right: 20px;
}
.Country {
  font-size: 16px;
  color: #666666;
  border-radius: 50px;
  background-color: #ffffff;
  padding: 2px 20px 2px 20px;
}
.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.2);
}
.modify-icon:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.delete-icon {
  width: 30px;
  height: 30px;
  transition: all 0.4s ease;
}
.delete-icon:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.delete-icon:hover {
  transform: scale(1.2);
}
.demo-panel {
  width: 100%;
  height: 100%;
}
.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: 80%;
  height: 50px;
  margin-top: 20px;
}
.country {
  width: 80%;
  height: 50px;
  margin-top: 20px;
}
.gender {
  width: 80%;
  height: 80px;
  margin-top: 20px;
}
.select {
  width: 100%;
}
.Confirm {
  width: 400px;
  height: 50px;
  margin-top: 200px;
  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.1);
  opacity: 0.8;
}
.Confirm:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.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.1);
  opacity: 0.8;
}
.Reset:active {
  transition: all 0.1s ease;
  transform: scale(0.95) !important;
}
.center-dialog {
  background-color: #03aba8;
}
</style>