品牌

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

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

src/pages/preview/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/preview/brand/info/info.config.ts

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

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

@@ -0,0 +1,65 @@
+.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;
+      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
+      }
+    }
+
+  }
+}

src/pages/preview/brand/info/info.tsx

@@ -0,0 +1,97 @@
+import {FC, useEffect, useState} from "react";
+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 BrandInfo: FC = () => {
+  const {id} = useRouter().params as unknown as Params
+  const [brandInfo, setBrandInfo] = useState<BrandRecord>()
+  const [articleList, setArticleList] = useState<ArticleRecord[]>()
+
+  useEffect(() => {
+    getData()
+  }, [id])
+
+  const getData = async () => {
+    try {
+      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='flex flex-column '>
+      {
+        <Swiper
+          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>
+                <Image src={d}></Image>
+              </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: any) =>
+                <View className={styles.box} onClick={() => {
+                  Taro.navigateTo({url: `/pages/preview/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 BrandInfo

src/pages/preview/brand/list/list.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '品牌列表',
+  onReachBottomDistance: 30
+})

src/pages/preview/brand/list/list.module.scss

@@ -0,0 +1,32 @@
+.box {
+  display: flex;
+  margin-bottom: 20rpx;
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 24rpx;
+  box-sizing: border-box;
+}
+.image{
+  width: 128rpx;
+  height:128rpx;
+  background-color: pink;
+  border-radius: 8rpx;
+}
+.rightBox{
+  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;
+}
+

src/pages/preview/brand/list/list.tsx

@@ -0,0 +1,57 @@
+import {FC, useCallback, useEffect, useState} from "react";
+import {Image, View} from "@tarojs/components";
+import {brandApi, BrandRecord} from "@/api";
+import styles from './list.module.scss'
+import Taro, {useReachBottom} from "@tarojs/taro";
+import Empty from "@/components/empty/empty";
+
+const BrandList: FC = () => {
+  const [page, setPage] = useState(1)
+  const [brands, setBrands] = useState<BrandRecord[]>([])
+  const [total, setTotal] = useState(0)
+
+  useEffect(() => {
+    getData()
+  }, [page])
+
+  const getData = useCallback(async () => {
+    try {
+      const res = await brandApi.list(1, 10)
+      setTotal(res.total)
+      setBrands([
+        ...res.data
+      ])
+    } catch (e) {
+    }
+  }, [page])
+
+
+  function jumpInfo(id: number) {
+    Taro.navigateTo({url: `/pages/preview/brand/info/info?id=${id}`})
+  }
+
+  useReachBottom(useCallback(() => {
+    if (brands?.length < total) {
+      setPage(page + 1)
+    }
+  }, [total, brands]))
+
+
+  return (
+    <View className='p-2'>
+      {
+        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='空空如也'/>
+      }
+    </View>
+  )
+}
+
+export default BrandList