exam_mp/pages/punch/index.vue

<script setup>
import Container from "../../components/Container/Container.vue";
import LDialer from "../../uni_modules/lime-dialer/components/l-dialer/l-dialer.vue";
import Modal from "../../components/Modal/Modal.vue";
import { ref } from "vue";
import { request } from "../../utils/request";
import { onShow } from "@dcloudio/uni-app";
const prizeList = ref([
  {
    id: "coupon88",
    name: "8.8折",
    img: "https://img11.360buyimg.com/pop/jfs/t1/175718/35/12595/5477/60b660c6Eb850717b/a1cfe750dcdb5b78.png",
  },
  {
    id: "coupon900",
    name: "900",
    img: "https://img11.360buyimg.com/pop/jfs/t1/190845/9/6092/4489/60b65fe8Ebb8f8284/955da889f6d1c13e.png",
  },
]);

const data = ref([
  {
    name: "一",
  },
  {
    name: "二",
  },
  {
    name: "三",
  },
  {
    name: "四",
    isEnd: true,
  },
]);
const dialer = ref(null);
const onClick = async () => {
  if (lottery.value == 0) {
    uni.showToast({
      title: "暂无抽奖次数",
      icon: "none",
    });
    return;
  }
  const reward = await request(
    "api/question_bank/question_reception/lottery_sign_in/get_reward"
  );
  dialer.value.run(reward.data.reward_index);
};
const lottery = ref(0);
const day = ref(0);

const onDone = (_, origin) => {
  uni.showModal({
    title: "恭喜你获得",
    content: origin.name,
  });
};

const getList = async () => {
  const getlottery = await request(
    "api/question_bank/question_reception/lottery_usable/detail"
  );
  lottery.value = getlottery.data.number;
  const getData = await request(
    "api/question_bank/question_reception/lottery_sign_in/list"
  );
  prizeList.value = getData.data.reward_list.map((item) => {
    if (item.status) {
      day.value++;
    }
    return {
      ...item,
      name: item.reward_name,
    };
  });
};
const showModal = ref({
  show: false,
});
const qiandao = async () => {
  const res = await request(
    "api/question_bank/question_reception/check_in/set_user_record",
    {
      activity_id: 1,
    }
  );
  if (res.code === "error") return;
  if (day.value === data.value.length) {
    const reward = await request(
      "api/question_bank/question_reception/lottery_sign_in/get_reward"
    );
    showModal.value = {
      show: true,
      ...reward.data,
    };
  }
};

onShow(getList);
</script>
<template>
  <Container title="签到打卡" themeColor="#fff">
    <template #bg>
      <img
        src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/Au9JYRsneh9TmtnDw0ya2xctIvItn4SvpKgUl5Kh.png"
        width="750rpx"
        height="2059rpx"
        style="width: 750rpx; height: 2059rpx"
        alt=""
      />
    </template>
    <div class="items">
      <div class="gifs">
        <div
          v-for="item in data"
          class="gif-item"
          :style="{
            width: item.isEnd ? '100%' : '180rpx',
          }"
          :key="item.name"
        >
          <div class="mask" v-if="item.status">
            <img
              src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/L3NICP0cpYtUe4RFI5s1vyYTFCYmjjbqfc5L8LiJ.png"
              style="width: 118rpx; height: 118rpx"
              alt=""
            />
          </div>
          <template v-if="!item.isEnd">
            <div class="name">第{{ item.name }}天</div>
            <img
              style="
                width: 118rpx;
                height: 117.81rpx;
                background-size: 100% 100%;
              "
              src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/lfczc5uWYEfK4XP4GtlTRlmCtFHVapryiR7AgWLE.png"
              alt=""
            />
          </template>
          <template v-else>
            <div class="name">第{{ item.name }}天</div>
            <div style="display: flex; align-items: center">
              <span class="text-error">神秘</span>
              <img
                src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/7Is5IMCcauPZYS5MZJjKEThHaHAPFllI2pPf0AKI.png"
                style="width: 130rpx; height: 137rpx"
                alt=""
              />
              <span class="text-error">大奖</span>
            </div>
          </template>
        </div>
      </div>
      <div class="button b" @click="qiandao">参与打卡签到</div>
      <span class="text-t9 text-12"
        >需完成每日一练/完成一次题库练习<span class="text-warning"
          >并分享</span
        ></span
      >
    </div>
    <div class="dialer">
      <l-dialer
        :prizeList="prizeList"
        @click="onClick"
        @done="onDone"
        ref="dialer"
        size="230"
      />
      <img
        @click="onClick"
        class="btn"
        src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/tpWgvlnwA5G7A3PYZ4Op535n1M1uiYrNbftl7B4m.png"
        alt=""
      />
      <div style="color: #fff">剩余 {{ lottery }} 次</div>
    </div>
  </Container>
  <Modal v-model:open="showModal.show">
    <template #custom>
      <div class="css">
        <div class="bac">
          <img
            class="header"
            src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/qXKNJDt0XxL1f1VBzaQaavmGuAdyVBSopAt3xmq9.png"
            alt=""
          />
          <div class="middle">
            <img class="img" v-if="showModal.img" :src="showModal.img" alt="" />
            <div>{{ showModal.name }}</div>
          </div>
          <div class="t">开心收下</div>
        </div>
        <img @click="showModal = { show: false }" src="https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/v9DO9q0OYMwZ58Cb5YHO3z7ceXXEMx5Jf59bPT2w.png" class="close"></img>
      </div>
    </template>
  </Modal>
