品牌列表加载样式及品牌详情样式bug

package.json

@@ -58,6 +58,7 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-refresh": "^0.11.0",
+    "taro-ui": "^3.1.1",
     "unstated-next": "^1.1.0"
   },
   "devDependencies": {

src/app.scss

@@ -1,4 +1,5 @@
 @import "static/css/module";
+@import 'taro-ui/dist/style/index.scss';
 
 .flex {display: flex !important;flex-direction:row}
 .flex-row{ flex-direction:row!important}

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

@@ -99,7 +99,7 @@ const BrandInfo: FC = () => {
           }
         </Swiper>
         <View className={styles.curIndexBox}>
-          <Text>{curIndex} / {brandInfo?.brand_album?.split(',').length + ((brandInfo && brandInfo.introductory_video_resource) ? 1:0)}</Text>
+          <Text>{curIndex} / {(brandInfo?.brand_album?.split(',').length || 0)  + ((brandInfo && brandInfo.introductory_video_resource) ? 1:0)}</Text>
         </View>
       <View className={styles['body']}>
         <View className={styles['top']}>

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

@@ -9,7 +9,7 @@
 .image{
   width: 128rpx;
   height:128rpx;
-  background-color: pink;
+  background-color: #ededed;
   border-radius: 8rpx;
 }
 .rightBox{

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

@@ -4,6 +4,9 @@ import {brandApi, BrandRecord} from "@/api";
 import styles from './list.module.scss'
 import Taro, {useReachBottom} from "@tarojs/taro";
 import Empty from "@/components/empty/empty";
+import {AtActivityIndicator} from "taro-ui";
+
+
 
 const BrandList: FC = () => {
   const [page, setPage] = useState(1)
@@ -24,7 +27,7 @@ const BrandList: FC = () => {
 
   const getData = useCallback(async () => {
     try {
-      setText('加载中..')
+      setText('加载中...')
       const res = await brandApi.list(page, 10)
       if(page === 1){
         if(res.list.length < 10) {
@@ -69,7 +72,12 @@ const BrandList: FC = () => {
               </View>
             </View>)
           }
-          <View style={{width:'750rpx',textAlign:'center',color:'#ccc'}} className="font-28 mt-3">{text}</View>
+            { text === '加载中...' ?
+              <View style={{width:'710rpx',display:'flex',justifyContent:'center'}} className="mt-3">
+                <AtActivityIndicator color={'#999'} content='加载中...'></AtActivityIndicator>
+              </View>:
+              <View style={{width:'710rpx',textAlign:'center',color:'#999'}} className="font-28 mt-3">{text}</View>
+            }
           </>: <Empty name='空空如也'/>
       }
     </View>