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 res = request(
    "api/question_bank/question_reception/challenge_registration_log/detail"
  );
  if (res.data) return;
  isPay.value = false;
  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 () => {
  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: 1734rpx;
  background: url("https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/05/IFolqhKEbaTWdBgII6gjvqMKrf8WUbbgEpoeRH5t.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>