update

.env.development

+VUE_APP_LOGIN_API=
+VUE_APP_BASE_API=

.env.production

+VUE_APP_LOGIN_API=https://databus-api2.ezijing.com
+VUE_APP_BASE_API=https://lms-api.ezijing.com 

package.json

@@ -10,6 +10,8 @@
   "dependencies": {
     "axios": "^0.19.2",
     "core-js": "^3.6.4",
+    "md5": "^2.2.1",
+    "qs": "^6.9.1",
     "vant": "^2.5.5",
     "vue": "^2.6.11",
     "vue-meta": "^2.3.3",

src/api/account.js

+import httpRequest from '@/utils/axios'
+
+// 登录
+export function login(data) {
+  return httpRequest({
+    url: process.env.VUE_APP_LOGIN_API + '/api/user_center/login',
+    method: 'post',
+    data
+  })
+}
+// 重置密码
+export function resetPassword(data) {
+  return httpRequest({
+    url: process.env.VUE_APP_LOGIN_API + '/api/user_center/reset_password',
+    method: 'post',
+    data
+  })
+}
+// 发送重置验证码
+export function sendResetPasswordCode(data) {
+  return httpRequest({
+    url:
+      process.env.VUE_APP_LOGIN_API +
+      '/api/user_center/send_reset_password_code',
+    method: 'post',
+    data
+  })
+}

src/components/CountdownButton.vue

+<template>
+  <van-button
+    native-type="button"
+    :disabled="currentDisabled"
+    :loading="loading"
+  >
+    {{ curretnValue }}
+  </van-button>
+</template>
+
+<script>
+export default {
+  name: 'CountdownButton',
+  props: {
+    step: { type: Number, default: 1000 },
+    disabled: { type: Boolean, default: false },
+    seconds: { type: Number, default: 60 },
+    defaultValue: { type: String, default: '发送验证码' }
+  },
+  data() {
+    return {
+      currentDisabled: false,
+      currentSeconds: 0,
+      loading: false,
+      timer: null
+    }
+  },
+  computed: {
+    curretnValue() {
+      let longTime = this.seconds - this.currentSeconds
+      return longTime < this.seconds ? `${longTime}秒后重发` : this.defaultValue
+    }
+  },
+  methods: {
+    genTimer() {
+      this.timer && clearInterval(this.timer)
+      this.timer = setInterval(() => {
+        this.currentSeconds++
+        if (this.currentSeconds === this.seconds) {
+          this.stop()
+        }
+      }, this.step)
+    },
+    start() {
+      this.loading = false
+      this.currentDisabled = true
+      this.genTimer()
+    },
+    stop() {
+      this.timer && clearInterval(this.timer)
+      this.currentSeconds = 0
+      this.currentDisabled = false
+    }
+  }
+}
+</script>

src/utils/axios.js

 import axios from 'axios'
-// import qs from 'qs'
+import qs from 'qs'
 import { Toast } from 'vant'
-// import router from '@/router'
-// import store from '../store'
+import router from '@/router'
 
 const httpRequest = axios.create({
-  baseURL: 'https://some-domain.com/api/',
+  // baseURL: process.env.VUE_APP_BASE_API,
   timeout: 60000,
-  headers: { token: 'token' }
+  headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
 })
 
 // 请求拦截
 httpRequest.interceptors.request.use(
   function(config) {
+    if (
+      config.headers['Content-Type'] === 'application/x-www-form-urlencoded'
+    ) {
+      config.data = qs.stringify(config.data)
+    }
     return config
   },
   function(error) {
@@ -26,7 +30,17 @@ httpRequest.interceptors.response.use(
     return response.data
   },
   function(error) {
+    if (error.response) {
+      const { status } = error.response.data
+      if (status === 403) {
+        router.replace({
+          path: '/login',
+          query: { redirect_uri: encodeURIComponent(window.location.href) }
+        })
+      }
+    } else {
       Toast({ type: 'error', message: error })
+    }
     return Promise.reject(error)
   }
 )

src/views/Login.vue

@@ -11,7 +11,7 @@
             type="text"
             class="login-input"
             placeholder="手机/邮箱/用户名"
-            v-model="form.account"
+            v-model="ruleForm.login_name"
           />
         </div>
         <div class="login-form__item">
@@ -19,7 +19,7 @@
             type="password"
             class="login-input"
             placeholder="密码"
-            v-model="form.password"
+            v-model="ruleForm.password"
           />
         </div>
         <div class="login-form__item">
@@ -28,7 +28,7 @@
           >
         </div>
         <div class="login-form__item">
-          <div class="login-button" @click="handleSubmit">登录</div>
+          <div class="login-button" @click="onSubmit">登录</div>
         </div>
       </div>
     </div>
@@ -44,25 +44,70 @@
   </div>
 </template>
 <script>
+import md5 from 'md5'
+import * as api from '@/api/account'
 import Password from './Password.vue'
+
 export default {
   components: { Password },
   data() {
     return {
-      form: {
-        account: '',
+      ruleForm: {
+        login_name: '',
         password: ''
       },
       checked: false,
       passwordVisible: false
     }
   },
+  computed: {
+    // 重定向地址
+    redirectURI() {
+      const { query } = this.$route
+      return query.redirect_uri ? decodeURIComponent(query.redirect_uri) : ''
+    }
+  },
   methods: {
-    handleSubmit() {
-      if (!this.form.account) {
+    // 提交
+    onSubmit() {
+      if (!this.ruleForm.login_name) {
         this.$notify('请输入手机/邮箱/用户名')
-      } else if (!this.form.password) {
+      } else if (!this.ruleForm.password) {
         this.$notify('请输入密码')
+      } else {
+        this.loginRequest()
+      }
+    },
+    // 登录
+    loginRequest() {
+      let data = Object.assign({}, this.ruleForm, { service: 'h5.ezijing.com' })
+      data.password = md5(
+        'uokoaduw' +
+          data.password
+            .split('')
+            .reverse()
+            .join('') +
+          'auhgniq'
+      )
+      api
+        .login(data)
+        .then(response => {
+          this.loginSuccess(response)
+        })
+        .catch(error => {
+          error.response && this.$notify(error.response.data.message)
+        })
+    },
+    // 登录成功
+    loginSuccess(response) {
+      if (response.ticket) {
+        if (this.redirectURI) {
+          window.location.href = this.redirectURI
+        } else {
+          this.$router.replace('/')
+        }
+      } else {
+        this.$notify('登录失败，请重试')
       }
     }
   }

src/views/Password.vue

@@ -15,7 +15,8 @@
       >
         <h2 class="password-title">修改密码</h2>
         <van-field
-          v-model="ruleForm.account"
+          v-model="ruleForm.contact"
+          name="contact"
           placeholder="请输入手机号/邮箱"
           :border="false"
           :rules="[
@@ -25,12 +26,21 @@
         />
         <van-field
           v-model="ruleForm.code"
+          name="code"
           placeholder="请输入验证码"
           :border="false"
           :rules="[{ required: true, message: '请输入验证码' }]"
-        />
+        >
+          <template slot="button">
+            <countdown-button
+              @click.native="onSendCode"
+              ref="countdown"
+            ></countdown-button>
+          </template>
+        </van-field>
         <van-field
-          v-model="ruleForm.password"
+          v-model="ruleForm.new_password"
+          name="new_password"
           type="password"
           placeholder="6-20个字符，只能数字/字母/标点符号"
           :border="false"
@@ -39,9 +49,17 @@
         <van-field
           v-model="ruleForm.primary_password"
           type="password"
+          name="primary_password"
           placeholder="再次确认密码"
           :border="false"
-          :rules="[{ required: true, message: '请输入确认密码' }]"
+          :rules="[
+            { required: true, message: '请输入确认密码' },
+            {
+              trigger: 'onBlur',
+              validator: validatePass,
+              message: '两次输入密码不一致'
+            }
+          ]"
         />
         <div style="margin: 16px 16px 10px;">
           <van-button block native-type="submit" class="password-button">
@@ -53,7 +71,7 @@
     <div class="password-success" v-else>
       <span class="password-success__icon"></span>
       <span class="password-success__text">密码修改成功</span>
-      <van-button block native-type="submit" class="password-button">
+      <van-button block class="password-button" @click="onClosed">
         立即登录
       </van-button>
     </div>
@@ -61,7 +79,11 @@
 </template>
 
 <script>
+import * as api from '@/api/account'
+import CountdownButton from '@/components/CountdownButton'
+
 export default {
+  components: { CountdownButton },
   props: {
     value: { type: Boolean, default: false }
   },
@@ -70,9 +92,9 @@ export default {
       show: this.value,
       isSuccess: false,
       ruleForm: {
-        account: '',
+        contact: '',
         code: '',
-        password: '',
+        new_password: '',
         primary_password: ''
       }
     }
@@ -86,13 +108,54 @@ export default {
     }
   },
   methods: {
-    onSubmit(values) {
-      this.isSuccess = true
-      console.log('submit', values)
-    },
     onClosed() {
       this.isSuccess = false
       this.$emit('input', false)
+    },
+    onSubmit() {
+      this.resetPasswordRequest()
+    },
+    // 发送验证码
+    onSendCode() {
+      this.$refs.form.validate('contact').then(response => {
+        if (!response) {
+          // 开始倒计时
+          this.$refs['countdown'].start()
+          this.sendCodeRequest()
+        }
+      })
+    },
+    // 验证码
+    sendCodeRequest() {
+      api
+        .sendResetPasswordCode({
+          contact: this.ruleForm.contact,
+          source_type: 3
+        })
+        .then(() => {
+          this.$notify({ type: 'success', message: '验证码发送成功' })
+        })
+        .catch(error => {
+          // 停止计时
+          this.$refs['countdown'].stop()
+          error.response && this.$notify(error.response.data.message)
+        })
+    },
+    // 重置密码
+    resetPasswordRequest() {
+      let data = Object.assign({}, this.ruleForm, { service: 'h5.ezijing.com' })
+      api
+        .resetPassword(data)
+        .then(() => {
+          this.isSuccess = true
+        })
+        .catch(error => {
+          error.response && this.$notify(error.response.data.message)
+        })
+    },
+    // 确认密码校验
+    validatePass(value) {
+      return value === this.ruleForm.new_password
     }
   }
 }

src/views/account/components/Login.vue

@@ -7,13 +7,25 @@
     <div class="login-bd">
       <div class="login-form">
         <div class="login-form__item">
-          <input type="text" class="login-input" placeholder="手机/邮箱/用户名" v-model="form.account" />
+          <input
+            type="text"
+            class="login-input"
+            placeholder="手机/邮箱/用户名"
+            v-model="form.account"
+          />
         </div>
         <div class="login-form__item">
-          <input type="password" class="login-input" placeholder="密码" v-model="form.password" />
+          <input
+            type="password"
+            class="login-input"
+            placeholder="密码"
+            v-model="form.password"
+          />
         </div>
         <div class="login-form__item">
-          <van-checkbox v-model="checked" shape="square">下次自动登录</van-checkbox>
+          <van-checkbox v-model="checked" shape="square"
+            >下次自动登录</van-checkbox
+          >
         </div>
         <div class="login-form__item">
           <div class="login-button" @click="handleSubmit">登录</div>

src/views/learn/components/Item.vue

@@ -6,5 +6,4 @@
 export default {}
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
\ No newline at end of file

src/views/rebuild/components/Item.vue

@@ -6,5 +6,4 @@
 export default {}
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
\ No newline at end of file

src/views/share/components/Edit.vue

 <template>
   <div class="main">
-    <van-form @submit="onSubmit" ref="form" class="form" validate-trigger="onChange">
+    <van-form
+      @submit="onSubmit"
+      ref="form"
+      class="form"
+      validate-trigger="onChange"
+    >
       <van-field
         v-model="form.name"
         label="姓名"

src/views/share/components/Item.vue

@@ -6,5 +6,4 @@
 export default {}
 </script>
 
-<style lang="scss">
-</style>
+<style lang="scss"></style>
\ No newline at end of file

vue.config.js

-module.exports = {}
+module.exports = {
+  devServer: {
+    host: 'dev.ezijing.com',
+    proxy: {
+      '/api/user_center': {
+        target: 'https://e-learning3.ezijing.com'
+      }
+    }
+  }
+}