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> -->

    <!-- 用户协议 -->
    <view class="tips" @click="doChangeCheck">
      <u-checkbox-group v-model="checked" placement="column" activeColor="#e7303f" @change="checkboxChange">
        <u-checkbox class="checkbox" shape="circle"></u-checkbox>
      </u-checkbox-group>

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

    <!-- #ifdef MP-WEIXIN -->
    <button v-if="checked && checked?.length > 0" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="bottom_btn">
      <view>
        <text>立即进入</text>
      </view>
    </button>
    <button v-else class="bottom_btn" @click="needCheck">
      <view>
        <text>立即进入</text>
      </view>
    </button>
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <button class="bottom_btn" @click="LoginShow = true">
      <view>
        <text>立即进入</text>
      </view>
    </button>
    <!-- #endif -->

    <LoginPopup :show="LoginShow" @handlePopupClose="handlePopupClose" @handlePopupSuccessCallback="handlePopupSuccessCallback" />
  </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 LoginPopup from "@/components/loginPopup/index.vue";

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

watch(checked, (newVal) => {
  console.log("🚀 ~ newVal:", newVal);
  if (newVal) {
  }
});

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);
    uni.setStorageSync("unionId", data.unionId);
    uni.setStorageSync("openId", data.openId);
    uni.setStorageSync("userPhone", data.phone);
    uni.redirectTo({
      url: "/pages/minihome/index",
    });
  } else {
  }
}

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

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

function doChangeCheck() {
  if (checked.value && checked.value.length > 0) {
    checked.value = [];
  } else {
    checked.value = [""];
  }
}

// 点击用户协议
function needCheck() {
  uni.showToast({
    title: "请先同意用户协议",
    icon: "none",
  });
}

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

// login 弹框是否显示
const LoginShow = ref(false);
// 关闭弹框
const handlePopupClose = () => {
  LoginShow.value = false;
};
// 登录成功回调
const handlePopupSuccessCallback = () => {
  LoginShow.value = false;
  // emit("onChange");
  uni.navigateBack({});
};

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

onShow(() => {
  stores.initWxConfig();
  uni.setStorageSync("homeTabIndex", null);
});
</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;

  :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>