:sparkles: 修改密码 :art: 公告

src/service/user/change-password.js

@@ -2,5 +2,5 @@ import axios from '../../utils/axios';
 
 // 修改密码
 export function updatePassword(params) {
-  return axios.post(`/SZWL-SERVER/tAdmin/updatePassword?username=${params.username}&password=${params.password}`, params);
+  return axios.post(`/userLogin/updatePassword`, params);
 }

src/styles/changePassword/index.less

@@ -17,6 +17,11 @@
           display: none;
         }
 
+        .van-field__button button {
+					background-color: #FF3456;
+					color: #fff;
+				}
+
         .van-field__control {
           height: 38px;
           line-height: 38px;

src/views/home/HomeIndex.vue

@@ -4,13 +4,9 @@
     <div class="homeBox">
       <s-header :name="sys ? sys.title : $t('public.homePage')" :noback="true" :isFixed="false"></s-header>
       <!-- 新闻通知 -->
-      <!-- <template v-if="noticeContent.title">
+      <template v-if="noticeContent.title">
         <van-notice-bar @click="noticeClk" mode="link" :scrollable="true" color="rgba(64,77,116,1)" left-icon="volume-o"
           :text="noticeContent.title" />
-      </template> -->
-      <template v-if="noticeContent">
-        <van-notice-bar @click="noticeClk" mode="link" :scrollable="true" color="rgba(64,77,116,1)" left-icon="volume-o"
-          :text="noticeContent.centent" />
       </template>
       <!-- 灰线 -->
       <!-- <div class="intervalRow"></div> -->

src/views/user/ChangePassword.vue

@@ -4,6 +4,25 @@
     <s-header :name="$t('changePassword.changePassword')" :noback="false"></s-header>
     <div class="changePasswordFormBox">
       <van-form @submit="changePasswordSubmit">
+        <div>
+          <!-- 手机号 -->
+          <van-field v-model="phone" name="phone" type="tel" label="登录手机" :placeholder="$t('register.phonePlaceholder')"
+            :rules="[{ required: true, pattern: /^1[3456789]\d{9}$/, message: $t('register.phoneRequired') }]" />
+          <br />
+          <!-- 短信验证码 -->
+          <van-field v-model="code" name="code" :label="$t('register.codeLabel')"
+            :placeholder="$t('register.codePlaceholder')"
+            :rules="[{ required: true, message: $t('register.codeRequired') }]">
+            <template #button>
+              <van-button size="small" type="primary" @click="seedVerCode()"
+                :disabled="time !== 0 || phone.length === 0" :loading=reqApi :loading-text="$t('register.sending')">{{
+                  time === 0 ?
+                    $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
+                }}
+              </van-button>
+            </template>
+          </van-field>
+        </div><br>
         <van-field v-model="password" name="password" type="password" :label="$t('changePassword.passwordLabel')"
           :placeholder="$t('changePassword.passwordPlaceholder')"
           :rules="[{ required: true, message: $t('changePassword.passwordRequired') }]" />
@@ -20,26 +39,85 @@
 
 <script>
 import md5 from 'js-md5';
-import { ref } from 'vue';
+import { ref, toRefs, onMounted, reactive } from 'vue';
 import { showToast, showFailToast } from 'vant';
 import sHeader from "@/components/SimpleHeader";
-import { useRouter, useRoute } from "vue-router";
+import { useRouter, } from "vue-router";
 import { updatePassword } from '@/service/user/change-password';
 import { useI18n } from 'vue-i18n';
-import { getLoginUser } from "@/common/js/utils";
+// import { getLoginUser } from "@/common/js/utils";
 import { styleUrl } from '@/common/js/utils';
+import { sentRegisterCode } from '@/service/login/register';
+import { getLocal, setLocal } from '@/common/js/utils';
+
+
 
 export default {
   setup() {
     // 引入语言
     const { t } = useI18n();
     const router = useRouter();
-    const route = useRoute();
-    const user = getLoginUser();
+    // const route = useRoute();
+    // const user = getLoginUser();
     const password = ref('');
     const passwordCheck = ref('');
-    // 加载样式
-    styleUrl('changePassword');
+    const phone = ref('');
+    const code = ref('');
+
+    const verCodeTime = reactive({
+      time: 0
+    });
+
+    const reqApi = ref(false);
+
+    // 发送验证码
+    const seedVerCode = async () => {
+
+      reqApi.value = true;
+
+      try {
+        const { data } = await sentRegisterCode({
+          phone: phone.value,
+        });
+        if (data.code === '00000') {
+          reqApi.value = false;
+          showToast("发送成功");
+          verCodeTime.time = 1 * 60; // 1分钟定时器，60s后可以更换验证方式
+          verCodeTimeInterval();
+        } else {
+          reqApi.value = false;
+          showFailToast(data.message);
+        }
+      } catch (error) {
+        reqApi.value = false;
+      }
+    }
+    // 验证码发送成功开始1分钟倒计时
+    const verCodeTimeInterval = () => {
+      const intervalId = setInterval(() => {
+        verCodeTime.time--;
+        setLocal('registerVerCodeTime', verCodeTime.time);
+        if (verCodeTime.time === 0) {
+          clearInterval(intervalId); // 清除定时器
+        }
+      }, 1000);
+    }
+
+    // 初始化页面获取验证码倒计时
+    onMounted(async () => {
+      // 加载样式
+      styleUrl('changePassword');
+      verCodeTime.time = getLocal('registerVerCodeTime');
+      if (verCodeTime.time && verCodeTime.time !== '') {
+        verCodeTime.time = parseInt(verCodeTime.time);
+        if (verCodeTime.time > 0) {
+          verCodeTimeInterval();
+        }
+      } else {
+        verCodeTime.time = 0;
+      }
+    });
+
     // 验证-表单
     const changePasswordSubmit = async () => {
       if (password.value !== passwordCheck.value) {
@@ -47,8 +125,8 @@ export default {
         return false;
       }
       const { data } = await updatePassword({
-        username: route.query.name || user.username,
-        // username: user.username,
+        phone: phone.value,
+        code: code.value,
         password: md5(password.value)
       });
       if (data.code === '00000') {
@@ -61,7 +139,13 @@ export default {
     return {
       password,
       passwordCheck,
-      changePasswordSubmit
+      changePasswordSubmit,
+      ...toRefs(verCodeTime),
+      verCodeTime,
+      verCodeTimeInterval,
+      seedVerCode,
+      phone,
+      code,
     };
   },
   components: { sHeader },