feat(app): 游学详情

packages/app/src/core/libs/requests.ts

@@ -286,8 +286,11 @@ export const getMaterialDetail = (query: { id: string }) =>
   httpGet<MaterialDealerDetail>('/app-api/member/materials/getDetail', query)
 export const createMaterialsReferrer = (data) =>
   httpPost('/app-api/member/materials-referrer/create', data)
-export const getContents = (query: { contentType: string; contentCategory?: string }) =>
-  httpGet<{ list: Content[] }>('/app-api/member/content-manger/page', query)
+export const getContents = (query: {
+  contentType: 'desin_learn' | 'offline_activity' | 'desin_communication'
+  contentCategory?: string
+}) => httpGet<{ list: Content[] }>('/app-api/member/content-manger/page', query)
+export const getAllCategories = () => httpGet('/app-api/member/categories/getAllCategories')
 export const getContent = (query: { id: string }) =>
   httpGet<Content>('/app-api/member/content-manger/get', query)
 export const refreshToken = (refreshToken: string) =>

packages/app/src/pages/home/study-tour/components/study-tour-card.vue

@@ -5,6 +5,7 @@ import { PropType } from 'vue'
 import { Content } from '../../../../core/models/moment'
 import dayjs from 'dayjs'
 import { useRouter } from '../../../../core/utils/router'
