From 9b5c25151f576ca246288c114c75ba646b29e59e Mon Sep 17 00:00:00 2001 From: sunlizhou <296190577@qq.com> Date: Mon, 21 Aug 2023 16:40:34 +0800 Subject: [PATCH] =?UTF-8?q?=E5=93=81=E7=89=8C=E8=AF=A6=E6=83=85&=E6=96=87?= =?UTF-8?q?=E7=AB=A0=E8=AF=A6=E6=83=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/brand.ts | 18 +++- src/app.config.ts | 1 + src/app.scss | 3 + .../textCollapse/collapse.module.scss | 5 ++ src/components/textCollapse/collapse.tsx | 90 +++++++++++++++++++ src/pages/brand/article/article.config.ts | 4 + src/pages/brand/article/article.tsx | 28 ++++++ src/pages/brand/info/info.module.scss | 88 ++++++++++++------ src/pages/brand/info/info.tsx | 69 ++++++++++---- src/pages/brand/list/list.module.scss | 1 + src/pages/brand/list/list.tsx | 4 +- 11 files changed, 266 insertions(+), 45 deletions(-) create mode 100644 src/components/textCollapse/collapse.module.scss create mode 100644 src/components/textCollapse/collapse.tsx create mode 100644 src/pages/brand/article/article.config.ts create mode 100644 src/pages/brand/article/article.tsx diff --git a/src/api/brand.ts b/src/api/brand.ts index 705706c..9d7d020 100644 --- a/src/api/brand.ts +++ b/src/api/brand.ts @@ -3,11 +3,17 @@ import {request} from "@/api/request"; export type BrandRecord = { name: string; id: number - introductory_video: string[] + introductory_video: string brand_album: string[] graphic_introduction: string disabled: number } +export type ArticleRecord = { + title: string + page_view: number + created_at: string + content: string +} export const brandApi = { /** 品牌列表 */ @@ -21,4 +27,14 @@ export const brandApi = { info(id: number) { return request(`/home/v1/brand/${id}`, "GET") }, + /** 文章列表 */ + articleList(owner_id: number ) { + return request<{ + list: ArticleRecord[], + total: number + }>(`/home/v1/article/list?owner_id=${owner_id}&page=1&page_size=1000` , "GET") + }, + articleInfo(id: number ) { + return request(`/home/v1/article/${id}` , "GET") + }, } diff --git a/src/app.config.ts b/src/app.config.ts index 540429a..301055e 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -81,6 +81,7 @@ export default defineAppConfig({ pages: [ 'list/list', 'info/info', + 'article/article', ] } ], diff --git a/src/app.scss b/src/app.scss index 5fc0794..c3aaf7e 100644 --- a/src/app.scss +++ b/src/app.scss @@ -269,6 +269,9 @@ .text-body { color: #212529;} .text-muted { color: #909795;} +.lh-28 {line-height: 28rpx} +.lh-40 {line-height: 40rpx} + /* 圆角 */ .rounded { border-radius: 8rpx;} diff --git a/src/components/textCollapse/collapse.module.scss b/src/components/textCollapse/collapse.module.scss new file mode 100644 index 0000000..e937475 --- /dev/null +++ b/src/components/textCollapse/collapse.module.scss @@ -0,0 +1,5 @@ +.expansion{ + display: inline-block; + padding: 0 10rpx; + color: #00d6ac; +} diff --git a/src/components/textCollapse/collapse.tsx b/src/components/textCollapse/collapse.tsx new file mode 100644 index 0000000..bd2666f --- /dev/null +++ b/src/components/textCollapse/collapse.tsx @@ -0,0 +1,90 @@ +import {View, Text} from '@tarojs/components'; +import {ITouchEvent} from '@tarojs/components/types/common'; +import Taro from "@tarojs/taro"; +import {FC, useEffect, useState} from "react"; +import styles from './collapse.module.scss' + +interface Props { + text: string +} + +const LineEllipsis:FC = ({text}:Props) => { + const [disabled, setDisabled] = useState(false) + const [isExpansioned, setIsExpansioned] = useState(false) + const [overflow, setOverflow] = useState(false) + + useEffect(()=>{ + init() + },[text]) + + function init () { + Taro.nextTick(() => { + const query = Taro.createSelectorQuery() + query.select('#Text').boundingClientRect() + query.exec((res) => { + console.log({res}) + const height = res[0].height + if(height <= 30) { + setDisabled(true) + }else{ + setOverflow(true) + } + }) + }) + } + + function handleExpend (e?: ITouchEvent) { + e && e.stopPropagation(); + setOverflow(false) + setIsExpansioned(true) + } + + function handleHide (e?: ITouchEvent) { + e && e.stopPropagation(); + setOverflow(true) + setIsExpansioned(false) + }; + + function toggle () { + if (disabled) return; + if (isExpansioned) { + handleHide(); + } else { + handleExpend(); + } + } + + return ( + + + {text} + {!overflow && isExpansioned && ( + + 收起 + + )} + + {overflow && ( + + ...展开 + + )} + + ); + // } +} + +export default LineEllipsis; diff --git a/src/pages/brand/article/article.config.ts b/src/pages/brand/article/article.config.ts new file mode 100644 index 0000000..1029aac --- /dev/null +++ b/src/pages/brand/article/article.config.ts @@ -0,0 +1,4 @@ +export default definePageConfig({ + navigationBarTitleText: '文章详情', + onReachBottomDistance: 30 +}) diff --git a/src/pages/brand/article/article.tsx b/src/pages/brand/article/article.tsx new file mode 100644 index 0000000..e2b3556 --- /dev/null +++ b/src/pages/brand/article/article.tsx @@ -0,0 +1,28 @@ +import {FC, useEffect, useState} from "react"; +import {View} from "@tarojs/components"; +import Taro, {useRouter} from "@tarojs/taro"; +import {ArticleRecord, brandApi} from "@/api"; + + +const article:FC = () => { + const {id} = useRouter().params as unknown as { id: number} + const [articleInfo,setArticleInfo] = useState() + useEffect(() => { + getData() + }, [id]) + + const getData = async () => { + try { + const data = await brandApi.articleInfo(id) + Taro.setNavigationBarTitle({title:data.title}) + setArticleInfo(data) + } catch (e) { + } + } + function helloWorld() { + const html = articleInfo?.content; + return + } + return helloWorld() +} +export default article diff --git a/src/pages/brand/info/info.module.scss b/src/pages/brand/info/info.module.scss index f13b13d..11abb71 100644 --- a/src/pages/brand/info/info.module.scss +++ b/src/pages/brand/info/info.module.scss @@ -1,31 +1,65 @@ -.box { - display: flex; - margin-bottom: 20rpx; - background-color: #fff; - border-radius: 16rpx; - padding: 24rpx; - box-sizing: border-box; -} -.image{ - width: 128rpx; - height:128rpx; +.swiper{ + width:750rpx; + height:600rpx; background-color: pink; - border-radius: 8rpx; } -.rightBox{ - padding-left: 24rpx; +.body{ + border-radius: 32rpx 32rpx 0 0; + background-color:cadetblue; + width: 750rpx; box-sizing: border-box; - flex: 1; -} -.desc{ - font-size: 24rpx; - font-weight: 500; - color: #909795; - line-height: 34rpx; - display: -webkit-box; - text-overflow: ellipsis; - overflow: hidden; - -webkit-box-orient:vertical; - -webkit-line-clamp:2; -} + display: flex; + flex-direction: column; + min-height: 80vh; + position: absolute; + top: 520rpx; + .top{ + padding:40rpx 30rpx 30rpx 30rpx; + border-radius: 32rpx; + background-color: #fff; + .title{ + font-size: 32rpx; + font-weight: bold; + color: #323635; + line-height:44rpx; + } + } + .bottom{ + margin-top: 20rpx; + flex:1; + background-color: #fff; + border-radius: 32rpx 32rpx 0 0; + width: 100%; + .box { + display: flex; + background-color: #fff; + border-radius: 16rpx; + padding: 30rpx; + box-sizing: border-box; + } + .inner{ + flex:1; + display: flex; + padding-bottom: 24rpx; + border-bottom: 2rpx solid #F5F8F7; + .image{ + width: 172rpx; + height:128rpx; + background-color: pink; + border-radius: 8rpx; + } + .leftBox{ + padding-right: 24rpx; + box-sizing: border-box; + flex: 1; + } + .desc{ + font-size: 22rpx; + font-weight: 500; + color: #909795; + line-height: 32rpx + } + } + } +} diff --git a/src/pages/brand/info/info.tsx b/src/pages/brand/info/info.tsx index 395ec1c..aae011c 100644 --- a/src/pages/brand/info/info.tsx +++ b/src/pages/brand/info/info.tsx @@ -1,14 +1,18 @@ import {FC, useCallback, useEffect, useState} from "react"; -import {Image, Swiper, SwiperItem, View} from "@tarojs/components"; -import {brandApi, BrandRecord} from "@/api"; +import {Image, Swiper, SwiperItem, Text, Video, View} from "@tarojs/components"; +import {ArticleRecord, brandApi, BrandRecord} from "@/api"; +import styles from './info.module.scss' import Taro, {useRouter} from "@tarojs/taro"; +import LineEllipsis from "@/components/textCollapse/collapse"; +import Empty from "@/components/empty/empty"; type Params = { id: number } -const MeetingsConfig: FC = () => { +const BrandInfo: FC = () => { const {id} = useRouter().params as unknown as Params const [brandInfo, setBrandInfo] = useState() + const [articleList,setArticleList] = useState() useEffect(() => { getData() @@ -19,29 +23,38 @@ const MeetingsConfig: FC = () => { const data = await brandApi.info(id) Taro.setNavigationBarTitle({title:data.name}) setBrandInfo(data) + const data1 = await brandApi.articleList(id) + setArticleList(data1.list) } catch (e) { + // setBrandInfo({disabled: 0, graphic_introduction: "", id: 0, introductory_video: "", name: "", brand_album:['1','2','3']}) } } return ( - + { - // brands.length ? brands.map((d) => - // jumpInfo(d.id)} className={styles.box} key={d.id}> - // - // - // {d.name} - // {d.graphic_introduction.repeat(30)} - // - // ) - // : + + ) { brandInfo?.brand_album?.length && brandInfo?.brand_album.map((d) => @@ -49,9 +62,35 @@ const MeetingsConfig: FC = () => { ) } + } + + + {brandInfo?.name} + + + + { + articleList?.length ? + articleList.map((i)=> + {Taro.navigateTo({url: `/pages/brand/article/article?id=${i.id}`})}}> + + + {i.title} + {i.created_at} {i.page_view}阅读 + + {/**/} + + + + ) + : + } + + + ); } -export default MeetingsConfig +export default BrandInfo diff --git a/src/pages/brand/list/list.module.scss b/src/pages/brand/list/list.module.scss index f13b13d..25cd50a 100644 --- a/src/pages/brand/list/list.module.scss +++ b/src/pages/brand/list/list.module.scss @@ -23,6 +23,7 @@ color: #909795; line-height: 34rpx; display: -webkit-box; + word-break: break-all; text-overflow: ellipsis; overflow: hidden; -webkit-box-orient:vertical; diff --git a/src/pages/brand/list/list.tsx b/src/pages/brand/list/list.tsx index cc1b746..cbe848e 100644 --- a/src/pages/brand/list/list.tsx +++ b/src/pages/brand/list/list.tsx @@ -5,7 +5,7 @@ import styles from './list.module.scss' import Taro, {useReachBottom} from "@tarojs/taro"; import Empty from "@/components/empty/empty"; -const MeetingsConfig: FC = () => { +const BrandList: FC = () => { const [page, setPage] = useState(1) const [brands, setBrands] = useState([]) const [total, setTotal] = useState(0) @@ -55,4 +55,4 @@ const MeetingsConfig: FC = () => { ) } -export default MeetingsConfig +export default BrandList