jichuangshe/mini/pages/login.vue

<template>
  <view class="login-page">
    <view class="logo logo-white" />
    <view class="form-box">
      <u-input
        v-model="model.account"
        placeholder="手机号码"
        :custom-style="inputStyle"
        :max-length="11"
      />
      <u-input
        v-model="model.password"
        :password="passwordShow"
        placeholder="密码"
        :custom-style="inputStyle"
      >
        <template slot="suffix">
          <u-icon
            size="42rpx"
            :name="passwordShow?'eye-fill':'eye-off'"
            @click="passwordShow=!passwordShow"
          />
        </template>
      </u-input>
      <u-button
        text="登陆"
        color="#000"
        shape="square"
        :custom-style="btnStyle"
        @click="handleLogin"
      />
      <view
        class="forget"
        @click="$u.route({url: '/pages/forget'})"
      >忘记密码？</view>
    </view>
    <view class="wechat-login">
      <div class="static-text">其他登陆方式</div>
      <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"><view class="icon" /></button>
    </view>
  </view>
</template>

<script>
import Cache from '../utils/cache'
export default {
  name: 'Login',
  data() {
    return {
      passwordShow: true,
      model: {
        account: '',
        password: ''
      },
      path: '/pages/index',
      inputStyle: {
        borderRadius: 0,
        borderColor: '#000 !important',
        marginTop: '30rpx',
        padding: '20rpx 30rpx',
        fontSize: '38rpx'
      },
      btnStyle: {
        marginTop: '30rpx',
        width: '100%',
        borderRadius: 0,
        height: '92rpx',
        letterSpacing: '0.1rem',
        fontSize: '38rpx'
      }
    }
  },
  computed: {},
  methods: {
    handleLogin() {
      if (!this.model.account || this.model.account.length < 11) {
        this.$u.toast('请输入正确的手机号')
        return
      }

      if (!this.model.password) {
        this.$u.toast('请输入密码')
        return
      }
      this.$loading('登陆中...')
      uni.login({
        provider: uni.$u.platform,
        success: loginRes => {
          uni.hideLoading()
          this.$api.user.login(this.model.account, this.model.password, loginRes.code).then(async res => {
            this.$hideLoading()
            await this.$store.dispatch('user/token', res.data.token)
            await this.$store.dispatch('user/info', res.data.user_info)
            uni.reLaunch({
              url: this.path.replace('//', '/')
            })
          }).catch(() => {
            this.$hideLoading()
          })
        }
      })
    },
    getPhoneNumber({ detail }) {
      this.$loading('登陆中...')
      uni.login({
        provider: uni.$u.platform,
        success: loginRes => {
          const data = {
            iv: detail.iv,
            encryptedData: detail.encryptedData,
            code: loginRes.code
          }
          this.$api.user.phoneQuickLogin(data).then(async res => {
            await this.$store.dispatch('user/token', res.data.token)
            await this.$store.dispatch('user/info', res.data.user_info)
            uni.reLaunch({
              url: this.path.replace('//', '/')
            })
          }).catch(() => {
            this.$hideLoading()
          })
        }
      })
    }
  },
  onLoad() {
    if (Cache.get('path')) {
      this.path = Cache.get('path')
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  padding: 0 80rpx;
  .logo{
    margin: 100rpx auto 50rpx;
  }
  .forget{
    color: #999999;
    margin-top: 20rpx;
    font-size: 26rpx;
  }
  .wechat-login{
    margin-top: 80rpx;
    .static-text{
      color: #333333;
    }
    button{
      width: 80rpx;
      height: 80rpx;
      background: transparent;
      margin-top: 30rpx;
      .icon{
        width: 80rpx;
        height: 80rpx;
        background: url("/static/image/login/wechat.png") no-repeat center;
      }
    }
  }
}
</style>