品牌列表品牌详情调整

src/api/brand.ts

@@ -1,6 +1,7 @@
 import {request} from "@/api/request";
 
 export type BrandRecord = {
+  logo: string;
   name: string;
   id: number
   introductory_video: string

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

@@ -1,16 +1,27 @@
+page{
+  background-color: #fff !important;
+}
 .swiper{
   width:750rpx;
   height:600rpx;
-  background-color: pink;
+}
+.curIndexBox{
+  position: absolute;
+  top:450rpx;
+  right:30rpx;
+  background-color: rgba(0,0,0,0.5);
+  border-radius: 30rpx;
+  padding: 5rpx 30rpx;
+  color:#fff;
 }
 .body{
   border-radius: 32rpx 32rpx 0 0;
-  background-color:cadetblue;
+  background-color:#f1f8f6;
   width: 750rpx;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  min-height: 80vh;
+  min-height: 600rpx;
   position: absolute;
   top: 520rpx;
   .top{

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

@@ -13,6 +13,7 @@ const BrandInfo: FC = () => {
   const {id} = useRouter().params as unknown as Params
   const [brandInfo, setBrandInfo] = useState<BrandRecord>()
   const [articleList, setArticleList] = useState<ArticleRecord[]>()
+  const [curIndex,setCurIndex] = useState<number>(1)
 
   useEffect(() => {
     getData()
@@ -30,22 +31,26 @@ const BrandInfo: FC = () => {
     }
   }
 
+  function onChange(e){
+    console.log(e)
+    setCurIndex(+e.detail.current+1)
+  }
 
   return (
     <View className='flex flex-column '>
-      {
         <Swiper
           className={styles['swiper']}
           indicatorColor='#999'
           indicatorActiveColor='#333'
           indicatorDots
+          onChange={onChange}
         >
-          <SwiperItem>
+          { brandInfo?.introductory_video_resource?.url && <SwiperItem>
             <Video
               style={{width: '750rpx', height: '600rpx'}}
               playBtnPosition={"center"}
               id='video'
-              src={brandInfo?.introductory_video_resource?.url || ''}
+              src={brandInfo?.introductory_video_resource?.url}
               initialTime={0}
               controls={true}
               enableProgressGesture={false}
@@ -54,16 +59,17 @@ const BrandInfo: FC = () => {
               loop={false}
               muted={false}
             />
-          </SwiperItem>)
+          </SwiperItem>}
           {brandInfo?.brand_album?.length
-            && brandInfo?.brand_album?.map((d) =>
+            && brandInfo?.brand_album?.split(',').map((d) =>
               <SwiperItem>
-                <Image src={d}></Image>
+                <Image mode={'aspectFill'} style={{width:'750rpx',height:'600rpx'}} src={d}></Image>
               </SwiperItem>)
           }
         </Swiper>
-
-      }
+        <View className={styles.curIndexBox}>
+          <Text>{curIndex} / {brandInfo?.brand_album?.split(',').length + ((brandInfo && brandInfo.introductory_video_resource) ? 1:0)}</Text>
+        </View>
       <View className={styles['body']}>
         <View className={styles['top']}>
           <Text className={styles['title']}>{brandInfo?.name}</Text>

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

@@ -42,10 +42,10 @@ const BrandList: FC = () => {
       {
         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}/>
+              <Image src={d.logo} 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 className={styles.desc}>{d.graphic_introduction}</View>
               </View>
             </View>)
           : <Empty name='空空如也'/>