feat：增加猜灯谜活动

pages/activity/index.vue

@@ -1,11 +1,11 @@
 <template>
-  <view class="activity" catchtouchmove="true" :style="pageIndex == 1 ? 'background-image:none;background-color:#e03519;padding:0 0 120rpx' : ''">
+  <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" v-if="pageIndex == 1" mode="widthFix" />
-      <view class="barrage-box" :style="pageIndex == 1 ? 'margin-top:0' : ''">
+      <img :src="acticve_detail.logo" class="logo" mode="widthFix" />
+      <view class="barrage-box">
         <view class="text">{{ lottery_list }}</view>
       </view>
     </view>
@@ -35,6 +35,21 @@
       </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>
 
     <!-- 结果页面 -->
@@ -50,22 +65,25 @@
         </view>
       </view>
 
-      <view v-else>
+      <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" @click="_goLottery">立即抽奖</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>
+          <button open-type="share" class="result-btn">分享好友再来一次</button>
         </view>
       </view>
     </view>
 
     <!-- 抽奖入口 -->
-    <view class="lottery-entrance" v-if="showLottery">
+    <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>
@@ -103,6 +121,8 @@ const lottery_list = ref("还没有人中奖，快来参与吧！");
 
 const isFromIndex = ref(false);
 
+const lotteryRule = ref();
+
 onLoad((options) => {
   //未登陆提醒用户登陆
   if (!$checkAccess.checkLogin()) {
@@ -152,7 +172,7 @@ onShareAppMessage((res) => {
   return {
     title: "正月十五猜灯谜",
     path: `/pages/activity/index?id=${detialId.value}`,
-    imageUrl: "https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/20250207-174500.jpg",
+    imageUrl: "https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/20250210-115805.jpg",
   };
 });
 
@@ -161,7 +181,9 @@ const _handleCloseLottery = () => {
 };
 
 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) {
@@ -181,6 +203,12 @@ const _getDeatail = (id) => {
           }
         }
       });
+    } else {
+      console.log(response);
+      uni.showToast({
+        title: response.msg,
+        icon: "none",
+      });
     }
   });
 };
@@ -207,7 +235,7 @@ const _handleSubmitAnswer = () => {
   http.request("api/riddle_answer/check_answer", _param).then((response) => {
     if (response.code == "success") {
       pageIndex.value = 3;
-      _getDeatail(detialId.value);
+      //   _getDeatail(detialId.value);
       is_answer.value = response.data.is_answer;
     }
   });
@@ -245,6 +273,7 @@ const _goLottery = () => {
 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) {
@@ -252,6 +281,11 @@ const _handleChangePage = (index) => {
     }
   }
 };
+
+const _handleChangeRule = (type) => {
+  if (type == "show") lotteryRule.value.open("center");
+  else lotteryRule.value.close();
+};
 </script>
 
 <style lang="less" scoped>
@@ -262,9 +296,6 @@ const _handleChangePage = (index) => {
   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%;
@@ -283,7 +314,6 @@ const _handleChangePage = (index) => {
       background-color: #fff;
       opacity: 0.8;
       overflow-x: hidden;
-      margin-top: 20rpx;
     }
 
     .text {
@@ -313,7 +343,7 @@ const _handleChangePage = (index) => {
     justify-content: center;
     box-sizing: border-box;
     .activity-info {
-      padding-top: 100rpx;
+      padding-top: 80rpx;
       display: flex;
       flex-direction: column;
       align-items: center;
@@ -328,12 +358,11 @@ const _handleChangePage = (index) => {
       }
       .active-rule {
         display: block;
-        height: 500rpx;
         width: 100%;
-        font-size: 24rpx;
+        font-size: 30rpx;
         line-height: 40rpx;
         border-radius: 10rpx;
-        padding: 20rpx;
+        padding: 26rpx;
         box-sizing: border-box;
         margin-bottom: 40rpx;
         background-color: #ffffff;
@@ -345,7 +374,7 @@ const _handleChangePage = (index) => {
     }
     .activity-btn {
       width: 90%;
-      background-color: #e7522f;
+      background-color: #ff8000;
       color: #fff;
       border-radius: 60rpx;
       display: flex;
@@ -365,14 +394,20 @@ const _handleChangePage = (index) => {
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    box-sizing: border-box;
+    padding: 0 16rpx;
+    margin-top: -200rpx;
     .question {
       // 题干的样式
       background-color: #fff;
-      height: 200rpx;
+      max-height: 300rpx;
       border-radius: 6rpx;
       padding: 26rpx;
       opacity: 0.95;
-      margin-bottom: 60rpx;
+      margin-bottom: 30rpx;
+      width: 100%;
+      box-sizing: border-box;
+      overflow: auto;
     }
     .options {
       // 选项的样式
@@ -386,7 +421,7 @@ const _handleChangePage = (index) => {
         padding-left: 26rpx;
         border-radius: 6rpx;
         background-color: #fff;
-        margin-bottom: 20rpx;
+        margin-bottom: 10rpx;
         opacity: 0.95;
         width: 100%;
         box-sizing: border-box;
@@ -410,6 +445,60 @@ const _handleChangePage = (index) => {
         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 {
@@ -420,19 +509,26 @@ const _handleChangePage = (index) => {
     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: 46rpx;
+        font-size: 56rpx;
         font-weight: bold;
         color: #fff;
         text-align: center;
-        margin-bottom: 40rpx;
+        margin-bottom: 100rpx;
+      }
+      .result-btn-list {
+        display: flex;
+        gap: 20rpx;
       }
       .result-btn {
         width: 100%;
         height: 80rpx;
-        background-color: #f0370e;
+        background-color: #ff8000;
         color: #fff;
         border-radius: 60rpx;
         display: flex;
@@ -441,6 +537,7 @@ const _handleChangePage = (index) => {
         padding: 16rpx;
         margin-top: 60rpx;
         box-sizing: border-box;
+        font-size: 36rpx;
       }
     }
     .no-join-number {

pages/activity/lottery.vue

@@ -142,6 +142,9 @@ export default {
     // #endif
   },
   onShareAppMessage(obj) {
+    if (obj) {
+      this.shareRequest();
+    }
     return {
       title: "正月十五猜灯谜",
       path: "/pages/activity/index?id=" + this.requestParam.activity_id,
@@ -181,6 +184,10 @@ export default {
     }
   },
   methods: {
+    shareRequest() {
+      this.$http.request("api/riddle_active_share/add", { active_id: this.requestParam.activity_id }).then((response) => {});
+    },
+
     onDone(index) {
       // 奖项
       let prize = this.prizeList[index];
@@ -340,7 +347,6 @@ export default {
     padding: 16rpx;
     margin-top: 60rpx;
     box-sizing: border-box;
-    z-index: 100;
   }
   .lottery_time {
     top: 0rpx;

pages/orders/lottery.vue

@@ -142,6 +142,7 @@ export default {
     return {
       title: this.activeInfo.name,
       path: "/pages/orders/lottery?id=" + this.requestParam.id,
+      imageUrl: "https://kailin-mp.oss-cn-shenzhen.aliyuncs.com/static/lottery/20250210-115805.jpg",
     };
   },
   onShow() {