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/subPackages/userDetail/infos/index.vue | 222 +++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 173 insertions(+), 49 deletions(-)
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
--
Gitblit v1.9.3