首页和样式修改

.env

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

src/api/home.ts

@@ -0,0 +1,37 @@
+import {request} from "@/api/request";
+
+export interface AdwareParams {
+  key: string
+  value: string
+
+  [key: string]: string
+}
+
+export interface AdwareLinkType {
+  id: number
+  api_name: string
+  path: string
+  param: string
+}
+
+export interface AdwareType {
+  advert_link: AdwareLinkType
+  scope_id: number | string
+  id: number
+  name: string
+  status: 0 | 1 // 禁用
+  sort: number
+  image_url: string
+  image_link: string
+  start_time: number
+  end_time?: number
+}
+
+export const HomeApi = {
+  advert(only_flag: string) {
+    return request<AdwareType[]>("/home/v1/advert/unique?only_flag=" + only_flag, "GET")
+  },
+  course(page: number, page_size: number) {
+    return request<{ data: Curriculum[], total: number }>('/home/v1/course/course', "GET", {page, page_size})
+  }
+}

src/api/index.ts

@@ -5,3 +5,4 @@ export * from './meeting'
 export * from './public'
 export * from './manage'
 export * from './course'
+export * from './home'

src/app.config.ts

@@ -26,8 +26,8 @@ export default defineAppConfig({
       {
         text: '学习',
         pagePath: 'pages/index/index',
-        iconPath: "static/tabs/home-unselect.png",
+        iconPath: "static/tabs/study.png",
-        selectedIconPath: "static/tabs/home-selected.png",
+        selectedIconPath: "static/tabs/study-selected.png",
       },
       {
         text: "我的",

src/components/popPut/popPut.tsx

@@ -46,7 +46,7 @@ const PopPut: FC<Props> = ({title, chevron, content, image, isProp, children, sh
     <>
       <View className='card' onClick={click} style={style()}>
         <View className='flex align-center'>
-          {opt.leftImage && <Image src={opt.leftImage} className='mr-3 image' mode='aspectFit'/>}
+          {opt.leftImage != null && <Image src={opt.leftImage} className='mr-3 image' mode='aspectFit'/>}
           <View>{title}</View>
         </View>
         <View className='card-content'>

src/pages/home/components/adware.tsx

@@ -0,0 +1,51 @@
+import {Image, Swiper, SwiperItem, View} from "@tarojs/components";
+import {FC, useState} from "react";
+import {AdwareType, HomeApi} from "@/api";
+import Taro from "@tarojs/taro";
+import styles from '../home.module.scss'
+import {jumpAdware} from "@/utils/pathFormt";
+
+const Adware: FC = () => {
+  const [data, setData] = useState<AdwareType[]>([])
+
+  async function getAdware() {
+    const res = await HomeApi.advert('home_swiper')
+    setData(res)
+  }
+
+  Taro.useLoad(getAdware)
+
+  return (
+    <View>
+      {
+        data.length === 1 && <Image
+          src={data[0].image_url}
+          mode='widthFix'
+          lazyLoad
+          fadeIn
+          onClick={() => jumpAdware(data[0].advert_link)}
+          className={styles.adware}/>
+      }
+      {
+        data.length > 1 && <Swiper
+          indicatorDots
+          autoplay
+          circular
+          indicatorActiveColor='rgba(255,255,255,0.5)'
+          className={styles.adware}>
+          {data.map(d => <SwiperItem key={d.id}>
+            <Image
+              src={d.image_url}
+              mode='widthFix'
+              lazyLoad
+              fadeIn
+              onClick={() => jumpAdware(d.advert_link)}
+              style={{width: "100%"}}/>
+          </SwiperItem>)}
+        </Swiper>
+      }
+    </View>
+  )
+}
+
+export default Adware

src/pages/home/components/curRecommended.tsx

@@ -0,0 +1,59 @@
+import {FC, useEffect, useState} from "react";
+import {Image, View} from "@tarojs/components";
+import {HomeApi} from "@/api";
+import {useReachBottom} from "@tarojs/taro";
+import styles from "../home.module.scss";
+import VideoCover from "@/components/videoCover/videoCover";
+import courseTag from '@/static/img/courseTag.png'
+
+const CurRecommended: FC = () => {
+  const [page, setPage] = useState(1)
+  const [data, setData] = useState<Curriculum[]>([])
+  const [total, setTotal] = useState(0)
+
+  async function getData() {
+    const res = await HomeApi.course(page, 4)
+    setTotal(res.total)
+    const newData = res.data.reduce((pre, cut) => {
+      const index = pre.findIndex(d => d.id === cut.id)
+      if (index === 1) {
+        pre.push(cut)
+      } else {
+        pre.splice(index, 1, cut)
+      }
+      return pre
+    }, data)
+    setData(newData)
+  }
+
+  useEffect(() => {
+    getData()
+  }, [page])
+
+  useReachBottom(() => {
+    data.length < total && setPage(page + 1)
+  })
+
+  return (
+    <>
+      {
+        data.length > 0 && <View className='mt-4'>
+          <Image src={courseTag} mode='widthFix' className={styles.courseTag}/>
+          <View className={'py-2 flex justify-between flex-wrap ' + styles.videoListBox}>
+            {
+              data.map(c => <VideoCover
+                  thumb={c.thumb}
+                  title={c.title}
+                  id={c.id}
+                  depId={c.id}
+                  key={c.id}
+                />)
+            }
+          </View>
+        </View>
+      }
+    </>
+  )
+}
+
+export default CurRecommended

src/pages/home/components/feature.tsx

@@ -0,0 +1,33 @@
+import {FC} from "react";
+import {Image, View} from "@tarojs/components";
+import illness from '@/static/img/illness.png'
+import profession from '@/static/img/profession.png'
+import health from '@/static/img/health.png'
+import article from '@/static/img/article.png'
+import Taro from "@tarojs/taro";
+
+const Feature: FC = () => {
+  const list = [
+    {url: '', image: article, text: '品牌'},
+    {url: '', image: health, text: '健康管理'},
+    {url: '', image: profession, text: '专业技能'},
+    {url: '', image: illness, text: '疾病知识'},
+  ]
+
+  function jump(url) {
+    Taro.navigateTo({url})
+  }
+
+  return (
+    <View className='flex justify-between mt-4'>
+      {
+        list.map(d => <View className='text-center' onClick={() => jump(d.url)}>
+          <Image src={d.image} style={{width: '50px'}} mode='widthFix'/>
+          <View className='mt-1'>{d.text}</View>
+        </View>)
+      }
+    </View>
+  )
+}
+
+export default Feature

src/pages/home/components/feature_recommended.tsx

@@ -0,0 +1,43 @@
+import {FC, useState} from "react";
+import {Swiper, SwiperItem, View} from "@tarojs/components";
+import styles from '../home.module.scss'
+import Taro from "@tarojs/taro";
+
+interface DataContent {
+  id: number,
+  title: string,
+  Description: string
+}
+
+interface Data {
+  title: string,
+  url: string,
+  data: DataContent[]
+}
+
+const FeatureRecommended: FC = () => {
+  const [data] = useState<Data[]>([
+    {title: "品牌TOP3", url: '', data: []},
+    {title: "健康", url: '', data: []},
+    {title: "专业技能", url: '', data: []},
+    {title: "疾病知识", url: '', data: []},
+  ])
+
+  function jump(url: string) {
+    Taro.navigateTo({url})
+  }
+
+
+  return (
+    <View className={styles.featureRecommended}>
+      <Swiper nextMargin='30px'>
+        {
+          data.map(d => <SwiperItem>
+            <View onClick={() => jump(d.url)}>{d.title}</View>
+          </SwiperItem>)
+        }
+      </Swiper>
+    </View>
+  )
+}
+export default FeatureRecommended

src/pages/home/components/search.tsx

@@ -0,0 +1,13 @@
+import {FC} from "react";
+import {Text, View} from "@tarojs/components";
+import styles from "../home.module.scss";
+import Icon from "@/components/icon";
+
+export const Search: FC = () => {
+  return (
+    <View className={styles.search}>
+      <Icon name='search' size={18}/>
+      <Text className='ml-1'>搜索课程</Text>
+    </View>
+  )
+}

src/pages/home/home.config.ts

@@ -1,4 +1,5 @@
 export default definePageConfig({
   navigationBarTitleText: '首页',
   navigationStyle: 'custom',
+  onReachBottomDistance: 30
 })

src/pages/home/home.module.scss

@@ -0,0 +1,62 @@
+.content {
+  position: relative;
+  padding: 0 20px;
+  min-height: 90vh;
+  box-sizing: border-box;
+  width: 750rpx;
+  overflow: hidden;
+
+  &:after {
+    min-height: 100vh;
+    position: absolute;
+    top: 0;
+    left: -10%;
+    width: 120%;
+    content: '';
+    display: block;
+    background: linear-gradient(40deg, #fff 50rpx, #caf0e2, #92ecc5) no-repeat;
+    min-height: 100vh;
+    background-size: 100% 600rpx;
+    filter: blur(50px);
+    z-index: -1;
+  }
+}
+
+.search {
+  width: 710rpx;
+  margin: 34rpx 0 0;
+  background: #fff;
+  border-radius: 100px;
+  line-height: 68rpx;
+  color: #bbb;
+  font-size: 28rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.adware {
+  margin-top: 40rpx;
+  width: 100%;
+  height: 260rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+}
+
+.videoListBox {
+  border-radius: 20px;
+}
+
+.courseTag {
+  width: 200px;
+  margin: auto;
+  display: block;
+}
+
+.featureRecommended {
+  background: #fff;
+  padding: 30rpx;
+  margin-top: 20rpx;
+  border-radius: 16rpx;
+  box-shadow: inset -30px -30px 30px rgba(#fff, .9);
+}

src/pages/home/home.tsx

@@ -1,9 +1,34 @@
 import {FC} from "react";
 import {View} from "@tarojs/components";
+import styles from "@/pages/index/index.module.scss";
+import Taro from "@tarojs/taro";
+import {Search} from "@/pages/home/components/search";
+import Adware from "@/pages/home/components/adware";
+import Feature from "@/pages/home/components/feature";
+import FeatureRecommended from "@/pages/home/components/feature_recommended";
+import CurRecommended from "@/pages/home/components/curRecommended";
+import MyButton from "@/components/button/MyButton";
+import {Profile} from "@/store";
 
 const Home: FC = () => {
+  const globalData = Taro.getApp().globalData
+  const {token, empty} = Profile.useContainer()
+
   return (
-    <View>2</View>
+    <View className={styles.content} style={`paddingTop:${globalData.statusBarHeight}px`}>
+      <View className='text-center font-weight font-34 mt-3'>康一诺</View>
+      <Search/>
+      <Adware/>
+      <Feature/>
+      <FeatureRecommended/>
+      <CurRecommended/>
+      {
+        !token && <View className={styles.tipsLogin} onClick={empty}>
+          <View>登录后享受更多学习服务~</View>
+          <MyButton fillet size='mini'>立即登录</MyButton>
+        </View>
+      }
+    </View>
   )
 }
 

src/pages/index/components/search.tsx

@@ -1,13 +0,0 @@
-import {FC} from "react";
-import {Text, View} from "@tarojs/components";
-import styles from "@/pages/index/index.module.scss";
-import Icon from "@/components/icon";
-
-export const Search: FC = () => {
-  return (
-      <View className={styles.search}>
-        <Icon name='search' size={18}/>
-        <Text className='ml-1'>搜索课程</Text>
-      </View>
-  )
-}

src/pages/index/index.module.scss

@@ -22,19 +22,21 @@
   }
 }
 
-.search {
-  width: 710rpx;
-  margin: 34rpx 0 0;
-  background: #fff;
-  border-radius: 100px;
-  line-height: 68rpx;
-  color: #bbb;
-  font-size: 28rpx;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
 
 .videoListBox {
   border-radius: 20px;
 }
+
+.tipsLogin {
+  padding: 24rpx;
+  color: #fff;
+  align-items: center;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  box-sizing: border-box;
+  background: rgba(#000, .7);
+}

src/pages/manage/addStudent/addStudent.tsx

@@ -81,7 +81,7 @@ const AddStudent = () => {
 
   Taro.useDidShow(() => {
     const newDepIds = storageDep.get()
-    setDepIds(newDepIds.length ? newDepIds : depIds)
+    setDepIds(newDepIds)
   })
 
   return (
@@ -104,9 +104,9 @@ const AddStudent = () => {
         </View>
 
 
-        <View className='item'>
+        <View className='item' onClick={jumSetDep}>
           <View>所属部门</View>
-          <View className='flex align-center' onClick={jumSetDep}>
+          <View className='flex align-center'>
             <View>
               {depIds.length ? formatDep() : '选择部门'}
             </View>

src/pages/manage/depAdmin/depAdmin.tsx

@@ -159,7 +159,7 @@ const DepAdmin: FC = () => {
         <View className='operation'>
           <View className='safeAreaInsetBottom'>
             <View onClick={jumpAddStudent}>添加学员</View>
-            <View onClick={() => showPop(undefined)}>分配部门</View>
+            <View onClick={() => showPop(undefined)}>添加部门</View>
             {
               router.params.id && <View onClick={managesSheet}>更多操作</View>
             }

src/utils/pathFormt.ts

@@ -0,0 +1,17 @@
+import {AdwareLinkType, AdwareParams} from "@/api";
+import Taro from "@tarojs/taro";
+
+/** 拼接完整路径 */
+export function jumpAdware(advert_link: AdwareLinkType) {
+  if (advert_link.path && advert_link.param) {
+    let url = advert_link.path + "?"
+    const params: AdwareParams[] = JSON.parse(advert_link.param)
+    params.forEach((d, index) => {
+      url += d.key + "=" + d.value
+      if (index !== params.length - 1) {
+        url += "&"
+      }
+    })
+    Taro.navigateTo({url})
+  }
+}