优化代码
This commit is contained in:
pengxiaolong
@@ -12,28 +12,35 @@
|
||||
>
|
||||
<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
|
||||
style="width: 100%; height: 100%; border-radius: 100px"
|
||||
:src="item.headerIcon"
|
||||
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.gender == 1 ? '#59D8DB' : '#F3876F',
|
||||
}"
|
||||
>
|
||||
{{ item.gender == 1 ? "男" : "女" }}
|
||||
</div>
|
||||
<div class="Country">{{ item.country }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-Operation">
|
||||
<div class="modify">
|
||||
<img
|
||||
class="modify-icon"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/recompose.png"
|
||||
alt=""
|
||||
/>
|
||||
<!-- 编辑 -->
|
||||
<div class="modify" @click="anchormodify(item)">
|
||||
<img class="modify-icon" src="@/assets/Editor.png" alt="" />
|
||||
</div>
|
||||
<div class="delete">
|
||||
<img
|
||||
class="delete-icon"
|
||||
src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/expurgate.png"
|
||||
alt=""
|
||||
/>
|
||||
<!-- 删除 -->
|
||||
<div class="delete" @click="anchordelete(item.id)">
|
||||
<img class="delete-icon" src="@/assets/Delete.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,14 +52,21 @@
|
||||
<!-- 添加或修改主播 -->
|
||||
<div class="demo-panel">
|
||||
<div class="add-anchor-library">
|
||||
<div class="title">添加我的主播</div>
|
||||
<!-- <div class="title">
|
||||
修改主播信息
|
||||
</div> -->
|
||||
<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 v-model="anchorName" size="large" placeholder="请输入主播名称" />
|
||||
<el-input
|
||||
@blur="blur()"
|
||||
v-model="anchorName"
|
||||
size="large"
|
||||
placeholder="请输入主播名称"
|
||||
/>
|
||||
</div>
|
||||
<div class="country">
|
||||
<!-- 国家 -->
|
||||
@@ -78,14 +92,31 @@
|
||||
class="select"
|
||||
/>
|
||||
</div>
|
||||
<div class="Confirm">确认</div>
|
||||
<div class="Reset">重置</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
|
||||
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>
|
||||
@@ -96,8 +127,17 @@ import {
|
||||
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 = [
|
||||
@@ -105,20 +145,157 @@ const genderOptions = [
|
||||
{ value: 2, label: "女" },
|
||||
]; // 性别选项
|
||||
const gendervalue = ref(null); // 性别值
|
||||
const countryvalue = ref(null);//国家
|
||||
const anchorName = 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 load() {
|
||||
|
||||
// 获取主播列表
|
||||
function AnchorList() {
|
||||
getAnchorList({ id: user.value.id })
|
||||
.then((res) => {
|
||||
list.value = res;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
const refname = ref('');
|
||||
//编辑主播
|
||||
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) => {
|
||||
// 变化后执行
|
||||
});
|
||||
onMounted(() => {
|
||||
// 组件挂载完成后执行
|
||||
});
|
||||
onUpdated(() => {
|
||||
// 组件更新后执行
|
||||
});
|
||||
@@ -153,14 +330,15 @@ onUnmounted(() => {
|
||||
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);
|
||||
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);
|
||||
transform: scale(1.08);
|
||||
transform: scale(1.05);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.card-avatar {
|
||||
@@ -190,9 +368,8 @@ onUnmounted(() => {
|
||||
}
|
||||
.Gender {
|
||||
font-size: 16px;
|
||||
color: #666666;
|
||||
color: #ffffff;
|
||||
border-radius: 50px;
|
||||
background-color: #ffffff;
|
||||
padding: 2px 20px 2px 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
@@ -215,10 +392,18 @@ onUnmounted(() => {
|
||||
.modify-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.modify-icon:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.delete-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.delete-icon:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
.demo-panel {
|
||||
width: 100%;
|
||||
@@ -232,13 +417,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%;
|
||||
@@ -266,39 +458,41 @@ onUnmounted(() => {
|
||||
width: 100%;
|
||||
}
|
||||
.Confirm {
|
||||
width: 80%;
|
||||
width: 400px;
|
||||
height: 50px;
|
||||
margin-top: 200px;
|
||||
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);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.Reset {
|
||||
width: 80%;
|
||||
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);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
|
||||
transform: scale(1.1);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.center-dialog {
|
||||
background-color: #03aba8;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user