Browse Source

Merge branch 'main' of https://github.com/omnia96/designer-hub

Jake 3 months ago
parent
commit
3232ef85ee

+ 54 - 0
packages/app/src/components/button-evo.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { omit } from 'radash'
+
+// const theme
+interface ComponentProps {
+  block?: boolean
+  color?: string
+  size?: 'lg'
+}
+const props = withDefaults(
+  defineProps<{ customClass?: string; skew?: boolean } & ComponentProps>(),
+  { color: 'primary' },
+)
+const themeVars = { primary: '--evo-theme-primary' }
+const btnThemeClass = { primary: 'before:bg-[--evo-theme-primary] after:bg-[--evo-theme-primary]' }
+
+// const color = computed(() => (theme[props.color] ? theme[props.color] : props.color || 'black'))
+const buttonProps = computed(() => omit(props, ['color']))
+const btnClass = computed(
+  () => `${btnThemeClass[props.color] || `before:bg-[--color] after:bg-[--color]`}`,
+)
+const height = computed(() => ({ lg: '2.75rem' })[props.size] || '2.75rem')
+</script>
+<template>
+  <button
+    class="left-skew relative bg-transparent hover:bg-transparent h-[--evo-btn-height]!"
+    :class="`${btnClass}`"
+    :style="{ '--color': color, '--evo-btn-height': height }"
+    :block="block"
+  >
+    <div class="w-full h-full flex items-center justify-center relative z-1 c-white">
+      <slot></slot>
+    </div>
+  </button>
+</template>
+<style lang="scss">
+/* 左侧倾斜的按钮 */
+
+.left-skew {
+  //   @apply bg-blue-500 text-white px-6 rounded text-center relative;
+  //   clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
+  //   transition: all 0.3s ease;
+  @apply border-black  border-1 h-11 pl-8 pr-4.75 opacity-85 box-border border-red;
+  &::before {
+    @apply content-empty absolute top-0 right-5 bottom-0 left-1.25 skew-x-154 rounded-tl-1.25 rounded-bl-3.75;
+  }
+  &::after {
+    @apply content-empty absolute top-0 right-0 bottom-0 left-6 w-auto h-auto rounded-2.5 b-none z-0 transform-none;
+  }
+  &:active {
+    // @apply opacity-75;
+  }
+}
+</style>

+ 1 - 0
packages/app/src/core/themes/default.scss