+import { map } from '@designer-hub/assets/src/assets/svgs'
 
 const props = defineProps({
   customClass: {
@@ -22,81 +23,97 @@ const toDetail = () => {
 }
 </script>
 <template>
-  <view class="relative w-full box-border" :class="customClass" @click="toDetail">
-    <view class="relative h-full mx--2.5 mb--6 mt--1 box-border">
-      <wd-img :width="'100%'" :height="'100%'" :src="studyTourItemBg" mode="widthFix"></wd-img>
-    </view>
-    <view class="absolute left-0 right-0 top-1 bottom-6 z-1 p-3.5">
-      <view class="w-full h-full flex flex-col justify-between">
-        <div>1</div>
-        <div class="w-[321px] h-[88px] relative">
-          <div class="w-[94px] h-3 left-[185px] top-[64px] absolute">
-            <div
-              class="left-0 top-0 absolute text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]"
-            >
-              <!-- 07.15 08.10 -->
+  <div
+    class="relative box-border aspect-[1.15/1] bg-[length:100%] flex flex-col"
+    :class="customClass"
+    :style="{ backgroundImage: `url(${studyTourItemBg})` }"
+    @click="toDetail"
+  >
+    <div class="flex flex-col pt-2.25 px-6 gap-6">
+      <div class="flex gap-1">
+        <wd-img width="23" height="23" :src="map"></wd-img>
+        <div class="text-white text-base font-normal font-['PingFang SC'] leading-relaxed">
+          第二站
+        </div>
+        <div class="flex-1"></div>
+        <div class="bg-[#f3f3f3] rounded-[20px] backdrop-blur-[15px] px-4 py-1.5">
+          <div class="text-black/40 text-sm font-normal font-['PingFang SC']">未开始</div>
+        </div>
+      </div>
+      <div class="flex gap-4 pt-2">
+        <wd-img
+          width="110"
+          height="88"
+          custom-class="rounded-[10px] overflow-hidden vertical-bottom"
+          src="https://via.placeholder.com/110x88"
+          mode="scaleToFill"
+        />
+        <div class="flex flex-col justify-around">
+          <div class="text-black text-base font-normal font-['PingFang SC'] leading-relaxed">
+            {{ options.title }}
+          </div>
+          <div class="flex">
+            <div class="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]">
               {{
                 (dayjs(options.studyStartDate).format('MM.DD'),
                 dayjs(options.studyEndDate).format('MM.DD'))
               }}
             </div>
           </div>
-          <wd-img
-            custom-class="w-[110px] h-[88px] left-0 top-0 absolute rounded-[10px] overflow-hidden vertical-bottom"
-            src="https://via.placeholder.com/110x88"
-            mode="scaleToFill"
-          />
-          <div
-            class="w-[202px] left-[119px] top-0 absolute text-black text-base font-normal font-['PingFang SC'] leading-relaxed"
-          >
-            <!-- 活动预告 | 日本研学·东京艺术大学设计游学 -->
-            {{ options.title }}
-          </div>
-          <div
-            class="left-[119px] top-[64px] absolute text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]"
-          >
-            游学时间：
+          <div class="flex">
+            <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]">
+              12100
+            </div>
           </div>
         </div>
-        <view class="flex items-center justify-between mb-1.5">
+        <div></div>
+      </div>
+      <div class="flex justify-between">
+        <view
+          class="flex items-center text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]"
+        >
+          距结束还剩
           <view
-            class="flex items-center text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]"
+            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="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 class="text-white text-[10px] font-normal font-['PingFang SC'] leading-[10.18px]">
+              05
             </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>
+          </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
-              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>
-            分
-          </view>
-          <tilted-button>立即报名</tilted-button>
+          </div>
+          分
         </view>
-      </view>
-    </view>
-  </view>
+        <tilted-button>立即报名</tilted-button>
+      </div>
+      <div class="flex justify-between border-t-solid border-t-[#f2f2f2] border-t-1 py-4">
+        <div></div>
+        <div
+          class="text-justify text-black/40 text-xs font-normal font-['PingFang SC'] leading-relaxed"
+        >
+          黄金会员以上等级可报名
+        </div>
+      </div>
+    </div>
+  </div>
 </template>

packages/app/src/pages/home/study-tour/detail.vue

@@ -8,7 +8,10 @@
 }
 </route>
 <script setup lang="ts">
+import NavbarEvo from '@/components/navbar-evo.vue'
 import { getContent } from '../../../core/libs/requests'
+import { map } from '@designer-hub/assets/src/assets/svgs'
+import TiltedButton from '@/components/tilted-button.vue'
 
 const id = ref()
 const { data, run: setData } = useRequest(() => getContent({ id: id.value }))
@@ -19,12 +22,100 @@ onLoad(async (query: { id: string }) => {
 })
 </script>
 <template>
-  <div class="flex-grow bg-dark">
+  <div class="flex-grow bg-[#36200f] px-3.5">
+    <NavbarEvo transparent></NavbarEvo>
     <div class="aspect-[1.26/1]">
       <wd-img width="100%" height="100%" src=""></wd-img>
     </div>
+    <div class="flex">
+      <wd-img width="18" height="18" :src="map"></wd-img>
+      <div class="text-[#c1c1c1] text-base font-normal font-['PingFang SC'] leading-normal">
+        第一站
+      </div>
+    </div>
     <div class="w-[347px] text-white text-[26px] font-normal font-['PingFang SC'] leading-[44px]">
       日本研学·东京艺术大学设计游学
+      <div class="inline-block py-1.5 px-4 bg-white rounded-[20px] backdrop-blur-[15px]">
+        <div
+          class="w-[42px] h-[21px] text-[#a60707] text-sm font-normal font-['PingFang SC'] leading-relaxed"
+        >
+          报名中
+        </div>
+      </div>
+    </div>
+    <div class="px-4 py-6 bg-[#29170b] rounded-2xl my-8">
+      <div class="flex items-center">
+        <wd-img width="16" height="16"></wd-img>
+        <div
+          class="w-[70px] text-[#c1c1c1] text-base font-normal font-['PingFang SC'] leading-normal"
+        >
+          报名时间
+        </div>
+        <div class="w-4"></div>
+        <div class="text-white text-base font-normal font-['PingFang SC'] leading-[34px]">
+          2024.12.15 2025.01.15
+        </div>
+      </div>
+      <div class="flex items-center">
+        <wd-img width="16" height="16"></wd-img>
+        <div
+          class="w-[70px] text-[#c1c1c1] text-base font-normal font-['PingFang SC'] leading-normal"
+        >
+          游学时间
+        </div>
+        <div class="w-4"></div>
+        <div class="text-white text-base font-normal font-['PingFang SC'] leading-[34px]">
+          2024.12.15 2025.01.15
+        </div>
+      </div>
+      <div class="flex items-center">
+        <wd-img width="16" height="16"></wd-img>
+        <div
+          class="w-[70px] text-[#c1c1c1] text-base font-normal font-['PingFang SC'] leading-normal"
+        >
+          游学名额
+        </div>
+        <div class="w-4"></div>
+        <div class="text-white text-base font-normal font-['PingFang SC'] leading-[34px]">
+          40人/剩余10人
+        </div>
+      </div>
+      <div class="flex items-center">
+        <wd-img width="16" height="16"></wd-img>
+        <div
+          class="w-[70px] text-[#c1c1c1] text-base font-normal font-['PingFang SC'] leading-normal"
+        >
+          等级限制
+        </div>
+        <div class="w-4"></div>
+        <div class="text-white text-base font-normal font-['PingFang SC'] leading-[34px]">
+          黄金以上等级
+        </div>
+      </div>
+    </div>
+    <wd-tabs>
+      <wd-tab title="活动介绍"></wd-tab>
+      <wd-tab title="行程安排"></wd-tab>
+    </wd-tabs>
+    <div class="mt-5">
+      <div
+        class="text-justify text-[#c1c1c1] text-base font-normal font-['PingFang SC'] leading-relaxed"
+      >
+        东京艺术大学（英文：Tokyo University of the
+        Arts；日文平假名：とうきょうげいじゅつだいがく），简称东京艺大、艺大（とうきょうげいだい、げいだい），是一所校本部位于东京都台东区上野公园内的艺术类日本国立大学。其是超级国际化大学计划、亚洲校园 成员。其前身是于1887年分别创立的东京美术学校和东京音乐学校，1949年两校合并成为新制东京艺术大学。东京艺术大学的主要目的为培养美术和音乐领域的艺术家，其中音乐学部已培养了许多著名作曲家、演奏家、指挥家，美术学部也诞生了许多著名画家、艺术家、建筑家。
+      </div>
+    </div>
+    <div
+      class="fixed bottom-4 w-[347px] h-[63px] bg-white/90 rounded-2xl backdrop-blur-[20px] flex items-center px-4 box-border"
+    >
+      <div class="text-[#ef4343] text-2xl font-normal font-['D-DIN Exp'] leading-normal">16000</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>

packages/app/src/pages/home/study-tour/index.vue

@@ -14,10 +14,16 @@ import SectionHeading from '@/components/section-heading.vue'
 import TiltedButton from '@/components/tilted-button.vue'
 import ClassItem from '../components/class-item.vue'
 import TimeLine from './components/time-line.vue'
+import { getByDictType, getContents } from '../../../core/libs/requests'
+import { DictType } from '../../../core/models/moment'
 
-const toList = () => {
-  uni.navigateTo({ url: '/pages/home/study-tour/list' })
-}
+const { data: studyTours, run: setStudyTours } = useRequest(() =>
+  getContents({ contentType: 'desin_learn' }),
+)
+onMounted(async () => {
+  await setStudyTours()
+  console.log(studyTours.value)
+})
 </script>
 <template>
   <view class="flex-grow flex flex-col gap-6 p-3.5">

packages/app/src/pages/home/study-tour/list.vue

@@ -8,30 +8,33 @@
 </route>
 <script setup lang="ts">
 import SectionHeading from '@/components/section-heading.vue'
-import { getContents, getStudyTours } from '../../../core/libs/requests'
+import { getAllCategories, getContents, getStudyTours } from '../../../core/libs/requests'
 import dayjs from 'dayjs'
 import StudyTourCard from './components/study-tour-card.vue'
 import { list } from 'radash'
 
-const { data, run: setData } = useRequest(() => getContents({ contentType: '0' }), {
+const { data, run: setData } = useRequest(() => getContents({ contentType: '1' }), {
   initialData: { list: [] },
 })
 const title = computed(() => `${dayjs().year()}年游学计划`)
 onMounted(async () => {
   await setData()
   console.log(data.value)
+  await getAllCategories()
 })
 </script>
 <template>
-  <div class="px-3.5">
-    <SectionHeading custom-class="py-6" :title="title"></SectionHeading>
+  <div class="flex flex-col gap-6 p-3.5">
+    <SectionHeading custom-class="" :title="title"></SectionHeading>
     <div
-      class="mx-3.5 text-justify text-black/40 text-sm font-normal font-['PingFang SC'] leading-relaxed"
+      class="mx-3.5 relative top--4 text-justify text-black/40 text-sm font-normal font-['PingFang SC'] leading-relaxed"
     >
       *我们为您精心打造了一个独特且极具价值的游学项目。这个项目的核心旨在全方位提升
     </div>
     <template v-for="(it, index) in data.list" :key="index">
-      <StudyTourCard custom-class="my-6" :options="it"></StudyTourCard>
+      <div class="mx--2.5 my--2.5">
+        <StudyTourCard custom-class="" :options="it"></StudyTourCard>
+      </div>
     </template>
   </div>
 </template>

packages/assets/src/assets/svgs/index.ts

@@ -6,6 +6,7 @@ import addBlue from "./addBlue";
 import shoppingBag from "./shoppingBag";
 import addBlack from "./addBlack";
 import notify from "./notify";
+import map from "./map";
 
 export {
   addBlack,
@@ -16,4 +17,5 @@ export {
   channelTabbarHomeActive,
   shoppingBag,
   notify,
+  map,
 };

packages/assets/src/assets/svgs/map.svg

@@ -0,0 +1,5 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4998 1.91664C10.8102 1.91286 10.1267 2.04518 9.48827 2.30603C8.84989 2.56687 8.26924 2.95111 7.77961 3.43674C7.28998 3.92237 6.90098 4.49983 6.6349 5.13605C6.36882 5.77227 6.23088 6.45474 6.229 7.14435C6.229 9.06102 7.80067 11.3131 10.8913 14.0635C11.0594 14.2117 11.2757 14.2935 11.4998 14.2935C11.7239 14.2935 11.9403 14.2117 12.1084 14.0635C15.199 11.3131 16.7707 9.04185 16.7707 7.14435C16.7688 6.45474 16.6309 5.77227 16.3648 5.13605C16.0987 4.49983 15.7097 3.92237 15.2201 3.43674C14.7304 2.95111 14.1498 2.56687 13.5114 2.30603C12.873 2.04518 12.1894 1.91286 11.4998 1.91664ZM11.4998 11.9791C9.25255 9.92831 8.14567 8.28956 8.14567 7.14435C8.14567 6.25477 8.49905 5.40163 9.12808 4.7726C9.75711 4.14357 10.6103 3.79019 11.4998 3.79019C12.3894 3.79019 13.2426 4.14357 13.8716 4.7726C14.5006 5.40163 14.854 6.25477 14.854 7.14435C14.854 8.30394 13.7519 9.94269 11.4998 11.9791Z" fill="white"/>
+<path d="M20.9684 17.7004L21.0115 17.6142L21.0403 17.5279C21.0403 17.4992 21.0403 17.4704 21.0642 17.4369C21.0692 17.3875 21.0692 17.3377 21.0642 17.2883V11.0208C21.0642 10.7667 20.9632 10.523 20.7835 10.3433C20.6038 10.1636 20.36 10.0626 20.1059 10.0626C19.8517 10.0626 19.608 10.1636 19.4283 10.3433C19.2486 10.523 19.1476 10.7667 19.1475 11.0208V16.6223L13.4982 19.0517L7.69067 15.4771H7.65713C7.62928 15.4579 7.59855 15.4434 7.56609 15.434L7.47984 15.3956H6.93359L6.85213 15.4244C6.81817 15.4338 6.78585 15.4483 6.7563 15.4675H6.72276L3.83338 17.0631V11.0208C3.83338 10.7667 3.73241 10.5229 3.55269 10.3432C3.37297 10.1635 3.12921 10.0625 2.87505 10.0625C2.62088 10.0625 2.37713 10.1635 2.1974 10.3432C2.01768 10.5229 1.91671 10.7667 1.91671 11.0208V18.7354C1.91457 18.7705 1.91457 18.8057 1.91671 18.8408C1.91448 18.8695 1.91448 18.8984 1.91671 18.9271L1.94546 19.0181C1.95617 19.0509 1.96897 19.0829 1.9838 19.114C1.9856 19.1283 1.9856 19.1428 1.9838 19.1571C2.02031 19.222 2.06544 19.2816 2.11796 19.3344C2.20077 19.4052 2.29466 19.4618 2.39588 19.5021L2.44859 19.5356C2.50089 19.5613 2.55542 19.5821 2.61151 19.5979H2.66901C2.73551 19.6221 2.80469 19.6382 2.87505 19.6458C2.94675 19.6529 3.01897 19.6529 3.09067 19.6458H3.14817C3.20117 19.6301 3.25252 19.6092 3.30151 19.5835H3.33505L7.16838 17.4608L12.9184 20.9875C12.9615 20.9875 13.0046 21.021 13.043 21.0402C13.0795 21.0602 13.118 21.0763 13.158 21.0881C13.2343 21.1106 13.3132 21.1235 13.3928 21.1265H13.4167C13.4894 21.1239 13.5616 21.1143 13.6323 21.0977L13.6994 21.0737L13.7953 21.045L20.5036 18.17C20.5557 18.1459 20.6054 18.1171 20.6521 18.0837L20.7192 18.031L20.7911 17.9688C20.8133 17.9444 20.8341 17.9188 20.8534 17.8921L20.9109 17.8202L20.9684 17.7004Z" fill="white"/>
+<path d="M10.0625 7.1875C10.0625 7.56875 10.214 7.93438 10.4835 8.20397C10.7531 8.47355 11.1188 8.625 11.5 8.625C11.8812 8.625 12.2469 8.47355 12.5165 8.20397C12.786 7.93438 12.9375 7.56875 12.9375 7.1875C12.9375 6.80625 12.786 6.44062 12.5165 6.17103C12.2469 5.90145 11.8812 5.75 11.5 5.75C11.1188 5.75 10.7531 5.90145 10.4835 6.17103C10.214 6.44062 10.0625 6.80625 10.0625 7.1875Z" fill="white"/>
+</svg>

packages/assets/src/assets/svgs/map.ts

@@ -0,0 +1,2 @@
+import map from "./map.svg";
+export default map;