daypush 对接接口

components.d.ts

@@ -19,9 +19,11 @@ declare module '@vue/runtime-core' {
     VanBackTop: typeof import('vant/es')['BackTop']
     VanButton: typeof import('vant/es')['Button']
     VanCell: typeof import('vant/es')['Cell']
+    VanCellGroup: typeof import('vant/es')['CellGroup']
     VanCollapse: typeof import('vant/es')['Collapse']
     VanCollapseItem: typeof import('vant/es')['CollapseItem']
     VanDialog: typeof import('vant/es')['Dialog']
+    VanDivider: typeof import('vant/es')['Divider']
     VanDropdownItem: typeof import('vant/es')['DropdownItem']
     VanDropdownMenu: typeof import('vant/es')['DropdownMenu']
     VanEmpty: typeof import('vant/es')['Empty']

src/api/index.ts

@@ -72,4 +72,52 @@ export const getGameType = () => {
         url: '/game/type',
         method: 'get',
     })
+}
+// 验证码
+export const getCaptchaHttp = <T>(data:T) => {
+    return request({
+        url: '/user/captcha',
+        method: 'post',
+        data
+    })
+}
+// 验证码登录
+export const captchaLogin = <T>(data:T) => {
+    return request({
+        url: 'user/captcha_login',
+        method: 'post',
+        data
+    })
+}
+// 用户信息
+export const userProfile = <T>(params:T) => {
+    return request({
+        url: 'user/profile',
+        method: 'get',
+        params
+    })
+}
+// 更改密码
+export const resetPassword = <T>(data:T) => {
+    return request({
+        url: '/user/reset_password',
+        method: 'post',
+        data
+    })
+}
+// 更改密码
+export const setPassword = <T>(data:T) => {
+    return request({
+        url: '/user/set_password',
+        method: 'post',
+        data
+    })
+}
+// 用户名更改
+export const userAccount = <T>(data:T) => {
+    return request({
+        url: '/user/account',
+        method: 'post',
+        data
+    })
 }

src/components/MobileCom.vue

@@ -19,6 +19,7 @@
                 <van-dropdown-item ref="item">
                     <van-cell class="menu_title" v-for="item in menuPath" :key="item" :title="item.text"
                         @click="toPath(item.url)"></van-cell>
+                    <van-cell title="密码设置" @click="setPwd"></van-cell>
                     <van-cell v-if="hasToken" title="退出登录" @click="logOut"></van-cell>
                 </van-dropdown-item>
             </van-dropdown-menu>
@@ -49,6 +50,9 @@ const logOut = () => {
     localStorage.removeItem('token')
     router.push({ path: 'm_login' })
 }
+const setPwd = () => {
+    router.push({ path: 'm_reset' })
+}
 </script>
 
 <style lang="scss" scoped>

src/layout/Layout.vue

@@ -44,6 +44,7 @@ import sectionVue from './section.vue';
 
     .main {
         margin-top: 120px;
+        overflow: hidden;
     }
 
     .footer {

src/layout/header.vue

@@ -25,6 +25,9 @@
           </span>
           <template #dropdown>
             <el-dropdown-menu>
+              <el-dropdown-item class="clearfix" @click="resetPWD">
+                设置
+              </el-dropdown-item>
               <el-dropdown-item class="clearfix" @click="logOut">
                 退出登录
               </el-dropdown-item>
@@ -104,7 +107,9 @@ const logOut = () => {
   router.push({ path: 'p_login' })
   hasToken.value = ''
 }
-
+const resetPWD = () => {
+   router.push('/p_reset')
+}
 interface LinkItem {
   id: string
   value: string

src/router/index.ts

@@ -37,6 +37,18 @@ const routes:Array<RouteRecordRaw> = [
       }
     ]
   },
+  {
+    path: '/p_reset',
+    name: 'p_reset',
+    component: Layout,
+    meta: { type: 'pc', title:'密码设置' },
+    children: [
+      {
+        path: '/p_reset',
+        component: () => import('@/view/p_views/resetPwd/resetPwd.vue')
+      }
+    ]
+  },
   // 分类
   {
     path: '/p_categroy',
@@ -126,6 +138,12 @@ const routes:Array<RouteRecordRaw> = [
     name: 'm_search',
     meta: { type: 'mobile', title:'游戏搜索' },
     component: () => import('@/view/m_views/search/index.vue')
+  },
+  {
+    path: '/m_reset',
+    name: 'm_reset',
+    meta: { type: 'mobile', title:'密码设置' },
+    component: () => import('@/view/m_views/resetPwd/resetPwd.vue')
   }
 ]
 