@@ -1,5 +1,6 @@
 :root,
 page {
+  --evo-theme-primary: black;
 }
 .wd-button {
   line-height: 0;

+ 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>

+ 120 - 103
packages/app/src/pages/home/schedule/index.vue

@@ -12,137 +12,154 @@ import { storeToRefs } from 'pinia'
 import { group } from 'radash'
 import dayjs from 'dayjs'
 import NavbarEvo from '@/components/navbar-evo.vue'
+import BottomAppBar from '@/components/bottom-app-bar.vue'
+import ButtonEvo from '@/components/button-evo.vue'
+import { useRouter } from '../../../core/utils/router'
 
+const router = useRouter()
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
-const { data, run } = useRequest(() => getMyStudyTours(), { initialData: [] })
+const { data: studyTours, run: setStudyTours } = useRequest(() => getMyStudyTours(), {
+  initialData: [],
+})
+const currentStudyTour = computed(() =>
+  studyTours.value.find(
+    (it) => dayjs(it.studyStartTime).isBefore(dayjs()) && dayjs(it.studyEndTime).isAfter(dayjs()),
+  ),
+)
+const schedules = computed(() =>
+  group(currentStudyTour.value.studyTravelDOList, (it) =>
+    dayjs(it?.travelTime).format('YYYY-MM-DD'),
+  ),
+)
 
 onMounted(() => {
-  run()
+  setStudyTours()
 })
 </script>
 <template>
   <view class="">
     <NavbarEvo transparent dark></NavbarEvo>
     <view class="bg-black w-full pos-relative aspect-[1.26/1]">
-      <!-- <wd-img width="100%" height="100%" :src="data?.cover" /> -->
+      <wd-img width="100%" height="100%" mode="aspectFill" :src="currentStudyTour?.backgroundUrl" />
       <div
         class="w-[375px] h-[90px] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
       >
-        <view class="mx-7">
+        <!-- <view class="mx-7">
           <wd-button plain custom-class="bg-transparent! border-white! text-white!">
             02:30
           </wd-button>
-        </view>
+        </view> -->
       </div>
     </view>
     <view class="bg-white relative bottom-4 rounded-t-2xl p-6.5">
-      <template v-for="(it, i) in data" :key="i">
-        <view class="border-b border-black/10 border-b-solid pb-5">
-          <div class="text-black/90 text-2xl font-normal font-['PingFang_SC'] leading-normal">
-            {{ it.name }}
+      <view class="border-b border-black/10 border-b-solid pb-5">
+        <div class="text-black/90 text-2xl font-normal font-['PingFang_SC'] leading-normal">
+          {{ currentStudyTour?.name }}
+        </div>
+        <view class="flex mt-5">
+          <wd-img
+            custom-class="rounded-full overflow-hidden mr-1"
+            width="22"
+            height="22"
+            :src="userInfo?.avatar"
+          />
+          <div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-normal">
+            {{ userInfo?.nickname }}
           </div>
-          <template
-            v-for="(date, index) in group(it.studyTravelDOList, (it) =>
-              dayjs(it?.travelTime).format('YYYY-MM-DD'),
-            )"
-            :key="index"
-          >
-            <view class="flex mt-5">
-              <wd-img
-                custom-class="rounded-full overflow-hidden mr-1"
-                width="22"
-                height="22"
-                :src="userInfo?.avatar"
-              />
-              <div class="text-black/40 text-base font-normal font-['PingFang_SC'] leading-normal">
-                {{ userInfo?.nickname }}
-              </div>
+          <div class="flex text-black/40 text-base font-normal font-['PingFang_SC'] leading-normal">
+            <view class="mx-3.5">|</view>
+            <!-- 6月26日 第二天 -->
+            {{ dayjs().format('M月D日') }}
+            第{{
+              Object.keys(schedules).findIndex((it) => it === dayjs().format('YYYY-MM-DD')) + 1
+            }}天
+          </div>
+        </view>
+      </view>
+      <template
+        v-for="(date, index) in group(currentStudyTour?.studyTravelDOList, (it) =>
+          dayjs(it?.travelTime).format('YYYY-MM-DD'),
+        )"
+        :key="index"
+      >
+        <template v-for="(item, itemIndex) in date" :key="itemIndex">
+          <view class="grid grid-gap-2 mt-8">
+            <view class="col-start-1 row-start-1 flex items-center justify-center">
+              <view
+                class="w-[27px] h-[27px] bg-[#f6f6f6] rounded-full flex justify-center items-center"
+              >
+                <wd-img width="16" height="16" :src="map"></wd-img>
+              </view>
+            </view>
+            <view class="col-start-2 row-start-1 flex">
               <div
-                class="flex text-black/40 text-base font-normal font-['PingFang_SC'] leading-normal"
+                class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal mr-5"
               >
-                <view class="mx-3.5">|</view>
-                <!-- 6月26日 第二天 -->
-                {{
-                  // Object.keys(
-                  //   group(it.studyTravelDOList, (it) => dayjs(it.travelTime).format('YYYY-MM-DD')),
-                  // )
-                  dayjs(date.at(i)?.travelTime).format('MM月DD日')
-                }}
+                {{ dayjs(item?.travelTime).format('HH:mm') }}
+              </div>
+              <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal">
+                {{ item.title }}
               </div>
             </view>
