login.vue

<template>
  <view class="page">
    <image class="bg" src="/static/login/bg.png" mode="widthFix"></image>
    <back-icon></back-icon>
    <view class="icon-wrapper" :style="iconWrapperStyle">
      <image class="icon" src="/static/login/icon.png" mode="widthFix"></image>
    </view>
    <view class="panel">
      <text class="welcome" @click="login">{{bindMsg}}</text>
      <view class="form">
        <view class="form-item first">
          <image class="form-icon" src="/static/login/mobile.png" mode="widthFix"></image>
          <u--input v-model="loginForm.mobile" placeholder="请输入手机号" border="none" type="number" maxlength="11">
          </u--input>
          <text class="tips" :class="{disabled:tipsDisabled}" @click="clickTips">{{tips}}</text>
          <u-code :seconds="60" ref="uCode" @change="codeChange" @start="codeStart" @end="codeEnd"
            change-text="重新获取(X)"></u-code>
        </view>
        <view class="form-item">
          <image class="form-icon" src="/static/login/vcode.png" mode="widthFix"></image>
          <u--input v-model="loginForm.vcode" placeholder="请输入验证码" border="none" maxlength="5" type="number">
          </u--input>
        </view>
        <view class="protocol-wrapper">
          <u-checkbox-group v-model="checkboxValue" activeColor="#ff404a" size="14px">
            <u-checkbox v-for="(item, index) in checkboxList" :key="index" :name="item.name" shape="circle">
            </u-checkbox>
          </u-checkbox-group>
          <view class="txt-line"><text class="txt" @click="agree">已阅读并同意</text><text class="protocol-item"
              @click="gotoReg">《注册协议》</text><text class="protocol-item" @click="gotoPri">《隐私协议》</text>
          </view>
        </view>
        <tik-button text="立即登录" styleType="styleType1" @click="login"></tik-button>
      </view>
      <view class="other" v-if="!isBinding && (hasWechatApp || isIOS13)">
        <view class="other-top">
          <view class="line-wrapper line1">
            <view class="line"></view>
          </view>
          <text class="other-txt">其他登录方式</text>
          <view class="line-wrapper line2">
            <view class="line"></view>
          </view>
        </view>
        <view class="other-bottom">
          <view class="btn" @click="wechatLogin" v-if="hasWechatApp" :class="{margin:isIOS13}">
            <image class="btn-img" src="/static/login/wechat.png" mode="widthFix"></image>
          </view>
          <view class="btn" @click="appleLogin" v-if="isIOS13">
            <image class="btn-img" src="/static/login/apple.png" mode="widthFix"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import TikButton from '@/components/TikButton.nvue'
  import Api from '@/common/api/index.js'
  import BackIcon from '@/components/BackIcon.nvue'
  import {
    navigateTo,
    switchTab,
    checkMobile,
    setValue,
    getValue,
    toast,
    navigateBack
  } from '@/common/utils/func.js'

  export default {
    components: {
      TikButton,
      BackIcon,
    },
    onLoad() {
      const globalData = getApp().globalData
      this.hasWechatApp = globalData.hasWechatApp
      this.isIOS13 = globalData.isIOS13
      this.iconWrapperStyle = {
        height: Math.min(globalData.screenHeight * 0.25, uni.upx2px(470)) + 'px'
      }
    },
    data() {
      return {
        isIOS13: false,
        hasWechatApp: false,
        tips: '', //获取验证码文本
        bindMsg: '欢迎您，请登录',
        bindData: { //微信,苹果登录使用
          createTime: 0,
          data: ''
        },
        isBinding: false, //绑定时隐藏一些元素
        loginForm: {
          mobile: '',
          vcode: '',
        },
        tipsDisabled: false, //给获取验证码按钮disable时添加样式
        checkboxValue: ['登录'],
        // 基本案列数据
        checkboxList: [{
          name: '登录',
        }, ],
        customStyle1: {
          height: '100rpx',
        },
        iconWrapperStyle: {},
      }
    },
    methods: {
      wechatLogin() {
        if (!this.checkAgreement()) return;

        plus.oauth.getServices((services) => {
          var auths = [];
          for (var service of services) {
            auths[service.id] = service;
          }
          var aweixin = auths['weixin'];
          aweixin.authorize((result) => {
            if (result.code) {
              Api.wxLogin(result.code).then(res => {
                if (res.error_code !== 1403) {
                  setValue('token', res.token)
                  uni.$emit('loginSuccess')
                  navigateBack()
                } else {
                  this.bindMsg = res.message
                  this.bindData.createTime = Date.now()
                  this.bindData.data = res.data
                  this.isBinding = true
                }
              }).catch(e => {
                console.log('wxlogin error:', e)
                if (e.data.error_code === 1000) {
                  toast(e.data.message)
                }
              })
            }
          }, (e) => {
            uni.showModal({
              content: '找不到微信，请先安装微信后再试',
              showCancel: false
            })
          });
        });
      },
      appleLogin() {
        if (!this.checkAgreement()) return;

        uni.login({
          provider: 'apple',
          success: (loginRes) => {
            // 登录成功
            uni.getUserInfo({
              provider: 'apple',
              success: (res) => {
                uni.showLoading({
                  title: '加载中'
                });
                Api.appleLogin(res.userInfo.identityToken).then(res2 => {
                  if (res2.error_code !== 1403) {
                    setValue('token', res2.token)
                    uni.$emit('loginSuccess')
                    navigateBack()
                  } else {
                    this.bindMsg = res2.message
                    this.bindData.createTime = Date.now()
                    this.bindData.data = res2.data
                    this.isBinding = true
                  }
                }).catch(e => {
                  toast(e.data.message)
                }).finally(() => {
                  uni.hideLoading()
                })
              }
            })
          }
        })
      },
      gotoReg() {
        uni.navigateTo({
        	url: '/pages/webview/webview?openUrl=' + encodeURIComponent('https://www.code0xff.com/smartcut-reg.html'),
        })
      },
      gotoPri() {
				uni.navigateTo({
					url: '/pages/webview/webview?openUrl=' + encodeURIComponent('https://www.code0xff.com/smartcut-privacy.html'),
				})
      },
      login() {
        if (!this.checkAgreement()) return;

        if (!checkMobile(this.loginForm.mobile)) {
          return toast('请输入正确的手机号')
        }
        if (!this.loginForm.vcode) {
          return toast('请输入验证码')
        }
        const params = {
          mobile: this.loginForm.mobile,
          code: this.loginForm.vcode
        }
        if (this.bindData.createTime && (Date.now() - this.bindData.createTime < 10 * 60 * 1000)) {
          params.bind_data = this.bindData.data
        }
        Api.smsLogin(params).then(res => {
          setValue('mobile', params.mobile)
          setValue('token', res.token)
          setValue('appLoginInfo', res)
          toast('登录成功')
          uni.$emit('loginSuccess')
          navigateBack()
        })
      },
      checkAgreement() {
        if (this.checkboxValue.length == 0) {
          toast('同意会员协议才能继续')
          return false
        }
        return true
      },
      agree() {
        if (this.checkboxValue.length > 0) {
          this.checkboxValue = []
        } else {
          this.checkboxValue = ['登录']
        }
      },
      codeChange(text) {
        this.tips = text
      },
      codeStart() {
        this.tipsDisabled = true
      },
      codeEnd() {
        this.tipsDisabled = false
      },
      async clickTips() {
        if (!checkMobile(this.loginForm.mobile)) {
          return toast('请输入正确的手机号')
        }
        if (this.$refs.uCode.canGetCode) {
          this.$refs.uCode.start()
          await Api.sendCode(this.loginForm.mobile)
        }
      },
    }
  }