src/store/user.ts

@@ -1,4 +1,5 @@
 import { defineStore } from 'pinia'
+import { userProfile } from '@/api/index'
 
 const userInfo = defineStore({
     id: 'userInfo',
@@ -6,12 +7,25 @@ const userInfo = defineStore({
         UserInfo: {
             account: '',
             password: ''
-        }
+        },
+        profile:{}
     }),
     actions: {
         setUerInfo(data: any) {
             this.UserInfo = data
             console.log('UserInfo', this.UserInfo);
+        },
+        setProfile(info:any){
+            this.profile = info
+        },
+        async getUserProfile(){
+            // from 2 手机登录   1密码登录
+            await userProfile({from: parseInt(localStorage.getItem('from') as string)}).then((res) => {
+                console.log(res)
+                this.setProfile(res.data.data)
+            }).catch((error) => {
+                console.log(error)
+            })
         }
     },
     getters: {

src/view/m_views/login/index.vue

@@ -4,19 +4,21 @@
             <img src="@/assets/img/logo.png" class="img">
         </div>
         <div class="input">
-            <van-form @submit.prevent="submitForm" >
+            <van-form @submit="submitForm" >
                 <van-tabs v-model:active="login_typ" @change="resetForm">
                     <van-tab title="密码登录" name="pwd"></van-tab>
                     <van-tab title="验证码登录" name="sms"></van-tab>
                 </van-tabs>
-                <van-field style="font-size: 16px;" v-model="loginForm.account" name="用户名" label="用户名"
+                <van-field v-if="login_typ === 'pwd'" style="font-size: 16px;" v-model="loginForm.account" name="用户名" label="用户名"
                     placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
+                <van-field v-else-if="login_typ === 'sms'" type="tel" style="font-size: 16px;" v-model="loginForm.account" name="手机号" label="手机号"
+                    placeholder="请输入手机号" :rules="[{ required: true, message: '请填写手机号' }]" />
                 <van-field v-if="login_typ === 'pwd'" style="font-size: 16px;" v-model="loginForm.password" type="password" name="密码"
                     label="密&emsp;码" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]" />
                 <van-field v-else-if="login_typ === 'sms'" style="font-size: 16px;" v-model="loginForm.smsCaptcha" type="number" name="密码"
                     label="验证码" placeholder="请输入验证码" :rules="[{ required: true, message: '请填写验证码' }]">
                     <template #button>
-                        <van-button size="small" type="primary" style="width: 20vw;" :disabled="!can_send" @click="getCaptcha">{{ smsMessage }}</van-button>
+                        <van-button size="small" type="primary" style="width: 20vw;" :disabled="!can_send || loginForm.account.length!==11" @click="getCaptcha">{{ smsMessage }}</van-button>
                     </template>
                 </van-field>
                 <van-field style="font-size: 16px;" v-model="loginForm.password" type="hidden" id="md5_password" />
@@ -34,7 +36,7 @@
 
 <script setup lang="ts">
 import { reactive, ref, onMounted } from 'vue';
-import { getUserLogin } from '@/api/index'
+import { getUserLogin, captchaLogin, getCaptchaHttp, userProfile } from '@/api/index'
 import Message from '@/utils/Message'
 import { useRouter } from 'vue-router'
 import { useStore } from '@/store/index'
@@ -60,53 +62,91 @@ const loginForm = reactive<login>({
     timestamp: parseInt(`${Date.now() / 1000}`),
     smsCaptcha: undefined
 })
-
+const from = ref<1 | 2>(1)
 const submitForm = async () => {
-    // 登录密码加密
-    let md5Pwd: any = document.querySelector('#md5_password')
-    md5Pwd = md5(md5(md5(loginForm.password)) + loginForm.timestamp)
+    console.log(login_typ.value);
+    
+    if(login_typ.value === 'pwd'){
+        // 登录密码加密
+        let md5Pwd: any = document.querySelector('#md5_password')
+        md5Pwd = md5(md5(md5(loginForm.password)) + loginForm.timestamp)
 
-    const params = {
-        account: loginForm.account,
-        password: md5Pwd,
-        timestamp: loginForm.timestamp
-    }
-    await getUserLogin(params).then(res => {
-        // console.log('res---->', res);
-        if (res.data.code === 200) {
-            Message.success('登录成功')
-            // 保存用户信息 和 token
-            localStorage.setItem('token', res.data.data.token)
-            localStorage.setItem('account', loginForm.account)
+        const params = {
+            account: loginForm.account,
+            password: md5Pwd,
+            timestamp: loginForm.timestamp
+        }
+        await getUserLogin(params).then(async(res) => {
+            // console.log('res---->', res);
+            if (res.data.code === 200) {
+                Message.success('登录成功')
+                // 保存用户信息 和 token
+                localStorage.setItem('token', res.data.data.token)
+                localStorage.setItem('account', loginForm.account)
+                localStorage.setItem('from', '1')
+                await user.getUserProfile()
 
-            user.setUerInfo(loginForm)
-            // 浏览器记住账户和密码
-            window.sessionStorage.setItem('token', res.data.data.token)
-            window.sessionStorage.setItem('account', loginForm.account)
-            window.sessionStorage.setItem('password', loginForm.password)
-            // 跳转我的游戏页面
-            setTimeout(() => {
-                router.push({ path: '/m_mine', query: { account: loginForm.account } })
-                local.set('headerPath', '我的')
-            }, 1000);
+                // 浏览器记住账户和密码
+                // window.sessionStorage.setItem('token', res.data.data.token)
+                // window.sessionStorage.setItem('account', loginForm.account)
+                // window.sessionStorage.setItem('password', loginForm.password)
+                // 跳转我的游戏页面
+                setTimeout(() => {
+                    router.push({ path: '/m_mine', query: { account: loginForm.account } })
+                    local.set('headerPath', '我的')
+                }, 1000);
+            }
+        }).catch(err => {
+            // console.log('err===>', err);
+            Message.error(err.data.msg)
+        })
+    }else if(login_typ.value === 'sms'){
+        const params = {
+            mobile: loginForm.account,
+            captcha: loginForm.smsCaptcha
         }
-    }).catch(err => {
-        // console.log('err===>', err);
-        Message.error(err.data.msg)
-    })
+        console.log(params);
+        
+        await captchaLogin(params).then(async(res) => {
+            console.log(res)
+            if (res.data.code === 200) {
+                showSuccessToast('登录成功');
+                localStorage.setItem('token', res.data.data.token)
+                localStorage.setItem('account', loginForm.account)
+                localStorage.setItem('from', '2')
+                await user.getUserProfile()
+                setTimeout(() => {
+                    router.push({ path: '/m_mine', query: { account: loginForm.account } })
+                    local.set('headerPath', '我的')
+                }, 1000);
+            }
+            
+        }).catch((error) => {
+            console.log(error)
+            showFailToast(error.data.msg)
+        })
+    }
+    
 }
 
 const resetForm = () => {
     loginForm.account = ''
     loginForm.password = '',
-    loginForm.smsCaptcha = null
+    loginForm.smsCaptcha = undefined
 }
-const getCaptcha = () => {
-   can_send.value = false
-   smsMessage.value = VALID
-   settimes()
-   sessionStorage.setItem('LOGIN_CAPTCHA', Math.round(new Date().getTime() / 1000).toString())
-   showSuccessToast('验证码已发送，请注意查收');
+const getCaptcha = async() => {
+    await getCaptchaHttp({mobile: loginForm.account}).then((res) => {
+        console.log(res)
+        can_send.value = false
+        smsMessage.value = VALID
+        settimes()
+        sessionStorage.setItem('LOGIN_CAPTCHA', Math.round(new Date().getTime() / 1000).toString())
+        showSuccessToast('验证码已发送，请注意查收');
+    }).catch((error) => {
+        console.log(error)
+        showFailToast(error.data.msg)
+    })
+   
 }
 const settimes = () => {
     var interval

src/view/m_views/mine/index.vue

@@ -48,6 +48,7 @@ import { getMineGame } from '@/api/index'
 import { useRouter, useRoute } from 'vue-router'
 import Message from '@/utils/Message'
 import MobList from '@/components/MobList.vue';
+import { useStore } from '@/store/index'
 
 const router = useRouter()
 const route = useRoute()
@@ -59,6 +60,7 @@ const isLoading = ref<boolean>(true)
 const viewWidth = ref<number>(document.documentElement.clientHeight - 100)
 const userAccount = ref<string | null>(localStorage.getItem('account'))
 const token = ref<string | null>(localStorage.getItem('token'))
+const user = useStore('user')
 
 interface params {
     page: number,
@@ -84,6 +86,7 @@ onMounted(() => {
             userAccount.value = ''
         }
     }
+    user.getUserProfile()
 })
 
 const getMyGame = async (params) => {
@@ -118,6 +121,7 @@ const showGifts = (row:any) => {
    console.log(row);
    dialogVisible.value = true
 }
+
 </script>
 
 <style scoped lang="scss">

src/view/m_views/resetPwd/resetPwd.vue

@@ -0,0 +1,158 @@
+<template>
+  <m_header></m_header>
+  <div>
+    <van-divider>设置</van-divider>.
+    <van-tabs>
+      <van-tab title="密码设置">
+        <van-form @submit="onSubmit">
+          <van-cell-group inset>
+            <van-field
+              v-if="from === 1"
+              v-model="ruleForm.old_password"
+              name="旧密码"
+              label="旧密码"
+              type="password"
+              placeholder="请填写旧密码"
+              :rules="[{ required: true, message: '请填写旧密码' },{ validator: checkAge}]"
+            />
+            <van-field
+              v-model="ruleForm.new_password"
+              type="password"
+              name="新密码"
+              label="新密码"
+              placeholder="请填写新密码"
+              :rules="[{ required: true, message: '请填写新密码' },{ validator: checkAge}]"
+            />
+            <van-field
+              v-model="ruleForm.new_password2"
+              type="password"
+              name="新密码"
+              label="新密码"
+              placeholder="请再次填写新密码"
+              :rules="[{ required: true, message: '请再次填写新密码' },{ validator: checkAge}]"
+            />
+          </van-cell-group>
+          <div style="margin: 16px;display: flex;flex-direction: row-reverse;">
+            <van-button round block type="primary" color="#ed8c0f" native-type="submit">
+              提交
+            </van-button>
+          </div>
+        </van-form>
+      </van-tab>
+      <van-tab title="用户名设置">
+        <van-form @submit="onSubmit2">
+          <van-field
+            v-model="account"
+            type="text"
+            name="用户名"
+            :readonly="!!user.profile.user_name"
+            label="用户名"
+            placeholder="请填写用户名"
+            :rules="[{ required: true, message: '请填写用户名',trigger: 'onBlur' },{ pattern: pattern, message: '请输入以字母为开头，长度为6-20位的用户名'}]"
+          />
+          <div v-if="!user.profile.user_name" style="margin: 16px;display: flex;flex-direction: row-reverse;">
+            <van-button round block type="primary" color="#ed8c0f" native-type="submit">
+              提交
+            </van-button>
+          </div>
+        </van-form>
+      </van-tab>
+    </van-tabs>
+    
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed, inject } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { showSuccessToast, showFailToast } from 'vant';
+import type { FormInstance, FormRules } from 'element-plus'
+import {resetPassword,setPassword, userAccount } from '@/api/index'
+import Message from '@/utils/Message'
+import { useStore } from '@/store/index'
+
+const user = useStore('user')
+
+const router = useRouter()
+const route = useRoute()
+// showSuccessToast('成功文案')
+// showFailToast('失败文案')
+const ruleFormRef = ref<FormInstance>()
+interface RuleForm {
+  old_password: string
+  new_password: string
+  new_password2: string
+}
+const ruleForm = reactive<RuleForm>({
+  old_password: '',
+  new_password: '',
+  new_password2: ''
+})
+
+const checkAge = (value:any, rule:any) => {
+  console.log(value, rule);
+  if(value.length < 6 || value.length > 20){
+    return '请输入6-20位密码'
+  }
+  return ''
+}
+
+const onSubmit = async() => {
+  if(ruleForm.new_password2 !== ruleForm.new_password){
+    return showFailToast('两次输入的密码不一致！')
+  }
+  if(from.value === 1){
+    // 账号密码登录
+    await resetPassword({old_pass:ruleForm.old_password, new_pass: ruleForm.new_password}).then((res) => {
+      console.log(res)
+      showSuccessToast(res.data.msg)
+    }).catch((error) => {
+      console.log(error)
+      showFailToast(error.data.msg)
+    })
+  }else if(from.value === 2){
+    await setPassword({new_pass: ruleForm.new_password}).then((res) => {
+      console.log(res)
+      showSuccessToast(res.data.msg)
+    }).catch((error) => {
+      console.log(error)
+      showFailToast(error.data.msg)
+    })
+  }
+};
+const onSubmit2 = async() => {
+  await userAccount({account: account.value.toLowerCase()}).then((res) => {
+    console.log(res)
+    showSuccessToast(res.data.msg)
+    user.getUserProfile()
+  }).catch((error) => {
+    console.log(error)
+    showFailToast(error.data.msg)
+  })
+}
+const pattern = ref<RegExp>(/^[a-zA-Z][a-zA-Z0-9]{5,19}$/)
+const from = ref<1 | 2>(1)
+const account = ref<string>('')
+onMounted(async()=>{
+  from.value = parseInt(localStorage.getItem('from') as string)as 1 | 2
+  await user.getUserProfile()
+  account.value = user.profile?.user_name
+})
+
+</script>
+
+
+<style lang="scss" scoped>
+.wrapper{
+  width: 1000px;
+  background-color: #fff;
+  min-height: 500px;
+  margin: 30px auto;
+  border-radius: 15px;
+  box-sizing: border-box;
+  padding: 30px;
+  .form-wrapper{
+    width: 60%;
+  }
+}
+</style>

src/view/p_views/login/index.vue

@@ -7,7 +7,7 @@
         
         <el-form ref="ruleFormRef" :rules="rules" class="login_from df fdc aic jcc" label-position="left"
             label-width="80px" :model="loginForm" style="max-width: 400px" @submit.prevent="submitForm(ruleFormRef)">
-            <el-tabs v-model="login_typ" style="" @tab-change="resetForm">
+            <el-tabs v-model="login_typ" style="" @tab-change="resetForm(ruleFormRef)">
                 <el-tab-pane label="密码登录" name="pwd" />
                 <el-tab-pane label="验证码登录" name="sms" />
             </el-tabs>
@@ -23,7 +23,7 @@
                 </el-form-item>
             </template>
             <template v-else-if="login_typ === 'sms'">
-                <el-form-item label="用户名" prop="account">
+                <el-form-item label="手机号" prop="account">
                 <el-input v-model="loginForm.account" type="text" placeholder="请输入账号" clearable :prefix-icon="User" />
                 </el-form-item>
                 <el-form-item label="验证码" prop="smsCaptcha">
@@ -50,7 +50,7 @@
 import { reactive, ref, onMounted } from 'vue';
 import { Lock, User } from '@element-plus/icons-vue'
 import type { FormInstance, FormRules } from 'element-plus'
-import { getUserLogin } from '@/api/index'
+import { getUserLogin, captchaLogin, getCaptchaHttp, userProfile } from '@/api/index'
 // import '@/utils/md5'
 import Message from '@/utils/Message'
 import checkRestTime from '@/utils/captcha'
@@ -78,6 +78,7 @@ const loginForm = reactive<login>({
     timestamp: parseInt(`${Date.now() / 1000}`),
     smsCaptcha: null
 })
+const from = ref<1 | 2>(1)
 
 const rules = reactive<FormRules>({
     account: [
@@ -97,39 +98,62 @@ const submitForm = async (formEl: FormInstance | undefined) => {
     if (!formEl) return
     await formEl.validate(async (valid, fields) => {
         if (valid) {
+            if(login_typ.value === 'pwd'){
+                // 登录密码加密
+                let md5Pwd: any = document.querySelector('#md5_password')
+                md5Pwd = md5(md5(md5(loginForm.password)) + loginForm.timestamp)
 
-            // 登录密码加密
-            let md5Pwd: any = document.querySelector('#md5_password')
-            md5Pwd = md5(md5(md5(loginForm.password)) + loginForm.timestamp)
-
-            const params = {
-                account: loginForm.account,
-                password: md5Pwd,
-                timestamp: loginForm.timestamp
-            }
-            getUserLogin(params).then(res => {
-                // console.log('res---->', res);
-                if (res.data.code === 200) {
-                    Message.success('登录成功')
-                    // 保存用户信息 和 token
-                    localStorage.setItem('token', res.data.data.token)
-                    localStorage.setItem('account', loginForm.account)
-
-                    user.setUerInfo(loginForm)
-                    // 浏览器记住账户和密码
-                    window.sessionStorage.setItem('token', res.data.data.token)
-                    window.sessionStorage.setItem('account', loginForm.account)
-                    window.sessionStorage.setItem('password', loginForm.password)
-                    // 跳转我的游戏页面
-                    setTimeout(() => {
-                        router.push({ path: '/p_mine', query: { account: loginForm.account } })
-                        local.set('headerPath', '我的')
-                    }, 1000);
+                const params = {
+                    account: loginForm.account,
+                    password: md5Pwd,
+                    timestamp: loginForm.timestamp
+                }
+                getUserLogin(params).then(async(res) => {
+                    // console.log('res---->', res);
+                    if (res.data.code === 200) {
+                        Message.success('登录成功')
+                        // 保存用户信息 和 token
+                        localStorage.setItem('token', res.data.data.token)
+                        localStorage.setItem('account', loginForm.account)
+                        localStorage.setItem('from', '1')
+                        await user.getUserProfile()
+                        // 跳转我的游戏页面
+                        setTimeout(() => {
+                            router.push({ path: '/p_mine', query: { account: loginForm.account } })
+                            local.set('headerPath', '我的')
+                        }, 1000);
+                    }
+                }).catch(err => {
+                    // console.log('err===>', err);
+                    Message.error(err.data.msg)
+                })
+            }else if (login_typ.value === 'sms'){
+                const params = {
+                    mobile: loginForm.account,
+                    captcha: loginForm.smsCaptcha
                 }
-            }).catch(err => {
-                // console.log('err===>', err);
-                Message.error(err.data.msg)
-            })
+                console.log(params);
+                
+                await captchaLogin(params).then(async(res) => {
+                    console.log(res)
+                    if (res.data.code === 200) {
+                        Message.success('登录成功')
+                        localStorage.setItem('token', res.data.data.token)
+                        localStorage.setItem('account', loginForm.account)
+                        localStorage.setItem('from', '2')
+                        await user.getUserProfile()
+                        setTimeout(() => {
+                            router.push({ path: '/m_mine', query: { account: loginForm.account } })
+                            local.set('headerPath', '我的')
+                        }, 1000);
+                    }
+                    
+                }).catch((error) => {
+                    console.log(error)
+                    Message.error(error.data.msg)
+                })
+            }
+            
         } else {
             console.log('登录失败', fields)
         }

src/view/p_views/mine/index.vue

@@ -69,6 +69,7 @@ import Message from '@/utils/Message'
 import IndexList from '@/components/IndexList.vue'
 import local from '@/utils/local'
 
+const user = useStore('user')
 const router = useRouter()
 const route = useRoute()
 // const header = useStore('header')
@@ -102,6 +103,8 @@ onMounted(() => {
             getMyGame(params)
         }
     }
+    user.getUserProfile()
+
 })
 
 const getMyGame = async (params) => {

src/view/p_views/resetPwd/resetPwd.vue

@@ -0,0 +1,202 @@
+<template>
+  <div>
+    <div class="wrapper">
+      
+        <el-tabs>
+            <el-tab-pane label="密码设置">
+              <div class="form-wrapper">
+                <el-form
+                  ref="ruleFormRef"
+                  :model="ruleForm"
+                  :rules="rules"
+                  label-width="140px"
+                  class="demo-ruleForm"
+                  status-icon
+                >
+                  <el-form-item label="旧密码：" v-if="from === 1" prop="old_password">
+                    <el-input type="password" v-model="ruleForm.old_password" placeholder="请输入旧密码" />
+                  </el-form-item>
+                  <el-form-item label="新密码：" prop="new_password">
+                    <el-input type="password" v-model="ruleForm.new_password" placeholder="请输入新密码" @input="blurValidate(ruleFormRef)" />
+                  </el-form-item>
+                  <el-form-item label="再次输入新密码：" prop="new_password2">
+                    <el-input type="password" v-model="ruleForm.new_password2" placeholder="请再次输入新密码" @input="blurValidate(ruleFormRef)" />
+                  </el-form-item>
+                  <el-form-item>
+                    <el-button type="primary" color="#ed8c0f" style="color: #fff;" size="large" @click="submitForm(ruleFormRef)">
+                      提交
+                    </el-button>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="用户名设置">
+              <div class="form-wrapper">
+                <el-form
+                  ref="ruleFormRef2"
+                  :model="ruleForm2"
+                  :rules="rules2"
+                  label-width="140px"
+                  class="demo-ruleForm"
+                  status-icon
+                >
+                  <el-form-item label="用户名：" prop="account">
+                    <el-input type="text" :disabled="!!user.profile.user_name" v-model="ruleForm2.account" placeholder="请输入用户名" />
+                  </el-form-item>
+                  <el-form-item v-if="!user.profile.user_name">
+                    <el-button type="primary" color="#ed8c0f" style="color: #fff;" size="large" @click="submitForm2(ruleFormRef2)">
+                      提交
+                    </el-button>
+                  </el-form-item>
+                </el-form>
+              </div>
+            </el-tab-pane>
+        </el-tabs>
+        
+      </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed, inject } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { showSuccessToast, showFailToast } from 'vant';
+import type { FormInstance, FormRules } from 'element-plus'
+import {resetPassword,setPassword, userAccount } from '@/api/index'
+import Message from '@/utils/Message'
+import { useStore } from '@/store/index'
+const user = useStore('user')
+
+const router = useRouter()
+const route = useRoute()
+// showSuccessToast('成功文案')
+// showFailToast('失败文案')
+const ruleFormRef = ref<FormInstance>()
+const ruleFormRef2 = ref<FormInstance>()
+interface RuleForm {
+  old_password: string
+  new_password: string
+  new_password2: string
+  account?:string
+}
+const ruleForm = reactive<RuleForm>({
+  old_password: '',
+  new_password: '',
+  new_password2: ''
+})
+const ruleForm2 = reactive({
+  account: ''
+})
+const blurValidate = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  if(!ruleForm.new_password || !ruleForm.new_password2) return
+  formEl.validateField(['new_password', 'new_password2']).then((res) => {
+    console.log(res)
+  }).catch((error) => {
+    console.log(error)
+  })
+}
+const checkAge = (rule: any, value: any, callback: any) => {
+  if(!ruleForm.new_password2.length || !ruleForm.new_password.length){
+    return callback()
+  }
+  if(ruleForm.new_password2 !== ruleForm.new_password){
+    callback(new Error('两次输入的新密码不一致'))
+  }else{
+    callback()
+  }
+}
+const rules2 = reactive<FormRules>({
+  account:[
+    {required: true, message: '请输入用户名', trigger: 'blur'},
+    {pattern:'^[a-zA-Z][a-zA-Z0-9]{5,19}$', message: '请输入以字母为开头，长度为6-20位的用户名', trigger: 'blur'}
+  ]
+})
+const rules = reactive<FormRules>({
+  old_password: [
+    { required: true, message: '请输入旧密码', trigger: 'blur' },
+    { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur' },
+  ],
+  new_password:[
+    { required: true, message: '请输入新密码', trigger: 'blur' },
+    {validator: checkAge},
+    { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur' },
+  ],
+  new_password2:[
+    { required: true, message: '请再次输入新密码', trigger: 'blur' },
+    {validator: checkAge},
+    { min: 6, max: 20, message: '请输入6-20位密码', trigger: 'blur' },
+  ]
+})
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate(async(valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+      if(from.value === 1){
+        // 账号密码登录
+        await resetPassword({old_pass:ruleForm.old_password, new_pass: ruleForm.new_password}).then((res) => {
+          console.log(res)
+          Message.success(res.data.msg)
+        }).catch((error) => {
+          console.log(error)
+          Message.error(error.data.msg)
+        })
+      }else if(from.value === 2){
+        await setPassword({new_pass: ruleForm.new_password}).then((res) => {
+          console.log(res)
+          Message.success(res.data.msg)
+        }).catch((error) => {
+          console.log(error)
+          Message.error(error.data.msg)
+        })
+      }
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+const submitForm2 = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate(async(valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+      await userAccount({account: ruleForm2.account.toLowerCase()}).then((res) => {
+        console.log(res)
+        Message.success(res.data.msg)
+        user.getUserProfile()
+      }).catch((error) => {
+        console.log(error)
+        Message.error(error.data.msg)
+      })
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+const from = ref<1 | 2>(1)
+onMounted(async()=>{
+  from.value = parseInt(localStorage.getItem('from') as string)as 1 | 2
+  await user.getUserProfile()
+  ruleForm2.account = user.profile?.user_name
+})
+
+</script>
+
+
+<style lang="scss" scoped>
+.wrapper{
+  width: 1000px;
+  background-color: #fff;
+  min-height: 500px;
+  margin: 30px auto;
+  border-radius: 15px;
+  box-sizing: border-box;
+  padding: 30px;
+  .form-wrapper{
+    width: 60%;
+    // height: 100%;
+  }
+}
+</style>