|
|
@@ -0,0 +1,496 @@
|
|
|
+<template>
|
|
|
+ <view class="activity" catchtouchmove="true" :style="pageIndex == 1 ? 'background-image:none;background-color:#e03519' : ''">
|
|
|
+ <!-- <view class="rule" @click="showRule">活动规则</view> -->
|
|
|
+
|
|
|
+ <!-- logo与跑马灯 -->
|
|
|
+ <view class="header">
|
|
|
+ <img :src="acticve_detail.logo" class="logo" v-if="pageIndex == 1" />
|
|
|
+ <view class="barrage-box">
|
|
|
+ <view class="text">{{ lottery_list }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 立即参与页面 -->
|
|
|
+ <view class="page-1" v-if="pageIndex == 1">
|
|
|
+ <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">{{ question.title }}</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>
|
|
|
+
|
|
|
+ <!-- 结果页面 -->
|
|
|
+ <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>
|
|
|
+ <!-- 结果展示 -->
|
|
|
+ <view class="result-success result-content" v-if="is_answer">
|
|
|
+ <view class="result-text" style="color: #fff">恭喜您，答对啦！</view>
|
|
|
+ <view class="result-btn" @click="_goLottery">立即抽奖</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">
|
|
|
+ <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);
|
|
|
+
|
|
|
+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) {
|
|
|
+ console.log(1111);
|
|
|
+ _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/20250207-174500.jpg",
|
|
|
+ };
|
|
|
+});
|
|
|
+
|
|
|
+const _handleCloseLottery = () => {
|
|
|
+ showLottery.value = false;
|
|
|
+};
|
|
|
+
|
|
|
+const _getDeatail = (id) => {
|
|
|
+ http.request("api/riddle_active/get_detail", { id }).then((response) => {
|
|
|
+ if (response.code == "success") {
|
|
|
+ acticve_detail.value = response.data;
|
|
|
+ if (response.data.join_last > 0) {
|
|
|
+ _getQuestion();
|
|
|
+ pageIndex.value = 2;
|
|
|
+ }
|
|
|
+ http.request("api/lottery_riddle_record/get_list_all", { lottery_id: response.data.lottery_id }).then((res) => {
|
|
|
+ if (res.code == "success") {
|
|
|
+ console.log(res);
|
|
|
+ if (res.data?.length > 0) {
|
|
|
+ let str = "";
|
|
|
+
|
|
|
+ res.data.forEach((item) => {
|
|
|
+ str += `用户${item.username}已获得${item.reward_name};`;
|
|
|
+ });
|
|
|
+
|
|
|
+ lottery_list.value = str;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+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}`,
|
|
|
+ });
|
|
|
+ pageIndex.value = 1;
|
|
|
+};
|
|
|
+
|
|
|
+const _handleChangePage = (index) => {
|
|
|
+ if (index == 1 && acticve_detail.value.join_last > 0) {
|
|
|
+ pageIndex.value = 2;
|
|
|
+ } else {
|
|
|
+ pageIndex.value = 3;
|
|
|
+ if (acticve_detail.value.join_last == 0 && acticve_detail.value.share_last == 0) {
|
|
|
+ isFromIndex.value = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.activity {
|
|
|
+ padding: 0 16rpx 120rpx;
|
|
|
+ height: 100vh;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ width: 100vw;
|
|
|
+ background-image: url("https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/20250207-174500.jpg");
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ .header {
|
|
|
+ .logo {
|
|
|
+ width: 100%;
|
|
|
+ height: 300rpx;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .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;
|
|
|
+ .activity-info {
|
|
|
+ padding-top: 100rpx;
|
|
|
+ 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;
|
|
|
+ height: 500rpx;
|
|
|
+ width: 100%;
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ 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: #e7522f;
|
|
|
+ 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;
|
|
|
+ .question {
|
|
|
+ // 题干的样式
|
|
|
+ background-color: #fff;
|
|
|
+ height: 200rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ padding: 26rpx;
|
|
|
+ opacity: 0.95;
|
|
|
+ margin-bottom: 60rpx;
|
|
|
+ }
|
|
|
+ .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: 20rpx;
|
|
|
+ opacity: 0.95;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ &.active {
|
|
|
+ background-color: #e7522f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .submit-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ background-color: #e7522f;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16rpx;
|
|
|
+ margin-top: 60rpx;
|
|
|
+ &.disabled {
|
|
|
+ background-color: #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .page-3 {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ opacity: 0.95;
|
|
|
+ .result-content {
|
|
|
+ width: 100%;
|
|
|
+ .result-text {
|
|
|
+ font-size: 46rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+ .result-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ background-color: #f0370e;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16rpx;
|
|
|
+ margin-top: 60rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .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>
|
qianxinyu