</template>
<style lang="scss" scoped>
.b {
  background: linear-gradient(90deg, #ff8f18 0%, #fe6002 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  margin: 32rpx 0 10rpx;
}
.bac {
  background: url(https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/2z6PwP2ooQkSOXVeydIewjpVvL0h0hgDD2srfUqK.png);
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  width: 548rpx;
  height: 658rpx;
  box-sizing: border-box;
  padding: 40rpx 0 56rpx;

  .middle {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 9rpx;
    .img {
      width: 208rpx;
      height: 208rpx;
      background-size: 100% 100%;
    }
  }

  .header {
    width: 400rpx;
    height: 88rpx;
    background-size: 100% 100%;
  }

  .t {
    width: 272rpx;
    height: 77rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #ffffff;
    background: linear-gradient(180deg, #ff211a 0%, #ffb883 100%);
    box-shadow: inset 0rpx -2rpx 1rpx 0rpx #fff6b6,
      inset 0rpx 4rpx 6rpx 0rpx rgba(255, 255, 255, 0.6);
    border-radius: 50rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.css {
  display: flex;
  flex-direction: column;
  gap: 32rpx;
  align-items: center;
  .close {
    width: 48rpx;
    height: 48rpx;
  }
}


.items {
  background: url(https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/9rtXotBySN0yiKmoyT0d41QPox63L3F8Gpdvyt00.png)
    no-repeat;
  background-size: 100% 100%;
  width: 654rpx;
  height: 740rpx;
  margin: 165rpx auto 60rpx;
  padding: 23rpx 33rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;

  .gifs {
    display: flex;
    flex-wrap: wrap;
    gap: 25rpx;
    width: 100%;

    .gif-item {
      background: #ffeedd;
      border-radius: 16rpx;
      height: 194rpx;
      font-weight: bold;
      font-size: 28rpx;
      color: #e9782b;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;

      .mask {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba($color: #000000, $alpha: 0.4);
        position: absolute;
        border-radius: 16rpx;
      }
    }

    .end {
      grid-column-start: 3;
    }
  }
}

.dialer {
  background-size: 100% 100%;
  width: 534rpx;
  height: 758rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;

  background: url(https://openwork-oss.oss-cn-shenzhen.aliyuncs.com/uploads/question/2025/06/JDNYxtJNVLcDvwyAxDRvx0SOmL2Eca42zJRNko2v.png)
    no-repeat;
  background-size: 100% 100%;
  padding-top: 34rpx;
  .btn {
    margin: 106rpx 0 0;
    width: 300rpx;
    height: 103rpx;
  }
}
</style>