From 5bab32c7f7fa0a232d407a1ff0f6b21adfd764b0 Mon Sep 17 00:00:00 2001
From: 张含笑 <zhx18749296735@163.com>
Date: Wed, 22 Oct 2025 18:46:10 +0800
Subject: [PATCH] feat:我的
---
src/config/env.js | 2
src/pages/login/index.vue | 4
src/static/images/user/allBg.svg | 26 +++
src/subPackages/userDetail/password/index.vue | 152 +++++++++++++++++++++
src/subPackages/userDetail/infos/index.vue | 222 ++++++++++++++++++++++++-------
5 files changed, 351 insertions(+), 55 deletions(-)
diff --git a/src/config/env.js b/src/config/env.js
index b17f88e..e49eb79 100644
--- a/src/config/env.js
+++ b/src/config/env.js
@@ -3,7 +3,7 @@
const development = {
VITE_APP_ENV:'development',
// 开发环境这里改为自己的
- VITE_APP_WEBVIEW_URL: 'https://wrj.shuixiongit.com/drone-app-web-view/#/webViewWrapper',
+ VITE_APP_WEBVIEW_URL: 'http://192.168.1.157:5173/drone-app-web-view/#/webViewWrapper',
VITE_API_BASE_URL: 'https://wrj.shuixiongit.com/api',
}
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 599916b..54c1845 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -29,8 +29,8 @@
import { HOME_PATH, LOGIN_PATH, removeQueryString } from "@/router";
const userStore = useUserStore();
const loginForm = ref({
- username: "cpz3",
- password: "cpz3@2025",
+ username: "zhx",
+ password: "123456",
});
const inputStyle = computed(() => {
const style = {};
diff --git a/src/static/images/user/allBg.svg b/src/static/images/user/allBg.svg
new file mode 100644
index 0000000..302dbf7
--- /dev/null
+++ b/src/static/images/user/allBg.svg
@@ -0,0 +1,26 @@
+<svg width="375" height="814" viewBox="0 0 375 814" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="375" height="814" fill="#F6F6F6"/>
+<g clip-path="url(#clip0_2368_2942)">
+<g filter="url(#filter0_f_2368_2942)">
+<ellipse cx="42.5" cy="33" rx="104.5" ry="63" fill="#B0D7C9"/>
+</g>
+<g filter="url(#filter1_f_2368_2942)">
+<ellipse cx="301.5" cy="0.5" rx="104.5" ry="82.5" fill="#CED9FF"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_2368_2942" x="-262" y="-230" width="609" height="526" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_2368_2942"/>
+</filter>
+<filter id="filter1_f_2368_2942" x="-3" y="-282" width="609" height="565" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_2368_2942"/>
+</filter>
+<clipPath id="clip0_2368_2942">
+<rect width="375" height="298" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/subPackages/userDetail/infos/index.vue b/src/subPackages/userDetail/infos/index.vue
index 8ada4dd..4f9655f 100644
--- a/src/subPackages/userDetail/infos/index.vue
+++ b/src/subPackages/userDetail/infos/index.vue
@@ -1,43 +1,121 @@
-<!-- 个人资料 -->
<template>
- <view class="infoBox">
- <div class="avatarBox">
- <u-avatar :src="userInfo.avatar" size="114" mode="aspectFill" />
- </div>
+ <view class="container">
+ <div class="avatarBox">
+ <u-avatar :src="userInfo.avatar" size="114" mode="aspectFill" />
+ </div>
+ <view class="detailBox">
+ <div class="orderRow">
+ <div class="rowTitle">姓名</div>
+ <div>{{userInfo.realName}}</div>
+ </div>
+ <div class="orderRow">
+ <div class="rowTitle">所属单位</div>
+ <div>{{userInfo.deptName}}</div>
+ </div>
+ <div class="orderRow">
+ <div class="rowTitle">手机号</div>
+ <u-input input-align="right" v-model="userInfo.phone" type="number" placeholder="请输入手机号"
+ class="input-item" />
- </view>
- <viewclass="detailBox">
- 111
- </view>
+ </div>
+ <div class="orderRow">
+ <div class="rowTitle">邮箱</div>
+ <u-input input-align="right" v-model="userInfo.email" type="email" placeholder="请输入邮箱"
+ class="input-item" />
+ </div>
+ </view>
+ <view class="btngroup">
+ <u-button color="#AEAEAE" round @click="reset">重置</u-button>
+ <u-button color="#1D6FE9" round @click="submit">提交</u-button>
+ </view>
+ </view>
</template>
<script setup>
- import { getUserInfo, updateInfo, updatePassword } from '@/api/user/index.js';
-
+ import {
+ getUserInfo,
+ updateInfo,
+ updatePassword
+ } from '@/api/user/index.js';
const userInfo = ref({
- id: '',
- avatar: '',
- realName: '',
- name: '',
- phone: '',
- email: '',
- deptName: '',
+ id: '',
+ avatar: '',
+ realName: '',
+ name: '',
+ phone: '',
+ email: '',
+ deptName: '',
});
+ // 校验手机号
+ const validatePhone = () => {
+ const phone = userInfo.value.phone
+ if (!phone) return true
+ const phoneRegex = /^1[3-9]\d{9}$/
+ if (!phoneRegex.test(phone)) {
+
+ uni.showToast({
+ title: '请输入正确的手机号码',
+ icon: 'none',
+ duration: 2000
+ });
+ return false
+ }
+ return true
+ }
+ // 校验邮箱
+ const validateEmail = () => {
+ if (!userInfo.value.email) return true
+ const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
+ if (!emailRegex.test(userInfo.value.email)) {
+
+ uni.showToast({
+ title: '请输入正确的邮箱地址',
+ icon: 'none',
+ duration: 2000
+ });
+ return false
+ }
+ return true
+ }
const getUserInfoData = () => {
- getUserInfo().then(res => {
- const user = res.data.data;
-
- userInfo.value = {
- id: user.id,
- avatar: user.avatar,
- name: user.name,
- realName: user.realName,
- phone: user.phone,
- email: user.email,
- deptName: user.deptName,
- };
- console.log('用户信息',userInfo.value)
- });
+ getUserInfo().then(res => {
+ const user = res.data.data;
+ userInfo.value = {
+ id: user.id,
+ avatar: user.avatar,
+ name: user.name,
+ realName: user.realName,
+ phone: user.phone,
+ email: user.email,
+ deptName: user.deptName,
+ };
+
+ });
+ };
+ const reset = () => {
+ getUserInfoData();
+ };
+ const submit = () => {
+ if (!validatePhone() || !validateEmail()) return
+ userInfo.value.name = userInfo.value.realName;
+ updateInfo(userInfo.value).then(res => {
+ if (res.data.code === 200) {
+ uni.showToast({
+ title: '修改信息成功',
+ icon: 'none',
+ duration: 2000
+ });
+
+ } else {
+ uni.showToast({
+ title: res.msg,
+ icon: 'none',
+ duration: 2000
+ });
+ }
+
+ });
+ getUserInfoData()
};
onShow(async () => {
getUserInfoData()
@@ -45,26 +123,72 @@
</script>
<style lang="scss" scoped>
- .infoBox {
+ .container {
+
width: 100%;
- height: 298px;
- background: url('/src/static/images/user/userBg.svg') no-repeat center;
- background-size: 100% 100%;
- display: flex;
- justify-content: center;
-
- .avatarBox {
- width: 114px;
- height: 114px;
- margin: 38px 0;
-
- }
-
+ // min-height: 100vh;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ background: url('/src/static/images/user/allBg.svg') no-repeat center center;
+ background-size: cover;
+
+ background-attachment: fixed;
+
}
+
+ .avatarBox {
+ width: 114px;
+ height: 114px;
+ margin: 38px 0;
+ }
+
.detailBox {
width: 351px;
- height: 215px;
+
+ min-height: 215px;
background: #FFFFFF;
- border-radius: 6px 6px 6px 6px;
+ border-radius: 6px;
+
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+
+ .orderRow {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 48px;
+ border-bottom: 1px solid #f5f5f5;
+ color: #7b7b7b;
+ padding: 0 12px;
+
+ .rowTitle {
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 15px;
+ color: #222324;
+ white-space: nowrap;
+ }
+
+ ::v-deep .u-input {
+ border: none !important;
+ background: transparent !important;
+ }
+
+ ::v-deep .u-input__input {
+ border: none !important;
+ box-shadow: none !important;
+ background: transparent !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ height: auto !important;
+ }
+ }
}
-</style>
+
+ .btngroup {
+ display: flex;
+ margin-top: 120px;
+ }
+</style>
\ No newline at end of file
diff --git a/src/subPackages/userDetail/password/index.vue b/src/subPackages/userDetail/password/index.vue
index fc3537a..0dc6d3b 100644
--- a/src/subPackages/userDetail/password/index.vue
+++ b/src/subPackages/userDetail/password/index.vue
@@ -1,8 +1,154 @@
<!-- 修改密码 -->
<template>
- <view> 基础 </view>
+ <view class="container">
+ <view class="detailBox">
+ <div class="orderRow">
+ <div class="rowTitle">原始密码</div>
+ <u-input input-align="right" v-model="passwordForm.oldPassword" type="password" placeholder="请输入"
+ class="input-item" />
+ </div>
+ <div class="orderRow">
+ <div class="rowTitle">新密码</div>
+ <u-input input-align="right" v-model="passwordForm.newPassword" type="password" placeholder="请输入"
+ class="input-item" />
+
+ </div>
+ <div class="orderRow">
+ <div class="rowTitle">确认密码</div>
+ <u-input input-align="right" v-model="passwordForm.newPassword1" type="password" placeholder="请输入"
+ class="input-item" />
+ </div>
+ </view>
+ <view class="btngroup">
+ <u-button color="#AEAEAE" round @click="reset">重置</u-button>
+ <u-button color="#1D6FE9" round @click="submit">提交</u-button>
+ </view>
+ </view>
</template>
-<script setup></script>
+<script setup>
+ import md5 from "js-md5";
+ import {
+ getUserInfo,
+ updateInfo,
+ updatePassword
+ } from '@/api/user/index.js';
+ import {
+ useUserStore
+ } from "@/store/index.js";
+ const userStore = useUserStore();
+ const passwordForm = ref({
+ oldPassword: '',
+ newPassword: '',
+ newPassword1: '',
+ });
+ const clearForm = () => {
+ passwordForm.value = {
+ oldPassword: '',
+ newPassword: '',
+ newPassword1: '',
+ };
+ };
+ const reset = () => {
+ // passwordForm.value = {
+ // id: userStore.userInfo.user_id,
+ // oldPassword: '',
+ // newPassword: '',
+ // newPassword1: '',
+ // };
+ clearForm();
+ };
+ const submit = () => {
-<style lang="scss" scoped></style>
+ updatePassword(md5(passwordForm.value.oldPassword),
+ md5(passwordForm.value.newPassword),
+ md5(passwordForm.value.newPassword1)).then(res => {
+ if (res.data.code === 200) {
+ uni.showToast({
+ title: '修改信息成功',
+ icon: 'none',
+ duration: 2000
+ });
+ clearForm();
+
+ } else {
+ uni.showToast({
+ title: res.msg,
+ icon: 'none',
+ duration: 2000
+ });
+ }
+
+ });
+
+ };
+ onShow(async () => {
+clearForm();
+ });
+</script>
+
+<style lang="scss" scoped>
+ .container {
+
+ width: 100%;
+ // min-height: 100vh;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ background: url('/src/static/images/user/allBg.svg') no-repeat center center;
+ background-size: cover;
+
+ background-attachment: fixed;
+ padding-top: 20px;
+
+ }
+
+ .detailBox {
+ width: 351px;
+
+ min-height: 163px;
+ background: #FFFFFF;
+ border-radius: 6px;
+
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+
+ .orderRow {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 48px;
+ border-bottom: 1px solid #f5f5f5;
+ color: #7b7b7b;
+ padding: 0 12px;
+
+ .rowTitle {
+ font-family: Source Han Sans CN, Source Han Sans CN;
+ font-weight: 400;
+ font-size: 15px;
+ color: #222324;
+ white-space: nowrap;
+ }
+
+ ::v-deep .u-input {
+ border: none !important;
+ background: transparent !important;
+ }
+
+ ::v-deep .u-input__input {
+ border: none !important;
+ box-shadow: none !important;
+ background: transparent !important;
+ padding: 0 !important;
+ margin: 0 !important;
+ height: auto !important;
+ }
+ }
+ }
+
+ .btngroup {
+ display: flex;
+ margin-top: 120px;
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3