kailin_mp/pages/activity/index.vue

<template>
  <view class="activity" style="background-image: none; background-color: #e03519; padding: 0 0 120rpx">
    <!-- <view class="rule" @click="showRule">活动规则</view> -->

    <!-- logo与跑马灯 -->
    <view class="header">
      <img :src="acticve_detail.logo" class="logo" mode="widthFix" />
      <view class="barrage-box">
        <view class="text">{{ lottery_list }}</view>
      </view>
    </view>

    <!-- 立即参与页面 -->
    <view class="page-1" v-if="pageIndex == 1" style="padding: 0 16rpx">
      <view class="activity-info">
        <text class="title">{{ acticve_detail?.name }}</text>
        <view class="active-rule">
          <rich-text :nodes="acticve_detail.active_rule" class="rich_text"></rich-text>
        </view>
      </view>
      <view class="activity-btn" @click="_handleChangePage(1)">立即参与</view>
    </view>

    <!-- 答题页面 -->
    <view class="page-2" v-if="pageIndex == 2">
      <!-- 题干区域 -->
      <view class="question">
        <text>猜灯谜：{{ question.title }}</text>
        <br />
        <view style="margin-top: 20rpx">(请从下面选择正确答案提交)</view>
      </view>
      <!-- 选项区域 -->
      <view class="options">
        <view :class="['option', { active: answer_id == item.id }]" v-for="item in question.answer_list" :key="item.id" @click="_handleSelectAnswer(item.id)">{{ item.value }}</view>
      </view>
      <!-- 提交答案 -->
      <button :class="['submit-btn', { disabled: !answer_id }]" @click="_handleSubmitAnswer">提交</button>

      <!-- 活动规则 -->
      <view class="rule-btn" @click="_handleChangeRule('show')">活动规则</view>

      <uni-popup ref="lotteryRule" type="center">
        <view class="lottery_rule_box">
          <view class="lottery_rule_title">
            <text>活动规则</text>
            <view class="close_btn" @click="_handleChangeRule('close')"> X </view>
          </view>
          <scroll-view class="lottery_rule_info" scroll-y="true">
            <rich-text :nodes="acticve_detail.active_rule" class="rich_text"></rich-text>
          </scroll-view>
        </view>
      </uni-popup>
    </view>

    <!-- 结果页面 -->
    <view class="page-3" v-if="pageIndex == 3">
      <view class="no-join-number" v-if="acticve_detail.join_last == 0 && acticve_detail.share_last == 0 && isFromIndex">
        <view class="header">
          <text>您的答题次数已用完！</text>
          <text>谢谢参与</text>
        </view>
        <view class="tip">
          <text>1.余额请前往小程序余额页面申请提现</text>
          <text>2.实物奖励请填写收获地址或者等待客服进行充值</text>
        </view>
      </view>

      <view v-else style="width: 100%">
        <!-- 结果展示 -->
        <view class="result-success result-content" v-if="is_answer">
          <view class="result-text" style="color: #fff">恭喜您，答对啦！</view>
          <view class="result-btn-list">
            <view class="result-btn" @click="_goLottery">立即抽奖</view>
            <button open-type="share" class="result-btn">分享好友再来一次</button>
          </view>
        </view>

        <view class="result-fail result-content" v-if="!is_answer">
          <view class="result-text" style="color: #fff">很遗憾，您答错了！</view>
          <button open-type="share" class="result-btn">分享好友再来一次</button>
        </view>
      </view>
    </view>

    <!-- 抽奖入口 -->
    <view class="lottery-entrance" v-if="showLottery && pageIndex !== 1">
      <view class="close-btn" @click="_handleCloseLottery">x</view>
      <image @click="_goLottery" src="https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/20250207-174439.gif" alt="" />
    </view>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance } from "vue";

import { onShareAppMessage, onLoad, onShow } from "@dcloudio/uni-app";

import http from "@/utils/request";

const { appContext } = getCurrentInstance();
const $checkAccess = appContext.config.globalProperties.$checkAccess;

const pageIndex = ref(1);

const question = ref({
  title: "",
  answer_list: [],
});

const showLottery = ref(true);

const acticve_detail = ref({});

const detialId = ref(null);

const answer_id = ref(null);

const is_answer = ref(false);

const lottery_list = ref("还没有人中奖，快来参与吧！");

const isFromIndex = ref(false);

const lotteryRule = ref();

