yikangyang-wx/pages/login/login.vue

<template>
  <view>
    <image class="bkg" mode="aspectFill" src="~@/static/login/bkg.png"></image>

    <view class="container">
      <image class="logo" mode="aspectFit" src="~@/static/login/logo.png"></image>

      <view class="login">
        <view class="text">
          <view>医康养 申请获取以下权限! </view>
          <view>获取您绑定的手机号码</view>
        </view>
        <view class="btns">
          <u-button ripple
                    :hair-line="false"
                    :custom-style="mobileBtnStyle"
                    open-type="getPhoneNumber"
                    @getphonenumber="mobileLogin">手机登录</u-button>
          <u-button ripple
                    :hair-line="false"
                    :custom-style="authBtnStyle"
                    @click="authLogin">一键授权登录</u-button>
        </view>
        <view class="auth">
          <u-checkbox v-model="isAuth" shape="circle" active-color="#c20d12">
            <text style="padding-left: 18rpx;">阅读并同意</text>
            <text style="color: #c20d12;" @click.stop.prevent="openPrivacyContract">《用户协议》</text>
            <text>和</text>
            <text style="color: #c20d12;" @click.stop.prevent="openPrivacyContract">《隐私协议》</text>
          </u-checkbox>
        </view>
		<view style="margin-top:30rpx">
			<u-button ripple
			          :hair-line="false"
					  @click="goHome"
			          :custom-style="authBtnStyle">返回首页</u-button>
		</view>
      </view>
    </view>

    <image class="bottom" src="~@/static/login/bottom.png" mode="aspectFit"></image>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      mobileBtnStyle: {
        width: '185rpx',
        height: '72rpx',
        'border-radius': '5rpx',
        'line-height': '72rpx',
        'font-size': '28rpx',
        'color': '#333',
        background: '#e1e0e4'
      },
      authBtnStyle: {
        width: '434rpx',
        height: '72rpx',
        'border-radius': '5rpx',
        'line-height': '72rpx',
        'font-size': '28rpx',
        'color': '#fff',
        background: 'linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)'
      },

      isAuth: false
    };
  },
  computed: {
    navbarHeight() {
      return getApp().globalData.navbarHeight
    }
  },
  methods: {
	  goHome(){
		  uni.switchTab({
		  	url:'/pages/index/index'
		  })
	  },
    openPrivacyContract() {
      wx.openPrivacyContract({
        success: () => {
          this.isRead = true;
        },
        fail: () => {
          uni.showToast({
            title: '遇到错误',
            icon: 'error',
          });
        },
      });
    },
    authLogin(e) {
      if (!this.isAuth) {
        this.$refs.uToast.show({
          title: '请先阅读协议',
          type: 'warning',
          duration: '2000'
        })
        return
      }
      uni.login({
        provider: 'weixin', //使用微信登录
        success: async (loginRes) => {
          try {
            const {token} = await this.$u.api.login({
              code: loginRes.code
            })
            this.$u.vuex('vuex_token', token)
            const { user } = await this.$u.api.getUserInfo()
            this.$u.vuex('vuex_user', user)
            this.$u.route({
              type: 'switchTab',
              url: '/pages/index/index'
            })
          } catch (err) {
          }
        }
      });
    },
    mobileLogin(e) {
      if (!this.isAuth) {
        this.$refs.uToast.show({
          title: '请先阅读协议',
          type: 'warning',
          duration: '2000'
        })
        return
      }
      console.log(e)
    }
  }
}
</script>

<style>
page {
  min-height: 100vh;
  background: #fff;
}
</style>
<style lang="scss" scoped>
.bkg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 510rpx;
}
.container {
  position: relative;
  padding-top: 15.5vh;
  z-index: 3;

  .logo {
    width: 399rpx;
    height: 392rpx;
    margin: 0 auto;
    display: flex;
  }
  .login {
    margin-top: 10.5vh;

    .text {
      padding-left: 50rpx;
      & > view:nth-child(1) {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
      & > view:nth-child(2) {
        font-size: 24rpx;
        color: #999;
        padding-top: 10rpx;
      }
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 50rpx;
      margin-top: 2.1vh;
    }
    .auth {
      font-size: 24rpx;
      color: #999999;
      font-weight: 500;
      padding: 3.61vh 0 0 95rpx;
    }
  }
}
.bottom {
  position: absolute;
  width: 491rpx;
  height: 192rpx;
  left: 50%;
  bottom: 7.82vh;
  transform: translateX(-50%);
}
</style>