feat(app): 会员等级页面

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

@@ -0,0 +1,26 @@
+import { group } from 'radash'
+
+export const levels = [
+  {
+    level: 1,
+    bgImg:
+      'https://image.zhuchaohui.com/zhucaohui/997de03a59d201c7b5dc124561925431abdc849cc7044ad4fb7c758bc12fafb2.png',
+  },
+  {
+    level: 2,
+    bgImg:
+      'https://image.zhuchaohui.com/zhucaohui/77b6712b1cab7e769b630010be01eceec6cdd27f6947777b5a805e3cbf077db4.png',
+  },
+  {
+    level: 3,
+    bgImg:
+      'https://image.zhuchaohui.com/zhucaohui/60811dfd5c5a4fa7502cfc2ff3db188849d4f9363849420ba72e32c03f20eca5.png',
+  },
+  {
+    level: 4,
+    bgImg:
+      'https://image.zhuchaohui.com/zhucaohui/77b6712b1cab7e769b630010be01eceec6cdd27f6947777b5a805e3cbf077db4.png',
+  },
+]
+// export const levelsByLevel =
+export const levelsByLevel = group(levels, ({ level }) => level)

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

@@ -1,6 +1,6 @@
 import { httpGet, httpPost, httpPut } from '../../utils/http'
 import { Schedule } from '../models/schedule'
-import { DictType, MaterialDealer, MaterialDealerRes, Moment } from '../models/moment'
+import { Content, DictType, MaterialDealer, MaterialDealerRes, Moment } from '../models/moment'
 import dayjs from 'dayjs'
 
 export const getUserInfo = () =>
@@ -271,6 +271,10 @@ export const getAppMaterial = (id: number) =>
   httpGet<MaterialDealerRes>('/app-api/member/materials/queryHomePage', { id })
 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 getContent = (query: { id: string }) =>
+  httpGet<Content>('/app-api/member/content-manger/get', query)
 export const refreshToken = (refreshToken: string) =>
   httpPost<any>('/app-api/member/auth/refresh-token', {}, { refreshToken })
 export const httpGetMock = <T>(data: T) =>

packages/app/src/core/models/moment.ts

@@ -109,6 +109,81 @@ export interface MaterialDealerRes {
   pointsRate: number
   materialsList: MaterialsList[]
 }
