designer-hub/packages/app/src/pages/home/offline-activity/list/index.vue

<route lang="json">
{ "style": { "navigationBarTitleText": "线下活动", "navigationBarBackgroundColor": "#fff" } }
</route>
<script setup lang="ts">
import { getActivities, getByDictType } from '../../../../core/libs/requests'
import Card from '@/components/card.vue'
import PageHelper from '@/components/page-helper.vue'
import TiltedButton from '@/components/tilted-button.vue'
import { useRouter } from '../../../../core/utils/router'
import dayjs from 'dayjs'
import ActivityCountDown from '../../components/activity-count-down.vue'
import { getActivityStatus, getActivityStatusButtonText } from '../../../../core/utils/common'
import { DictType } from '../../../../core/models/moment'

const tab = ref<number>(0)
const router = useRouter()
const { data: tabs, run: setTabs } = useRequest(() => getByDictType(DictType.MemberActivityType), {
  initialData: [],
})
onMounted(async () => {
  await setTabs()
})
</script>
<template>
  <div class="flex-grow flex flex-col gap-6 mx-3.5">
    <div class="mx--3.5">
      <wd-tabs v-model="tab" custom-class="" :slidable-num="4">
        <block v-for="(it, item) in tabs" :key="item">
          <wd-tab :title="it.label"></wd-tab>
        </block>
      </wd-tabs>
    </div>
    <PageHelper
      v-if="tabs.length"
      :request="getActivities"
      :query="{ activityType: tabs[tab].value }"
      class="flex flex-col flex-grow"
    >
      <template #default="{ source }">
        <div class="flex flex-col gap-6">
          <template v-for="(it, index) in source.list" :key="index">
            <!-- <offline-activity-item class="" :options="it"></offline-activity-item> -->
            <div
              @click="router.push(`/pages/home/activity/detail/index?id=${it.id}&type=activity`)"
            >
              <Card>
                <div class="flex flex-col gap-5">
                  <div class="flex gap-4 mb-2">
                    <wd-img
                      width="110px"
                      height="88px"
                      class="rounded-[10px]"
                      :src="it.thumbnailUrl"
                    ></wd-img>
                    <div class="flex flex-col justify-between">
                      <div
                        class="w-[168px] text-black text-base font-normal font-['PingFang_SC'] leading-relaxed"
                      >
                        {{ it.name }}
                      </div>
                      <div class="flex">
                        <div
                          class="w-[70px] text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]"
                        >
                          活动时间：
                        </div>
                        <div
                          class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px] flex items-center"
                        >
                          {{ dayjs(it.activityStartTime).format('MM.DD') }}
                          <wd-icon name="play" size="22px"></wd-icon>
                          {{ dayjs(it.activityEndTime).format('MM.DD') }}
                        </div>
                      </div>
                      <div class="flex items-end">
                        <div
                          class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]"
                        >
                          兑换积分：
                        </div>
                        <div
                          class="text-[#ef4343] text-xl font-normal font-['D-DIN Exp'] leading-[34px]"
                        >
                          {{ it.needPointsCount }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <view class="flex items-center justify-between mb-1.5">
                    <view
                      class="flex items-center text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]"
                    >
                      <!-- <wd-count-down
                        :time="dayjs(it.applyStartTime).diff(new Date(), 'millisecond')"
                      >
                        <template #default="{ current }">
                          <div class="flex items-center gap-1.25 text-black/40 text-sm">
                            <div>距结束还剩</div>
                            <div
                              class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"
                            >
                              {{ current.days }}
                            </div>
                            <span class="custom-count-down-colon">天</span>
                            <div
                              class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"
                            >
                              {{ current.hours }}
                            </div>
                            <span class="custom-count-down-colon">时</span>
                            <div
                              class="w-4 h-4 bg-black/90 rounded text-white text-2.5 flex items-center justify-center"
                            >
                              {{ current.minutes }}
                            </div>
                            <span class="custom-count-down-colon">分</span>
                          </div>
                        </template>
                      </wd-count-down> -->
                      <ActivityCountDown
                        :start-at="it.applyStartTime"
                        :end-at="it.applyEndTime"
                      ></ActivityCountDown>
                    </view>
                    <tilted-button>
                      {{
                        it.ifSingnUp
                          ? '已报名'
                          : getActivityStatusButtonText(it.applyStartTime, it.applyEndTime)
                      }}
                    </tilted-button>
                  </view>
                </div>
              </Card>
            </div>
          </template>
        </div>
      </template>
    </PageHelper>
  </div>
</template>