onLoad((options) => {
  //未登陆提醒用户登陆
  if (!$checkAccess.checkLogin()) {
    uni.showModal({
      title: "温馨提示",
      content: "请先登录",
      confirmText: "去登录",
      cancelText: "取消",
      success: (res) => {
        if (res.confirm) {
          uni.redirectTo({
            url: `/pages/login/index?redirect=/pages/activity/index&activity_id=${options.id}`,
          });
        }
      },
    });
    return;
  }

  if (options.id) {
    _getDeatail(detialId.value);
    detialId.value = options.id;
  }

  // #ifdef MP-WEIXIN
  //分享按钮
  uni.showShareMenu({
    withShareTicket: true,
    menus: ["shareAppMessage", "shareTimeline"],
  });
  // #endif
});

onShow(() => {
  console.log("回到小程序");

  if (detialId.value) {
    _getDeatail(detialId.value);
  }
});

// 定义页面的分享逻辑
onShareAppMessage((res) => {
  if (res) {
    _addShare();
  }
  return {
    title: "正月十五猜灯谜",
    path: `/pages/activity/index?id=${detialId.value}`,
    imageUrl: "https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/20250210-115640.jpg",
  };
});

const _handleCloseLottery = () => {
  showLottery.value = false;
};

const _getDeatail = (id) => {
  if (!id) return;
  http.request("api/riddle_active/get_detail", { id }).then((response) => {
    console.log(response);
    if (response.code == "success") {
      acticve_detail.value = response.data;
      if (response.data.join_last > 0) {
        _getQuestion();
        pageIndex.value = 1;
      }
      http.request("api/lottery_riddle_record/get_list_all", { lottery_id: response.data.lottery_id }).then((res) => {
        if (res.code == "success") {
          if (res.data?.length > 0) {
            let str = "";

            res.data.forEach((item) => {
              str += `用户${item.username}已获得${item.reward_name};`;
            });

            lottery_list.value = str;
          }
        }
      });
    } else {
      console.log(response);
      uni.showToast({
        title: response.msg,
        icon: "none",
      });
    }
  });
};

const _getQuestion = () => {
  http.request("api/riddle_question/get_question").then((response) => {
    if (response.code == "success") {
      question.value = response.data;
    }
  });
};

const _handleSelectAnswer = (id) => {
  answer_id.value = id;
};

const _handleSubmitAnswer = () => {
  if (!answer_id.value) return;
  const _param = {
    active_id: detialId.value,
    question_id: question.value.id,
    answer_id: answer_id.value,
  };
  http.request("api/riddle_answer/check_answer", _param).then((response) => {
    if (response.code == "success") {
      pageIndex.value = 3;
      //   _getDeatail(detialId.value);
      is_answer.value = response.data.is_answer;
    }
  });
};

const _addShare = () => {
  http.request("api/riddle_active_share/add", { active_id: detialId.value }).then((response) => {});
};

const _goLottery = () => {
  if (!$checkAccess.checkLogin()) {
    uni.showModal({
      title: "温馨提示",
      content: "请先登录",
      confirmText: "去登录",
      cancelText: "取消",
      success: (res) => {
        if (res.confirm) {
          uni.redirectTo({
            url: `/pages/login/index?redirect=/pages/activity/index&activity_id=${detialId.value}`,
          });
        }
      },
    });
    return;
  }
  uni.navigateTo({
    url: `/pages/activity/lottery?id=${acticve_detail.value.lottery_id}&activity_id=${detialId.value}`,
  });
  setTimeout(() => {
    pageIndex.value = 1;
  }, 1000);
};

const _handleChangePage = (index) => {
  if (index == 1 && acticve_detail.value.join_last > 0) {
    pageIndex.value = 2;
    answer_id.value = null;
  } else {
    pageIndex.value = 3;
    if (acticve_detail.value.join_last == 0 && acticve_detail.value.share_last == 0) {
      isFromIndex.value = true;
    }
  }
};

const _handleChangeRule = (type) => {
  if (type == "show") lotteryRule.value.open("center");
  else lotteryRule.value.close();
};
</script>

