feats

src/constants/api.js

 
 // 课程
 export const API_COURSE_LIST = resolvePath('curriculum') // 课程列表
+export const API_COURSE_DETAIL = resolvePath('curriculum') // 课程详情
 export const API_MY_COLLECT_COURSE_LIST = resolvePath('curriculum/save') // 我收藏的课程列表
 
 // 特价房源

src/pages/index/activityDetail/index.jsx

     Taro.showLoading();
 
     queryActivityDetail(params).then((res) => {
-      // const maxperson =
-      //   res.maxEnlistByPerson < 100 ? res.maxEnlistByPerson : 100;
-
       const maxperson = 10
-
       setSelector(times(maxperson).map((_, i) => `${i + 1}`));
 
       setDetail(res);

src/pages/index/courseDetail/index.config.js

 export default {
-  navigationBarTitleText: '课程详情'
+  navigationBarTitleText: '课程详情',
+  enableShareAppMessage: true
 }

src/pages/index/courseDetail/index.jsx

-
+import { useEffect, useState } from 'react'
 import withLayout from '@/layout'
 import { ScrollView, Image, Swiper, SwiperItem } from '@tarojs/components'
 // import Taro from '@tarojs/taro'
 import { getImgURL } from '@/utils/image'
+import { API_COURSE_DETAIL } from '@/constants/api'
+import { fetch } from '@/utils/request'
+import useFavor from "@/utils/hooks/useFavor";
+import useParams from "@/utils/hooks/useParams";
+import useShare from "@/utils/hooks/useShare";
 import '@/assets/css/iconfont.css'
 import './index.scss'
 
+const TYPE_RICH = 0
+const TYPE_VIDEO = 1
+
 export default withLayout((props) => {
-  const { List = [] } = props
+  const { router, shareContent, trackData, person, page } = props
+  const { id } = router.params
+
+  const [detail, setDetail] = useState({})
+  // 本页面分享或者海报参数
+  const paramsRef = useParams({
+    id,
+    person,
+    from: `${page.type}_share`,
+  });
+  useShare(
+    {
+      title: shareContent.shareContentTitle || detail?.title,
+      path: `${router.path}?${paramsRef.current}`,
+      image: shareContent.shareContentImg || getImgURL(detail?.curriculumImg),
+    },
+    trackData
+  );
+  const [isSaved, handleFavor] = useFavor(detail?.isSaved, { id, ...trackData });
+
+  useEffect(() => {
+    if (id) {
+      fetch({ url: `${API_COURSE_DETAIL}/${id}`, spin: true }).then((res) => {
+        setDetail(res || {})
+      })
+    }
+  }, [id])
 
   return (
     <view className='Page courseDetail'>
           {/* 轮播图 or 主图 */}
           <view className='Banner'>
             <view>
-              <Swiper autoplay interval={2000} indicator-dots>
+              {/* <Swiper autoplay interval={2000} indicator-dots>
                 {
                   List.map((item, index) => (
                     <SwiperItem key={`Banner-${index}`}>
                     </SwiperItem>
                   ))
                 }
-              </Swiper>
+              </Swiper> */}
+              <Image mode='aspectFill' className='centerLabel' src={getImgURL(detail.curriculumImg)} />
             </view>
           </view>
 
 
             <view className='flex-h Title'>
               <view className='flex-item'>
-                <text className='Name'>句容·恒大养生谷</text>
+                <text className='Name'>{detail.name}</text>
                 <view className='Address flex-h'>
                   <view className='flex-item'>
-                    <text>课程内容课程内容课程内容课程内容课程内容课程内容课程内容..</text>
+                    <text>{detail.remark}</text>
                   </view>
                 </view>
-                <text className='Time'>4568人在阅读</text>
+                <text className='Time'>{`${detail.lookNum||0}人阅读`}</text>
               </view>
               <view className='Option'>
-                <view>
+                <button openType='share'>
                   <text className='iconfont icon-fenxiang1'></text>
                   <text>分享</text>
-                </view>
-                <view>
-                  <text className='iconfont icon-haibao'></text>
-                  <text>海报</text>
+                </button>
+                <view onClick={handleFavor}>
+                  <text className='iconfont icon-shoucang' style={isSaved ? { color: 'red' } : undefined}></text>
+                  <text>{isSaved ? '已收藏' : '收藏'}</text>
                 </view>
               </view>
             </view>
             <view className='Title'>
               <text>课程详情</text>
             </view>
-            <view className='DescContent'></view>
-          </view>
-
-          <view className='Bottom'>
-            <view>
-              <view>
-                <text className='iconfont icon-shengming'></text>
-                <text>免责声明</text>
-              </view>
-              <view>
-                <text>&emsp;&emsp;以上价格仅供参考,具体一房一价的信息以售楼处展示为准。房屋位置交通、医疗、教育、商业等配套信息，来源于第三方不作为要约,仅供参考,双方具体权利义务应以法律规定及买卖合同约定为准。本平台对项目周边文化教育的介绍旨在提供相关信息1 意味着信息发布方对就学安排作出承诺。相关教育资首页信息存在调整的可能,应以政府教育主管部门门及办学颁布的政策规定为准。详情请仔细阅读</text>
-                <text className='active'>《新联宝使用免责条款》</text>
-              </view>
+            <view className='DescContent'>
+              {
+                detail.type === TYPE_VIDEO ?
+                <video src={detail.curriculumUrl} style={{width: '100%'}} /> :
+                <rich-text nodes={detail.content} />
+              }
             </view>
           </view>
-
         </view>
       </ScrollView>
     </view>

src/pages/index/courseDetail/index.scss

             }
           }
           >.Option {
-            >view {
+            >view, button {
               font-size: 0;
               white-space: nowrap;
               text-align: center;

src/routes.js

     name: '课程详情',
     page: 'pages/index/courseDetail/index',
     pkg: 'main',
-    type: 'mine',
+    type: 'curriculum',
   },
 
   //视频
     name: '我的课堂',
     page: 'pages/mine/myCourse/index',
     pkg: 'main',
-    type: 'mine',
+    type: 'curriculum',
   },
   {
     name: '我的活动',