+export interface Content {
+  id: number
+  /**
+   * 内容类型 - 0: 设计游学
+   */
+  contentType: string
+  /**
+   * 内容类型名称
+   */
+  contentTypeName: string
+  /**
+   * 内容分类
+   */
+  contentCategory: string
+  /**
+   * 内容分类名称
+   */
+  contentCategoryName: string
+  /**
+   * 内容标题
+   */
+  title: string
+  /**
+   * 班级
+   */
+  classGrade: string
+  /**
+   * 游学开始时间
+   */
+  studyStartDate: string
+  /**
+   * 游学结束时间
+   */
+  studyEndDate: string
+  /**
+   * 游学人数
+   */
+  studyPersonCount: number
+  /**
+   * 领队
+   */
+  studyLeader: string
+  /**
+   * 班长
+   */
+  studyMonitor: string
+  bannerUrl: string
+  /**
+   * 内容详情
+   */
+  contentDetail: string
+  /**
+   * 期数
+   */
+  periodsCount: number
+  /**
+   * 活动，举办开始时间
+   */
+  hostDate: string
+  /**
+   * 举办方
+   */
+  activityHost: string
+  /**
+   * 赞助品牌
+   */
+  supportBrand: string
+  /**
+   * 状态 - 0: 正常, 1: 停用
+   */
+  status: number
+  viewsCount: number
+  viewCount30Day: number
+  createTime: string
+}
 export enum DictType {
   /**
    *  擅长空间类型

packages/app/src/core/utils/router.ts

@@ -1,3 +1,12 @@
 export const back = () => {
   uni.navigateBack()
 }
+export const useRouter = () => {
+  const push = async (path: string) => {
+    uni.navigateTo({ url: path })
+  }
+  const back = () => {
+    uni.navigateBack()
+  }
+  return { push, back }
+}

packages/app/src/pages.json

@@ -284,6 +284,13 @@
       }
     },
     {
+      "path": "pages/mine/levels/index",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
       "path": "pages/mine/orders/index",
       "type": "page",
       "style": {

packages/app/src/pages/home/index.vue

@@ -15,7 +15,6 @@ import HotActivity from '@/components/hot-activity.vue'
 import MomentItem from '@/components/moment-item.vue'
 import useRequest from '../../hooks/useRequest'
 import Menus from './components/menus.vue'
-import ScheduleCard from './components/schedule-card.vue'
 import { getCircles, getSetIndexConfigs } from '../../core/libs/requests'
 import { logo } from '../../core/libs/svgs'
 

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

@@ -1,16 +1,24 @@
 <script lang="ts" setup>
 import TiltedButton from '@/components/tilted-button.vue'
-import { studyTourItemBg } from '@/core/libs/pngs'
-defineProps({
+import { studyTourItemBg } from '../../../../core/libs/pngs'
+import { PropType } from 'vue'
+import { Content } from '../../../../core/models/moment'
+import dayjs from 'dayjs'
+import { useRouter } from '../../../../core/utils/router'
+
+const props = defineProps({
   customClass: {
     type: String,
     default: () => '',
   },
+  options: {
+    type: Object as PropType<Content>,
+    default: () => ({}),
+  },
 })
+const router = useRouter()
 const toDetail = () => {
-  uni.navigateTo({
-    url: '/pages/home/study-tour/detail',
-  })
+  router.push(`/pages/home/study-tour/detail?id=${props.options.id}`)
 }
 </script>
 <template>
@@ -26,7 +34,11 @@ const toDetail = () => {
             <div
               class="left-0 top-0 absolute text-black/40 text-sm font-normal font-['PingFang SC'] leading-[34px]"
             >
-              07.15 08.10
+              <!-- 07.15 08.10 -->
+              {{
+                (dayjs(options.studyStartDate).format('MM.DD'),
+                dayjs(options.studyEndDate).format('MM.DD'))
+              }}
             </div>
           </div>
           <wd-img
@@ -37,7 +49,8 @@ const toDetail = () => {
           <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]"

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

@@ -1,12 +1,30 @@
-<route lang="yaml">
-style:
-  navigationBarTitleText: 游学计划
-  navigationBarBackgroundColor: '#fff'
-  navigationStyle: 'custom'
+<route lang="json">
+{
+  "style": {
+    "navigationBarTitleText": "游学计划",
+    "navigationBarBackgroundColor": "#fff",
+    "navigationStyle": "custom"
+  }
+}
 </route>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { getContent } from '../../../core/libs/requests'
+
+const id = ref()
+const { data, run: setData } = useRequest(() => getContent({ id: id.value }))
+onLoad(async (query: { id: string }) => {
+  id.value = query.id
+  await setData()
+  console.log(data.value)
+})
+</script>
 <template>
-  <div>
-    <div class="asp"></div>
+  <div class="flex-grow bg-dark">
+    <div class="aspect-[1.26/1]">
+      <wd-img width="100%" height="100%" src=""></wd-img>
+    </div>
+    <div class="w-[347px] text-white text-[26px] font-normal font-['PingFang SC'] leading-[44px]">
+      日本研学·东京艺术大学设计游学
+    </div>
   </div>
 </template>

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

@@ -9,7 +9,6 @@ import Card from '@/components/card.vue'
 import MomentItem from '@/components/moment-item.vue'
 import SectionHeading from '@/components/section-heading.vue'
 import TiltedButton from '@/components/tilted-button.vue'
-import { frame, peoples, polygon16 } from '@/core/libs/svgs'
 import ClassItem from '../components/class-item.vue'
 
 const toList = () => {
@@ -18,8 +17,8 @@ const toList = () => {
 </script>
 <template>
   <view class="px-3.5">
-    <view class="my-6">
-      <card class="" @click="toList">查看全部</card>
+    <view class="my-6" @click="toList">
+      <card class="">查看全部</card>
     </view>
     <card custom-class="my-6 p-0!">
       <view class="relative">

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

@@ -1,18 +1,26 @@
-<route lang="yaml">
-style:
-  navigationBarTitleText: 游学计划
-  navigationBarBackgroundColor: '#fff'
+<route lang="json">
+{
+  "style": {
+    "navigationBarTitleText": "游学计划",
+    "navigationBarBackgroundColor": "#fff"
+  }
+}
 </route>
 <script setup lang="ts">
 import SectionHeading from '@/components/section-heading.vue'
-import { studyTourItemBg } from '@/core/libs/pngs'
-import { getStudyTours } from '@/core/libs/requests'
+import { 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 } = useRequest(() => getStudyTours())
+const { data, run: setData } = useRequest(() => getContents({ contentType: '0' }), {
+  initialData: { list: [] },
+})
 const title = computed(() => `${dayjs().year()}年游学计划`)
-onMounted(() => run())
+onMounted(async () => {
+  await setData()
+  console.log(data.value)
+})
 </script>
 <template>
   <div class="px-3.5">
@@ -22,8 +30,8 @@ onMounted(() => run())
     >
       *我们为您精心打造了一个独特且极具价值的游学项目。这个项目的核心旨在全方位提升
     </div>
-    <template v-for="(it, index) in data" :key="index">
-      <StudyTourCard custom-class="my-6"></StudyTourCard>
+    <template v-for="(it, index) in data.list" :key="index">
+      <StudyTourCard custom-class="my-6" :options="it"></StudyTourCard>
     </template>
   </div>
 </template>

packages/app/src/pages/mine/index.vue

@@ -6,23 +6,16 @@
 import { onMounted, ref } from 'vue'
 import CardMenu from '@/components/card-menu.vue'
 import SectionHeading from '@/components/section-heading.vue'
-import { designer, settled, treaty, vipBg, memberTextV1 } from '../../core/libs/pngs'
-import {
-  integral,
-  coupon,
-  order,
-  agent,
-  setting,
-  vip,
-  scan,
-  memberIconV1,
-} from '../../core/libs/svgs'
+import { designer, settled, treaty, vipBg } from '../../core/libs/pngs'
+import { integral, coupon, order, agent, setting, vip, scan } from '../../core/libs/svgs'
 import { getMemberUserInfo, getTasks } from '../../core/libs/requests'
 import { useUserStore } from '../../store'
 import { storeToRefs } from 'pinia'
 import { isEmpty } from 'radash'
 import TasksCard from './components/tasks-card.vue'
+import { useRouter } from '../../core/utils/router'
 
+const router = useRouter()
 const userStore = useUserStore()
 const { isLogined, userInfo } = storeToRefs(userStore)
 const { setUserInfo } = userStore
@@ -43,6 +36,16 @@ const levels = ref({
     bgImg:
       'https://image.zhuchaohui.com/zhucaohui/997de03a59d201c7b5dc124561925431abdc849cc7044ad4fb7c758bc12fafb2.png',
   },
+  2: {
+    color: '#3b5369',
+    bgImg:
+      'https://image.zhuchaohui.com/zhucaohui/77b6712b1cab7e769b630010be01eceec6cdd27f6947777b5a805e3cbf077db4.png',
+  },
+  3: {
+    color: '#3b5369',
+    bgImg:
+      'https://image.zhuchaohui.com/zhucaohui/60811dfd5c5a4fa7502cfc2ff3db188849d4f9363849420ba72e32c03f20eca5.png',
+  },
 })
 const pieces = ref([
   {
@@ -242,6 +245,7 @@ onPageScroll(({ scrollTop }: { scrollTop: number }) => {
             <div class="flex-1"></div>
             <div
               class="h-[22px] bg-gradient-to-r from-[#333333] to-[#20201e] rounded-tl-[20px] rounded-bl-[20px] mr--3.5 px-2 mt-3"
+              @click="router.push('/pages/mine/levels/index')"
             >
               <div class="text-xs font-normal font-['PingFang SC'] leading-relaxed color-[#f3f3f3]">
                 更多等级权益

packages/app/src/pages/mine/levels/index.vue

@@ -0,0 +1,99 @@
+<route lang="json">
+{ "style": { "navigationStyle": "custom" } }
+</route>
+<script setup lang="ts">
+import { levels } from '../../../core/libs/levels'
+import { useRouter } from '../../../core/utils/router'
+import { notify } from '@designer-hub/assets/src/assets/svgs'
+const router = useRouter()
+const current = ref(0)
+const swiperList = ref(levels.map(({ bgImg }) => bgImg))
+const items = ref([
+  {
+    icon: 'https://image.zhuchaohui.com/zhucaohui/95aa37b07a32a571fda86e8f8b89a2e54d1dd36d1250190ed8cfc68d638c3d43.png',
+    title: '会员专属活动',
+    subTitle: '参与平台内的会员活动',
+  },
+  {
+    icon: 'https://image.zhuchaohui.com/zhucaohui/95aa37b07a32a571fda86e8f8b89a2e54d1dd36d1250190ed8cfc68d638c3d43.png',
+    title: '国内外游学项目',
+    subTitle: '参与平台国内外设计游学项目',
+  },
+  {
+    icon: 'https://image.zhuchaohui.com/zhucaohui/95aa37b07a32a571fda86e8f8b89a2e54d1dd36d1250190ed8cfc68d638c3d43.png',
+    title: '专属经纪人',
+    subTitle: '认证成功即可拥有专属经纪人',
+  },
+  {
+    icon: 'https://image.zhuchaohui.com/zhucaohui/95aa37b07a32a571fda86e8f8b89a2e54d1dd36d1250190ed8cfc68d638c3d43.png',
+    title: '销售积分券',
+    subTitle: '得1张200积分的销售积分券，使用时不限制...',
+  },
+])
+</script>
+<template>
+  <div class="flex-grow flex flex-col gap-4 bg-gradient-to-b from-[#312c38] to-[#171322] px-3.5">
+    <wd-navbar
+      left-arrow
+      safe-area-inset-top
+      custom-class="mx--3.5 bg-transparent!"
+      title="会员等级"
+      :bordered="false"
+      @left-click="router.back()"
+    ></wd-navbar>
+    <div class="flex gap-2 bg-gradient-to-r from-[#292331] to-[#35303b] rounded-md px-5 py-1">
+      <wd-img width="22" height="22" :src="notify"></wd-img>
+      <div class="text-[#f1d2c5] text-sm font-normal font-['PingFang SC'] leading-normal">
+        会员成长等级保级规则通知
+      </div>
+    </div>
+    <view class="card-swiper mx--3.5">
+      <wd-swiper
+        :autoplay="false"
+        v-model:current="current"
+        custom-indicator-class="custom-indicator-class"
+        custom-image-class="custom-image"
+        custom-next-image-class="custom-image-prev"
+        custom-prev-image-class="custom-image-prev"
+        :indicator="{ type: 'dots' }"
+        :list="swiperList"
+        previousMargin="24px"
+        nextMargin="24px"
+      ></wd-swiper>
+    </view>
+    <template v-for="({ icon, title, subTitle }, index) in items" :key="index">
+      <div
+        class="bg-[#201d28] rounded-2xl shadow border border-[#504951] border-solid flex gap-4 px-2.5 py-5.5"
+      >
+        <wd-img width="50" height="50" :src="icon"></wd-img>
+        <div class="flex flex-col justify-between flex-1">
+          <div class="text-[#f1d2c5] text-base font-normal font-['PingFang SC']">
+            {{ title }}
+          </div>
+          <div class="text-white/40 text-xs font-normal font-['PingFang SC']">
+            {{ subTitle }}
+          </div>
+        </div>
+        <div></div>
+      </div>
+    </template>
+  </div>
+</template>
+<style lang="scss">
+.card-swiper {
+  --wot-swiper-radius: 0;
+  --wot-swiper-item-padding: 0 24rpx;
+  --wot-swiper-nav-dot-color: #e7e7e7;
+  --wot-swiper-nav-dot-active-color: #4d80f0;
+  padding-bottom: 24rpx;
+  :deep(.custom-indicator-class) {
+    bottom: -16px;
+  }
+  :deep(.custom-image) {
+    border-radius: 12rpx;
+  }
+  :deep(.custom-image-prev) {
+    height: 168px !important;
+  }
+}
+</style>

packages/app/src/types/uni-pages.d.ts

@@ -31,6 +31,7 @@ interface NavigateToOptions {
        "/pages/mine/convention/index" |
        "/pages/mine/coupons/index" |
        "/pages/mine/homepage/index" |
+       "/pages/mine/levels/index" |
        "/pages/mine/orders/index" |
        "/pages/mine/points/index" |
        "/pages/mine/setting/index" |

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

@@ -5,6 +5,7 @@ import channelTabbarMineActive from "./channelTabbarMineActive";
 import addBlue from "./addBlue";
 import shoppingBag from "./shoppingBag";
 import addBlack from "./addBlack";
+import notify from "./notify";
 
 export {
   addBlack,
@@ -14,4 +15,5 @@ export {
   channelTabbarHome,
   channelTabbarHomeActive,
   shoppingBag,
+  notify,
 };

packages/assets/src/assets/svgs/notify.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0449 2.97838C11.7626 2.84561 11.4293 2.88944 11.1896 3.0886L6.56636 6.93645L2.87835 6.92162C2.6663 6.92162 2.46198 7.00541 2.31181 7.15559C2.16034 7.30576 2.07462 7.51008 2.07462 7.72406L2.05786 14.1546C2.05786 14.3685 2.14165 14.5735 2.29247 14.7243C2.44265 14.8764 2.64761 14.9609 2.86159 14.9609H6.5902L11.1902 18.7945C11.3372 18.917 11.5209 18.9802 11.7046 18.9802C11.8206 18.9802 11.9366 18.955 12.0455 18.9041C12.3278 18.772 12.5083 18.4884 12.5083 18.1764V3.70606C12.5083 3.39475 12.3278 3.11115 12.0449 2.97838ZM15.1618 6.99768C14.7654 6.81012 14.2943 6.98092 14.1016 7.37537C13.9095 7.77112 14.0758 8.25 14.469 8.44787C14.5199 8.4743 15.7239 9.10014 15.7239 10.8823C15.7239 12.7862 14.5979 13.4172 14.5605 13.4378C14.1634 13.6363 14.0023 14.1197 14.2008 14.5168C14.3426 14.7991 14.6256 14.9615 14.9214 14.9615C15.0419 14.9615 15.165 14.9344 15.2798 14.8771C15.3636 14.8345 17.3313 13.8162 17.3313 10.8823C17.3313 8.05149 15.2501 7.03957 15.1618 6.99768ZM17.6645 4.63676C17.2939 4.39893 16.8022 4.50721 16.5598 4.87717C16.3188 5.24713 16.4245 5.74471 16.7931 5.98834C16.8801 6.04571 18.9394 7.44885 18.9394 10.9416C18.9394 14.442 16.9639 15.8464 16.8853 15.8999C16.5153 16.1468 16.4161 16.645 16.6623 17.015C16.817 17.247 17.0722 17.3727 17.332 17.3727C17.4847 17.3727 17.64 17.3282 17.7773 17.2373C17.8901 17.1626 20.5469 15.3411 20.5469 10.9409C20.5469 6.53233 17.7825 4.71217 17.6645 4.63676Z" fill="#F1D2C5"/>
+</svg>

packages/assets/src/assets/svgs/notify.ts

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