exam_mp/pages/challenge/index.vue

<template>
  <Container
    title="挑战"
    :scrollStyle="{
      padding: 0,
    }"
    :showBack="false"
  >
    <view>
      <view class="bg">
        <div class="setting" @click="toRule">规则</div>
      </view>
    </view>
    <template #stick>
      <button class="btn" @click="toAdd">
        {{ isPay ? "查看报名信息" : "立即报名！参与挑战！" }}
      </button>
    </template>
  </Container>
</template>

<script setup>
import Container from "../../components/Container/Container.vue";
import { request } from "../../utils/request";
import { router } from "../../utils/router";
import { onShow } from "@dcloudio/uni-app";
import { ref } from "vue";

const isPay = ref(true);

const p = ref(0);
onShow(async () => {
  const a = uni.getStorageSync("pages/challenge/index");
  let res = {
    data: false,
  };

  isPay.value = a === "" ? true : a;
  if (a === "") {
    isPay.value = true;
    try {
      res = await request(
        "api/question_bank/question_reception/challenge_registration_log/detail",
        {
          showToast: false,
        }
      );
      isPay.value = res.data !== "";
    } catch (e) {
      isPay.value = false;
    }
    uni.setStorageSync("pages/challenge/index", isPay.value);
  }
  await request(
    "api/question_bank/question_reception/recharge_package/list",
    {
      package_type: 2,
    },
    "post"
  ).then(async (res) => {
    p.value = res.data.data[0].id;
  });
});

const toRule = () => {
  router.push({
    url: "/pages/challenge/rule",
    params: {
      id: p.value,
    },
  });
};

const toAdd = async () => {
  const isLogin = uni.getStorageSync("userLogin");
  console.log(isLogin);

  if (!isLogin) {
    uni.showModal({
      title: "请登录",
      success(res) {
        if (res.confirm) {
          // 用户点击确定按钮
          router.push({
            url: "/pages/login/index",
          });
        }
      },
    });
    return;
  }
  router.push({
    url: !isPay.value
      ? "/pages/challenge/registration"
      : "/pages/challenge/addContant",
    params: {
      id: p.value,
      isPay: isPay.value,
    },
  });
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 1824rpx;
  background: url("https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/mrFDMhG0TOSn9DcVQupf8b6w2UgGGhq6LhdfaZWn.png");
  background-size: cover;
  padding: 32rpx;
  box-sizing: border-box;
  position: relative;

  .setting {
    position: absolute;
    right: 0;
    top: 200rpx;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 500rpx 0rpx 0rpx 500rpx;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
    padding: 8rpx;
  }
}

.btn {
  width: 660rpx;
  position: absolute;
  bottom: 3%;
  left: 50%;
  transform: translateX(-50%);
}
</style>