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

src/views/Activities/SpringFestival/index.vue

@@ -511,9 +511,81 @@
           <itemCenter
             v-show="taskListShow"
             :imgUrl="imageUrl('taskListBg')"
-            :contentStyle="`padding: 22vw 7vw 8vw;`"
+            :contentStyle="`padding: 20vw 10vw 12vw;flex-direction: column;justify-content: space-between;`"
             @click.stop
-          ></itemCenter>
+          >
+            <itemCenter
+              v-for="task in taskList"
+              :imgUrl="imageUrl('taskItemBg')"
+              :contentStyle="`padding: 4vw 5.5vw;justify-content: space-between;`"
+              @click.stop
+            >
+              <!-- 图标 -->
+              <div style="width: 15%">
+                <img
+                  v-if="task.taskType == 2"
+                  v-smart-img
+                  :src="imageUrl('taskTypeGift')"
+                  alt=""
+                  width="100%"
+                  style="display: block"
+                />
+                <img
+                  v-if="task.taskType == 4"
+                  v-smart-img
+                  :src="imageUrl('taskTypeGame')"
+                  alt=""
+                  width="100%"
+                  style="display: block"
+                />
+              </div>
+
+              <!-- 内容 -->
+              <div style="width: 60%">
+                <!-- 任务进度 -->
+                <div style="color: #fff; font-weight: 590; font-size: 0.75em">
+                  {{ showTarget(task) }}
+                </div>
+
+                <!-- 任务奖励 -->
+                <div style="display: flex; align-items: center; gap: 1vw">
+                  <div style="color: #fff; font-weight: 590; font-size: 0.9em">
+                    100000 coins/Get
+                  </div>
+                  <img
+                    v-smart-img
+                    :src="imageUrl('ticket')"
+                    :alt="t('ticket')"
+                    width="15%"
+                    style="display: block"
+                  />
+                  <div style="color: #fff; font-weight: 590; font-size: 0.9em">*1</div>
+                </div>
+              </div>
+
+              <!-- 按钮 -->
+              <div style="width: 20%">
+                <!-- 前往任务 -->
+                <itemCenter v-if="task.taskStatus == 0" :imgUrl="imageUrl('taskBtGo')">
+                  <div style="font-size: 1em; font-weight: 600">{{ t('task_go') }}</div>
+                </itemCenter>
+
+                <!-- 领取抽奖券 -->
+                <itemCenter
+                  v-else-if="task.taskStatus === 1"
+                  :imgUrl="imageUrl('taskBtReceive')"
+                  @click="receiveTaskReward(task.taskCode)"
+                >
+                  <div style="font-size: 1em; font-weight: 600">{{ t('task_receive') }}</div>
+                </itemCenter>
+
+                <!-- 已完成 -->
+                <itemCenter v-else :imgUrl="imageUrl('taskBtReceived')">
+                  <div style="font-size: 0.9em; font-weight: 600">{{ t('task_received') }}</div>
+                </itemCenter>
+              </div>
+            </itemCenter>
+          </itemCenter>
 
           <!-- help弹窗 -->
           <img
@@ -819,6 +891,19 @@ const closedPopup = () => {
   helpShow.value = false
 }
 
+// 展示任务目标
+const showTarget = (task) => {
+  if (task.targetType == 'SEND_GIFT') {
+    if (task.taskCode == 'SPINS_SEND_GIFT') {
+      return 'Lucky and magical gifts win gold coins'
+    }
+  } else if (task.targetType == 'WIN_COINS') {
+    if (task.taskCode == 'SPINS_WIN_100000') {
+      return 'Win coins in the game'
+    }
+  }
+}
+
 // 跳转到充值页面
 const gotoRecharge = () => {
   router.push('/recharge')
@@ -846,6 +931,46 @@ const getMyLotteryTicketCount = async () => {
   }
 }
 
+//获取任务列表
+const getTaskList = async () => {
+  // const resTaskList = await ActTaskList()
+  // if (resTaskList.status && resTaskList.body) {
+  //   taskList.value = resTaskList.body
+  // }
+  taskList.value = [
+    {
+      taskId: 1,
+      taskCode: 'SPINS_WIN_100000',
+      taskName: 'Win 100000 coins in the game',
+      taskType: 4,
+      taskDesc: '游戏内获得100000金币',
+      targetType: 'WIN_COINS',
+      targetValue: 100000,
+      targetUnit: 'COINS',
+      currentValue: 0,
+      progressRate: 0,
+      taskStatus: 0,
+      rewardType: 1,
+      rewardValue: 1,
+    },
+    {
+      taskId: 2,
+      taskCode: 'SPINS_SEND_GIFT',
+      taskName: 'Lucky and magical gifts win 100000 gold coins',
+      taskType: 2,
+      taskDesc: '送出幸运礼物或魔法礼物赢取100000金币',
+      targetType: 'SEND_GIFT',
+      targetValue: 100000,
+      targetUnit: 'COINS',
+      currentValue: 0,
+      progressRate: 0,
+      taskStatus: 0,
+      rewardType: 1,
+      rewardValue: 1,
+    },
+  ]
+}
+
 //获取用户信息
 const getUserInfo = async () => {
   if (Object.keys(userInfo.value).length === 0) {
@@ -1059,6 +1184,9 @@ const initData = async () => {
   await Promise.all([
     getActivityDetail(), //获取奖池
     getMyLotteryTicketCount(), //获取抽奖券
+
+    getTaskList(), //获取任务列表
+
     getUserInfo(), //获取用户信息
     getDrawableAmount(), //获取可提现金额
     initializePayee(), //获取收款人信息