zx_flk_app/pages/loginRegister/login.vue

<template>
    <view class="zx-page-linear login-page">
		<navBar type="login" left="0" bgColor="transparent"></navBar>
      <view class="title-wrap">
        <view class="title">{{ $t('欢迎来到智寻出行') }}</view>
        <view class="sub-title">{{ $t('邮箱密码登录') }}</view>
      </view>
      <view class="main">
        <ZxInput
            v-model="form.email"
            :hightlight="checkShakeObj.email"
            :placeholder="$t('请输入邮箱账号')"
        />
        <ZxInput
            v-model="form.passwd"
            :placeholder="$t('请输入密码')"
            :isPassword="form.passwd"
        />
        <view 
          :class="['agreement-row', checkShakeObj.agreemen && 'shake']" 
          @tap="isCheckAgreement = !isCheckAgreement"
        >
          <view :class="['checkbox', isCheckAgreement && 'is-checked']"/>
          {{ $t('已阅读并同意') }}
          <text class="text" @tap.stop="handleAgreementLink('270')">《{{$t('用户协议')}}》</text>
          {{ $t('和') }}<text class="text" @tap.stop="handleAgreementLink('102')">《{{$t('隐私政策')}}》</text>
        </view>
        <view
          :class="['zx-form-btn', isSubmt && 'is-submit']"
          @tap="loginHandle"
        >
          {{ $t('登录') }}
        </view>
        <view class="register-row">
          <view class="forget" @tap="routerLink('/pages/loginRegister/forgetPassword')">
            {{ $t('忘记密码') }}
          </view>
          <view class="split-line"/>
          <view class="register" @tap="routerLink('/pages/loginRegister/register')">
            {{ $t('没有账号 立即注册') }}
          </view>
        </view>
        <view class="other-type-login">
          <view class="title">{{ $t('其他方式登录') }}</view>
          <view class="types">
            <image :src="QINIU_URL + 'Fg14B6UDuR6pLD1uR10mBE_y2vbf'" class="icon" />
            <image :src="QINIU_URL + 'FlZRWQZ301H8rP2_LwUdjnSUTQop'" class="icon" />
          </view>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  import { QINIU_URL, emailRegex } from '@/common/constant'
  import ZxInput from './components/ZxInput.vue'
	const config = require('@/common/config.js');
	const http = require('@/common/http.js');
  const common = require('@/common/common.js');
	const storage = require('@/common/storage.js');
  export default {
    data() {
      return {
        QINIU_URL,
        isCheckAgreement: false,
        checkShakeObj: {
          email: false,
          password: false,
          agreemen: false
        },
        form: {
          email: '',
          passwd: ''
        }
      }
    },
    components: {
      ZxInput
    },
    computed: {
      isSubmt({ form }) {
        return form.email && form.passwd
      }
    },
    methods: {
      clearInput(val) {
        this.$set(this.form, val, '')
      },
      routerLink(url) {
        uni.navigateTo({ url })
      },
      handleAgreementLink(id) {
				uni.navigateTo({
					url: `/pages/contract/contract?contract_id=${id}`
				})
			},
      _applyCheck(field, message) {
        this.checkShakeObj[field] = true;
        setTimeout(() => {
          this.checkShakeObj[field] = false;
        }, 500)
        uni.showToast({ title: message, icon: 'none' })
      },
      loginHandle() {
        if (!this.isCheckAgreement) {
          this._applyCheck('agreemen', this.$t('请勾选用户协议和隐私政策'))
          return
        }
        if (!emailRegex.test(this.form.email)) {
          this._applyCheck('email', this.$t('请输入有效的邮箱地址'))
          return
        }
        http.postApi(config.API_LOGIN, this.form, res => {
          if (res.succeed) {
            // 
            const { baseInfo } = res.body.data
            storage.setUserInfoData(baseInfo)
            storage.setUserToken(baseInfo.token)
            common.simpleToast('登录成功')
            uni.reLaunch({
              url: '/pages/index/index',
            })
          }
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  @import "@/libs/css/layout.scss";
  .login-page {
    padding: 0 40rpx 64rpx;
    box-sizing: border-box;
  
    .title-wrap {
        .title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 800;
            font-size: 56rpx;
            color: #060809;
            line-height: 56rpx;
            text-align: left;
            font-style: normal;
            margin-bottom: 24rpx;
        }
  
        .sub-title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #060809;
            line-height: 28rpx;
            text-align: left;
            font-style: normal;
  
        }
    }
  
    .main {
        margin: 64rpx 0 0 0;
        .agreement-row {
            margin: 2rpx 0 64rpx;
            display: flex;
            align-items: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #060809;
            &.shake {
              animation: shake 0.2s ease-in-out 0s 6;
            }
  
            .checkbox {
                width: 32rpx;
                height: 32rpx;
                margin-right: 16rpx;
                background: url('https://qiniu.bms16.com/Fh5aqDCxGKxEEVfxIQD9u6Ym9OLk');
                background-size: 100%;
                &.is-checked {
                    background: url('https://qiniu.bms16.com/FhAi08ilxiBqUhFezVF9H9ff2VMm');
                    background-size: 100%;
                }
            }
  
            .text {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #0A59F7;
                &:active {
                  opacity: .6;
                }
            }
        }
  
        .register-row {
            margin: 32rpx 80rpx 0;
            font-family: PingFangSC, PingFang SC;
            font-weight: bold;
            font-size: 28rpx;
            color: #0A59F7;
            display: flex;
            align-items: center;
            justify-content: center;
  
            .split-line {
                width: 2rpx;
                height: 28rpx;
                background: #CED3DE;
                margin: 0 30rpx 0 32rpx;
            }
  
            .forget {
                display: flex;
                align-items: center;
  
                &::after {
                    content: "";
                    width: 28rpx;
                    height: 28rpx;
                    background: url('https://qiniu.bms16.com/FrQ-eKUnkECvMImnNgd4w3p5-NLd');
                    background-size: 100%;
                }
            }
  
            .register {
                display: flex;
                align-items: center;
  
                &::after {
                    content: "";
                    width: 28rpx;
                    height: 28rpx;
                    background: url('https://qiniu.bms16.com/FtGhNkwKlhR7hOZsaj0gmRl9KjPx');
                    background-size: 100%;
                }
            }
        }
    }
    .other-type-login {
      position: absolute;
      bottom: 64rpx;
      left: 0;
      right: 0;
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
     .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #060809;
        margin-bottom: 40rpx;
     }
     .types {
        display: flex;
        .icon {
          width: 96rpx;
          height: 96rpx;
          &:nth-child(1) {
            margin-right: 146rpx;
          }
        }
     }
    }
  }
  </style>