Browse Source

feat(home): 更新活动详情页面,优化时间格式并替换按钮组件;调整日程卡片数据处理逻辑

EvilDragon 3 months ago
parent
commit
26827a5ebe

+ 6 - 3
packages/app/src/pages/home/activity/detail/index.vue

@@ -36,6 +36,7 @@ import { Activity, StudyTour } from '../../../../core/libs/models'
 import mapLocation from '@designer-hub/assets/src/libs/assets/mapLocation'
 import cameraWhite from '@designer-hub/assets/src/libs/assets/cameraWhite'
 import ImgBtnEvo from '@/components/img-btn-evo.vue'
+import ButtonEvo from '@/components/button-evo.vue'
 
 const themeVars = ref<ConfigProviderThemeVars>({
   tableBorderColor: 'white',
@@ -98,8 +99,8 @@ const infos = computed(() => [
     icon: clock,
     title: '报名时间',
     content: [
-      dayjs(data.value.applyStartTime).format('YYYY.MM.DD'),
-      dayjs(data.value.applyEndTime).format('YYYY.MM.DD'),
+      dayjs(data.value.applyStartTime).format('YYYY.MM.DD HH:mm'),
+      // dayjs(data.value.applyEndTime).format('YYYY.MM.DD'),
     ],
     visable: true,
   },
@@ -152,6 +153,7 @@ const handleConfirm = async () => {
     show.value = false
     successShow.value = true
   }
+  await setData()
 }
 onLoad(async (query: { id: string; type: 'activity' | 'studyTour' }) => {
   id.value = query.id
@@ -367,7 +369,8 @@ onLoad(async (query: { id: string; type: 'activity' | 'studyTour' }) => {
         </div>
         <div class="flex-1"></div>
         <div @click="show = true">
-          <ImgBtnEvo>{{ data?.ifSingnUp ? '已报名' : '立即报名' }}</ImgBtnEvo>
+          <!-- <ImgBtnEvo>{{ data?.ifSingnUp ? '已报名' : '立即报名' }}</ImgBtnEvo> -->
+          <ButtonEvo>{{ data?.ifSingnUp ? '已报名' : '立即报名' }}</ButtonEvo>
           <!-- <TiltedButton size="large">{{ data?.ifSingnUp ? '已报名' : '立即报名' }}</TiltedButton> -->
         </div>
       </div>

+ 35 - 21
packages/app/src/pages/home/components/schedule-card.vue

@@ -1,26 +1,42 @@
 <script setup lang="ts">
 import SectionHeading from '@/components/section-heading.vue'
 import { scheduleCardBg } from '../../../core/libs/pngs'
-import { MyStudyTour, StudyTour } from '../../../core/libs/models'
 import { group } from 'radash'
 import dayjs from 'dayjs'
 
-const props = withDefaults(defineProps<{ customClass?: string; items?: MyStudyTour[] }>(), {
-  items: () => [],
-})
+const props = withDefaults(
+  defineProps<{
+    customClass?: string
+    items?: {
+      createTime: any
+      updateTime: any
+      creator: any
+      updater: any
+      deleted: any
+      id: any
+      studyId: number
+      travelDate: any
+      travelTime: number
+      title: string
+      travelDesc: string
+      clockExplainDesc: string
+      clockExplainUrl: string
+    }[]
+  }>(),
+  {
+    items: () => [],
+  },
+)
 const data = ref()
-const dates = computed(() => {
-  const a = props.items.at(0)?.studyTravelDOList
-  // 使用radash将studyTravelDOList 中的travelTime字段按天分组
-  const b = group(a, (it) => dayjs(it?.travelTime).format('YYYY-MM-DD'))
-  console.log(b)
-  return b
-})
+const schedules = computed(() =>
+  group(props.items, (it) => dayjs(it?.travelTime).format('YYYY-MM-DD')),
+)
+const currentSchedule = computed(() => schedules.value[dayjs().format('YYYY-MM-DD')])
 const pull = () => {
-  data.value = props.items.at(0)?.studyTravelDOList.slice(0, 3)
+  data.value = currentSchedule.value.slice(0, 3)
 }
 const push = () => {
-  data.value = props.items.at(0)?.studyTravelDOList.slice(0, 2)
+  data.value = currentSchedule.value.slice(0, 2)
 }
 const handleClick = async () => {
   uni.navigateTo({ url: '/pages/home/schedule/index' })
@@ -36,15 +52,13 @@ onMounted(() => {
       class="w-full my-3.5 text-[#acacac] text-sm font-normal font-['PingFang_SC'] leading-normal"
     >
       <!-- 6月26日 第二天 -->
-      <!-- {{ dates }} -->
-      <!-- {{ items?.at(0)?.studyTravelDOList?.at(0)?.travelTime }} -->
-      {{ Object.keys(dates).at(0) }}
-      第{{ 1 }}天
+      {{ dayjs().format('M月D日') }}
+      第{{ Object.keys(schedules).findIndex((it) => it === dayjs().format('YYYY-MM-DD')) + 1 }}天
     </div>
     <div
       class="w-80 bg-gradient-to-r from-[#141414] to-[#4b4949] rounded-tl-2xl rounded-tr-2xl p-6 box-border"
     >
-      <template v-for="(it, index) in Object.values(dates)" :key="index">
+      <template v-for="(it, index) in data" :key="index">
         <view class="relative mb-4">
           <view class="flex items-center">
             <div class="w-2 h-2 left-0 top-0 rounded-full border-2 border-solid border-white"></div>
@@ -53,16 +67,16 @@ onMounted(() => {
               class="w-12 ml-3.5 text-white text-base font-normal font-['PingFang_SC'] leading-normal"
             >
               <!-- 9:00 -->
-              {{ dayjs(it.at(0)?.travelTime).format('HH:mm') }}
+              {{ dayjs(it?.travelTime).format('HH:mm') }}
             </div>
             <div class="text-white text-base font-normal font-['PingFang_SC'] leading-normal">
               <!-- 早稻田大学课程 -->
-              {{ it.at(0)?.title }}
+              {{ it?.title }}
             </div>
           </view>
           <div class="ml-6.5 text-white/40 text-sm font-normal font-['PingFang_SC'] leading-normal">
             <!-- 学习灯光设计师课程 -->
-            {{ it.at(0)?.travelDesc }}
+            {{ it?.travelDesc }}
           </div>
           <div
             v-if="index !== data?.length - 1"

+ 40 - 2
packages/app/src/pages/home/index.vue

@@ -31,6 +31,11 @@ import { messages } from '../../core/libs/messages'
 import { handleUpvoteClick, handleShareClick } from '../../core/libs/actions'
 import { useUserStore } from '../../store'
 import ScheduleCard from './components/schedule-card.vue'
+import TiltedButton from '@/components/tilted-button.vue'
+import ButtonEvo from '@/components/button-evo.vue'
+import ImgBtnEvo from '@/components/img-btn-evo.vue'
+import SectionHeading from '@/components/section-heading.vue'
+import dayjs from 'dayjs'
 
 defineOptions({
   name: 'Home',
@@ -48,6 +53,11 @@ const { data: studyTours, run: setStudyTours } = useRequest(() => getMyStudyTour
 })
 const swiperData = ref<{ data: any }[]>()
 const swiperCurrent = ref(0)
+const currentStudyTour = computed(() =>
+  studyTours.value.find(
+    (it) => dayjs(it.studyStartTime).isBefore(dayjs()) && dayjs(it.studyEndTime).isAfter(dayjs()),
+  ),
+)
 
 const toAbout = () => {
   uni.navigateTo({ url: '/pages/home/about/index' })
@@ -71,6 +81,12 @@ onShow(async () => {
 onLoad(async () => {
   await setIndexConfigsData()
   await setStudyTours()
+  console.log(
+    studyTours.value.map((it) => [
+      dayjs(it.studyStartTime).format('YYYY-MM-DD HH:mm'),
+      dayjs(it.studyEndTime).format('YYYY-MM-DD HH:mm'),
+    ]),
+  )
   swiperData.value = indexConfigsData.value.list.map((it) => ({
     data: it,
   }))
@@ -136,9 +152,31 @@ onShareAppMessage(async ({ from, target }) => {
       </swiper>
     </view>
     <view class="bg-[#f6f6f6] relative bottom-4 rounded-t-2xl py-1">
-      <template v-if="studyTours?.length">
-        <ScheduleCard custom-class="my-6 mx-3.5" :items="studyTours"></ScheduleCard>
+      <template v-if="currentStudyTour">
+        <ScheduleCard
+          custom-class="my-6 mx-3.5"
+          :items="currentStudyTour.studyTravelDOList"
+        ></ScheduleCard>
       </template>
+      <SectionHeading title="按钮调试"></SectionHeading>
+      <div class="flex">
+        <TiltedButton size="large" custom-class="w-30"></TiltedButton>
+        <ButtonEvo>神奇按钮</ButtonEvo>
+        <ImgBtnEvo></ImgBtnEvo>
+      </div>
+      <!-- <div class="flex flex-col gap-1">
+        <button>咲</button>
+        <ButtonEvo custom-class="w-auto!">咲</ButtonEvo>
+        <ButtonEvo custom-class="">遥星</ButtonEvo>
+        <ButtonEvo custom-class="">血不染</ButtonEvo>
+        <ButtonEvo custom-class="">天地不容</ButtonEvo>
+        <ButtonEvo custom-class="">飒沓如流星</ButtonEvo>
+        <ButtonEvo custom-class="">君有才能纵捭阖</ButtonEvo>
+        <div class="w-full">
+          <ButtonEvo custom-class="" block>诗仙纵横,刀剑茫茫去不还</ButtonEvo>
+        </div>
+        <ButtonEvo color="red" size="lg">敌无命</ButtonEvo>
+      </div> -->
       <menus></menus>
       <!-- <view class="my-6 mx-3.5">
         <HotActivity></HotActivity>

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

@@ -422,4 +422,27 @@ onPageScroll(({ scrollTop }: { scrollTop: number }) => {
   </view>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.uni-button:after {
+  position: '' bsolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  content: '';
+  background: #03f463;
+  transform: skewX(15deg);
+}
+.aaaa {
+  &::before {
+    position: '' bsolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    content: '';
+    background: #03f463;
+    transform: skewX(15deg);
+  }
+}
+</style>

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

@@ -7,6 +7,9 @@ import { useUserStore } from '../../../store'
 import { storeToRefs } from 'pinia'
 import { updateMemberUserInfo } from '../../../core/libs/requests'
 import { NetImages } from '../../../core/libs/net-images'
+import ButtonEvo from '@/components/button-evo.vue'
+import TiltedButton from '@/components/tilted-button.vue'
+import ImgBtnEvo from '@/components/img-btn-evo.vue'
 
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
@@ -84,3 +87,28 @@ const handleLogout = () => {
     <div><wd-button block :round="false" @click="handleLogout">退出登录</wd-button></div>
   </div>
 </template>
+<style lang="scss">
+.aaaa {
+  &:after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    content: '';
+    background: #03f463;
+    border-radius: 10px;
+    transform: skewX(15deg);
+  }
+  &::before {
+    position: absolute;
+    top: 0;
+    right: -13px;
+    width: 100px;
+    height: 64px;
+    content: '';
+    background: orange;
+    border-radius: 10px;
+  }
+}
+</style>