-            <template v-for="(item, itemIndex) in date" :key="itemIndex">
-              <view class="grid grid-gap-2 mt-8">
-                <view class="col-start-1 row-start-1 flex items-center justify-center">
-                  <view
-                    class="w-[27px] h-[27px] bg-[#f6f6f6] rounded-full flex justify-center items-center"
-                  >
-                    <wd-img width="16" height="16" :src="map"></wd-img>
-                  </view>
-                </view>
-                <view class="col-start-2 row-start-1 flex">
-                  <div
-                    class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal mr-5"
-                  >
-                    {{ dayjs(item?.travelTime).format('HH:mm') }}
-                  </div>
-                  <div
-                    class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-normal"
-                  >
-                    {{ item.title }}
-                  </div>
-                </view>
-                <view class="col-start-2 row-start-2 border-b border-black/10 border-b-solid pb-5">
-                  <div class="">
-                    <span
-                      class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-[23px]"
-                    >
-                      行程介绍:
-                    </span>
-                    <span
-                      class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[23px]"
-                      v-html="item.travelDesc"
-                    ></span>
-                  </div>
-                  <view class="flex items-center my-4">
-                    <wd-img width="16" height="16" :src="camera"></wd-img>
-                    <div
-                      class="ml-1 text-black/90 text-xs font-normal font-['PingFang_SC'] leading-normal"
-                    >
-                      打卡示例
-                    </div>
-                  </view>
-                  <img class="w-[285px] h-[157px] rounded-lg" :src="item.clockExplainUrl" />
-                  <div
-                    class="mt-2.5 text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal"
-                  >
-                    {{ item.clockExplainDesc }}
-                  </div>
-                </view>
+            <view
+              class="col-start-2 row-start-2 border-b border-black/10 pb-5"
+              :class="`${itemIndex < date.length - 1 ? 'border-b-solid' : ''}`"
+            >
+              <div class="">
+                <span class="text-black/60 text-sm font-normal font-['PingFang_SC'] leading-[23px]">
+                  行程介绍:
+                </span>
+                <span
+                  class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[23px]"
+                  v-html="item.travelDesc"
+                ></span>
+              </div>
+              <view class="flex items-center my-4">
+                <wd-img width="16" height="16" :src="camera"></wd-img>
+                <div
+                  class="ml-1 text-black/90 text-xs font-normal font-['PingFang_SC'] leading-normal"
+                >
+                  打卡示例
+                </div>
               </view>
-            </template>
-            <!-- <template v-for="(it, index) in data.items" :key="index">
-            </template> -->
-          </template>
-        </view>
+              <div class="w-[285px]">
+                <img
+                  v-if="item.clockExplainUrl"
+                  class="w-[285px] h-[157px] rounded-lg"
+                  :src="item.clockExplainUrl"
+                />
+              </div>
+              <div
+                class="mt-2.5 text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal"
+              >
+                {{ item.clockExplainDesc }}
+              </div>
+            </view>
+          </view>
+        </template>
       </template>
     </view>
-    <!-- <div
-      class="mx-3.5 p-3.5 bg-white/90 rounded-2xl backdrop-blur-[20px] fixed bottom-4 left-0 right-0 flex items-center justify-between"
-    >
-      <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
-        发布圈子可得
-      </div>
-      <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN Exp'] leading-normal">
-        16000
+    <BottomAppBar fixed>
+      <div
+        class="p-3.5 bg-white/90 rounded-2xl backdrop-blur-[20px] bottom-4 left-0 right-0 flex items-center justify-between gap-1"
+      >
+        <!-- <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
+          发布圈子可得
+        </div>
+        <div class="text-[#ef4343] text-[22px] font-normal font-['D-DIN Exp'] leading-normal">
+          16000
+        </div>
+        <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]">
+          积分
+        </div> -->
+        <view class="flex-1"></view>
+        <view>
+          <ButtonEvo size="lg" @click="router.push('/pages/publish/moment/index')">
+            发圈子
+          </ButtonEvo>
+        </view>
       </div>
-      <div class="text-black/40 text-sm font-normal font-['PingFang_SC'] leading-[34px]">积分</div>
-      <view class="flex-1"></view>
-      <view>
-        <TiltedButton size="large" custom-class="">
-          <view class="px-3">发圈子</view>
-        </TiltedButton>
-      </view>
-    </div> -->
+    </BottomAppBar>
   </view>
 </template>

+ 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>