收藏列表

.env

@@ -1,5 +1,5 @@
 #TARO_APP_API=https://yjx.dev.yaojiankang.top
-TARO_APP_API=https://mooc.yaojiankang.top
+#TARO_APP_API=https://mooc.yaojiankang.top
-#TARO_APP_API=https://shopfix.yaojiankang.top
+TARO_APP_API=https://shopfix.yaojiankang.top
 #TARO_APP_API=https://playedu.yaojiankang.top
 TARO_APP_LGOIN=true

src/api/user.ts

@@ -98,4 +98,8 @@ export const userApi = {
   // putAvatar(file: string) {
   //   return request('/api/v1/user/avatar', "PUT", {file})
   // }
+  /** 收藏列表 */
+  collectList(owner_type: number, page: number, page_size: number) {
+    return request<{ data: any[], total: number }>('/api/v1/collect/list', "GET", {owner_type, page, page_size})
+  },
 }

src/app.config.ts

@@ -94,6 +94,7 @@ export default defineAppConfig({
         'illness/article/article',
         'webView/webView',
         'search/search/index',
+        'collect/collect', // 收藏列表
       ]
     },
   ],

src/pages/my/components/header/service.tsx

@@ -8,7 +8,8 @@ import cur from '@/static/img/cur.png'
 import userInfo from '@/static/img/userInfo.png'
 import spotMeeting from '@/static/img/spotMeeting.png'
 import course from '@/static/img/course.png'
