From 5e00de014cc8c3ac870b33fc2858c04a798a4fcb Mon Sep 17 00:00:00 2001 From: sunlizhou <296190577@qq.com> Date: Fri, 8 Sep 2023 15:29:07 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=94=B6=E8=97=8F=E5=88=97=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 4 +- src/api/user.ts | 4 + src/app.config.ts | 1 + src/pages/my/components/header/service.tsx | 4 +- src/pages/my/my.tsx | 1 + src/pages/preview/collect/collect.config.ts | 3 + src/pages/preview/collect/collect.module.scss | 63 ++++++ src/pages/preview/collect/collect.tsx | 203 ++++++++++++++++++ .../search/search/components/list.module.scss | 5 + .../preview/search/search/components/list.tsx | 4 +- src/static/img/icon-collect.png | Bin 0 -> 2245 bytes 11 files changed, 287 insertions(+), 5 deletions(-) create mode 100644 src/pages/preview/collect/collect.config.ts create mode 100644 src/pages/preview/collect/collect.module.scss create mode 100644 src/pages/preview/collect/collect.tsx create mode 100644 src/static/img/icon-collect.png diff --git a/.env b/.env index 86e2b46..51b63d7 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ #TARO_APP_API=https://yjx.dev.yaojiankang.top -TARO_APP_API=https://mooc.yaojiankang.top -#TARO_APP_API=https://shopfix.yaojiankang.top +#TARO_APP_API=https://mooc.yaojiankang.top +TARO_APP_API=https://shopfix.yaojiankang.top #TARO_APP_API=https://playedu.yaojiankang.top TARO_APP_LGOIN=true diff --git a/src/api/user.ts b/src/api/user.ts index 6d7996a..29e129b 100644 --- a/src/api/user.ts +++ b/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}) + }, } diff --git a/src/app.config.ts b/src/app.config.ts index a71824d..8e40f9d 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -94,6 +94,7 @@ export default defineAppConfig({ 'illness/article/article', 'webView/webView', 'search/search/index', + 'collect/collect', // 收藏列表 ] }, ], diff --git a/src/pages/my/components/header/service.tsx b/src/pages/my/components/header/service.tsx index c6347fd..4909f95 100644 --- a/src/pages/my/components/header/service.tsx +++ b/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([ diff --git a/src/pages/my/my.tsx b/src/pages/my/my.tsx index 67c67a5..9986748 100644 --- a/src/pages/my/my.tsx +++ b/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 diff --git a/src/pages/preview/collect/collect.config.ts b/src/pages/preview/collect/collect.config.ts new file mode 100644 index 0000000..41e2cfc --- /dev/null +++ b/src/pages/preview/collect/collect.config.ts @@ -0,0 +1,3 @@ +export default definePageConfig({ + navigationBarTitleText: '收藏列表', +}) diff --git a/src/pages/preview/collect/collect.module.scss b/src/pages/preview/collect/collect.module.scss new file mode 100644 index 0000000..94cf734 --- /dev/null +++ b/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; +} diff --git a/src/pages/preview/collect/collect.tsx b/src/pages/preview/collect/collect.tsx new file mode 100644 index 0000000..02420bc --- /dev/null +++ b/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([]) + const [categoryId, setCategoryId] = useState(null) + const [data, setData] = useState>(new Map) + const [enable, setEnable] = useState(true) + + /** + * more 开启加载更多 + */ + async function getData(more = false) { + if (!categoryId) return; + const oldData = new Map(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(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 + } + return ( + getData(true)} + className={styles.height}> + { + data.data.map(d => + jumpInfo(d.data.id,d.data.table,d.data['@data'])} className={styles.box} key={d.data.id}> + { + d.data.table === 'brand' && + <> + + + {d.data.title} + {d.data.content || '暂无品牌简介'} + + + } + { + d.data.table === 'article' && + <> + + {d.data['@data'].title} + {rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读 + + + + } + { + d.data.table === 'video_records' && + <> + + + + {d.data['@data'].title} + {d.data['@data'].introduction} + 播放量: {d.data['@data'].video_view} + + + } + { + d.data.table === 'courses' && + <> + + + {d.data['@data'].title} + 课时:{d.data['@data'].class_hour}节 销量：{d.data['@data'].charge} + + + } + + + + + + ) + } + 暂无更多 + + ) + } + + + return ( + <> + + + + + + d.value === categoryId)} + onChange={swiperChange} + className={styles.height} + style={{paddingTop: '10px'}}> + { + tabs.map(d => + {KillList(data.get(Number(d.value))!)} + ) + } + + + ) +} +export default Profession diff --git a/src/pages/preview/search/search/components/list.module.scss b/src/pages/preview/search/search/components/list.module.scss index eb3ac5f..e435256 100644 --- a/src/pages/preview/search/search/components/list.module.scss +++ b/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; diff --git a/src/pages/preview/search/search/components/list.tsx b/src/pages/preview/search/search/components/list.tsx index 88c0e32..75bab39 100644 --- a/src/pages/preview/search/search/components/list.tsx +++ b/src/pages/preview/search/search/components/list.tsx @@ -97,7 +97,7 @@ const SearchList: FC = ({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 && } @@ -142,7 +142,7 @@ const SearchList: FC = ({name,clear}) => { d.data.table === 'courses' && <> - + {d.data['@data'].title} 课时:{d.data['@data'].class_hour}节 销量：{d.data['@data'].charge} diff --git a/src/static/img/icon-collect.png b/src/static/img/icon-collect.png new file mode 100644 index 0000000000000000000000000000000000000000..ea983835b65fe6926f900e9fa23137294b8993d5 GIT binary patch literal 2245 zcmV;$2s-zPP)Px-e@R3^RA}DST6<8G*A=%WX%qXHG;Py%ChZ?-lT0SD)8+w!ii)E05JaJ9l<*KK ziqT+=1vOR?d?Y4Fhyit&Bn9QEI0lnxNCP+uD)^!i(uKt+59K8f5qa&Np5N#9-F&<3 zF6izCa%XW`=X-*9slf8DBN}D&K-IsFi`X@33`?E zdi_oAduS|LqkQYOZ9>@IV z@Qi9qabnVYVod1rFj%FApFcR3tZ{Z*e7vzWzA+j%fiXB~%49LFxw(1lScMgNw!OVw zDCfZL)6>%fYdmXW?1|_NF=Fi6H`alOX4I|13jBak5Wi!)u{CPVjQj9D`cWGr71A?0Z0=gv`$wnmC-y}iAV3zml&(XzbX znzbHxIB~Mq1cgtPlu+`%6pG-DYc6L}BY0UT7VCzBMlvUM4EEBxD_>GpOBHb_yQS;} z{(YNWNbEhlN@P|rw64U zf;>XH@uaD6yP)a_xqX!>p|KBKDL~bq!l7Chx%xG7F_Dv50wt!g=Wr~P4njaP*7+HB_<`&$&)9Q=+wf%2$;~xTe05Y5eOXjUot>Q+ z2q$etgkoG|B;&0byO9|p4?%5@%h`g=g>LEG*oq)xVmwIwjqx#~M!t~2k91eAT%pYD zEb{g96S^Yub$3fv{yipN3JMJso%x?0M@N|)ogTA6)Jv$m-71Ix-GlvDBZ~1GIgCF% z0y!Z0CZl6n_;O=?BgRR|4yW9B2%pE>w?p{uSML?L*r~31LLj)U>!$%dyp(Rhc&036 zBro!l{Cq(qW#2x`O+d%Z`3o0_4%wZ&ZA`|U71q0}T+A3jntW;>kV38VFbV4C>MS}V zD-&}zp)-HSu3e%7q;Os3=4N9uh28x2eJT%|C6mwqkET>J^B?3Wm4CLZ%;54?@!tx} z@xp*vw>b1pnLbSn@LAwXIJxaWW*cMRo8C^^S$CRz+1)%Z=g?fX6i{&+L6BCOnD+p# z3S}x1z+1cDma=CtkPpIL+S*#NSENIT$)Fm-?KL~3Jx+|{@*z5as3fD^#G#5kR$f+K zZt4)$4@rsmL1rzJQ4gNSC#u|5k79;>J}W23K(C;?B+ybNUpLeSk>CSRO(G<0nd0uxk2LPb8k2EzM`kVg@g#eb z;5Yv7j4VSETVi9C05tJl3kqAC_!{c$GS#5+fz-jymY9V*zxv{Z+)K8^#QPBlGFz%^ zY7F9b!`%yzqaBHqMnpy$yu5*dfjj*CkJgrYviBx`AO!DuFA+o%?MS2nnYOatwYoa2 zH`x|~=bSr#UI>neTnWL&b|lg{ZKkVOPj;#Cwh-)fs+s*NR3~>UyWVsX~?E-*<4GR)`$S|HS%y4>!0DzMm*UJ$<|(w9d{%=3KaVQLGso zhlH8_Wp$QX_4U_6Xkc&g6YlZruAg2h8<6`x25lc>S{BeIk z1fp--4Y|nn#0b`HK}w{o%O^eNKWYt;9VrL)3xRn@k3wLirBKbNh81z%%ut0;;iNaS5 ztue!DsOM^`H53~kXK)v3X=$-~k35A6i Date: Fri, 8 Sep 2023 17:34:21 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=94=B6=E8=97=8F=E5=88=97=E8=A1=A8?= =?UTF-8?q?=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/user.ts | 6 +- src/pages/preview/collect/collect.tsx | 118 +++++++++--------- .../preview/search/search/components/list.tsx | 15 +-- 3 files changed, 66 insertions(+), 73 deletions(-) diff --git a/src/api/user.ts b/src/api/user.ts index 29e129b..1a11691 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -100,6 +100,10 @@ export const userApi = { // } /** 收藏列表 */ 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}) + return request<{ list: any[], total: number }>('/api/v1/collect/list', "GET", {owner_type, page, page_size}) }, + /** 收藏 */ + create(data: Create) { + return request("/api/v1/collect/create", "POST", data) + } } diff --git a/src/pages/preview/collect/collect.tsx b/src/pages/preview/collect/collect.tsx index 02420bc..e68e3db 100644 --- a/src/pages/preview/collect/collect.tsx +++ b/src/pages/preview/collect/collect.tsx @@ -1,6 +1,6 @@ import {Image, ScrollView, Swiper, SwiperItem, View} from "@tarojs/components"; -import {HomeApi, userApi} from "@/api"; -import {useEffect, useState} from "react"; +import {userApi} from "@/api"; +import {useCallback, useEffect, useState} from "react"; import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs"; import Empty from "@/components/empty/empty"; import Taro from "@tarojs/taro"; @@ -11,7 +11,7 @@ import {rfc33392time} from "@/utils/day"; import play from "@/static/img/play.png"; interface KillData { - data: Kill[] + data: any[] total: number page: number } @@ -37,20 +37,20 @@ const Profession = () => { } 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 || []) + const data = await userApi.collectList(categoryId!, page, 10) + // const dataList = data.list.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, + data: data.list, + total: data.total, page: page }) setData(oldData) @@ -58,6 +58,19 @@ const Profession = () => { } } + Taro.useDidShow(useCallback(() => { + if(categoryId){ + let tempMap = new Map() + tempMap.set(categoryId, { + data: [], + total: undefined, + page: 1 + }) + setData(tempMap) + getData() + } + },[data])) + useEffect(() => { categoryId && getData() }, [categoryId]) @@ -76,33 +89,17 @@ const Profession = () => { 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 + function jumpInfo(info: any) { + console.log(info,'info') + if(info.article){ + Taro.navigateTo({url: `/pages/preview/brand/article/article?id=${info.owner_id}`}) + }else if(info.course){ + Taro.navigateTo({url: `/pages/business/videoInfo/videoInfo?id=${info.owner_id}`}) + }else if(info.video_records){ + Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?id=${info.owner_id}`}) + }else if(info.brand){ + Taro.navigateTo({url: `/pages/preview/brand/info/info?id=${info.owner_id}`}) } - Taro.navigateTo({url: `${url}?id=${id}`}) - } function swiperChange(e) { @@ -123,53 +120,50 @@ const Profession = () => { className={styles.height}> { data.data.map(d => - jumpInfo(d.data.id,d.data.table,d.data['@data'])} className={styles.box} key={d.data.id}> + jumpInfo(d)} className={styles.box} key={d.id}> { - d.data.table === 'brand' && + d.brand && <> - + - {d.data.title} - {d.data.content || '暂无品牌简介'} + {d.brand.name} + {d.brand.graphic_introduction || '暂无品牌简介'} } { - d.data.table === 'article' && + d.article && <> - {d.data['@data'].title} - {rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读 + {d.article.title} + {rfc33392time(d.article.created_at)} {d.article.page_view}阅读 - + } { - d.data.table === 'video_records' && + d.video_records && <> - + - {d.data['@data'].title} - {d.data['@data'].introduction} - 播放量: {d.data['@data'].video_view} + {d.video_records.title} + {d.video_records.introduction} + 播放量: {d.video_records.video_view} } { - d.data.table === 'courses' && + d.course && <> - + - {d.data['@data'].title} - 课时:{d.data['@data'].class_hour}节 销量：{d.data['@data'].charge} + {d.course.title} + 课时:{d.course.class_hour}节 销量：{d.course.charge} } - - - ) } diff --git a/src/pages/preview/search/search/components/list.tsx b/src/pages/preview/search/search/components/list.tsx index 75bab39..01ce6e1 100644 --- a/src/pages/preview/search/search/components/list.tsx +++ b/src/pages/preview/search/search/components/list.tsx @@ -60,21 +60,19 @@ const SearchList: FC = ({name,clear}) => { }, [page,name]) - function jumpInfo(id: number,type:string,health:any) { + function jumpInfo(id: number,type:string) { 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' + url = '/pages/preview/brand/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}`}) + url = '/pages/preview/videoFull/videoFull' + break case 'courses': url = '/pages/business/videoInfo/videoInfo' break @@ -105,7 +103,7 @@ const SearchList: FC = ({name,clear}) => { brands.length >= 1 && !loading && <> {brands.map((d) => - jumpInfo(d.data.id,d.data.table,d.data['@data'])} className={styles.box} key={d.data.id}> + jumpInfo(d.data.id,d.data.table)} className={styles.box} key={d.data.id}> { d.data.table === 'brand' && <> @@ -149,9 +147,6 @@ const SearchList: FC = ({name,clear}) => { } - - - ) }