mp-ui-user/src/pages/login/index.vue

<template>
  <view class="container">
    <!-- #ifdef MP-ALIPAY -->
    <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" title="登录" leftIconSize="0"></u-navbar>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" title="登录"></u-navbar>
    <!-- #endif -->
    <!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
    <view v-if="pagesNum > 1">
      <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" title="登录" />
    </view>
    <view v-else>
      <u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" title="登录">
        <view class="nav-left flex" slot="left" @click="$toIndex()">
          <u-icon name="arrow-left" size="20" color="#333"></u-icon>
        </view>
      </u-navbar>
    </view>
    <!-- #endif -->
    <view class="bg">
    </view>
    <view class="wrap">

      <view class="flex login">
        <view class="flex login-image">
          <image src="../../static/public/logo.png" mode="scaleToFill"></image>
          <view class="login-image-txt" v-if="appId == 2">码上快购</view>
          <view class="login-image-txt" v-else>盲票</view>
        </view>

        <!-- #ifdef MP-ALIPAY -->
        <view class="login-btn">
          <button open-type="getAuthorize" @getAuthorize="onGetAuthorize" scope='phoneNumber'>支付宝登录</button>
        </view>
        <view class="flex login-code" @click="toCode">手机号登录/注册</view>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <view class="login-btn">
          <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="checked">手机号快捷登录</button>
          <button @click="getPhoneNumber" v-else>手机号快捷登录</button>
        </view>
        <view class="flex login-code" @click="toCode">手机号登录/注册</view>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <view class="login-btn">
          <button type="button" @click="toCode">手机号登录/注册</button>
        </view>
        <!-- #endif -->
      </view>
      <view class="flex about">
        <view class="checked">
          <u-checkbox-group>
            <u-checkbox :value="checked" :checked="checked" size="20" shape="circle" activeColor="#8E51F7" @change="changeChecked"></u-checkbox>
          </u-checkbox-group>
        </view>
        <view class="txt">请阅读并勾选</view>
        <navigator hover-class="none" class="txt-about" url="/packageOther/about/protect">《用户使用协议》</navigator>
        <navigator hover-class="none" class="txt-about" url="/packageOther/about/conceal">、《隐私保护声明》</navigator>
      </view>
    </view>

    <auth :auth-show="authShow" :auth-token="token" @close="authClose" @fail="fail" />
  </view>
</template>

