Parcourir la source

feat(app): 材料小课堂页面

EvilDragon il y a 5 mois
Parent
commit
2b36023749

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

@@ -222,6 +222,14 @@
       }
     },
     {
+      "path": "pages/material/mini-class/index",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "材料小课堂"
+      }
+    },
+    {
       "path": "pages/material/recommend/index",
       "type": "page",
       "style": {

+ 1 - 1
packages/app/src/pages/home/classmates/index.vue

@@ -4,7 +4,7 @@ style:
   navigationBarBackgroundColor: '#fff'
 </route>
 <script setup lang="ts">
-import { getClassmates } from '@/core/libs/requests'
+import { getClassmates } from '../../../core/libs/requests'
 import ClassItem from '../components/class-item.vue'
 
 const { data, run } = useRequest(getClassmates)

+ 34 - 37
packages/app/src/pages/material/index.vue

@@ -5,9 +5,10 @@
 <script setup lang="ts">
 import Card from '@/components/card.vue'
 import SectionHeading from '@/components/section-heading.vue'
-import { abc, calculator, treaty } from '@/core/libs/pngs'
-import { getMaterialDealers } from '@/core/libs/requests'
-import { materialDealers, close, phone } from '@/core/libs/svgs'
+import { abc, calculator } from '../../core/libs/pngs'
+import { getMaterialDealers } from '../../core/libs/requests'
+import { materialDealers, close, phone } from '../../core/libs/svgs'
+import CardMenu from '@/components/card-menu.vue'
 
 const { data, run } = useRequest(getMaterialDealers)
 const dealerPanelState = ref(false)
@@ -16,23 +17,21 @@ const pieces = ref([
     title: '材料小课堂',
     desc: '全方位了解',
     icon: abc,
-    class: 'col-start-1 row-start-1',
-    // iconSize: 102,
+    gridItemClass: 'col-start-1 row-start-1',
+    path: '/pages/material/mini-class/index',
   },
   {
     title: '积分计算机',
     desc: '积分小帮手',
     icon: calculator,
-    class: 'col-start-2 row-start-1',
+    gridItemClass: 'col-start-2 row-start-1',
     path: '/pages/material/calculator/index',
-    // iconSize: 68,
   },
   {
     title: '推荐材料商',
     desc: '我们将优先洽谈大家推荐的材料商',
     icon: materialDealers,
-    class: 'col-start-1 row-start-2 col-end-3',
-    // iconSize: 44,
+    gridItemClass: 'col-start-1 col-end-3 row-start-2',
     isMore: true,
     path: '/pages/material/recommend/index',
   },
@@ -63,38 +62,36 @@ onMounted(() => {
         </view>
       </div> -->
     </view>
-
     <view class="bg-[#f6f6f6] relative bottom-4 rounded-t-2xl py-1">
-      <div class="my-6 grid grid-gap-2.5 mx-3.5">
+      <div class="my-6 grid grid-cols-2 grid-gap-2.5 mx-3.5">
         <template v-for="it of pieces" :key="it.title">
-          <card
-            :custom-class="[it.class, 'flex justify-between items-center'].join(' ')"
-            @click="handleMenuItemClick(it)"
-          >
-            <view class="flex items-end justify-end">
-              <wd-img :src="it.icon" :width="42" :height="42"></wd-img>
-            </view>
-            <div class="flex-1 flex flex-col justify-around h-full">
-              <div
-                class="text-black/80 text-base font-normal font-['PingFang SC'] leading-[10.18px]"
-              >
-                {{ it.title }}
+          <div :class="it.gridItemClass" @click="handleMenuItemClick(it)">
+            <card custom-class="flex justify-between items-center">
+              <view class="flex items-end justify-end">
+                <wd-img :src="it.icon" :width="42" :height="42"></wd-img>
+              </view>
+              <div class="flex-1 flex flex-col justify-around h-full">
+                <div
+                  class="text-black/80 text-base font-normal font-['PingFang SC'] leading-[10.18px]"
+                >
+                  {{ it.title }}
+                </div>
+                <div
+                  class="mt-1 text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal"
+                >
+                  {{ it.desc }}
+                </div>
               </div>
-              <div
-                class="mt-1 text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal"
-              >
-                {{ it.desc }}
+              <div v-if="it.isMore" class="mr--4">
+                <wd-button
+                  custom-class="text-black/40!"
+                  type="icon"
+                  icon="arrow-right"
+                  icon-color=""
+                ></wd-button>
               </div>
-            </div>
-            <div v-if="it.isMore" class="mr--4">
-              <wd-button
-                custom-class="text-black/40!"
-                type="icon"
-                icon="arrow-right"
-                icon-color=""
-              ></wd-button>
-            </div>
-          </card>
+            </card>
+          </div>
         </template>
       </div>
       <SectionHeading title="自营品牌" custom-class="mx-3.5"></SectionHeading>

+ 28 - 0
packages/app/src/pages/material/mini-class/index.vue

@@ -0,0 +1,28 @@
+<route lang="yaml">
+style:
+  navigationStyle: custom
+  navigationBarTitleText: 材料小课堂
+</route>
+<script setup lang="ts">
+const imgs = ref([
+  'https://image.zhuchaohui.com/zhucaohui/ce3bacd03a3c8b4ffe65d9cf81111324475413b5d22e26749c868104cc40dafd.jpg',
+])
+const handleClickLeft = () => {
+  uni.navigateBack()
+}
+</script>
+<template>
+  <div>
+    <wd-navbar
+      left-arrow
+      fixed
+      safe-area-inset-top
+      custom-class="bg-transparent"
+      title="材料小课堂"
+      @click-left="handleClickLeft"
+    ></wd-navbar>
+    <template v-for="(it, i) in imgs" :key="i">
+      <wd-img width="100%" :src="it" mode="widthFix"></wd-img>
+    </template>
+  </div>
+</template>

+ 0 - 1
packages/app/src/pages/mine/index.vue

@@ -22,7 +22,6 @@ import { useUserStore } from '../../store'
 import { storeToRefs } from 'pinia'
 import { isEmpty } from 'radash'
 import TasksCard from './components/tasks-card.vue'
-import Card from '@/components/card.vue'
 
 const userStore = useUserStore()
 const { isLogined, userInfo } = storeToRefs(userStore)

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

@@ -23,6 +23,7 @@ interface NavigateToOptions {
        "/pages/home/study-tour/list" |
        "/pages/material/calculator/index" |
        "/pages/material/detail/index" |
+       "/pages/material/mini-class/index" |
        "/pages/material/recommend/index" |
        "/pages/mine/authentication/index" |
        "/pages/mine/homepage/index" |