品牌详情&文章详情

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<BrandRecord>(`/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<ArticleRecord>(`/home/v1/article/${id}` , "GET")
+  },
 }

src/app.config.ts

@@ -81,6 +81,7 @@ export default defineAppConfig({
       pages: [
         'list/list',
         'info/info',
+        'article/article',
       ]
     }
   ],

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;}

src/components/textCollapse/collapse.module.scss

@@ -0,0 +1,5 @@
+.expansion{
+  display: inline-block;
+  padding: 0 10rpx;
+  color: #00d6ac;
+}

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 (
+      <View
+        id="wrap"
+        style={{
+          position: 'relative',
+          color: '#999795',
+          fontSize: '25rpx',
+          overflow: overflow ? 'hidden' : 'unset',
+          height: overflow ? '35rpx' : 'unset',
+          lineHeight: overflow ? '35rpx' : '35rpx',
+          marginTop:'24rpx',
+        }}>
+        <View id='Text' onClick={toggle}>
+          {text}
+          {!overflow && isExpansioned && (
+            <Text className={styles.expansion} onClick={handleHide}>
+              收起
+            </Text>
+          )}
+        </View>
+        {overflow && (
+          <Text
+            className={styles.expansion}
+            onClick={handleExpend}
+            style={{position: 'absolute', top: '0', right: '0', background: '#fff'}}>
+            ...展开
+          </Text>
+        )}
+      </View>
+    );
+  // }
+}
+
+export default LineEllipsis;

src/pages/brand/article/article.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '文章详情',
+  onReachBottomDistance: 30
+})

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<ArticleRecord>()
+  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 <View dangerouslySetInnerHTML={{ __html: html! }}></View>
+  }
+  return helloWorld()
+}
+export default article

src/pages/brand/info/info.module.scss

@@ -1,31 +1,65 @@
-.box {
+.swiper{
+  width:750rpx;
+  height:600rpx;
+  background-color: pink;
+}
+.body{
+  border-radius: 32rpx 32rpx 0 0;
+  background-color:cadetblue;
+  width: 750rpx;
+  box-sizing: border-box;
+  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;
-  margin-bottom: 20rpx;
       background-color: #fff;
       border-radius: 16rpx;
-  padding: 24rpx;
+      padding: 30rpx;
       box-sizing: border-box;
-}
+    }
-.image{
+    .inner{
-  width: 128rpx;
+      flex:1;
+      display: flex;
+      padding-bottom: 24rpx;
+      border-bottom: 2rpx solid #F5F8F7;
+      .image{
+        width: 172rpx;
         height:128rpx;
         background-color: pink;
         border-radius: 8rpx;
-}
+      }
-.rightBox{
+      .leftBox{
-  padding-left: 24rpx;
+        padding-right: 24rpx;
         box-sizing: border-box;
         flex: 1;
-}
+      }
-.desc{
+      .desc{
-  font-size: 24rpx;
+        font-size: 22rpx;
         font-weight: 500;
         color: #909795;
-  line-height: 34rpx;
+        line-height: 32rpx
-  display: -webkit-box;
+      }
-  text-overflow: ellipsis;
+    }
-  overflow: hidden;
-  -webkit-box-orient:vertical;
-  -webkit-line-clamp:2;
-}
 
+  }
+}

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 {Image, Swiper, SwiperItem, Text, Video, View} from "@tarojs/components";
-import {brandApi, BrandRecord} from "@/api";
+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<BrandRecord>()
+  const [articleList,setArticleList] = useState<ArticleRecord[]>()
 
   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 (
-    <View className='p-2'>
+    <View className='flex flex-column '>
       {
-        // brands.length ? brands.map((d) =>
-        //     <View onClick={() => jumpInfo(d.id)} className={styles.box} key={d.id}>
-        //       <Image src={d.brand_album?.[0]} mode='aspectFill' className={styles.image}/>
-        //       <View className={styles.rightBox}>
-        //         <View className='font-weight mb-2 font-28'>{d.name}</View>
-        //         <View className={styles.desc}>{d.graphic_introduction.repeat(30)}</View>
-        //       </View>
-        //     </View>)
-        // : <Empty name='空空如也'/>
         <Swiper
-          className='test-h'
+          className={styles['swiper']}
           indicatorColor='#999'
           indicatorActiveColor='#333'
           indicatorDots
           >
+          <SwiperItem>
+            <Video
+              style={{width: '750rpx', height: '600rpx'}}
+              playBtnPosition={"center"}
+              id='video'
+              src={brandInfo?.introductory_video_resource?.url}
+              initialTime={0}
+              controls={true}
+              enableProgressGesture={false}
+              showFullscreenBtn={false}
+              autoplay={false}
+              loop={false}
+              muted={false}
+            />
+          </SwiperItem>)
           { brandInfo?.brand_album?.length
             && brandInfo?.brand_album.map((d) =>
             <SwiperItem>
@@ -49,9 +62,35 @@ const MeetingsConfig: FC = () => {
             </SwiperItem>)
           }
         </Swiper>
+
       }
+      <View className={styles['body']}>
+        <View className={styles['top']}>
+          <Text className={styles['title']}>{brandInfo?.name}</Text>
+          <LineEllipsis text={brandInfo?.graphic_introduction}></LineEllipsis>
+        </View>
+        <View className={styles['bottom']}>
+          {
+            articleList?.length ?
+            articleList.map((i)=>
+              <View className={styles.box} onClick={()=>{Taro.navigateTo({url: `/pages/brand/article/article?id=${i.id}`})}}>
+                <View className={styles.inner}>
+                  <View className={styles.leftBox}>
+                    <View className='font-weight mb-2 font-28 lh-40'>{i.title}</View>
+                    <View className={styles.desc}>{i.created_at} {i.page_view}阅读</View>
+                  </View>
+                  {/*<Image mode='aspectFill' className={styles.image} src={'dd'}/>*/}
+                </View>
+              </View>
+
+            )
+              : <Empty name='空空如也'/>
+          }
+
+        </View>
+      </View>
     </View>
   );
 }
 
-export default MeetingsConfig
+export default BrandInfo

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;

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<BrandRecord[]>([])
   const [total, setTotal] = useState(0)
@@ -55,4 +55,4 @@ const MeetingsConfig: FC = () => {
   )
 }
 
-export default MeetingsConfig
+export default BrandList