feat: 新增个人页面跳转功能

Yi.Bbs.Vue3/src/App.vue

@@ -34,7 +34,7 @@ onMounted(async () => {
 watch(
   () => token,
    (val,oldValue) => {
-    console.log("token发生改变");
+   //console.log("token发生改变");
     if (val) {
       signalR.close();
       signalR.init(`main`);

Yi.Bbs.Vue3/src/apis/userApi.js

@@ -9,6 +9,7 @@ export function listUser(query) {
   });
 }
 
+
 // 查询用户详细
 export function getUser(userId) {
   return request({
@@ -73,6 +74,15 @@ export function getUserProfile() {
   });
 }
 
+// 查询bbs个人信息
+export function getBbsUserProfile(userName) {
+  return request({
+    url: `/bbs-user/${userName}`,
+    method: "get",
+  });
+}
+
+
 // 修改用户个人信息
 export function updateUserProfile(data) {
   return request({

Yi.Bbs.Vue3/src/components/AvatarInfo.vue

@@ -34,7 +34,7 @@
       </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>
+        <el-tag class="ml-2" type="danger">核心</el-tag>
       </div>
       <el-button
         v-if="props.showWatching"
@@ -73,6 +73,7 @@ const userInfo = reactive({
   id: "",
   level: "",
   userLimit: "",
+  userName:""
 });
 const iconUrl = ref("/acquiesce.png");
 const iconUrlHandler = (icon) => {
@@ -113,6 +114,7 @@ const Init = () => {
     userInfo.money=props.userInfo.money;
     userInfo.level = props.userInfo.level;
     userInfo.userLimit = props.userInfo.userLimit;
+    userInfo.userName= props.userInfo.userName;
     iconUrl.value = iconUrlHandler(userInfo.icon);
   }
 

Yi.Bbs.Vue3/src/components/UserInfoCard/index.vue

@@ -9,12 +9,12 @@
     v-if="!props.isSelf"
   >
     <template #reference>
-      <el-avatar :size="30" :src="iconUrl" />
+      <el-avatar :size="30" :src="iconUrl"  />
     </template>
     <div class="top">
       <div class="left">
         <div class="image">
-          <img :src="iconUrl" alt="" />
+          <img :src="iconUrl" alt="" @click="gotoProfile(userInfo.userName)" style="cursor: pointer;" />
         </div>
       </div>
       <div class="right">
@@ -64,7 +64,7 @@
 
 <script setup name="UserInfoCard">
 import { computed, defineProps } from "vue";
-
+import { useRouter } from "vue-router";
 const props = defineProps({
   // 用户信息
   userInfo: {
@@ -77,9 +77,8 @@ const props = defineProps({
     default: () => "",
   },
 });
-
+const router = useRouter();
 const userInfo = computed(() => props.userInfo);
-
 const statusTypeList = [
   {
     label: "正常",
@@ -100,6 +99,11 @@ const statusTypeList = [
 const getStatusInfo = (type) => {
   return statusTypeList.filter((item) => item.value === type)[0]?.label;
 };
+
+const gotoProfile=(userName)=>{
+  router.push(`/profile/${userName}`);
+
+}
 </script>
 
 <style scoped lang="scss">

Yi.Bbs.Vue3/src/hooks/useAuths.js

@@ -15,7 +15,7 @@ export const AUTH_USER = "AUTH_USER";
 
 
 export default function useAuths(opt) {
-
+ 
 
 
   const defaultOpt = {
@@ -40,6 +40,10 @@ const isLogin=computed(()=>{
   return getToken()? true : false
 });
 
+const currentUserInfo=computed(()=>{
+  return useUserStore();
+}); 
+
   // 存储token到cookies
   const setToken = (token) => {
     if (token == null) {
@@ -187,6 +191,7 @@ const isLogin=computed(()=>{
     clearStorage,
     registerFun,
     loginSuccess,
-    isLogin
+    isLogin,
+    currentUserInfo
   };
 }

Yi.Bbs.Vue3/src/layout/AppHeader.vue

@@ -117,7 +117,7 @@ const enterIndex = () => {
   router.push("/index");
 };
 const enterProfile = () => {
-  router.push("/profile");
+  router.push(`/profile/${userStore.userName}`);
 };
 const toLogin = () => {
   clearStorage();

Yi.Bbs.Vue3/src/router/index.js

@@ -78,7 +78,7 @@ const router = createRouter({
         },
         {
           name: "profile",
-          path: "/profile",
+          path: "/profile/:userName",
           component: () => import("../views/profile/Index.vue"),
         },
         {

Yi.Bbs.Vue3/src/utils/signalR.js

@@ -26,7 +26,6 @@ export default {
       .configureLogging(signalR.LogLevel.Information)
       .build();
 
-    console.log(connection, "connection");
 
     this.SR = connection;
     // 断线重连
@@ -62,7 +61,6 @@ export default {
 
     try {
       //使用async和await 或 promise的then 和catch 处理来自服务端的异常
-      console.log(this.SR, "执行连接");
       await this.SR.start();
       //console.assert(this.SR.state === signalR.HubConnectionState.Connected);
       //console.log('signalR 连接成功了', this.SR.state);

Yi.Bbs.Vue3/src/views/profile/Index.vue

@@ -71,7 +71,7 @@
           <div class="div-top-user">
             <div class="user-icon text-center">
 
-              <userAvatar :user="state.user" />
+              <userAvatar :user="state.user" :isDisable="!iSCurrentUserLogin"/>
             </div>
             <div class="user-info">
               <div class="user-nick">
@@ -102,12 +102,12 @@
 
                 <el-tabs v-model="activeTab" class="user-edit-tab">
                   <el-tab-pane label="基本资料" name="userinfo">
-                    <userInfo :user="state.user" />
+                    <userInfo :user="state.user" :isDisable="!iSCurrentUserLogin" />
                   </el-tab-pane>
-                  <el-tab-pane label="修改密码" name="resetPwd">
+                  <el-tab-pane v-if="iSCurrentUserLogin" label="修改密码" name="resetPwd">
                     <resetPwd />
                   </el-tab-pane>
-                  <el-tab-pane label="第三方快捷登录" name="accountSetting">
+                  <el-tab-pane v-if="iSCurrentUserLogin" label="第三方快捷登录" name="accountSetting">
                     <accountSet />
                   </el-tab-pane>
                 </el-tabs>
@@ -152,7 +152,10 @@
             <DisscussCard :discuss="item" />
           </div>
 
-          <div class="pagination">
+
+        </div>
+        <el-empty v-if="discussList.length == 0" description="空空如也" />
+        <div v-else class="pagination">
       <el-pagination
         v-model:current-page="query.skipCount"
         v-model:page-size="query.maxResultCount"
@@ -171,7 +174,6 @@
           }
         "
       />
-    </div>
         </div>
       </el-col>
     </el-row>
@@ -183,12 +185,15 @@ import userAvatar from "./UserAvatar.vue";
 import userInfo from "./UserInfo.vue";
 import resetPwd from "./ResetPwd.vue";
 import accountSet from "./AccountSetting.vue";
-import { getUserProfile } from "@/apis/userApi.js";
+import { getBbsUserProfile } from "@/apis/userApi.js";
 import { onMounted, ref, reactive } from "vue";
 import { getList } from "@/apis/discussApi.js";
 import { useRoute } from "vue-router";
+import useAuths from "@/hooks/useAuths";
+const { isLogin } = useAuths();
+import useUserStore from "@/stores/user";
 const route = useRoute();
-
+const userStore=useUserStore();
 const activeTab = ref("userinfo");
 const state = reactive({
   user: {},
@@ -198,22 +203,19 @@ const state = reactive({
   postGroup: {},
 
 });
-const   discussList= ref([]);
+const iSCurrentUserLogin=ref(false);
+const  discussList= ref([]);
 const discussTotal=ref(0);
 const query = reactive({
   skipCount: 1,
   maxResultCount: 10,
-  userId:route.params.userId
+  userName:route.params.userName
 });
 
 function getUser() {
-  getUserProfile().then((response) => {
+  getBbsUserProfile(query.userName).then((response) => {
     const res = response.data;
-    state.user = res.user;
-    state.dept = res.dept;
-    state.roles = res.roles;
-    state.roleGroup = res.roleGroup;
-    state.postGroup = res.postGroup;
+    state.user = res;
   });
 }
 
@@ -226,6 +228,11 @@ const getDiscuss=async ()=>
 }
 
 onMounted(() => {
+  //效验，是否登录用户等于当前的userInfo
+    if(userStore.userName ==query.userName&&isLogin)
+    {
+      iSCurrentUserLogin.value=true;
+    }
   getUser();
   getDiscuss();
 });
@@ -348,11 +355,9 @@ width: 80%;
     background-color: #FFFFFF;
   }
   &-right {
-    height: 1000px;
     background-color: #f0f2f5;
     padding-left: 20px;
     &-content {
-      height: 100%;
       width: 100%;
       background-color: #FFFFFF;
     }

Yi.Bbs.Vue3/src/views/profile/UserAvatar.vue

@@ -31,7 +31,7 @@
       </el-col>
     </el-row>
     <br />
-    <el-row>
+    <el-row v-show="!isDisable">
       <el-col :lg="{ span: 1, offset: 2 }" :md="2">
         <el-upload
           action="#"
@@ -53,7 +53,7 @@
         </el-button>
       </el-col>
     </el-row>
-    <el-row style="margin-top: 10px">
+    <el-row style="margin-top: 10px" v-show="!isDisable">
       <el-col :lg="{ span: 1, offset: 2 }" :md="2">
         <el-button icon="Plus" @click="changeScale(1)"></el-button>
       </el-col>
@@ -108,8 +108,18 @@ import { getIconList } from "@/apis/settingApi";
 import useUserStore from "@/stores/user";
 import axios from "axios";
 
-const userStore = useUserStore();
 
+const props = defineProps({
+  user: {
+    type: Object,
+    default:{icon:"/acquiesce.png"}
+  },
+  isDisable:{
+    type:Boolean,
+    default:true
+  }
+});
+const userStore=useUserStore();
 const cropper = ref(null);
 
 const open = ref(false);
@@ -118,7 +128,7 @@ const title = ref("修改头像");
 
 //图片裁剪数据
 const options = reactive({
-  img: userStore.icon, // 裁剪图片的地址
+  img: props.user.icon, // 裁剪图片的地址
   autoCrop: true, // 是否默认生成截图框
   autoCropWidth: 200, // 默认生成截图框宽度
   autoCropHeight: 200, // 默认生成截图框高度

Yi.Bbs.Vue3/src/views/profile/UserInfo.vue

@@ -4,21 +4,21 @@
       <el-input v-model="user.userName" disabled />
     </el-form-item>
     <el-form-item label="用户昵称" prop="nick">
-      <el-input v-model="user.nick" maxlength="30" />
+      <el-input v-model="user.nick" maxlength="30" :disabled="isDisable"/>
     </el-form-item>
     <el-form-item label="手机号码" prop="phone">
-      <el-input v-model="user.phone" maxlength="11" />
+      <el-input v-model="user.phone" maxlength="11" :disabled="isDisable" />
     </el-form-item>
     <el-form-item label="邮箱" prop="email">
-      <el-input v-model="user.email" maxlength="50" />
+      <el-input v-model="user.email" maxlength="50" :disabled="isDisable" />
     </el-form-item>
     <el-form-item label="性别">
-      <el-radio-group v-model="user.sex">
+      <el-radio-group v-model="user.sex" :disabled="isDisable">
         <el-radio :label="'Male'">男</el-radio>
         <el-radio :label="'Woman'">女</el-radio>
       </el-radio-group>
     </el-form-item>
-    <el-form-item>
+    <el-form-item v-show="!isDisable">
       <el-button type="primary" @click="submit">保存</el-button>
       <el-button type="danger" @click="close">关闭</el-button>
     </el-form-item>
@@ -36,6 +36,10 @@ const props = defineProps({
   user: {
     type: Object,
   },
+  isDisable:{
+    type:Boolean,
+    default:true
+  }
 });
 
 const userRef = ref(null);