ykt-team-wxapp/pages/login/login.vue

<template>
  <view v-if="team" class="pt-lg px-15 flex flex-col items-center text-center">
    <group-avatar :avatarList="team.avatars" />
    <view class="mt-15 text-base font-semibold text-dark">{{
      team.teamName
    }}</view>
    <view class="mt-12 text-sm text-gray">{{ team.corpName }}</view>
    <view class="mt-15 text-lg text-dark font-semibold"
      >为您提供团队个性化专属服务</view
    >
  </view>
  <view v-else class="pt-lg px-15 flex flex-col items-center text-center">
    <image src="/static/logo-plain.png" class="logo"></image>
    <view class="mt-15 text-xl font-semibold text-dark">柚健康</view>
    <view class="mt-12 text-base text-dark">生命全周期健康管理伙伴</view>
  </view>
  <view class="login-btn-wrap">
    <button
      v-if="checked"
      class="login-btn"
      type="primary"
      open-type="getPhoneNumber"
      @getphonenumber="getPhoneNumber"
    >
      手机号快捷登录
    </button>
    <!-- <button v-if="checked" class="login-btn" type="primary" @click="getPhoneNumber()">
			手机号快捷登录
		</button> -->
    <button v-else class="login-btn" type="primary" @click="remind()">
      手机号快捷登录
    </button>
  </view>
  <view
    class="flex items-center justify-center mt-12 px-15"
    @click="checked = !checked"
  >
    <checkbox :checked="checked" style="transform: scale(0.7)" />
    <view class="text-sm text-gray">我已阅读并同意</view>
    <view class="text-sm text-primary">《用户协议》、</view>
    <view class="text-sm text-primary">《隐私政策》</view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import useAccountStore from "@/store/account";
import { get } from "@/utils/cache";
import { toast } from "@/utils/widget";

import groupAvatar from "@/components/group-avatar.vue";

const team = ref(true);
const checked = ref(false);
const redirectUrl = ref("");
const { login } = useAccountStore();

function attempRedirect(url) {
  return new Promise((resolve, reject) => {
    uni.redirectTo({
      url,
      success: () => resolve(true),
      fail: () => reject(false),
    });
  });
}

function attempSwitchTab(url) {
  return new Promise((resolve, reject) => {
    uni.switchTab({
      url,
      success: () => resolve(true),
      fail: () => reject(false),
    });
  });
}

function remind() {
  toast("请先阅读并同意用户协议和隐私政策");
}

function toHome() {
  uni.navigateTo({
    url: "/pages/home/home",
  });
}

async function getPhoneNumber(e) {
  const phoneCode = e && e.detail && e.detail.code;
  if (e && !phoneCode) return;
  const res = await login(phoneCode);
  if (res && redirectUrl.value) {
    await attempToPage(redirectUrl.value);
  } else if (res) {
    toHome();
  }
}

async function attempToPage(url) {
  const res1 = attempRedirect(url);
  if (res1) return;
  const res2 = attempSwitchTab(url);
  if (res2) return;
  toHome();
}

onLoad((opts) => {
  if (opts.source === "teamInvite") {
    team.value = get("invite-team-info");
    redirectUrl.value = `/pages/archive/edit-archive?teamId=${team.value.teamId}&corpId=${team.value.corpId}`;
    console.log("redirectUrl", redirectUrl.value);
    return;
  }
  redirectUrl.value = opts.redirectUrl || "";
});
</script>
<style scoped>
.pt-lg {
  padding-top: 20vh;
}

.logo {
  width: 160rpx;
  height: 160rpx;
}

.login-btn-wrap {
  width: 100vw;
  display: flex;
  justify-content: center;
  margin-top: 80rpx;
}

.login-btn-wrap-loading {
  pointer-events: none;
}

.login-btn {
  width: calc(100vw - 112rpx);
  max-width: 600rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: linear-gradient(270deg, #1b5cc8 2.26%, #0877f1 94.33%);
  color: #fff;
  font-size: 30rpx;
  border-radius: 48rpx;
  font-weight: 600;
  box-shadow: 0 4rpx 16rpx rgba(59, 124, 255, 0.08);
  border: none;
}

.login-btn:active {
  background: linear-gradient(270deg, #1b5cc8 2.26%, #0877f1 94.33%);
}
</style>