jsh_erp_app/pages/login/components/wechat-login.vue

<template>
  <view>
    <!--  <view class="head-box ss-flex-col">-->
    <!--    <view class="ss-flex ss-m-b-20">-->
    <!--      <view class="head-title ss-m-r-40 head-title-animation">微信登录</view>-->
    <!--    </view>-->
    <!--  </view>-->
    <view>欢迎您登录【若依商城电商系统】</view>
    <view style="margin-top: 200rpx">
      <button
        class="ss-reset-button buy-btn ui-Success-Main"
        open-type="getPhoneNumber"
        @getphonenumber="wechatLogin"
      >
        <view class="ss-flex">
          <!--        <image class="auto-login-img" :src="sheep.$url.static('/image/weixin.svg')"/>-->
          <view>手机号快捷登录</view>
        </view>
      </button>
      <view style="height: 10rpx"></view>
      <button
        class="ss-reset-button cancel-btn ui-Shadow-Pioneer-Main"
        @tap="closeAuthModal"
      >
        <view class="ss-flex">
          <!--        <image class="auto-login-img" :src="sheep.$url.static('/image/weixin.svg')"/>-->
          <view>暂不登录</view>
        </view>
      </button>
    </view>

    <view class="agreement-text ss-flex">
      登录遇到问题？点此
      <button class="btnStyle" open-type="contact">联系客服</button>
    </view>
  </view>
</template>

<script setup>
import sheep from "@/sheep";
import { computed, reactive } from "vue";
import { closeAuthModal } from "@/sheep/hooks/useModal";

const appInfo = computed(() => sheep.$store("app").info);

const state = reactive({
  protocol: false,
});

//勾选协议
function onChange() {
  state.protocol = !state.protocol;
}

async function wechatLogin(e) {
  const loginRes = await sheep.$platform.useProvider("wechat").login(e.detail);
  if (loginRes) {
    sheep.$helper.toast("登录成功");
    closeAuthModal();
  }
}

// 查看协议
function onProtocol(id, title) {
  closeAuthModal();
  sheep.$router.go("/pages/public/richtext", {
    id,
    title,
  });
}

// 请先登录提示
function handleTip() {
  uni.showToast({
    title: "请勾选我已阅读并同意《用户协议》和《隐私政策》！",
    icon: "none",
    mask: true,
  });
}
</script>

<style lang="scss" scoped>
.cancel-btn {
  width: 100%;
  height: 72rpx;
  font-weight: 500;
  font-size: 28rpx;

  border-radius: 40rpx;
  background: red;
  color: $white;
}
.btnStyle {
  border: none;
  font-size: 15px;
  padding: 0 !important;
  color: #82abcc;
  margin: 0;
  background-color: transparent;
  &::after {
    border: none;
  }
}
.agreement-text {
  justify-content: center;
  position: absolute;
  bottom: 0;
  width: calc(100% - 68rpx);
}
.buy-btn {
  width: 100%;
  height: 72rpx;
  font-weight: 500;
  font-size: 28rpx;

  border-radius: 40rpx;
  background: #0dd116;
  color: $white;
}
.auto-login-img {
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
}
</style>