<style lang="less" scoped>
.activity {
  padding: 0 16rpx 120rpx;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  width: 100vw;
  .header {
    .logo {
      width: 100%;
    }
    .barrage-box {
      padding: 10rpx;
      width: 100%;
      transform-origin: 65vw 75vw;
      transform: rotate(0deg);
      white-space: nowrap;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 3;
      box-sizing: border-box;
      background-color: #fff;
      opacity: 0.8;
      overflow-x: hidden;
    }

    .text {
      width: 200vw; //调整文字显示
      font-size: 16px;
      color: #333;
      animation: aniMove 8s linear infinite;
      animation-fill-mode: forwards;
    }

    /* 文字滚动 */
    @keyframes aniMove {
      0% {
        transform: translateX(100%);
      }
      100% {
        transform: translateX(-100%);
      }
    }
  }

  .page-1 {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    .activity-info {
      padding-top: 80rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      .title {
        font-size: 46rpx;
        font-weight: bold;
        color: #fff;
        text-align: center;
        margin-bottom: 40rpx;
      }
      .active-rule {
        display: block;
        width: 100%;
        font-size: 30rpx;
        line-height: 40rpx;
        border-radius: 10rpx;
        padding: 26rpx;
        box-sizing: border-box;
        margin-bottom: 40rpx;
        background-color: #ffffff;
        opacity: 0.8;
        .rich_text {
          white-space: break-spaces;
        }
      }
    }
    .activity-btn {
      width: 90%;
      background-color: #ff8000;
      color: #fff;
      border-radius: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 16rpx;
    }
  }

  .page-2 {
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 10;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 16rpx;
    margin-top: -200rpx;
    .question {
      // 题干的样式
      background-color: #fff;
      max-height: 300rpx;
      border-radius: 6rpx;
      padding: 26rpx;
      opacity: 0.95;
      margin-bottom: 30rpx;
      width: 100%;
      box-sizing: border-box;
      overflow: auto;
    }
    .options {
      // 选项的样式
      display: flex;
      gap: 20rpx;
      flex-direction: column;
      width: 100%;
      > .option {
        height: 80rpx;
        line-height: 80rpx;
        padding-left: 26rpx;
        border-radius: 6rpx;
        background-color: #fff;
        margin-bottom: 10rpx;
        opacity: 0.95;
        width: 100%;
        box-sizing: border-box;
        &.active {
          background-color: #ffd6a0;
        }
      }
    }
    .submit-btn {
      width: 100%;
      height: 80rpx;
      background-color: #ffd6a0;
      color: #7e4304;
      border-radius: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 16rpx;
      margin-top: 60rpx;
      &.disabled {
        background-color: #ccc;
      }
    }
    .rule-btn {
      position: absolute;
      right: 0;
      top: 8%;
      color: #7e4304;
      padding: 15rpx 10rpx 15rpx 35rpx;
      background-color: #ffd6a0;
      border-top-left-radius: 60rpx;
      border-bottom-left-radius: 60rpx;
      text-align: center;
      font-size: 28rpx;
    }
    .lottery_rule_box {
      width: 500rpx;
      display: block;
      overflow: hidden;
      background-color: #fc335f;
      font-size: 26rpx;
      margin: 0 auto;
      line-height: 50rpx;
      border-radius: 10rpx;
      padding: 20rpx 25rpx 20rpx;
      .lottery_rule_title {
        color: #ffffff;
        height: 60rpx;
        font-size: 32rpx;
        line-height: 60rpx;
        text-align: center;
        margin-bottom: 10rpx;
        .close_btn {
          float: right;
          width: 40rpx;
          height: 40rpx;
          font-size: 24rpx;
          margin-top: 9rpx;
          line-height: 40rpx;
          border-radius: 50%;
          border: 1rpx solid #ffffff;
        }
      }
      .lottery_rule_info {
        display: block;
        height: 500rpx;
        font-size: 24rpx;
        line-height: 40rpx;
        border-radius: 10rpx;
        padding: 20rpx;
        box-sizing: border-box;
        background-color: #ffffff;
        .rich_text {
          white-space: break-spaces;
        }
      }
    }
  }

  .page-3 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0.95;
    box-sizing: border-box;
    padding: 0 16rpx;
    margin-top: -250rpx;
    .result-content {
      width: 100%;
      .result-text {
        font-size: 56rpx;
        font-weight: bold;
        color: #fff;
        text-align: center;
        margin-bottom: 100rpx;
      }
      .result-btn-list {
        display: flex;
        gap: 20rpx;
      }
      .result-btn {
        width: 100%;
        height: 80rpx;
        background-color: #ff8000;
        color: #fff;
        border-radius: 60rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 16rpx;
        margin-top: 60rpx;
        box-sizing: border-box;
        font-size: 36rpx;
      }
    }
    .no-join-number {
      width: 100%;
      background-color: #fff;
      border-radius: 6rpx;
      padding: 26rpx;
      opacity: 0.95;
      margin-bottom: 60rpx;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      gap: 40rpx;
      font-size: 36rpx;
      .header {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20rpx;
      }
      .tip {
        font-size: 24rpx;
        display: flex;
        flex-direction: column;
        gap: 20rpx;
      }
    }
  }

  .lottery-entrance {
    position: absolute;
    z-index: 10;
    right: 20rpx;
    bottom: 100rpx;
    image {
      width: 160rpx;
      height: 160rpx;
    }
    .close-btn {
      width: 40rpx;
      height: 40rpx;
      font-size: 24rpx;
      line-height: 40rpx;
      border-radius: 50%;
      border: 1rpx solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 5rpx;
      right: 0;
      color: #fff;
    }
  }
}
</style>