feat(春节活动页面): 补充任务列表弹窗

src/stores/springFestival.js

@@ -36,6 +36,8 @@ export const useSpringFestival = defineStore('springFestival', {
     receiveRecordShow: false,
     receiveRecord: [], // 领取抽奖券记录
 
+    taskListShow: false,
+
     helpShow: false, // 帮助展示
   }),
   actions: {},

src/views/Activities/SpringFestival/Task.vue

@@ -87,7 +87,7 @@
         <div>Remaining lottery tickets: {{ tickets }}</div>
 
         <!-- 获取抽奖券 -->
-        <div>How to get a ticket</div>
+        <div @click="showTaskList">How to get a ticket</div>
       </div>
 
       <!-- 抽奖按钮 -->
@@ -672,6 +672,8 @@ const {
   receiveRecordShow,
   receiveRecord, // 领取抽奖券记录
 
+  taskListShow, // 任务列表展示
+
   helpShow, // 帮助展示
 } = storeToRefs(springFestivalStore)
 
@@ -865,6 +867,11 @@ const getDrawRecords = async () => {
   }
 }
 
+// 打开任务列表
+const showTaskList = () => {
+  taskListShow.value = true
+}
+
 // 前往搜索代理页
 const searchPayee = () => {
   router.push({

src/views/Activities/SpringFestival/index.vue

@@ -473,6 +473,14 @@
             </itemCenter>
           </div>
 
+          <!-- 任务列表 -->
+          <itemCenter
+            v-show="taskListShow"
+            :imgUrl="imageUrl(getImgName('taskListBg'))"
+            :contentStyle="`padding: 22vw 7vw 8vw;`"
+            @click.stop
+          ></itemCenter>
+
           <!-- help弹窗 -->
           <img
             v-smart-img
@@ -482,32 +490,6 @@
             style="display: block; width: 100%; object-fit: cover; margin-bottom: 6vw"
             @click.stop
           />
-
-          <!-- 碎片不足提示 -->
-          <div
-            v-show="fragmentNotEnoughShow"
-            style="display: flex; justify-content: center; width: 100vw"
-            @click.stop
-          >
-            <div
-              style="
-                width: 60vw;
-                padding: 2vw;
-
-                display: flex;
-                justify-content: center;
-                align-items: center;
-
-                border-radius: 8px;
-                background: rgba(255, 255, 255, 0.4);
-                backdrop-filter: blur(32px);
-              "
-            >
-              <div style="font-size: 0.8em; font-weight: 700; color: #fff">
-                {{ t('not_enough_pieces') }}
-              </div>
-            </div>
-          </div>
         </div>
       </maskLayer>
     </div>
@@ -595,6 +577,8 @@ const {
   receiveRecordShow,
   receiveRecord, // 领取抽奖券记录
 
+  taskListShow, // 任务列表展示
+
   helpShow, // 帮助展示
 } = storeToRefs(springFestivalStore)
 
@@ -737,11 +721,24 @@ const resultShowIndex = ref(0) // 抽奖结果索引
 
 // 遮罩层
 const maskLayerShow = computed(() => {
-  return resultShow.value || drawRecordShow.value || receiveRecordShow.value || helpShow.value
+  return (
+    resultShow.value ||
+    drawRecordShow.value ||
+    receiveRecordShow.value ||
+    taskListShow.value ||
+    helpShow.value
+  )
 })
+
 // 居中弹窗
 const centerPopupShow = computed(() => {
-  return resultShow.value || drawRecordShow.value || receiveRecordShow.value || helpShow.value
+  return (
+    resultShow.value ||
+    drawRecordShow.value ||
+    receiveRecordShow.value ||
+    taskListShow.value ||
+    helpShow.value
+  )
 })
 
 // 打开遮罩层
@@ -760,9 +757,13 @@ const showPopup = (type) => {
       receiveRecordShow.value = true
       break
     case 'help':
-      cancelSend() // 取消发送
+      closedPopup() // 关闭弹窗
       helpShow.value = true
       break
+    case 'taskList':
+      closedPopup() // 关闭弹窗
+      taskListShow.value = true
+      break
 
     default:
       closedPopup() // 关闭弹窗
@@ -775,6 +776,7 @@ const closedPopup = () => {
   resultShow.value = false
   drawRecordShow.value = false
   receiveRecordShow.value = false
+  taskListShow.value = false
   helpShow.value = false
 }