Przeglądaj źródła

fix(app): 新增线下活动功能模块

EvilDragon 5 miesięcy temu
rodzic
commit
f6749e0da1

+ 4 - 0
packages/app/src/core/models/moment.ts

@@ -205,6 +205,10 @@ export enum DictType {
    * 材料商运营类型
    */
   memberMaterialsOperationType = 'member_materials_operation_type',
+  /**
+   * 内容分类-线下活动
+   */
+  offlineActivity = 'offline_activity',
 }
 export enum CircleType {
   moment = '1',

+ 7 - 0
packages/app/src/pages.json

@@ -329,6 +329,13 @@
       }
     },
     {
+      "path": "pages/home/offline-activity/list/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "线下活动"
+      }
+    },
+    {
       "path": "pages/mine/orders/detail/index",
       "type": "page",
       "style": {

+ 9 - 2
packages/app/src/pages/home/components/offline-activity-item.vue

@@ -1,12 +1,18 @@
 <script setup lang="ts">
 import Card from '@/components/card.vue'
-import { frame } from '@/core/libs/svgs'
+import { frame } from '../../../core/libs/svgs'
+import { PropType } from 'vue'
+import { Content } from '../../../core/models/moment'
 
 defineProps({
   customClass: {
     type: String,
     default: () => '',
   },
+  options: {
+    type: Object as PropType<Content>,
+    default: () => ({}),
+  },
 })
 </script>
 <template>
@@ -31,7 +37,8 @@ defineProps({
       <div
         class="w-[244px] text-black/40 text-base font-normal font-['PingFang SC'] leading-normal"
       >
-        白衣剑客·这是格斗的“芭蕾”
+        <!-- 白衣剑客·这是格斗的“芭蕾” -->
+        {{ options.title }}
       </div>
       <view class="flex items-center mb-4">
         <wd-img custom-class="vertical-bottom" :src="frame" width="20" height="20"></wd-img>

+ 1 - 1
packages/app/src/pages/home/components/register-card.vue

@@ -9,7 +9,7 @@ defineProps({
 })
 </script>
 <template>
-  <card custom-class="my-6 p-0!">
+  <card custom-class="p-0!">
     <view class="relative">
       <wd-img
         custom-class="vertical-bottom"

+ 26 - 8
packages/app/src/pages/home/offline-activity/index.vue

@@ -12,15 +12,32 @@ import SectionHeading from '@/components/section-heading.vue'
 import Card from '@/components/card.vue'
 import RegisterCard from '../components/register-card.vue'
 import OfflineActivityItem from '../components/offline-activity-item.vue'
+import { getByDictType, getContents } from '../../../core/libs/requests'
+import { DictType } from '../../../core/models/moment'
 
+const { data: tabs, run: setTabs } = useRequest(() => getByDictType(DictType.offlineActivity))
 const tab = ref<number>(0)
+const { data, run: setData } = useRequest(() => getContents({ contentType: '1' }), {
+  initialData: { list: [] },
+})
+onMounted(async () => {
+  await setTabs()
+  console.log(tabs.value)
+  await setData()
+  console.log(data.value)
+})
 </script>
 
 <template>
-  <view class="px-3.5">
-    <section-heading custom-class="my-6" title="线下活动"></section-heading>
+  <view class="flex-grow px-3.5 flex flex-col gap-6 py-7">
+    <section-heading
+      custom-class=""
+      title="线下活动"
+      path="/pages/home/offline-activity/list/index"
+      end-text="查看全部"
+    ></section-heading>
     <register-card></register-card>
-    <card custom-class="my-6">
+    <card custom-class="">
       <div class="my-7.5 text-black text-xl font-normal font-['PingFang SC'] leading-[10.18px]">
         筑巢荟-活动营
       </div>
@@ -32,13 +49,14 @@ const tab = ref<number>(0)
         参与专业的研讨会和工作坊,与同行们分享见解、碰撞思维火花,进一步深化对设计的理解。
       </div>
     </card>
-    <wd-tabs v-model="tab">
-      <block v-for="item in 4" :key="item">
-        <wd-tab :title="`标签${item}`"></wd-tab>
+    <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>
-    <offline-activity-item class="my-6"></offline-activity-item>
-    <offline-activity-item class="my-6"></offline-activity-item>
+    <template v-for="(it, index) in data.list" :key="index">
+      <offline-activity-item class="" :options="it"></offline-activity-item>
+    </template>
   </view>
 </template>
 

+ 110 - 0
packages/app/src/pages/home/offline-activity/list/index.vue

@@ -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>

+ 1 - 0
packages/app/src/types/uni-pages.d.ts

@@ -37,6 +37,7 @@ interface NavigateToOptions {
        "/pages/mine/setting/index" |
        "/pages/publish/moment/index" |
        "/pages/publish/tags/index" |
+       "/pages/home/offline-activity/list/index" |
        "/pages/mine/orders/detail/index" |
        "/pages/mine/authentication/submit/success/index";
 }