增加找回密码组件

README.md

-# office-h5
+# ezijing-office-h5
 
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 npm run serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).

package-lock.json

 {
-  "name": "office-h5",
+  "name": "ezijing-office-h5",
   "version": "0.1.0",
   "lockfileVersion": 1,
   "requires": true,

package.json

 {
-  "name": "office-h5",
+  "name": "ezijing-office-h5",
   "version": "0.1.0",
   "private": true,
   "scripts": {

src/main.js

@@ -26,6 +26,9 @@ Vue.use(Form)
 import { Field } from 'vant'
 Vue.use(Field)
 
+import { Button } from 'vant'
+Vue.use(Button)
+
 import { Checkbox, CheckboxGroup } from 'vant'
 Vue.use(Checkbox)
 Vue.use(CheckboxGroup)

src/router/index.js

@@ -5,7 +5,13 @@ import Layout from '@/components/Layout.vue'
 Vue.use(VueRouter)
 
 const routes = [
+  { path: '*', redirect: '/channel' },
   { path: '/', redirect: '/channel' },
+  {
+    name: 'login',
+    path: '/login',
+    component: () => import('@/views/Login.vue')
+  },
   {
     name: 'channel',
     path: '/channel',

src/views/Login.vue

+<template>
+  <div class="login">
+    <div class="login-hd">
+      <div class="logo" title="紫荆教育"></div>
+      <h2 class="login-title">欢迎回来</h2>
+    </div>
+    <div class="login-bd">
+      <div class="login-form">
+        <div class="login-form__item">
+          <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"
+          />
+        </div>
+        <div class="login-form__item">
+          <van-checkbox v-model="checked" shape="square"
+            >下次自动登录</van-checkbox
+          >
+        </div>
+        <div class="login-form__item">
+          <div class="login-button" @click="handleSubmit">登录</div>
+        </div>
+      </div>
+    </div>
+    <div class="login-ft">
+      <p class="login-tips">
+        登录遇到困难？请点击
+        <span class="forget-password" @click="passwordVisible = true">
+          找回密码
+        </span>
+      </p>
+    </div>
+    <password v-model="passwordVisible" />
+  </div>
+</template>
+<script>
+import Password from './Password.vue'
+export default {
+  components: { Password },
+  data() {
+    return {
+      form: {
+        account: '',
+        password: ''
+      },
+      checked: false,
+      passwordVisible: false
+    }
+  },
+  methods: {
+    handleSubmit() {
+      if (!this.form.account) {
+        this.$notify('请输入手机/邮箱/用户名')
+      } else if (!this.form.password) {
+        this.$notify('请输入密码')
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.login {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.logo {
+  width: 136px;
+  height: 44px;
+  background: url('~@/assets/img/logo.png') no-repeat;
+  background-size: contain;
+}
+.login-hd {
+  min-height: 170px;
+  padding: 30px 0 0 30px;
+  background: url('~@/assets/img/login_bg.png') no-repeat right top;
+  background-size: 152px 170px;
+}
+.login-title {
+  margin-top: 6px;
+  font-size: 50px;
+  color: #333;
+}
+.login-bd {
+  flex: 1;
+}
+.login-form {
+  padding: 40px 0 90px;
+  overflow: hidden;
+}
+.login-form__item {
+  padding: 0 30px;
+}
+.login-input {
+  padding: 0 20px;
+  width: 100%;
+  height: 40px;
+  font-size: 15px;
+  color: #999;
+  background: rgba(255, 255, 255, 1);
+  box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.06);
+  border-radius: 20px;
+  box-sizing: border-box;
+  margin-bottom: 30px;
+}
+.login-checkbox {
+  width: 15px;
+  height: 15px;
+  border: 1px solid rgba(153, 153, 153, 1);
+}
+.login-button {
+  float: right;
+  height: 60px;
+  padding-right: 90px;
+  font-size: 15px;
+  line-height: 60px;
+  background: url('~@/assets/img/login_button.png') no-repeat right center;
+  background-size: contain;
+  cursor: pointer;
+}
+.login-ft {
+  padding: 40px 0;
+}
+.login-tips {
+  text-align: center;
+  font-size: 12px;
+  color: #999;
+  .forget-password {
+    color: #1989fa;
+  }
+}
+</style>

src/views/Password.vue

+<template>
+  <van-popup
+    v-model="show"
+    overlay-class="password-overlay"
+    class="password-popup"
+    position="top"
+    @closed="onClosed"
+  >
+    <div class="password" v-if="!isSuccess">
+      <van-form
+        ref="form"
+        class="form"
+        validate-trigger="onChange"
+        @submit="onSubmit"
+      >
+        <h2 class="password-title">修改密码</h2>
+        <van-field
+          v-model="ruleForm.account"
+          placeholder="请输入手机号/邮箱"
+          :border="false"
+          :rules="[
+            { required: true, message: '请输入手机号/邮箱' },
+            { message: '手机号/邮箱格式错误' }
+          ]"
+        />
+        <van-field
+          v-model="ruleForm.code"
+          placeholder="请输入验证码"
+          :border="false"
+          :rules="[{ required: true, message: '请输入验证码' }]"
+        />
+        <van-field
+          v-model="ruleForm.password"
+          type="password"
+          placeholder="6-20个字符，只能数字/字母/标点符号"
+          :border="false"
+          :rules="[{ required: true, message: '请输入密码' }]"
+        />
+        <van-field
+          v-model="ruleForm.primary_password"
+          type="password"
+          placeholder="再次确认密码"
+          :border="false"
+          :rules="[{ required: true, message: '请输入确认密码' }]"
+        />
+        <div style="margin: 16px 16px 10px;">
+          <van-button block native-type="submit" class="password-button">
+            立即更改
+          </van-button>
+        </div>
+      </van-form>
+    </div>
+    <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>
+    </div>
+  </van-popup>
+</template>
+
+<script>
+export default {
+  props: {
+    value: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      show: this.value,
+      isSuccess: false,
+      ruleForm: {
+        account: '',
+        code: '',
+        password: '',
+        primary_password: ''
+      }
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(value) {
+        this.show = value
+      }
+    }
+  },
+  methods: {
+    onSubmit(values) {
+      this.isSuccess = true
+      console.log('submit', values)
+    },
+    onClosed() {
+      this.isSuccess = false
+      this.$emit('input', false)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.password-popup {
+  margin: 30px auto;
+  right: 0;
+  max-width: 690px;
+  width: calc(100vw - 60px);
+  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
+}
+.password {
+  min-height: 440px;
+}
+.password-title {
+  padding: 30px 16px 10px;
+  font-size: 18px;
+  color: #333;
+  text-align: center;
+}
+.password-overlay {
+  background-color: transparent;
+}
+.password-button {
+  background: linear-gradient(
+    180deg,
+    rgba(255, 155, 150, 1) 0%,
+    rgba(206, 62, 58, 1) 100%
+  );
+  color: #fff;
+  border: 0;
+}
+.password-success {
+  display: flex;
+  min-height: 440px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 30px;
+}
+.password-success__icon {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: url('~@/assets/img/icon_success.png') no-repeat;
+  background-size: contain;
+}
+.password-success__text {
+  display: block;
+  margin: 40px 0 55px;
+  font-size: 24px;
+  color: #333;
+}
+</style>