Browse Source

feat(app): 添加设计传播子页面

EvilDragon 4 tháng trước cách đây
mục cha
commit
0e298e45d7

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

@@ -343,6 +343,29 @@
       }
     },
     {
+      "path": "pages/home/spread/case-shooting/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "案例拍摄",
+        "navigationBarBackgroundColor": "#ffffff"
+      }
+    },
+    {
+      "path": "pages/home/spread/design-awards/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "设计奖项",
+        "navigationBarBackgroundColor": "#fff"
+      }
+    },
+    {
+      "path": "pages/home/spread/wx-agent-operation/index",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
       "path": "pages/mine/orders/detail/index",
       "type": "page",
       "style": {
@@ -351,6 +374,14 @@
       }
     },
     {
+      "path": "pages/home/spread/case-shooting/photographer/index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "案例拍摄",
+        "navigationBarBackgroundColor": "#ffffff"
+      }
+    },
+    {
       "path": "pages/mine/authentication/submit/success/index",
       "type": "page",
       "style": {

+ 2 - 2
packages/app/src/pages/home/components/elegant-info-card.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { frame, peoples, polygon16 } from '@/core/libs/svgs'
+import { frame, peoples, polygon16 } from '../../../core/libs/svgs'
 
 defineProps({
   customClass: {
@@ -13,7 +13,7 @@ defineProps({
 })
 </script>
 <template>
-  <view class="my-6 relative h-43 flex items-end" :class="[customClass]">
+  <view class="relative h-43 flex items-end" :class="[customClass]">
     <view class="absolute left-0 bottom-0 rounded-2xl overflow-hidden">
       <wd-img
         custom-class="vertical-bottom"

+ 51 - 0
packages/app/src/pages/home/spread/case-shooting/index.vue

@@ -0,0 +1,51 @@
+<route lang="json">
+{ "style": { "navigationBarTitleText": "案例拍摄", "navigationBarBackgroundColor": "#ffffff" } }
+</route>
+<script setup lang="ts">
+import { useRouter } from '../../../../core/utils/router'
+
+const router = useRouter()
+const data = ref([{}, {}, {}, {}, {}])
+</script>
+<template>
+  <div class="flex-grow p-3.5">
+    <div grid grid-cols-2 gap-x-2.5 gap-y-10>
+      <template v-for="(it, i) in data" :key="i">
+        <div
+          class="flex flex-col gap-4"
+          @click="router.push('/pages/home/spread/case-shooting/photographer/index')"
+        >
+          <div class="aspect-square rounded-2xl overflow-hidden relative">
+            <wd-img
+              width="100%"
+              height="100%"
+              src="https://via.placeholder.com/168x168"
+              mode="aspectFill"
+            />
+            <div
+              class="w-full h-[39px] bg-gradient-to-t from-black to-black/0 rounded-bl-2xl rounded-br-2xl absolute bottom-0 flex items-center justify-center"
+            >
+              <div class="text-white text-base font-normal font-['PingFang SC'] leading-normal">
+                方晓峰
+              </div>
+            </div>
+          </div>
+          <div class="flex items-center">
+            <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN Exp'] leading-normal">
+              1600
+            </div>
+            <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-[34px]">
+              积分
+            </div>
+            <div class="flex-1"></div>
+            <div
+              class="w-[53px] text-black/30 text-xs font-normal font-['PingFang SC'] line-through leading-normal"
+            >
+              2000积分
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>

+ 47 - 0
packages/app/src/pages/home/spread/case-shooting/photographer/index.vue

@@ -0,0 +1,47 @@
+<route lang="json">
+{ "style": { "navigationBarTitleText": "案例拍摄", "navigationBarBackgroundColor": "#ffffff" } }
+</route>
+<script setup lang="ts">
+import TiltedButton from '@/components/tilted-button.vue'
+const data = ref([{}, {}, {}, {}, {}])
+</script>
+<template>
+  <div class="flex-grow flex flex-col">
+    <div class="aspect-[1.34/1] relative">
+      <div class="absolute aspect-[1.26/1] top-0 w-full">
+        <wd-img width="100%" height="100%" src="https://via.placeholder.com/375x297" />
+      </div>
+    </div>
+    <div class="relative flex-1 bg-white p-7 flex flex-col gap-6 rounded-tl-2xl rounded-tr-2xl">
+      <div class="flex">
+        <div class="w-[67px] text-black text-xl font-normal font-['PingFang SC'] leading-[10.18px]">
+          方晓峰
+        </div>
+        <div
+          class="w-[67px] text-black/60 text-sm font-normal font-['PingFang SC'] leading-[10.18px]"
+        >
+          实景摄影
+        </div>
+      </div>
+      <div
+        class="text-justify text-black/40 text-base font-normal font-['PingFang SC'] leading-relaxed"
+      >
+        极具才华和创造力的摄影师,以其独特的视角和精湛的技艺在摄影领域独树一帜。
+        他/她对摄影的热爱源于,多年来一直致力于用镜头捕捉生活中那些稍纵即逝的美好瞬间。无论是壮丽的自然风光、生动的人物肖像,还是充满故事性的街头场景,在他/她的镜头下都能展现出别样的魅力。
+        [摄影师姓名]十分注重光线、构图和色彩的运用,通过巧妙的组合和搭配,让每一幅作品都具有强烈的视觉冲击力和艺术感染力。他/她不断探索创新,尝试各种不同的风格和手法,力求为观众带来全新的视觉体验
+      </div>
+    </div>
+    <div
+      class="bg-white/90 backdrop-blur-[20px] flex px-10 py-2.5 border-t-1 border-t-solid border-t-[#ececec]"
+    >
+      <div class="text-[#ef4343] text-2xl font-normal font-['D-DIN Exp'] leading-normal">0</div>
+      <div class="text-black/40 text-base font-normal font-['PingFang SC'] leading-[34px]">
+        积分
+      </div>
+      <div class="flex-1"></div>
+      <div>
+        <TiltedButton size="large">立即兑换</TiltedButton>
+      </div>
+    </div>
+  </div>
+</template>

+ 29 - 0
packages/app/src/pages/home/spread/design-awards/index.vue

@@ -0,0 +1,29 @@
+<route lang="json5">
+{
+  style: {
+    navigationBarTitleText: '设计奖项',
+    navigationBarBackgroundColor: '#fff',
+  },
+}
+</route>
+
+<script setup lang="ts">
+import TiltedButton from '@/components/tilted-button.vue'
+import SectionHeading from '@/components/section-heading.vue'
+import ElegantInfoCard from '../../components/elegant-info-card.vue'
+import { shoppingBag } from '@designer-hub/assets/src/assets/svgs/index'
+
+const data = ref(['https://via.placeholder.com/347x128'])
+const products = ref([{}, {}, {}])
+</script>
+
+<template>
+  <view class="bg-white flex-grow flex flex-col px-3.5 py-5.5 gap-5.5">
+    <wd-swiper :list="data" autoplay height="128px"></wd-swiper>
+    <SectionHeading title="筑巢奖"></SectionHeading>
+    <ElegantInfoCard></ElegantInfoCard>
+    <ElegantInfoCard></ElegantInfoCard>
+  </view>
+</template>
+
+<style scoped lang="scss"></style>

+ 24 - 5
packages/app/src/pages/home/spread/index.vue

@@ -10,7 +10,9 @@ import SectionHeading from '@/components/section-heading.vue'
 import ClassItem from '../components/class-item.vue'
 import ElegantInfoCard from '../components/elegant-info-card.vue'
 import { agent as test } from '@designer-hub/merchant/src/core/libs/svgs'
+import { useRouter } from '../../../core/utils/router'
 
+const router = useRouter()
 const current = ref<number>(0)
 
 const swiperList = ref([
@@ -21,9 +23,24 @@ const swiperList = ref([
   'https://registry.npmmirror.com/wot-design-uni-assets/*/files/meng.jpg',
 ])
 const menus = ref([
-  { title: '微信代运营', icon: wechat, class: 'col-start-1 row-start-1 row-end-3 items-start!' },
-  { title: '设计奖项', icon: award, class: 'col-start-2 row-start-1' },
-  { title: '案例拍摄', icon: camera, class: 'col-start-2 row-start-2' },
+  {
+    title: '微信代运营',
+    icon: wechat,
+    class: 'col-start-1 row-start-1 row-end-3 items-start!',
+    path: '/pages/home/spread/wx-agent-operation/index',
+  },
+  {
+    title: '设计奖项',
+    icon: award,
+    class: 'col-start-2 row-start-1',
+    path: '/pages/home/spread/design-awards/index',
+  },
+  {
+    title: '案例拍摄',
+    icon: camera,
+    class: 'col-start-2 row-start-2',
+    path: '/pages/home/spread/case-shooting/index',
+  },
 ])
 function handleClick(e) {
   console.log(e)
@@ -46,7 +63,7 @@ function onChange(e) {
 
     <view class="my-6 grid gap-2.5 grid-cols-2">
       <template v-for="it of menus" :key="it.title">
-        <div :class="it.class">
+        <div :class="it.class" @click="router.push(it.path)">
           <card :custom-class="['w-full h-full flex justify-between items-center']">
             <div
               class="my-3.5 text-black/40 text-base font-normal font-['PingFang SC'] leading-[10.18px]"
@@ -72,7 +89,9 @@ function onChange(e) {
 "
     ></info-card>
     <section-heading title="最新资讯"></section-heading>
-    <ElegantInfoCard></ElegantInfoCard>
+    <div class="my-6">
+      <ElegantInfoCard></ElegantInfoCard>
+    </div>
     <ElegantInfoCard></ElegantInfoCard>
   </view>
 </template>

+ 26 - 0
packages/app/src/pages/home/spread/wx-agent-operation/index.vue

@@ -0,0 +1,26 @@
+<route lang="json">
+{ "style": { "navigationStyle": "custom" } }
+</route>
+<script setup lang="ts">
+const imgs = ref([
+  //   'https://image.zhuchaohui.com/zhucaohui/3014480570bd7b81a64eb1ca598c7e017f7952eb982e47aae4eb23de9d7de9f2.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>

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

@@ -39,7 +39,11 @@ interface NavigateToOptions {
        "/pages/publish/tags/index" |
        "/pages/home/offline-activity/cycling-rankings/index" |
        "/pages/home/offline-activity/list/index" |
+       "/pages/home/spread/case-shooting/index" |
+       "/pages/home/spread/design-awards/index" |
+       "/pages/home/spread/wx-agent-operation/index" |
        "/pages/mine/orders/detail/index" |
+       "/pages/home/spread/case-shooting/photographer/index" |
        "/pages/mine/authentication/submit/success/index";
 }
 interface RedirectToOptions extends NavigateToOptions {}