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 -->
    
    <!-- #ifndef MP-ALIPAY -->
    <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" title="登录"></u-navbar>    
    <!-- #endif -->

    <view class="flex login">
      <view class="flex login-image">
        <image src="../../static/public/logo.png" mode="scaleToFill"></image>
        <view class="login-image-txt">盲票</view>
      </view>
      <!-- #ifdef MP-ALIPAY -->
      <view class="login-btn">
      <button open-type="getAuthorize" @getAuthorize="onGetAuthorize" @error="onAuthError" scope='phoneNumber'>支付宝登录</button>
      </view>
      <!-- #endif -->
      <!-- #ifndef MP-ALIPAY -->
      <view class="login-btn">
        <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" v-if="checked">微信登录</button>
        <button @click="getPhoneNumber" v-else>微信登录</button>
      </view>
      <!-- #endif -->
      <view class="flex login-code" @click="toCode">手机号登录/注册</view>
    </view>

    <view class="footer-fixed">
      <view class="flex about">
        <view class="checked">
          <u-checkbox-group>
            <u-checkbox :value="checked" :checked="checked" size="20" shape="circle" activeColor="#E96737"
              @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" />
  </view>
</template>

<script>
  import $http from '@/utils/request.js'
  import log from '@/common/log.js'
  import Auth from '../../components/auth/auth.vue'
  export default {
    components: {
      Auth
    },
    data() {
      return {
        authShow: false,
        token: '',
        checked: true,
      };
    },
    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
            }).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
                }).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 }.===`
                      )
                    }
                  })
                })
              }
            })
          }
        }
      },

      // 关闭授权
      authClose() {
        this.authShow = false
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 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', {}).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', {}).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 {
		height: 100vh;
		width: 100%;
	}

	.login {
		flex-direction: column;

		&-image {
			flex-direction: column;
			padding: 128rpx 0 200rpx;

			image {
				width: 296rpx;
				height: 296rpx;
				margin-bottom: 28rpx;
			}

			&-txt {
				text-align: center;
				line-height: 40rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
				font-size: 28rpx;
			}

		}

		&-txt {
			text-align: center;
			line-height: 40rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		&-title {
			text-align: center;
			font-size: 24rpx;
			font-weight: normal;
			margin-bottom: 50rpx;
		}

		&-btn {
			margin-bottom: 44rpx;

			button {
				width: 600rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 40rpx;
				background-color: rgba(235, 112, 9, 100);
				color: rgba(255, 255, 255, 100);
				text-align: center;
				font-size: 28rpx;
			}
		}

		&-code {
			text-align: center;
			color: rgba(242, 113, 32, 100);
		}
	}

	.footer-fixed {
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		z-index: 11;
		background: #fff;
		// 设置ios刘海屏底部横线安全区域
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.about {
			padding: 60rpx 0;
			font-size: 24rpx;

			.txt-about {
				color: #007aff;
			}
		}
	}
</style>