-import {userApi} from "@/api";
+import collect from "@/static/img/icon-collect.png"
+import {userApi} from "@/api"
 
 interface List {
   title: string;
@@ -39,6 +40,7 @@ const Service = () => {
         {title: '课程管理', src: course, router: '/pages/manage/courseAdmin/courseAdmin'},
         {title: '个人中心', src: userInfo, router: '/pages/business/userInfo/userInfo'},
         {title: '历史记录', src: cur, router: '/pages/business/history/history'},
+        {title: '我的收藏', src: collect, router: '/pages/preview/collect/collect'},
       ])
     } else {
       setList([

src/pages/my/my.tsx

@@ -15,6 +15,7 @@ import over from "@/static/img/over.png";
 import incomplete from "@/static/img/incomplete.png";
 import avatar from "@/static/img/avatar.png";
 
+
 interface List {
   title: string
   time: string | number

src/pages/preview/collect/collect.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '收藏列表',
+})

src/pages/preview/collect/collect.module.scss

@@ -0,0 +1,63 @@
+.height {
+  height: calc(100vh - 80rpx - env(safe-area-inset-bottom));
+  overflow: hidden;
+  box-sizing: border-box;
+}
+
+.box {
+  margin-left:30rpx;
+  margin-bottom: 24rpx;
+  width:690rpx;
+  display: flex;
+  margin-bottom: 20rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  box-sizing: border-box;
+  position: relative;
+}
+.image{
+  background-color: #ededed;
+  border-radius: 8rpx;
+}
+.play {
+  position: absolute;
+  z-index: 9999;
+  width: 50rpx !important;
+  height: 50rpx !important;
+  top: 99rpx;
+  left: 99rpx;
+  background: transparent !important;
+}
+.rightBox{
+  padding-left: 24rpx;
+  box-sizing: border-box;
+  flex: 1;
+}
+.articleLeftBox{
+  padding-right: 24rpx;
+  box-sizing: border-box;
+  flex: 1;
+}
+.videoRightBox{
+  padding-left: 24rpx;
+  box-sizing: border-box;
+  flex: 1;
+}
+.courseRightBox{
+  padding-left: 24rpx;
+  box-sizing: border-box;
+  flex: 1;
+}
+.desc{
+  font-size: 24rpx;
+  font-weight: 500;
+  color: #909795;
+  line-height: 34rpx;
+  display: -webkit-box;
+  word-break: break-all;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:2;
+}

src/pages/preview/collect/collect.tsx

@@ -0,0 +1,203 @@
+import {Image, ScrollView, Swiper, SwiperItem, View} from "@tarojs/components";
+import {HomeApi, userApi} from "@/api";
+import {useEffect, useState} from "react";
+import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs";
+import Empty from "@/components/empty/empty";
+import Taro from "@tarojs/taro";
+import styles from './collect.module.scss'
+import Spin from "@/components/spinner";
+import Img from "@/components/image/image";
+import {rfc33392time} from "@/utils/day";
+import play from "@/static/img/play.png";
+
+interface KillData {
+  data: Kill[]
+  total: number
+  page: number
+}
+
+const Profession = () => {
+  const [tabs, setTabs] = useState<TabList[]>([])
+  const [categoryId, setCategoryId] = useState<number | null>(null)
+  const [data, setData] = useState<Map<number, KillData>>(new Map)
+  const [enable, setEnable] = useState(true)
+
+  /**
+   * more 开启加载更多
+   */
+  async function getData(more = false) {
+    if (!categoryId) return;
+    const oldData = new Map<number, KillData>(data)
+    const categoryData = oldData.get(categoryId)
+    const page = more ? (categoryData?.page || 0) + 1 : categoryData?.page || 1
+
+    /** 无更多 */
+    if (more && categoryData && categoryData.data.length >= categoryData.total) {
+      return
+    }
+
+    try {
+      const res = await userApi.collectList(categoryId!, page, 10)
+      const dataList = res.data.reduce((pre, cur) => {
+        const index = pre.findIndex(d => d.id === cur.id)
+        if (index === -1) {
+          pre.push(cur)
+        } else {
+          pre.splice(index, 1, cur)
+        }
+        return pre
+      }, categoryData?.data || [])
+      oldData.delete(categoryId)
+      oldData.set(categoryId, {
+        data: dataList,
+        total: res.total,
+        page: page
+      })
+      setData(oldData)
+    } catch (e) {
+    }
+  }
+
+  useEffect(() => {
+    categoryId && getData()
+  }, [categoryId])
+
+  async function getCategory() {
+    try {
+      const res = [{name:'视频',id:2},{name:'文章',id:1},{name:'课程',id:3},{name:'其他',id:4}]
+      const newTabs = res.map<TabList>(d => ({title: d.name, value: d.id}))
+      setTabs(newTabs)
+      setCategoryId(newTabs[0].value as number)
+    } catch (e) {
+    }
+    setEnable(false)
+  }
+
+  function tabsChange(tab: OnChangOpt) {
+    setCategoryId(tab.tab?.value as number)
+  }
+
+  // function jump(kill: Kill) {
+  //   HomeApi.skillSetPlay(kill.id)
+  //   Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${kill.resource.url}&poster=${kill.url_path}&title=${kill.resource.name}`})
+  // }
+
+  function jumpInfo(id: number,type:string,health:any) {
+    console.log(type,'type')
+    let url = ''
+    switch (type){
+      case 'brand':
+        url = '/pages/preview/brand/info/info';
+        break;
+      case 'illness':
+        url = '/pages/preview/illness/list/list';
+        break;
+      case 'article':
+        url = '/pages/preview/illness/article/article'
+        break
+      case 'video_records':
+        return  Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${health.resources.url}&poster=${health.url_path}&title=${health.title}`})
+      case 'courses':
+        url = '/pages/business/videoInfo/videoInfo'
+        break
+    }
+    Taro.navigateTo({url: `${url}?id=${id}`})
+
+  }
+
+  function swiperChange(e) {
+    const categoryId = tabs[e.target.current].value
+    setCategoryId(Number(categoryId))
+  }
+
+  Taro.useLoad(getCategory)
+
+  function KillList(data: KillData): JSX.Element {
+    if (!data?.data?.length) {
+      return <Empty name='暂无数据'/>
+    }
+    return (
+      <ScrollView
+        scrollY
+        onScrollToLower={() => getData(true)}
+        className={styles.height}>
+        {
+          data.data.map(d =>
+            <View onClick={() => jumpInfo(d.data.id,d.data.table,d.data['@data'])} className={styles.box} key={d.data.id}>
+              {
+                d.data.table === 'brand' &&
+                <>
+                  <Img width={128} height={128} src={d.data?.logo} mode='aspectFill' className={styles.image}/>
+                  <View className={styles.rightBox}>
+                    <View className='font-weight mb-2 font-28'>{d.data.title}</View>
+                    <View className={styles.desc}>{d.data.content || '暂无品牌简介'}</View>
+                  </View>
+                </>
+              }
+              {
+                d.data.table === 'article' &&
+                <>
+                  <View className={styles.articleLeftBox}>
+                    <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
+                    <View className={styles.desc}>{rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读</View>
+                  </View>
+                  <Img width={172} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
+                </>
+              }
+              {
+                d.data.table === 'video_records' &&
+                <>
+                  <Img width={192} height={192} src={d.data['@data'].url_path} mode='aspectFill' className={styles.image}/>
+                  <Image src={play} className={styles.play} mode='aspectFit'/>
+                  <View className={styles.videoRightBox}>
+                    <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
+                    <View className={styles.desc}>{d.data['@data'].introduction}</View>
+                    <View className={`${styles.desc} mt-2`}>播放量: {d.data['@data'].video_view}</View>
+                  </View>
+                </>
+              }
+              {
+                d.data.table === 'courses' &&
+                <>
+                  <Img width={192} height={138} src={d.data['@data'].thumb} mode='aspectFill' className={styles.image}/>
+                  <View className={styles.courseRightBox}>
+                    <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
+                    <View className={styles.desc}>课时:{d.data['@data'].class_hour}节   销量：{d.data['@data'].charge}</View>
+                  </View>
+                </>
+              }
+
+
+
+
+            </View>
+          )
+        }
+        <View className='text-center font-24 text-dark mt-2'>暂无更多</View>
+      </ScrollView>
+    )
+  }
+
+
+  return (
+    <>
+      <Spin enable={enable} overlay/>
+      <View className='bg-white'>
+        <Tabs tabList={tabs} onChange={tabsChange} current={categoryId!}/>
+      </View>
+
+      <Swiper
+        current={tabs.findIndex(d => d.value === categoryId)}
+        onChange={swiperChange}
+        className={styles.height}
+        style={{paddingTop: '10px'}}>
+        {
+          tabs.map(d => <SwiperItem key={d.title}>
+            {KillList(data.get(Number(d.value))!)}
+          </SwiperItem>)
+        }
+      </Swiper>
+    </>
+  )
+}
+export default Profession

src/pages/preview/search/search/components/list.module.scss

@@ -38,6 +38,11 @@
   box-sizing: border-box;
   flex: 1;
 }
+.courseRightBox{
+  padding-left: 24rpx;
+  box-sizing: border-box;
+  flex: 1;
+}
 .desc{
   font-size: 24rpx;
   font-weight: 500;

src/pages/preview/search/search/components/list.tsx

@@ -97,7 +97,7 @@ const SearchList: FC<Props> = ({name,clear}) => {
       className='scrollview'
       scrollY
       scrollWithAnimation
-      style={{height:`${globalData.windowHeight-140}px`,backgroundColor:`#f5f5f5`}}
+      style={{height:`${globalData.screenHeight-140}px`,backgroundColor:`#f5f5f5`}}
       onScrollToLower={onScrollToLower}
     >
       { loading && <AtLoadMore status={'loading'}/>}
@@ -142,7 +142,7 @@ const SearchList: FC<Props> = ({name,clear}) => {
                   d.data.table === 'courses' &&
                   <>
                     <Img width={192} height={138} src={d.data['@data'].thumb} mode='aspectFill' className={styles.image}/>
-                    <View className={styles.articleLeftBox}>
+                    <View className={styles.courseRightBox}>
                       <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
                       <View className={styles.desc}>课时:{d.data['@data'].class_hour}节   销量：{d.data['@data'].charge}</View>
                     </View>