feat:我的

张含笑

2025-10-22 5bab32c7f7fa0a232d407a1ff0f6b21adfd764b0

feat:我的

 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',
}


 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 = {};

 src/static/images/user/allBg.svg

New file
@@ -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>

 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>

 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>