xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:个人信息组件新增等级限制展示

Browse Source
This commit is contained in:
Xwen
2023-12-23 15:02:49 +08:00
parent 935f5aa529
commit 004cf1d5c0
2 changed files with 187 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
Yi.Bbs.Vue3/src/components/AvatarInfo.vue
View File

@@ -9,7 +9,17 @@
<div v-if="!props.isSelf"> <div v-if="!props.isSelf">
<div class="nick" :class="{ mt_1: props.time != 'undefined' }"> <div class="nick" :class="{ mt_1: props.time != 'undefined' }">
{{ userInfo.nick }} <div class="text">{{ userInfo.nick }}</div>
<div class="level">
<el-tag round effect="light" type="success">{{
userInfo.level
}}</el-tag>
</div>
<div class="status">
<el-tag round effect="light" :type="userInfo.userLimit.type">
{{ userInfo.userLimit.label }}
</el-tag>
</div>
</div> </div>
<div class="remarks" v-if="props.time">{{ props.time }}</div> <div class="remarks" v-if="props.time">{{ props.time }}</div>
<div class="remarks"> <div class="remarks">
@@ -48,6 +58,8 @@ const userInfo = reactive({
nick: "", nick: "",
role: [], role: [],
id: "", id: "",
level: 1,
userLimit: 0,
}); });
const iconUrl = ref("/favicon.ico"); const iconUrl = ref("/favicon.ico");
const iconUrlHandler = () => { const iconUrlHandler = () => {
@@ -86,6 +98,8 @@ const Init = () => {
userInfo.nick = props.userInfo.nick; userInfo.nick = props.userInfo.nick;
userInfo.role = props.userInfo.role; userInfo.role = props.userInfo.role;
userInfo.id = props.userInfo.id; userInfo.id = props.userInfo.id;
userInfo.level = "等级" + props.userInfo.level;
userInfo.userLimit = getStatusInfo(1);
iconUrl.value = iconUrlHandler(userInfo.icon); iconUrl.value = iconUrlHandler(userInfo.icon);
} }
@@ -98,6 +112,28 @@ const Init = () => {
iconUrl.value = userInfo.icon; iconUrl.value = userInfo.icon;
} }
}; };
const statusTypeList = [
{
label: "正常",
value: 0,
type: "success",
},
{
label: "危险",
value: 1,
type: "warning",
},
{
label: "已禁止",
value: 2,
type: "danger",
},
];
const getStatusInfo = (type) => {
return statusTypeList.filter((item) => item.value === type)[0];
};
</script> </script>
<style scoped> <style scoped>
.mt_1 { .mt_1 {
@@ -105,7 +141,13 @@ const Init = () => {
} }
.nick { .nick {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: bold; font-weight: bold;
> div {
margin-right: 10px;
}
} }
.info { .info {

285
Yi.Bbs.Vue3/src/components/DisscussCard.vue
View File

@@ -1,48 +1,57 @@
<template> <template>
<el-badge :value="props.badge ?? ''" class="box-card"> <el-badge :value="props.badge ?? ''" class="box-card">
<el-card shadow="never" :style="{ 'border-color': discuss.color }"> <el-card shadow="never" :style="{ 'border-color': discuss.color }">
<el-row> <el-row>
<!-- 头部 -->
<el-col :span="24" class="card-header">
<AvatarInfo :userInfo="discuss.user" :time="discuss.creationTime" />
</el-col>
<!-- 头部 --> <!-- 身体 -->
<el-col :span=24 class="card-header">
<AvatarInfo :userInfo="discuss.user" :time="discuss.creationTime" />
</el-col>
<el-col :span="18">
<el-row>
<el-col v-if="discuss.isBan" :span="24" class="item item-title">
<el-link size="100" :underline="false" style="color: #f56c6c">{{
discuss.title
}}</el-link></el-col
>
<!-- 身体 --> <el-col v-else :span="24" class="item item-title">
<el-link
size="100"
:underline="false"
@click="enterDiscuss(discuss.id)"
>{{ discuss.title }}</el-link
></el-col
>
<el-col :span=18 > <el-col :span="24" class="item item-description">{{
<el-row> discuss.introduction
}}</el-col>
<el-col v-if="discuss.isBan" :span=24 class=" item item-title "> <el-link size="100" :underline="false" <el-col :span="24" class="item item-tag"
style="color:#F56C6C;" >{{ discuss.title }}</el-link></el-col> ><el-tag v-for="i in 4" :key="i">教程</el-tag></el-col
>
</el-row>
</el-col>
<el-col v-else :span=24 class=" item item-title "> <el-link size="100" :underline="false" <el-col :span="6" style="display: flex; justify-content: center">
@click="enterDiscuss(discuss.id)">{{ discuss.title }}</el-link></el-col> <el-image
:preview-src-list="[getUrl(discuss.cover)]"
v-if="discuss.cover"
:src="getUrl(discuss.cover)"
style="width: 100px; height: 100px"
/>
</el-col>
<!-- 底部 -->
<el-col :span="24" class="item item-bottom" style="margin-bottom: 0">
<el-col :span=24 class=" item item-description">{{ discuss.introduction }}</el-col> <el-space :size="10" :spacer="spacer">
<el-col :span=24 class=" item item-tag"><el-tag v-for="i in 4" :key="i">教程</el-tag></el-col> <div class="item-description">
</el-row> {{ discuss.creationTime }}
</el-col> </div>
<AgreeInfo :data="discuss" />
<!--
<el-col :span=6 style=" display: flex;justify-content: center;">
<el-image :preview-src-list="[getUrl(discuss.cover)]" v-if="discuss.cover" :src="getUrl(discuss.cover)" style="width: 100px;height: 100px;" />
</el-col>
<!-- 底部 -->
<el-col :span=24 class=" item item-bottom " style=" margin-bottom: 0;">
<el-space :size="10" :spacer="spacer">
<div class="item-description">
{{ discuss.creationTime }}
</div>
<AgreeInfo :data="discuss"/>
<!--
<el-button text @click="agree"> <el-button text @click="agree">
<el-icon v-if="discuss.isAgree" color="#409EFF"> <el-icon v-if="discuss.isAgree" color="#409EFF">
<CircleCheckFilled /> <CircleCheckFilled />
@@ -53,145 +62,139 @@
<el-button icon="Star" text> <el-button icon="Star" text>
收藏</el-button> --> 收藏</el-button> -->
<el-button icon="View" text> <el-button icon="View" text>
浏览数:{{ discuss.seeNum ?? 0 }}</el-button> 浏览数:{{ discuss.seeNum ?? 0 }}</el-button
>
</el-space>
</el-space> </el-col>
</el-col> </el-row>
</el-card>
</el-row> </el-badge>
</el-card>
</el-badge>
</template> </template>
<script setup> <script setup>
import { h, ref, toRef, onMounted ,reactive} from 'vue' import { h, ref, toRef, onMounted, reactive } from "vue";
import { useRouter } from 'vue-router' import { useRouter } from "vue-router";
import AvatarInfo from './AvatarInfo.vue'; import AvatarInfo from "./AvatarInfo.vue";
import AgreeInfo from './AgreeInfo.vue' import AgreeInfo from "./AgreeInfo.vue";
import { operate } from '@/apis/agreeApi' import { operate } from "@/apis/agreeApi";
const props = defineProps(['discuss','badge']) const props = defineProps(["discuss", "badge"]);
const discuss=reactive({ const discuss = reactive({
id:'', id: "",
title:"", title: "",
introduction:"", introduction: "",
creationTime:"", creationTime: "",
user:{}, user: {},
color:"", color: "",
seeNum:0, seeNum: 0,
agreeNum:0, agreeNum: 0,
isAgree:false, isAgree: false,
cover:"", cover: "",
isBan:false, isBan: false,
isAgree:false, isAgree: false,
agreeNum:0 agreeNum: 0,
}) });
const router = useRouter() const router = useRouter();
const spacer = h(ElDivider, { direction: 'vertical' }) const spacer = h(ElDivider, { direction: "vertical" });
const enterDiscuss = (id) => { const enterDiscuss = (id) => {
router.push(`/article/${id}`) router.push(`/article/${id}`);
} };
const getUrl= (str)=>{ const getUrl = (str) => {
return `${import.meta.env.VITE_APP_BASEAPI}/file/${str}` return `${import.meta.env.VITE_APP_BASEAPI}/file/${str}`;
} };
//点赞操作 //点赞操作
const agree = async () => { const agree = async () => {
const response = await operate(discuss.id) const response = await operate(discuss.id);
const res = response.data; const res = response.data;
//提示框，颜色区分 //提示框，颜色区分
if (res.isAgree) { if (res.isAgree) {
discuss.isAgree = true; discuss.isAgree = true;
discuss.agreeNum += 1; discuss.agreeNum += 1;
ElMessage({ ElMessage({
message: res.message, message: res.message,
type: 'success', type: "success",
}) });
} } else {
else { discuss.isAgree = false;
discuss.isAgree = false; discuss.agreeNum -= 1;
discuss.agreeNum-= 1; ElMessage({
ElMessage({ message: res.message,
message: res.message, type: "warning",
type: 'warning', });
}) }
} };
}
onMounted(() => { onMounted(() => {
// id:'',
// id:'', // title:"",
// title:"", // introduction:"",
// introduction:"", // creationTime:"",
// creationTime:"", // user:{},
// user:{}, // color:"",
// color:"", // seeNum:0,
// seeNum:0, // agreeNum:0,
// agreeNum:0, // isAgree:""
// isAgree:"" discuss.id = props.discuss.id;
discuss.id=props.discuss.id; discuss.title = props.discuss.title;
discuss.title=props.discuss.title; discuss.introduction = props.discuss.introduction;
discuss.introduction=props.discuss.introduction; discuss.creationTime = props.discuss.creationTime;
discuss.creationTime=props.discuss.creationTime; discuss.user = props.discuss.user;
discuss.user=props.discuss.user; discuss.color = props.discuss.color;
discuss.color=props.discuss.color; discuss.seeNum = props.discuss.seeNum;
discuss.seeNum=props.discuss.seeNum; discuss.isAgree = props.discuss.isAgree;
discuss.isAgree=props.discuss.isAgree; discuss.agreeNum = props.discuss.agreeNum;
discuss.agreeNum=props.discuss.agreeNum; discuss.isBan = props.discuss.isBan;
discuss.isBan=props.discuss.isBan; discuss.cover = props.discuss.cover;
discuss.cover=props.discuss.cover; discuss.value = props.isAgree;
discuss.value = props.isAgree; discuss.value = props.agreeNum;
discuss.value = props.agreeNum; });
})
</script> </script>
<style scoped> <style scoped>
.el-card { .el-card {
border: 2px solid white border: 2px solid white;
} }
.item-bottom .el-icon { .item-bottom .el-icon {
margin-right: 0.4rem; margin-right: 0.4rem;
} }
.card-header { .card-header {
display: flex; display: flex;
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
align-items: center; align-items: center;
} }
.item { .item {
font-size: 14px; font-size: 14px;
margin-bottom: 18px; margin-bottom: 18px;
} }
.box-card { .box-card {
width: 100%; width: 100%;
min-height: 15rem; min-height: 15rem;
/* right: calc(1px + var(--el-badge-size)/ 2) !important; */ /* right: calc(1px + var(--el-badge-size)/ 2) !important; */
/* top: 0 !important; */ /* top: 0 !important; */
} }
.item-title { .item-title {
/* font-size: var(--el-font-size-large); */ /* font-size: var(--el-font-size-large); */
} }
.item-description { .item-description {
font-size: var(--el-font-size-small); font-size: var(--el-font-size-small);
color: #8C8C8C; color: #8c8c8c;
} }
.item .el-tag { .item .el-tag {
margin-right: 1rem; margin-right: 1rem;
} }
.ml-2 { .ml-2 {
margin-left: 1.2rem; margin-left: 1.2rem;
} }
.el-link { .el-link {
font-size: initial; font-size: initial;
font-weight: 700; font-weight: 700;
} }
</style> </style>