feat:去除路由守卫以及测试

This commit is contained in:
Xwen
2023-12-14 23:29:36 +08:00
parent 088a76b3cc
commit 8ad5f28e99
5 changed files with 103 additions and 90 deletions

View File

@@ -1,131 +1,146 @@
<template >
<div class="avatar">
<div class="avatar-left">
<el-avatar :size="props.size" :src="iconUrl" />
<template>
<div class="avatar">
<div class="avatar-left">
<el-avatar :size="props.size" :src="iconUrl" />
<div v-if="props.isSelf">
<div class="nick"> {{ userInfo.nick }}</div>
</div>
<div v-if="props.isSelf">
<div class="nick">{{ userInfo.nick }}</div>
</div>
<div v-if="!props.isSelf">
<div class="nick" :class="{ mt_1: props.time != 'undefined' }"> {{ userInfo.nick }}</div>
<div class="remarks" v-if="props.time"> {{ props.time }}</div>
<div class="remarks">
<slot name="bottom" />
</div>
</div>
<div class="info" v-if="!props.isSelf">
<el-tag class="ml-2" type="warning">V8</el-tag>
<el-tag class="ml-2" type="danger">会员</el-tag>
</div>
<div v-if="!props.isSelf">
<div class="nick" :class="{ mt_1: props.time != 'undefined' }">
{{ userInfo.nick }}
</div>
<el-button v-if="props.showWatching" type="primary" size="default" icon="Plus">关注</el-button>
<div class="remarks" v-if="props.time">{{ props.time }}</div>
<div class="remarks">
<slot name="bottom" />
</div>
</div>
<div class="info" v-if="!props.isSelf">
<el-tag class="ml-2" type="warning">V8</el-tag>
<el-tag class="ml-2" type="danger">会员</el-tag>
</div>
</div>
<el-button
v-if="props.showWatching"
type="primary"
size="default"
icon="Plus"
>关注</el-button
>
</div>
</template>
<script setup>
import useUserStore from '@/stores/user'
import { reactive, watch, onMounted, computed, ref } from 'vue';
import useUserStore from "@/stores/user";
import { reactive, watch, onMounted, computed, ref } from "vue";
//userInfo
//{icon,name,role,id},根据判断userInfo是否等于未定义来觉得是当前登录用户信息还是其他人信息
const props = defineProps(['size', 'showWatching', 'time', 'userInfo', 'isSelf'])
const props = defineProps([
"size",
"showWatching",
"time",
"userInfo",
"isSelf",
]);
const userStore = useUserStore();
const userInfo = reactive({
icon: "",
nick: "",
role: [],
id: ""
icon: "",
nick: "",
role: [],
id: "",
});
const iconUrl=ref('/src/assets/logo.ico');
const iconUrl = ref("/src/assets/logo.ico");
const iconUrlHandler = () => {
if (userInfo.icon == null || userInfo.icon == undefined || userInfo.icon == '') {
return '/src/assets/logo.ico';
}
return `${import.meta.env.VITE_APP_BASEAPI}/file/${userInfo.icon}`;
}
if (
userInfo.icon == null ||
userInfo.icon == undefined ||
userInfo.icon == ""
) {
return "/src/assets/logo.ico";
}
return `${import.meta.env.VITE_APP_BASEAPI}/file/${userInfo.icon}`;
};
watch(userStore, (n) => {
if (props.userInfo == undefined) {
userInfo.nick = n.name;
}
if (props.userInfo == undefined) {
userInfo.nick = n.name;
}
});
})
watch(() => props, (n) => {
watch(
() => props,
(n) => {
Init();
}, { deep: true })
},
{ deep: true }
);
onMounted(() => {
Init();
})
Init();
});
const Init = () => {
//使用传入值
if (props.userInfo != undefined) {
userInfo.icon = props.userInfo.icon;
userInfo.nick = props.userInfo.nick;
userInfo.role = props.userInfo.role;
userInfo.id = props.userInfo.id;
iconUrl.value=iconUrlHandler(userInfo.icon)
}
//使用当前登录用户
else {
userInfo.icon = userStore.icon;
userInfo.nick = userStore.name;
userInfo.role = userStore.role;
userInfo.id = userStore.id;
iconUrl.value=userInfo.icon;
}
}
//使用传入值
if (props.userInfo != undefined) {
userInfo.icon = props.userInfo.icon;
userInfo.nick = props.userInfo.nick;
userInfo.role = props.userInfo.role;
userInfo.id = props.userInfo.id;
iconUrl.value = iconUrlHandler(userInfo.icon);
console.log("使用传入值:", iconUrl.value);
}
//使用当前登录用户
else {
userInfo.icon = userStore.icon;
userInfo.nick = userStore.name;
userInfo.role = userStore.role;
userInfo.id = userStore.id;
iconUrl.value = userInfo.icon;
console.log("当前登陆:", iconUrl.value);
}
};
</script>
<style scoped>
.mt_1 {
margin-top: 0.5rem;
margin-top: 0.5rem;
}
.nick {
font-weight: bold;
font-weight: bold;
}
.info {
margin-top: 0.6rem;
margin-left: 1rem;
margin-top: 0.6rem;
margin-left: 1rem;
}
.info .el-tag {
margin-right: 1rem;
margin-right: 1rem;
}
.el-icon {
color: white;
color: white;
}
.avatar {
display: flex;
justify-content: space-between;
display: flex;
justify-content: space-between;
}
.avatar-left {
display: flex;
justify-content: flex-start;
align-items: center;
display: flex;
justify-content: flex-start;
align-items: center;
}
.el-avatar {
margin-right: 1.2rem;
margin-right: 1.2rem;
}
.remarks {
padding-top: 0.5rem;
color: #8C8C8C;
padding-top: 0.5rem;
color: #8c8c8c;
}
</style>
</style>