queenshow-miniprogram/src/pages/login/index.vue

<template>
  <view class="content">
    <image class="bg" src="/static/gr_bg.png"></image>
    <image class="logo" src="/static/logo.png"></image>
    <view>
      <button
        type="default"
        class="btn btn_phone"
        @click="phoneLogin"
        style="color: #fff; background-color: #5a7bef"
      >
        手机号登录
      </button>
      <button
        open-type="getPhoneNumber"
        @getphonenumber="getPhoneNumber"
        class="btn btn_wechat"
        type="primary"
      >
        微信登录
      </button>
    </view>
  </view>
</template>

<script>
import { login } from "../../services/https/user";

export default {
  data() {
    return {
      jsCode: "",
      redirect: "",
    };
  },
  onLoad(options) {
    this.redirect = options.redirect;
    wx.login({
      success: (res) => {
        this.jsCode = res.code;
      },
    });
  },
  methods: {
    phoneLogin() {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    async getPhoneNumber(e) {
      const res = await login({ jsCode: this.jsCode, code: e.detail.code });
      if (res.errorNo !== 200) return;
      const token = res.result.token;
      uni.reLaunch({
        url: `/pages/index/index?token=${token}&redirect=${this.redirect}`,
      });
    },
  },
};
</script>

<style>
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.bg {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: -999;
}
.logo {
  width: 154rpx;
  height: 176rpx;
}
.btn {
  width: 600rpx;
  border-radius: 48rpx;
  overflow: hidden;
}
.btn_phone {
  margin-top: 100rpx;
  background-color: #5a7bef;
}
.btn_wechat {
  margin-top: 60rpx;
  margin-bottom: 100rpx;
}
</style>