张含笑
2025-10-22 5bab32c7f7fa0a232d407a1ff0f6b21adfd764b0
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>