Browse Source

feat(index): 新增设计游学功能模块和入口

EvilDragon 6 months ago
parent
commit
0f5ed34e46

+ 7 - 0
src/pages.json

@@ -97,6 +97,13 @@
       "style": {
         "navigationBarTitleText": "设计传播"
       }
+    },
+    {
+      "path": "pages/index/study-tour/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "设计游学"
+      }
     }
   ],
   "subPackages": []

+ 60 - 0
src/pages/index/components/menus.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import Card from '@/components/card.vue'
+
+const items = [
+  {
+    id: 1,
+    title: '设计游学',
+    desc: '游学项目',
+    path: '/pages/index/study-tour/index',
+    icon: '/static/svgs/iconly-glass-edit.svg',
+  },
+  {
+    id: 2,
+    title: '线下活动',
+    desc: '骑行俱乐部',
+    path: '/pages/offine-activity/index',
+    icon: '/static/svgs/iconly-glass-star.svg',
+  },
+  {
+    id: 3,
+    title: '设计传播',
+    desc: '运营推广',
+    path: '/pages/spread/index',
+    icon: '/static/svgs/iconly-glass-play.svg',
+  },
+  {
+    id: 4,
+    title: '品质商城',
+    desc: '所需周边',
+    path: '/mall/index',
+    icon: '/static/svgs/message.svg',
+  },
+]
+const handleClick = (path: string) => {
+  uni.navigateTo({ url: path })
+}
+</script>
+<template>
+  <view class="w-full px-3.5 box-border grid grid-cols-2 grid-gap-4 my-6">
+    <template v-for="it of items" :key="it.id">
+      <view class="" @click="handleClick(it.path)">
+        <Card>
+          <view class="flex justify-between">
+            <view class="text-[rgba(0,0,0,0.85)] text-4 font-400 line-height-2.5">
+              <view class="my-0.75">{{ it.title }}</view>
+              <view class="text-[rgba(0,0,0,0.45)] text-3.5 my-2.5">{{ it.desc }}</view>
+            </view>
+            <view class="">
+              <wd-img
+                custom-class="w-10.5 h-10.5 mt-3.5 vertical-bottom"
+                :src="it.icon"
+                mode="scaleToFill"
+              ></wd-img>
+            </view>
+          </view>
+        </Card>
+      </view>
+    </template>
+  </view>
+</template>

+ 2 - 51
src/pages/index/index.vue

@@ -17,40 +17,11 @@ import Scaner from '@/components/scaner.vue'
 import TiltedButton from '@/components/tilted-button.vue'
 import useRequest from '@/hooks/useRequest'
 import dayjs from 'dayjs'
+import Menus from './components/menus.vue'
 
 defineOptions({
   name: 'Home',
 })
-const items = [
-  {
-    id: 1,
-    title: '设计游学',
-    desc: '游学项目',
-    path: '/pages/study-tour/index',
-    icon: '/static/svgs/iconly-glass-edit.svg',
-  },
-  {
-    id: 2,
-    title: '线下活动',
-    desc: '骑行俱乐部',
-    path: '/pages/offine-activity/index',
-    icon: '/static/svgs/iconly-glass-star.svg',
-  },
-  {
-    id: 3,
-    title: '设计传播',
-    desc: '运营推广',
-    path: '/pages/spread/index',
-    icon: '/static/svgs/iconly-glass-play.svg',
-  },
-  {
-    id: 4,
-    title: '品质商城',
-    desc: '所需周边',
-    path: '/mall/index',
-    icon: '/static/svgs/message.svg',
-  },
-]
 // 测试 uni API 自动引入
 const { data } = useRequest(async () => ({ code: 0, msg: '', data: {} }) as IResData<any>, {
   initialData: {
@@ -142,27 +113,7 @@ onLoad(() => {})
       </div>
     </view>
     <view class="bg-[#f6f6f6] relative bottom-4 rounded-t-2xl py-1">
-      <view class="w-full px-3.5 box-border grid grid-cols-2 grid-gap-4 my-6">
-        <template v-for="it of items" :key="it.id">
-          <view class="">
-            <Card>
-              <view class="flex justify-between">
-                <view class="text-[rgba(0,0,0,0.85)] text-4 font-400 line-height-2.5">
-                  <view class="my-0.75">{{ it.title }}</view>
-                  <view class="text-[rgba(0,0,0,0.45)] text-3.5 my-2.5">{{ it.desc }}</view>
-                </view>
-                <view class="">
-                  <wd-img
-                    custom-class="w-10.5 h-10.5 mt-3.5 vertical-bottom"
-                    :src="it.icon"
-                    mode="scaleToFill"
-                  ></wd-img>
-                </view>
-              </view>
-            </Card>
-          </view>
-        </template>
-      </view>
+      <menus></menus>
       <view class="my-6 mx-3.5">
         <HotActivity></HotActivity>
       </view>

+ 8 - 0
src/pages/index/study-tour/index.vue

@@ -0,0 +1,8 @@
+<route lang="yaml">
+style:
+  navigationBarTitleText: 设计游学
+</route>
+<script lang="ts" setup></script>
+<template>
+  <view></view>
+</template>

+ 2 - 1
src/types/uni-pages.d.ts

@@ -12,7 +12,8 @@ interface NavigateToOptions {
        "/pages/mine/index" |
        "/pages/offline-activity/index" |
        "/pages/publish/index" |
-       "/pages/spread/index";
+       "/pages/spread/index" |
+       "/pages/index/study-tour/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}