|
@@ -0,0 +1,110 @@
|
|
|
+<route lang="json">
|
|
|
+{ "style": { "navigationBarTitleText": "线下活动" } }
|
|
|
+</route>
|
|
|
+<script setup lang="ts">
|
|
|
+import { DictType } from '../../../../core/models/moment'
|
|
|
+import { getByDictType, getContents } from '../../../../core/libs/requests'
|
|
|
+import Card from '@/components/card.vue'
|
|
|
+
|
|
|
+const tab = ref<number>(0)
|
|
|
+const { data: tabs, run: setTabs } = useRequest(() => getByDictType(DictType.offlineActivity))
|
|
|
+const { data, run: setData } = useRequest(
|
|
|
+ () => getContents({ contentType: '1', contentCategory: tabs.value[tab.value].value }),
|
|
|
+ {
|
|
|
+ initialData: { list: [] },
|
|
|
+ },
|
|
|
+)
|
|
|
+onMounted(async () => {
|
|
|
+ await setTabs()
|
|
|
+ console.log(tabs.value)
|
|
|
+ await setData()
|
|
|
+ console.log(data.value)
|
|
|
+})
|
|
|
+</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="bg-transparent!" :slidable-num="4">
|
|
|
+ <block v-for="(it, item) in tabs" :key="item">
|
|
|
+ <wd-tab :title="it.label"></wd-tab>
|
|
|
+ </block>
|
|
|
+ </wd-tabs>
|
|
|
+ </div>
|
|
|
+ <template v-for="(it, index) in data.list" :key="index">
|
|
|
+ <!-- <offline-activity-item class="" :options="it"></offline-activity-item> -->
|
|
|
+ <Card>
|
|
|
+ <div class="flex flex-col gap-5">
|
|
|
+ <div class="flex gap-4 mb-2">
|
|
|
+ <img
|
|
|
+ class="w-[110px] h-[88px] rounded-[10px]"
|
|
|
+ src="https://via.placeholder.com/110x88"
|
|
|
+ />
|
|
|
+ <div class="flex flex-col justify-between">
|
|
|
+ <div
|
|
|
+ class="w-[168px] text-black text-base font-normal font-['PingFang SC'] leading-relaxed"
|
|
|
+ >
|
|
|
+ {{ it.title }}
|
|
|
+ </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]">
|
|
|
+ 07.15 08.10
|
|
|
+ </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]">
|
|
|
+ 0
|
|
|
+ </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]"
|
|
|
+ >
|
|
|
+ 距结束还剩
|
|
|
+ <view
|
|
|
+ class="w-4 h-4 bg-black/90 rounded flex-col justify-center items-center gap-2.5 inline-flex mx-1.5"
|
|
|
+ >
|
|
|
+ <view
|
|
|
+ class="text-white text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]"
|
|
|
+ >
|
|
|
+ 05
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ 天
|
|
|
+ <div
|
|
|
+ class="w-4 h-4 bg-black/90 rounded flex-col justify-center items-center gap-2.5 inline-flex mx-1.5"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="text-white text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]"
|
|
|
+ >
|
|
|
+ 05
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ 时
|
|
|
+ <div
|
|
|
+ class="w-4 h-4 bg-black/90 rounded flex-col justify-center items-center gap-2.5 inline-flex mx-1.5"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="text-white text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]"
|
|
|
+ >
|
|
|
+ 05
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ 分
|
|
|
+ </view>
|
|
|
+ <tilted-button>立即报名</tilted-button>
|
|
|
+ </view>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+</template>
|