联调用户相关页面接口

hookehuyr
Commit 0fbc9a87b6e3a2110a348cb7d7611c8ac467c3eb 0fbc9a87 1 parent cb69f443
Showing 7 changed files with 232 additions and 53 deletions
components.d.ts
src/api/hager.js
src/components/common/hagerInput.vue
src/views/user/info.vue
src/views/user/login.vue
src/views/user/register.vue
src/views/user/reset.vue
--- a/components.d.ts
View file @0fbc9a8
+++ b/components.d.ts
View file @0fbc9a8
@@ -34,6 +34,7 @@ declare module 'vue' {
     HagerMore: typeof import('./src/components/hagerMore.vue')['default']
     HagerService: typeof import('./src/components/common/hagerService.vue')['default']
     Navbar: typeof import('./src/components/navbar.vue')['default']
+    Privacy: typeof import('./src/components/privacy.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SlideComp: typeof import('./src/components/slideComp.vue')['default']
--- a/src/api/hager.js
View file @0fbc9a8
+++ b/src/api/hager.js
View file @0fbc9a8
 /*
  * @Date: 2024-09-26 13:36:06
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-24 10:26:13
+ * @LastEditTime: 2024-10-25 14:01:25
  * @FilePath: /hager/src/api/hager.js
  * @Description: 文件描述
  */
@@ -17,6 +17,12 @@ const Api = {
   PRODUCT_SEARCH: '/srv/?a=cate&type=product_search',
   SOLUTION: '/srv/?a=cate&type=solution',
   FOOTER: '/srv/?a=footer',
+  REGISTER: '/srv/?a=user&type=register',
+  LOGIN: '/srv/?a=user&type=login',
+  GET_USER: '/srv/?a=user&type=get_user',
+  EDIT_USER: '/srv/?a=user&type=edit_user',
+  GET_CODE: '/srv/?a=user&type=get_code',
+  EDIT_PASSWORD: '/srv/?a=user&type=edit_password',
 };
 export const honorAPI = (params) => fn(fetch.get(Api.HONOR, params));
@@ -36,3 +42,10 @@ export const getProductSearchAPI = (params) => fn(fetch.get(Api.PRODUCT_SEARCH, 
 export const getSolutionListAPI = (params) => fn(fetch.get(Api.SOLUTION, params));
 export const getFooterAPI = (params) => fn(fetch.get(Api.FOOTER, params));
+
+export const registerAPI = (params) => fn(fetch.post(Api.REGISTER, params));
+export const loginAPI = (params) => fn(fetch.post(Api.LOGIN, params));
+export const getUserInfoAPI = (params) => fn(fetch.get(Api.GET_USER, params));
+export const editUserInfoAPI = (params) => fn(fetch.post(Api.EDIT_USER, params));
+export const getCodeAPI = (params) => fn(fetch.post(Api.GET_CODE, params));
+export const editPasswordAPI = (params) => fn(fetch.post(Api.EDIT_PASSWORD, params));
--- a/src/components/common/hagerInput.vue
View file @0fbc9a8
+++ b/src/components/common/hagerInput.vue
View file @0fbc9a8
 <!--
  * @Date: 2024-10-20 09:59:52
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-21 18:21:31
+ * @LastEditTime: 2024-10-25 15:55:42
  * @FilePath: /hager/src/components/common/hagerInput.vue
  * @Description: 文件描述
 -->
@@ -18,12 +18,12 @@
 <script>
 import mixin from 'common/mixin';
 import { Message } from 'element-ui';
+import { getCodeAPI } from "@/api/hager.js";
 export default {
   mixins: [mixin.init],
   props: {
     value: {
-      type: String,
       default: ''
     },
     placeholder: {
@@ -60,6 +60,8 @@ export default {
           return 'https://cdn.ipadbiz.cn/hager/icon/input/%E9%82%AE%E7%AE%B1@2x.png';
         case 'pwd':
           return 'https://cdn.ipadbiz.cn/hager/icon/input/%E5%AF%86%E7%A0%81@2x.png';
+        case 'code':
+          return 'https://cdn.ipadbiz.cn/hager/icon/%E9%AA%8C%E8%AF%81%E7%A0%81@2x.png';
         case 'username':
           return 'https://cdn.ipadbiz.cn/hager/icon/input/%E5%A7%93%E5%90%8D@2x.png';
         case 'tel':
@@ -80,16 +82,8 @@ export default {
       // 使用 $emit 触发 input 事件，传递新的输入值
       this.$emit('input', event.target.value);
     },
-    resetPwd () {
+    async resetPwd () {
-      if (!this.email) {
+      this.$emit('send', this.value);
-        Message({
-          showClose: true,
-          message: '邮箱地址不能为空',
-          type: 'warning'
-        });
-      } else {
-
-      }
     }
   }
 }
--- a/src/views/user/info.vue
View file @0fbc9a8
+++ b/src/views/user/info.vue
View file @0fbc9a8
 <!--
  * @Date: 2024-10-18 18:00:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-22 18:19:58
+ * @LastEditTime: 2024-10-25 13:52:46
  * @FilePath: /hager/src/views/user/info.vue
  * @Description: 文件描述
 -->
@@ -10,7 +10,7 @@
     <div class="input-title">我的信息</div>
     <div style="padding: 1rem 1.5rem 1rem 1rem;">
       <hagerInput type="email" :disable="status !== 'edit'" required v-model="email" placeholder="请输入注册邮箱地址" />
-      <hagerInput type="pwd" :disable="status !== 'edit'" required v-model="pwd" placeholder="请输入登录密码" />
+      <!-- <hagerInput type="pwd" :disable="status !== 'edit'" required v-model="pwd" placeholder="请输入登录密码" /> -->
       <hagerInput type="username" :disable="status !== 'edit'" v-model="username" placeholder="请输入姓名" />
       <hagerInput type="tel" :disable="status !== 'edit'" v-model="tel" placeholder="请输入联系电话" />
       <hagerInput type="corp" :disable="status !== 'edit'" v-model="corp" placeholder="请输入公司名称" />
@@ -19,7 +19,7 @@
     <div class="info-footer">
       <div v-if="status !== 'edit'" class="submit-btn" @click="onHandle">修改信息</div>
       <div v-else class="edit-box">
-        <div class="cancel btn" @click="status=''">取消</div>
+        <div class="cancel btn" @click="onCancel">取消</div>
         <div class="confirm btn" @click="onSubmit">确定</div>
       </div>
       <div class="info-subsidiary">
@@ -27,9 +27,7 @@
       </div>
     </div>
     <el-dialog title="隐私政策" :visible.sync="dialogVisible">
-      <div>
+      <privacy></privacy>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quos quis iste alias! Necessitatibus veniam eum dolor dolorem enim officiis aspernatur neque, quidem tempore officia non optio eveniet aliquid minus!
-      </div>
     </el-dialog>
     <el-drawer
@@ -37,7 +35,7 @@
       size="100%"
       :visible.sync="drawer"
       :direction="direction">
-      <span>我来啦!</span>
+      <privacy></privacy>
     </el-drawer>
   </div>
 </template>
@@ -46,37 +44,82 @@
 import mixin from 'common/mixin';
 import hagerInput from '@/components/common/hagerInput.vue';
 import $ from 'jquery';
+import privacy from '@/components/privacy.vue';
+import { getUserInfoAPI, editUserInfoAPI } from "@/api/hager.js";
+import { MessageBox, Message } from 'element-ui';
 export default {
   mixins: [mixin.init],
   data () {
     return {
-      email: 'hr.communication@hager.com',
+      email: '',
-      pwd: 'hager123',
+      pwd: '',
-      username: '王二虎',
+      username: '',
-      tel: '15650569910',
+      tel: '',
-      corp: '海格电气集团',
+      corp: '',
-      department: '研发部产品经理',
+      department: '',
       status: '',
       dialogVisible: false,
       drawer: false,
       direction: 'rtl',
     }
   },
-  mounted () {
+  async mounted () {
     if ($('#router-view').outerHeight() < $('.user-box').height()) {
       $('#router-view').height($('.user-box').outerHeight())
     }
+    // 获取用户信息
+    this.getUserInfo();
   },
   methods: {
+    async getUserInfo () {
+      const { code, data } = await getUserInfoAPI();
+      if (code === 1) { // 已登录
+        this.email = data.email;
+        this.username = data.username;
+        this.tel = data.mobile;
+        this.corp = data.company;
+        this.department = data.department;
+      }
+    },
     onHandle () {
       this.status = 'edit';
     },
-    onSubmit () {
+    async onSubmit () {
-      console.log('提交');
+      if (!this.email) {
-      setTimeout(() => {
+        Message({
+          type: 'error',
+          message: '邮箱地址不能空'
+        });
+        return;
+      }
+      // 检验邮箱地址有效性
+      if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)) {
+        Message({
+          type: 'error',
+          message: '邮箱地址格式不正确'
+        });
+        return;
+      }
+      const { code, msg } = await editUserInfoAPI({
+        email: this.email,
+        username: this.username,
+        mobile: this.tel,
+        company: this.corp,
+        department: this.department
+      });
+      if (code) {
+        Message({
+          type: 'success',
+          message: msg
+        });
         this.status = '';
-      }, 1000);
+      }
+    },
+    onCancel () {
+      this.status = '';
+      // 获取用户信息
+      this.getUserInfo();
     },
     openPrivacy () {
       if (this.is_xs) {
--- a/src/views/user/login.vue
View file @0fbc9a8
+++ b/src/views/user/login.vue
View file @0fbc9a8
 <!--
  * @Date: 2024-10-18 18:00:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-22 17:58:47
+ * @LastEditTime: 2024-10-25 13:49:38
  * @FilePath: /hager/src/views/user/login.vue
  * @Description: 文件描述
 -->
@@ -14,7 +14,7 @@
       <!-- TODO: 记住密码和忘记密码业务显示的问题？ -->
       <div class="pwd-box">
         <!-- <div><el-checkbox v-model="checked">记住密码</el-checkbox></div> -->
-        <div><span @click="goToReset">忘记密码？</span></div>
+        <div><span @click="goToReset">忘记/修改密码？</span></div>
       </div>
     </div>
     <div class="login-footer">
@@ -30,6 +30,8 @@
 import mixin from 'common/mixin';
 import hagerInput from '@/components/common/hagerInput.vue';
 import $ from 'jquery';
+import { loginAPI } from '@/api/hager';
+import { MessageBox, Message } from 'element-ui';
 export default {
   mixins: [mixin.init],
@@ -46,8 +48,37 @@ export default {
     }
   },
   methods: {
-    onSubmit () {
+    async onSubmit () {
-      console.warn();
+      if (!this.email) {
+        Message({
+          type: 'error',
+          message: '邮箱地址不能空'
+        });
+        return;
+      }
+      // 检验邮箱地址有效性
+      if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)) {
+        Message({
+          type: 'error',
+          message: '邮箱地址格式不正确'
+        });
+        return;
+      }
+      if (!this.pwd) {
+        Message({
+          type: 'error',
+          message: '登录密码不能空'
+        });
+        return;
+      }
+      const { code, msg } = await loginAPI({ email: this.email, password: this.pwd });
+      if (code) {
+        Message({
+          type: 'success',
+          message: msg
+        });
+        this.$router.push('/');
+      }
     },
     goToRegister () {
       this.$router.push('/user/register');
--- a/src/views/user/register.vue
View file @0fbc9a8
+++ b/src/views/user/register.vue
View file @0fbc9a8
 <!--
  * @Date: 2024-10-18 18:00:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-22 18:14:41
+ * @LastEditTime: 2024-10-25 13:37:44
  * @FilePath: /hager/src/views/user/register.vue
  * @Description: 文件描述
 -->
@@ -24,9 +24,7 @@
       </div>
     </div>
     <el-dialog title="隐私政策" :visible.sync="dialogVisible">
-      <div>
+      <privacy></privacy>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit quos quis iste alias! Necessitatibus veniam eum dolor dolorem enim officiis aspernatur neque, quidem tempore officia non optio eveniet aliquid minus!
-      </div>
     </el-dialog>
     <el-drawer
@@ -34,7 +32,7 @@
       size="100%"
       :visible.sync="drawer"
       :direction="direction">
-      <span>我来啦!</span>
+      <privacy></privacy>
     </el-drawer>
   </div>
 </template>
@@ -43,6 +41,9 @@
 import mixin from 'common/mixin';
 import hagerInput from '@/components/common/hagerInput.vue';
 import $ from 'jquery';
+import { registerAPI } from '@/api/hager';
+import { MessageBox, Message } from 'element-ui';
+import privacy from '@/components/privacy.vue';
 export default {
   mixins: [mixin.init],
@@ -65,8 +66,37 @@ export default {
     }
   },
   methods: {
-    onSubmit () {
+    async onSubmit () {
-      console.warn();
+      if (!this.email) {
+        Message({
+          type: 'error',
+          message: '邮箱地址不能空'
+        });
+        return;
+      }
+      // 检验邮箱地址有效性
+      if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)) {
+        Message({
+          type: 'error',
+          message: '邮箱地址格式不正确'
+        });
+        return;
+      }
+      if (!this.pwd) {
+        Message({
+          type: 'error',
+          message: '登录密码不能空'
+        });
+        return;
+      }
+      const { code, msg } = await registerAPI({ email: this.email, password: this.pwd, username: this.username, mobile: this.tel, company: this.corp, department: this.department });
+      if (code) {
+        Message({
+          type: 'success',
+          message: msg
+        });
+        this.goToLogin()
+      }
     },
     goToLogin () {
       this.$router.push('/user/login');
--- a/src/views/user/reset.vue
View file @0fbc9a8
+++ b/src/views/user/reset.vue
View file @0fbc9a8
 <!--
  * @Date: 2024-10-18 18:00:47
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-21 10:53:15
+ * @LastEditTime: 2024-10-25 16:00:00
  * @FilePath: /hager/src/views/user/reset.vue
  * @Description: 文件描述
 -->
@@ -9,8 +9,8 @@
   <div class="hager-reset-page">
     <div class="input-title">密码重置</div>
     <div style="padding: 1rem 1.5rem 1rem 1rem;">
-      <hagerInput type="email" required reset v-model="email" placeholder="请输入邮箱地址" />
+      <hagerInput type="email" required reset @send="onSend" v-model="email" placeholder="请输入邮箱地址" />
-      <hagerInput type="pwd" required v-model="sms" placeholder="请输入验证码" />
+      <hagerInput type="code" required v-model="sms" placeholder="请输入验证码" />
       <hagerInput type="pwd" required v-model="pwd" placeholder="请输入登录密码" />
     </div>
     <div class="reset-footer">
@@ -25,8 +25,9 @@
 <script>
 import mixin from 'common/mixin';
 import hagerInput from '@/components/common/hagerInput.vue';
-import { Message } from 'element-ui';
 import $ from 'jquery';
+import { getCodeAPI, editPasswordAPI } from "@/api/hager.js";
+import { MessageBox, Message, Loading } from 'element-ui';
 export default {
   mixins: [mixin.init],
@@ -35,7 +36,8 @@ export default {
       email: '',
       pwd: '',
       sms: '',
-      checked: false
+      checked: false,
+      fullscreenLoading: false
     }
   },
   mounted () {
@@ -44,12 +46,77 @@ export default {
     }
   },
   methods: {
-    onSubmit () {
+    async onSend (val) {
-      Message({
+      if (!val) {
-        showClose: true,
+        Message({
-        message: '重置成功',
+          type: 'error',
-        type: 'success'
+          message: '邮箱地址不能空'
-      });
+        });
+        return;
+      }
+
+      if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(val)) { // 检验邮箱地址有效性
+        Message({
+          type: 'error',
+          message: '邮箱地址格式不正确'
+        });
+        return;
+      }
+      let loadingInstance = Loading.service({ fullscreen: true, background: 'rgba(0, 0, 0, 0.3)' });
+      const { code, msg } = await getCodeAPI({ email: val });
+      if (code) {
+        Message({
+          type: 'success',
+          message: '发送成功'
+        });
+        this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
+          loadingInstance.close();
+        });
+      } else {
+        this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
+          loadingInstance.close();
+        });
+      }
+    },
+    async onSubmit () {
+      if (!this.email) {
+        Message({
+          type: 'error',
+          message: '邮箱地址不能空'
+        });
+        return;
+      }
+      // 检验邮箱地址有效性
+      if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)) {
+        Message({
+          type: 'error',
+          message: '邮箱地址格式不正确'
+        });
+        return;
+      }
+      if (!this.sms) {
+        Message({
+          type: 'error',
+          message: '验证码不能空'
+        });
+        return;
+      }
+      if (!this.pwd) {
+        Message({
+          type: 'error',
+          message: '登录密码不能空'
+        });
+        return;
+      }
+      const { code, msg } = await editPasswordAPI({ email: this.email, password: this.pwd, code: this.sms });
+      if (code) {
+        Message({
+          showClose: true,
+          message: '重置成功',
+          type: 'success'
+        });
+        this.$router.push('/user/login');
+      }
     },
     goBack () {
       this.$router.go(-1);