</script>

<style scoped lang="less">
  .page {
    .bg {
      width: 750rpx;
      position: absolute;
      top: 0;
      left: 0;
    }

    .icon-wrapper {
      margin-top: 80rpx;
      height: 400rpx;
      margin-bottom: 20rpx;
      align-items: center;
      justify-content: center;

      .icon {
        width: 160rpx;
      }
    }


    .panel {
      background-color: #fff;
      width: 750rpx;
      border-top-left-radius: 80rpx;
      border-top-right-radius: 80rpx;
      padding: 82rpx 62rpx;

      .welcome {
        font-weight: bold;
        font-size: 18px;
      }

    }
  }

  .form {
    margin-top: 80rpx;

    .form-item {
      flex-direction: row;
      align-items: center;
      border-bottom: .5px solid #ccc;
      height: 90rpx;
      margin-top: 26rpx;

      .form-icon {
        margin-right: 14rpx;
        margin-top: 3px;
        width: 32rpx;
      }
    }

    .form-item.first {
      margin-bottom: 0;
    }

    .tips {
      padding: 20rpx 0 20rpx 10rpx;
      color: #ff404a;
      font-size: 14px;
    }

    .tips.disabled {
      color: #ccc;
    }

    .protocol-wrapper {
      margin-top: 50rpx;
      flex-direction: row;
      margin-bottom: 76rpx;

      .txt-line {
        flex-direction: row;
        align-items: center;
      }

      .protocol-item,
      .txt {
        font-size: 12px;
        padding: 2px 0;
      }

      .protocol-item {
        color: #ff404a;
      }

      .txt {
        color: #848484;
      }
    }
  }

  .other {
    .other-top {
      flex-direction: row;
      justify-content: center;
      margin-top: 85rpx;

      .line1 {
        margin-right: 18rpx;
      }

      .line2 {
        margin-left: 18rpx;
      }

      .line-wrapper {
        width: 100rpx;
        height: 16px;
        justify-content: center;

        .line {
          border-top: 1px solid #ccc;
          height: 0px;
        }
      }

      .other-txt {
        color: #ccc;
        font-size: 14px;
      }
    }

    .other-bottom {
      margin-top: 67rpx;
      flex-direction: row;
      justify-content: center;

      .btn {
        width: 96rpx;
        height: 96rpx;
        background-color: #ffebec;
        border-radius: 50%;
        align-items: center;
        justify-content: center;

        .btn-img {
          width: 40rpx;
        }
      }

      .btn.margin {
        margin-right: 120rpx;
      }
    }
  }
</style>