cankao-h5/src/pages/login/indexMini.vue

<template>
  <view class="loginContainer">
    <!-- prompt -->
    <!-- <view class="prompt"></view> -->
    <!-- logo -->
    <view class="logo"></view>

    <!-- <view class="bottom_btn" @click="goIndex"> 立即进入 </view> -->

    <button
      open-type="getPhoneNumber"
      @getphonenumber="getPhoneNumber"
      class="bottom_btn"
    >
      <view>
        <text>立即进入</text>
      </view>
    </button>

    <!-- 用户协议 -->
    <view class="tips">
      <u-checkbox class="checkbox" shape="circle"></u-checkbox>
      <text class="r_userAgreement"
        >已阅读并同意<text class="userAgreement" @click="goUserAgreement"
          >《江南农商银行隐私政策》《中证参考智能资讯小程序服务使用许可及服务协议》</text
        >，首次登录的手机号将自动注册。</text
      >
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, watch, nextTick, onActivated } from "vue";
import {
  onLaunch,
  onShow,
  onLoad,
  onShareAppMessage,
  onShareTimeline,
  onUnload,
} from "@dcloudio/uni-app";
import { doWxAuth } from "@/api/index";

import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { useShareStore } from "@/stores/shareStore";
const stores = useShareStore();

let timer = ref();

function goIndex() {
  const subStatus = {
    overseas: false, // 海外
    domestic: false, // 国内
    chinaSecurities: false, // 中证
  };
  uni.setStorageSync("subStatus", subStatus);

  // 清空缓存数据
  uni.removeStorageSync("tabValue");
  uni.removeStorageSync("colTypeValue");

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

// 微信获取手机号
function getPhoneNumber(phoneObj) {
  uni.showLoading();
  getWxCode(phoneObj.detail);
}
const codeWx = ref();
function getWxCode(phoneObj) {
  console.log("🚀 ~ getWxCode ~ phoneObj:", phoneObj);
  uni.login({
    success: (res) => {
      console.log("🚀 ~ getWxCode ~ res:", res);
      if (res.code) {
        //微信登录成功 已拿到code
        codeWx.value = res.code;

        doWxAuthFn(phoneObj, res.code);
      } else {
        console.log("登录失败！" + res.errMsg);
      }
    },
  });
}

/**
 * 微信授权
 * @param userInfo
 */
async function doWxAuthFn(phoneObj, jsCode) {
  let { code, data } = await doWxAuth({
    jsCode: jsCode,
    encryptedData: phoneObj.encryptedData,
    siv: phoneObj.iv,
  });
  uni.hideLoading();
  if (code == 200) {
    uni.setStorageSync("token", data.token);
    uni.setStorageSync("userId", data.userId);
    // #ifdef MP-WEIXIN
    uni.setStorageSync("unionId", data.unionId);
    // #endif
    // #ifdef MP-ALIPAY
    uni.setStorageSync("openId", data.openId);
    // #endif

    emit("authFinish", true);
  } else {
    emit("authFinish", false);
  }
}

onShareAppMessage((res) => {
  return {};
});
// onReachBottom(() => {
//   console.log("🚀 ~ onReachBottom ~ onReachBottom:");
// });

// 当进入页面时
onLoad((option) => {
  // timer.value = setTimeout(() => {
  //   uni.navigateTo({
  //     url: "/pages/home/index",
  //   });
  // }, 2000)
});

function goUserAgreement() {
  wx.openPrivacyContract({
    success: () => {}, // 打开成功
    fail: () => {}, // 打开失败
    complete: () => {},
  });
}

// 当离开页面时
onUnload(() => {
  clearTimeout(timer.value);
});

onShow(() => {
  stores.initWxConfig();
});
</script>

<style lang="scss" scoped>
.loginContainer {
  height: 100vh;
  overflow-y: auto;
  background-image: url(https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/newmini/log_bg.png);
  background-size: cover;
  position: relative;
  box-sizing: border-box;
  padding: 176rpx 0;

  .prompt {
    width: 80rpx;
    height: 596rpx;
    position: absolute;
    left: 50%;
    top: 0;
    margin-top: 176rpx;
    transform: translateX(-50%);
    background-image: url(https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/new_logo.png);
    background-size: contain;
  }

  .logo {
    width: 292rpx;
    height: 68rpx;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    margin-bottom: 176rpx;
    background-image: url(https://cankao.obs.cn-east-3.myhuaweicloud.com/mini/images/logo.png);
    background-size: cover;
  }
}

.bottom_btn {
  width: 360rpx;
  height: 80rpx;
  background: linear-gradient(to right, #fc5c69, #e7303f);
  border-radius: 100rpx;
  position: fixed;
  bottom: 270rpx;
  left: 50%;
  transform: translate(-50%, 0);
  box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: 0.1);

  display: flex;
  color: white;
  font-size: 32rpx;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.tips {
  width: 87vw;
  position: fixed;
  bottom: 370rpx;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  align-items: start;

  .checkbox {
  }
  :deep(.u-checkbox) {
    margin-top: 5rpx;
  }
  .r_userAgreement {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #192236;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
  }
  .userAgreement {
    color: #5978b2;
  }
}
</style>