更新用户数据

frontent/ops_vue_js/package.json

@@ -26,6 +26,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
+    "sass-embedded": "^1.93.3",
     "vite": "^7.1.11",
     "vite-plugin-vue-devtools": "^8.0.3"
   }

frontent/ops_vue_js/src/components/HeardMain.vue

@@ -184,9 +184,7 @@ onMounted(() => {
             >
               <img
                 :src="
-                  userStore.userInfo
-                    ? userStore.userInfo.AvatarPath
-                    : '/ava.svg'
+                  userStore.getUserAvatarPath()
                 "
                 alt=""
                 class="avatar avatar-sm"

frontent/ops_vue_js/src/components/datePicker.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch ,defineProps} from "vue";
 import Litepicker from "litepicker";
 import { useI18n } from "vue-i18n";
 const { t, locale } = useI18n();
@@ -11,6 +11,12 @@ watch(locale, () => {
   picker?.setOptions({ lang: locale.value });
 });
 
+defineProps({
+  setdef: {
+    type: String,
+    default: "",
+  },
+})
 onMounted(() => {
   // @formatter:off
 
@@ -37,6 +43,7 @@ defineExpose({
 </script>
 
 <template>
+  
   <div class="input-icon">
     <span class="input-icon-addon"
       ><!-- Download SVG icon from http://tabler-icons.io/i/calendar -->
@@ -67,7 +74,7 @@ defineExpose({
       class="form-control"
       :placeholder="t('message.select_date')"
       ref="datepicker"
-      value=""
+      :value="setdef"
     />
   </div>
 </template>

frontent/ops_vue_js/src/i18n/en.json

@@ -46,7 +46,8 @@
     "user_settings": "Settings",
     "preferences": "Preferences",
     "administrator": "Administrator",
-    "select_date":"Select a date"
+    "select_date":"Select a date",
+    "save_ok":"Saved successfully"
   },
   "settings": {
     "account_settings": "Account Settings",

frontent/ops_vue_js/src/i18n/zh-CN.json

@@ -46,7 +46,8 @@
     "user_settings": "个人资料",
     "preferences": "偏好设置",
     "administrator": "管理员",
-    "select_date":"选择日期"
+    "select_date":"选择日期",
+    "save_ok":"保存成功"
   },
   "settings": {
     "account_settings": "个人设置",

frontent/ops_vue_js/src/my_network_func.js

@@ -54,12 +54,12 @@ export const my_network_func = {
           {
             
             if(response.data.err_code==0){
-              if(response.data.return.cookie){
+              // if(response.data.return.cookie){
                 
-                userstore.cookieUpdata(response.data.return.cookie)
-              }
+              //   userstore.cookieUpdata(response.data.return.cookie)
+              // }
 
-            }else if(response.data.err_code==-46){
+            }else if(response.data.err_code==-44){//后端返回的cookie错误码
               //userCookieExpired
               userstore.logout()
             }

frontent/ops_vue_js/src/stores/user.js

@@ -8,7 +8,7 @@ import { my_network_func } from "@/my_network_func";
 export const useUserStore = defineStore("user", () => {
   // 状态 (State)
   const userInfo = ref(null);
-  const user =ref(null)
+  const user = ref(null);
   const userCookie = ref(null);
   const isLoggedIn = ref(false);
 
@@ -23,6 +23,30 @@ export const useUserStore = defineStore("user", () => {
     return userCookie.value;
   };
 
+  const getUserBirthday = () => {
+    if (userInfo.value != null) {
+      const date = new Date(userInfo.value.Birthdate);
+
+      // 获取年月日并格式化
+      const year = date.getFullYear();
+      const month = String(date.getMonth() + 1).padStart(2, "0");
+      const day = String(date.getDate()).padStart(2, "0");
+
+      const formattedDate = `${year}-${month}-${day}`;
+      return formattedDate;
+    }
+    return "";
+  };
+
+  const getUserAvatarPath = () => {
+    if (userInfo.value != null) {
+      if (userInfo.value.AvatarPath != "") {
+        return userInfo.value.AvatarPath;
+      }
+    }
+    return "/ava.svg";
+  };
+
   const getUserInfoFromCookie = () => {
     my_network_func.postJson("/users/getinfo", {}, (r) => {
       //console.log(r);
@@ -30,11 +54,11 @@ export const useUserStore = defineStore("user", () => {
         case 200:
           switch (r.data.err_code) {
             case 0:
-              user.value=r.data.return.user
-              if(r.data.return.userInfo){
-                userInfo.value=r.data.return.userInfo
-              }else{
-                userInfo.value=null
+              user.value = r.data.return.user;
+              if (r.data.return.userInfo) {
+                userInfo.value = r.data.return.userInfo;
+              } else {
+                userInfo.value = null;
               }
               break;
             default:
@@ -92,6 +116,8 @@ export const useUserStore = defineStore("user", () => {
     userInfo,
     userCookie,
     isLoggedIn,
+    getUserAvatarPath,
+    getUserBirthday,
     logout,
     login,
     loginFromStoreCookie,

frontent/ops_vue_js/src/views/settings/account.vue

@@ -4,15 +4,20 @@ import settingNavigation from "@/components/settingNavigation.vue";
 import { useI18n } from "vue-i18n";
 import datePicker from "@/components/datePicker.vue";
 import imageCropper from "@/components/imageCropper.vue";
+import { useUserStore } from "@/stores/user";
+import { my_network_func } from "@/my_network_func";
+import MyOffcanvas from "@/components/MyOffcanvas.vue";
+const mos = ref();
+
 const { t } = useI18n();
 
 const birthday = ref();
 const username = ref();
 const userremark = ref();
 
-function updataInfo() {
-  
+const userStore = useUserStore();
 
+function updataInfo() {
   let isDataErr = false;
 
   let birthdayValue = birthday.value.datepicker.value;
@@ -46,14 +51,43 @@ function updataInfo() {
   console.log("用户名:", usernameValue);
   console.log("备注:", userremarkValue);
   console.log("生日:", birthdayValue);
+  my_network_func.postJson(
+    "/users/updateInfo",
+    {
+      username: usernameValue,
+      remark: userremarkValue,
+      birthday: birthdayValue,
+    },
+    (r) => {
+      console.log(r);
+      switch (r.statusCode) {
+        case 200:
+          switch (r.data.err_code) {
+            case 0:
+              mos.value?.showAlert(
+                "success",
+                t("message.save_ok"),
+                1000
+              );
+              break;
+            default:
+              mos.value?.showAlert("danger", t("message.server_error"), 5000);
+              break;
+          }
+          break;
+        default:
+          mos.value?.showAlert("danger", t("message.network_err"), 5000);
+          break;
+      }
+    }
+  );
 }
 
-onMounted(()=>{
+onMounted(() => {
   //console.log("account mounted");
   //username.value.value="Kevin";
 
-})
-
+});
 </script>
 
 <template>
@@ -77,12 +111,13 @@ onMounted(()=>{
                 </h3>
                 <div class="row align-items-center">
                   <div class="col-auto">
-                    <span
+                    <img
+                      :src="userStore.getUserAvatarPath()"
+                      alt=""
                       class="avatar avatar-xl"
-                      style="background-image: url(./static/avatars/000m.jpg)"
-                    ></span>
+                    />
                   </div>
-                  <imageCropper />
+                  <!-- <imageCropper /> -->
                   <div class="col-auto">
                     <button class="btn">
                       {{ t("settings.change_avatar") }}
@@ -93,15 +128,29 @@ onMounted(()=>{
                 <div class="row g-3">
                   <div class="col-md">
                     <div class="form-label">{{ t("settings.name") }}</div>
-                    <input ref="username" type="text" class="form-control" />
+                    <input
+                      ref="username"
+                      type="text"
+                      class="form-control"
+                      :value="
+                        userStore.userInfo ? userStore.userInfo.Username : ''
+                      "
+                    />
                   </div>
                   <div class="col-md">
                     <div class="form-label">{{ t("settings.remark") }}</div>
-                    <input ref="userremark" type="text" class="form-control" />
+                    <input
+                      ref="userremark"
+                      type="text"
+                      class="form-control"
+                      :value="
+                        userStore.userInfo ? userStore.userInfo.FirstName : ''
+                      "
+                    />
                   </div>
                   <div class="col-md">
                     <div class="form-label">{{ t("settings.birthday") }}</div>
-                    <datePicker ref="birthday" />
+                    <datePicker ref="birthday" :setdef="userStore.getUserBirthday()"/>
                   </div>
                   <div>
                     <button class="btn" @click="updataInfo">
@@ -139,4 +188,5 @@ onMounted(()=>{
       </div>
     </div>
   </div>
+  <MyOffcanvas ref="mos" />
 </template>