518 lines
13 KiB
Vue
518 lines
13 KiB
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"
|
||
>
|
||
<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 ? "男" : "女" }}
|
||
</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>
|
||
</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">添加我的主播</div>
|
||
<div v-if="anchormodifystate">修改我的主播</div>
|
||
<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="请输入主播名称"
|
||
/>
|
||
</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="Confirm" @click="Confirm()">确认</div>
|
||
<div class="Reset" @click="Reset()">重置</div>
|
||
<div class="Reset" v-if="anchormodifystate" @click="cancel()">取消</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-splitter-panel>
|
||
</el-splitter>
|
||
</div>
|
||
<!-- 确认删除弹窗 -->
|
||
<el-dialog center
|
||
class="center-dialog"
|
||
v-model="centerDialogVisible"
|
||
title="提示"
|
||
width="200"
|
||
align-center
|
||
>
|
||
<span>确认删除该主播？</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>
|
||
</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";
|
||
const country = ref([]);
|
||
country.value = getCountryNamesArray(); //国家条目
|
||
const genderOptions = [
|
||
{ value: 1, label: "男" },
|
||
{ value: 2, label: "女" },
|
||
]; // 性别选项
|
||
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("删除成功");
|
||
AnchorList();
|
||
});
|
||
};
|
||
function anchordelete(id) {
|
||
deleteAnchorID.value = id;
|
||
centerDialogVisible.value = true;
|
||
}
|
||
// 加载更多
|
||
function load() {}
|
||
// 确认添加或修改主播
|
||
function Confirm() {
|
||
if (anchorName.value == null || anchorName.value == "") {
|
||
ElMessage.error("请输入主播名称");
|
||
return;
|
||
}
|
||
if (gendervalue.value == null) {
|
||
ElMessage.error("请选择性别");
|
||
return;
|
||
}
|
||
if (countryvalue.value == null) {
|
||
ElMessage.error("请选择国家");
|
||
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("修改成功");
|
||
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("添加成功");
|
||
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("请输入主播名称");
|
||
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;
|
||
})
|
||
.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%;
|
||
}
|
||
.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>
|