-
-
-
-
CropperJS 组件演示
-- 此演示展示了CropperJS各个组件的功能和使用方法。您可以通过下方控制面板调整裁剪区域、查看预览效果，并了解每个组件的作用。 -
-
-
-
裁剪画布
-
-
-
-
-
-
-
-
+ 实时预览
-
-
+
+
+
+
-
-
-
控制面板
- -
-
+
+
+ 选区操作
-
-
+
+
+
+
+
+ 调整头像
+ +
+
+
+
-
-
+
+
-
- 移动选区
-
-
-
+
+
-
宽高比设置
-
-
+
+
+
+
+
-
-
+
-
-
+
- 圆形预览
+
+ ![头像预览]()
+
预览
+
-
-
- 遮罩设置
- -
-
-
-
-
-
- 十字准星
-
-
-
-
-
-
-
其他操作
-
-
-
-
+
+
方形预览
+
+ ![头像预览]()
+
预览
+
-
\ No newline at end of file
diff --git a/frontent/ops_vue_js/src/i18n/en.json b/frontent/ops_vue_js/src/i18n/en.json
index fb07a20..461464e 100644
--- a/frontent/ops_vue_js/src/i18n/en.json
+++ b/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",
diff --git a/frontent/ops_vue_js/src/i18n/zh-CN.json b/frontent/ops_vue_js/src/i18n/zh-CN.json
index 639738d..1d69854 100644
--- a/frontent/ops_vue_js/src/i18n/zh-CN.json
+++ b/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": "个人设置",
diff --git a/frontent/ops_vue_js/src/my_network_func.js b/frontent/ops_vue_js/src/my_network_func.js
index 72742fe..6d672e9 100644
--- a/frontent/ops_vue_js/src/my_network_func.js
+++ b/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()
}
diff --git a/frontent/ops_vue_js/src/stores/user.js b/frontent/ops_vue_js/src/stores/user.js
index 080fd33..9a28cbc 100644
--- a/frontent/ops_vue_js/src/stores/user.js
+++ b/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,
diff --git a/frontent/ops_vue_js/src/views/settings/account.vue b/frontent/ops_vue_js/src/views/settings/account.vue
index 3ea6943..26c73f8 100644
--- a/frontent/ops_vue_js/src/views/settings/account.vue
+++ b/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";
-})
-
+});
@@ -77,12 +111,13 @@ onMounted(()=>{
组件说明
-
-
+
+
+
-
+
+
+ {{ component.name }}
-{{ component.description }}
-
+
+
+
+
+
+
+
+
+
+
+
-
+ />
-