<script>
import $http from '@/utils/request.js'
import log from '@/common/log.js'
import appId from '@/config/appId.js'
import Auth from '../../components/auth/auth.vue'
export default {
  components: {
    Auth
  },
  data() {
    return {
      authShow: false,
      token: '',
      checked: false,
      appId: 1,
      pagesNum: '',
    };
  },
  onShow() {
    this.pagesNum = getCurrentPages().length
  },
  created() {
    this.appId = appId
  },
  methods: {
    getPhoneNumber(e) {
      let _this = this
      if (!_this.checked) {
        uni.$u.toast('请阅读并勾选底部协议');
        return
      }
      if (e.detail.errMsg == 'getPhoneNumber:ok') {
        uni.showLoading({
          title: '登录中'
        });
        if (e.detail & e.detail.code) {
          $http.post('/api/v1/mp/user/wxauth/mobile', {
            ...e.detail,
            identity: 1,
            noToken: true,
            appSource: appId,
          }).then(res => {
            uni.hideLoading();
            if (res.code == 0) {
              uni.setStorageSync('token', res.token)
              _this.getBaseInfo()
            } else {
              uni.getSystemInfo({
                success(res) {
                  log.info(
                    `错误信息：===基础库：${res.SDKVersion},设备：${res.model}-${res.system}.===`
                  )
                }
              })
            }
          }).catch(() => {
            uni.hideLoading();
            uni.getSystemInfo({
              success(res) {
                log.info(
                  `错误信息：===基础库：${res.SDKVersion},设备：${res.model}-${res.system}.===`
                )
              }
            })
          })
        } else {
          uni.login({
            success(res) {
              $http.post('/api/v1/mp/user/wxauth/mobile', {
                ...e.detail,
                loginCode: res.code,
                identity: 1,
                noToken: true,
                appSource: appId,
              }).then(res => {
                uni.hideLoading();
                if (res.code == 0) {
                  uni.setStorageSync('token', res.token)
                  _this.getBaseInfo()
                } else {
                  uni.getSystemInfo({
                    success(res) {
                      log.info(
                        `错误信息：===基础库：${res.SDKVersion},设备：${res.model}-${res.system}.===`
                      )
                    }
                  })
                }
              }).catch(() => {
                uni.hideLoading();
                uni.getSystemInfo({
                  success(res) {
                    log.info(
                      `错误信息：===基础库：${res.SDKVersion},设备：${res.model}-${res.system}.===`
                    )
                  }
                })
              })
            }
          })
        }
      }
    },
    //拒绝授权
    fail() {
      this.authShow = false
    },
    // 关闭授权
    authClose() {
      this.authShow = false
      setTimeout(() => {
        uni.navigateBack({
          delta: 1
        })
        // uni.reLaunch({
        // 	url: '/packageOther/avatar/index'
        // })
      }, 500)
    },

    changeChecked(e) {
      this.checked = e
    },

    toCode() {
      if (!this.checked) {
        uni.$u.toast('请阅读并勾选底部协议');
        return
      }
      uni.navigateTo({
        url: '/pages/login/code'
      })
    },

    getBaseInfo() {
      $http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
        uni.hideLoading();
        if (res.code == 0) {
          uni.setStorageSync('userInfo', res.data)
          if (res.data.openId) {
            uni.$u.toast('登录成功');
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 500)
          } else {
            this.authShow = true
          }
        }
      }).catch(() => {
        uni.hideLoading();
      })
    },
    getBaseInfoAli() {
      $http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
        uni.hideLoading();
        if (res.code == 0) {
          uni.setStorageSync('userInfo', res.data)
          if (res.data.aliuserId) {
            uni.$u.toast('登录成功');
            setTimeout(() => {
              uni.navigateBack({
                delta: 1
              })
            }, 500)
          } else {
            this.authShow = true
          }
        }
      }).catch(() => {
        uni.hideLoading();
      })
    },
    onGetAuthorize(e) {
      let _this = this
      if (!_this.checked) {
        uni.$u.toast('请阅读并勾选底部协议');
        return
      }
      my.getPhoneNumber({
        success: (res) => {
          uni.showLoading({
            title: '登录中'
          });
          $http.post('/api/v1/mp/user/aliAuth/mobile', {
            encryptedData: res.response,
            identity: 1,
            noToken: true
          }).then(res => {
            if (res.code == 0) {
              uni.setStorageSync('token', res.token)
              _this.getBaseInfoAli()
            } else {
              uni.hideLoading();

            }
          })
        },
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 0;
  height: 100vh;
  width: 100%;
}

.bg {
  height: 842rpx;
  background: linear-gradient(180deg, #8e51f7 0%, rgba(142, 81, 247, 0) 100%);
}

.wrap {
  margin: 70rpx 30rpx;
  background: #ffffff;
  box-shadow: 0px 4rpx 50rpx 0px rgba(0, 0, 0, 0.12);
  border-radius: 20rpx;
  margin-top: -772rpx;

  .login {
    flex-direction: column;

    &-image {
      flex-direction: column;
      padding: 93rpx 0 84rpx;

      image {
        width: 184rpx;
        height: 184rpx;
        margin-bottom: 34rpx;
      }

      &-txt {
        text-align: center;
        line-height: 38rpx;
        font-weight: 500;
        margin-bottom: 20rpx;
        font-size: 32rpx;
        color: #333;
      }
    }

    &-btn {
      margin-bottom: 58rpx;

      button {
        width: 550rpx;
        height: 86rpx;
        line-height: 86rpx;
        border-radius: 10rpx;
        background-color: $uni-btn-color;
        color: #fff;
        font-weight: 500;
        text-align: center;
        font-size: 30rpx;
      }
    }

    &-code {
      margin-bottom: 150rpx;
      width: 550rpx;
      height: 82rpx;
      line-height: 82rpx;
      border: 2rpx solid $uni-bg-color;
      text-align: center;
      border-radius: 10rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: $uni-btn-color;
    }
  }

	.about {
			padding-bottom: 76rpx;
      font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			line-height: 14px;

      .txt-about {
        color: $uni-text-color;
      }
    }
}
</style>