uniapp【修复】：首页商品tab组，默认没有显示数据问题

CoreCms.Net.Uni-App/CoreShop/pages/components/custom-page/components/home-goods-tab-bar/home-goods-tab-bar.vue

@@ -1,106 +1,107 @@
 <template>
-	<view class="good-box m-b-25 p-20 bg-white radius-15">
-		<view>
-			<uv-tabs :list="props.data.list" keyName="title" lineColor="#D33123" @change="hanlderChangeTab"></uv-tabs>
-		</view>
-		<!-- 列表平铺 -->
-		<view :class="['data-box m-t-20', `data-box-${goodsState.column}`]">
-			<view v-for="cell,cellIndex in goodsState.goodsList" :key="cellIndex" class="waterfall-box">
-				<view v-for="item, index in cell" :key="index" :class="['card-box', `card-box-${goodsState.column}`]">
-					<coreshop-goods-card :type="goodsState.column == 1 ? 'horizontal' : 'vertical'"
-						:imgHeight="hanlderGoodsWidth()" :imgWidth="hanlderGoodsWidth()"
-						:goodsData="hanldeCombinationGoodsData(item)" @hanldeClickGoods="hanldeClickGoods">
-						<template #goodPrice>
-							<view class="price-msg" v-if="goodsState.column == 1" @click="hanldeClickGoods(item)">
-								<view class="tag-box">
-									<view class="tag tag-buy">已售{{ item.buyCount+item.initialSales }}{{ item.unit }}</view>
-									<view class="tag tag-view">{{ item.viewCount }}人访问</view>
-								</view>
-								<view class="price-box">
-									<view class="price">
-										<text class="symbol">￥</text>
-										<text class="num">{{ item.price }}</text>
-									</view>
-									<view class="btn">立即购买</view>
-								</view>
-							</view>
-							<view class="price-msg" v-else @click="hanldeClickGoods(item)">
-								<view class="price-box">
-									<view class="price">
-										<text class="symbol">￥</text>
-										<text class="num">{{ item.price }}</text>
-										<text class="mktprice" v-if="props.data.column == 2">￥{{ item.mktprice }}</text>
-									</view>
-									<view class="buyCount">已售{{ item.buyCount+item.initialSales }}{{ item.unit }}</view>
-								</view>
-								<Point :data="item" :flex="false"></Point>
-							</view>
-						</template>
-						<template #other v-if="props.data.column == 1">
-							<Point :data="item" :flex="true"></Point>
-						</template>
-					</coreshop-goods-card>
-				</view>
-			</view>
-		</view>
-	</view>
+    <view class="good-box m-b-25 p-20 bg-white radius-15">
+        <view>
+            <uv-tabs :list="props.data.list" keyName="title" lineColor="#D33123" @change="hanlderChangeTab"></uv-tabs>
+        </view>
+        <!-- 列表平铺 -->
+        <view :class="['data-box m-t-20', `data-box-${goodsState.column}`]">
+            <view v-for="cell,cellIndex in goodsState.goodsList" :key="cellIndex" class="waterfall-box">
+                <view v-for="item, index in cell" :key="index" :class="['card-box', `card-box-${goodsState.column}`]">
+                    <coreshop-goods-card :type="goodsState.column == 1 ? 'horizontal' : 'vertical'"
+                        :imgHeight="hanlderGoodsWidth()" :imgWidth="hanlderGoodsWidth()"
+                        :goodsData="hanldeCombinationGoodsData(item)" @hanldeClickGoods="hanldeClickGoods">
+                        <template #goodPrice>
+                            <view class="price-msg" v-if="goodsState.column == 1" @click="hanldeClickGoods(item)">
+                                <view class="tag-box">
+                                    <view class="tag tag-buy">已售{{ item.buyCount+item.initialSales }}{{ item.unit }}
+                                    </view>
+                                    <view class="tag tag-view">{{ item.viewCount }}人访问</view>
+                                </view>
+                                <view class="price-box">
+                                    <view class="price">
+                                        <text class="symbol">￥</text>
+                                        <text class="num">{{ item.price }}</text>
+                                    </view>
+                                    <view class="btn">立即购买</view>
+                                </view>
+                            </view>
+                            <view class="price-msg" v-else @click="hanldeClickGoods(item)">
+                                <view class="price-box">
+                                    <view class="price">
+                                        <text class="symbol">￥</text>
+                                        <text class="num">{{ item.price }}</text>
+                                        <text class="mktprice" v-if="props.data.column == 2">￥{{ item.mktprice }}</text>
+                                    </view>
+                                    <view class="buyCount">已售{{ item.buyCount+item.initialSales }}{{ item.unit }}</view>
+                                </view>
+                                <Point :data="item" :flex="false"></Point>
+                            </view>
+                        </template>
+                        <template #other v-if="props.data.column == 1">
+                            <Point :data="item" :flex="true"></Point>
+                        </template>
+                    </coreshop-goods-card>
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 <script setup lang="ts">
-	import { reactive, watch } from 'vue';
-	import Point from '../home-goods/point.vue';
-	import { handleRouteNavigateTo, splitArrayByStep } from '@/core/utils';
+    import { reactive, watchEffect } from 'vue';
+    import Point from '../home-goods/point.vue';
+    import { handleRouteNavigateTo, splitArrayByStep } from '@/core/utils';
 
-	const props = withDefaults(defineProps<{
-		data : any,
-	}>(), {
-		data: {},
-	});
+    const props = withDefaults(defineProps<{
+        data : any,
+    }>(), {
+        data: {},
+    });
 
-	const goodsState = reactive<{
-		goodsList : Array<any>;
-		column : number;
-	}>({
-		goodsList: [],
-		column: 1,
-	})
+    const goodsState = reactive<{
+        goodsList : Array<any>;
+        column : number;
+    }>({
+        goodsList: [],
+        column: 1,
+    })
 
-	watch(() => props.data.list[0], () => {
-		hanlderChangeTab(props.data.list?.[0]);
-	})
+    const hanlderChangeTab = (e : any) => {
+        goodsState.column = e.column;
+        goodsState.goodsList = splitArrayByStep(e.list.slice(0, e.limit), e.column);
+    }
 
-	// 组合商品数据传入组件
-	const hanldeCombinationGoodsData = (item : any) => {
-		return {
-			id: item.id,
-			image: item.image,
-			name: item.name,
-			brief: item.brief,
-			price: item.price,
-			mktprice: item.mktprice,
-			isRecommend: item.isRecommend,
-			isHot: item.isHot,
-		}
-	}
+    watchEffect(() => {
+        hanlderChangeTab(props.data.list?.[0]);
+    })
 
-	// 根据返回的列数返回商品的图片宽高
-	const hanlderGoodsWidth = () => {
-		if (goodsState.column == 3) {
-			return '180rpx'
-		}
-		if (goodsState.column == 2) {
-			return '295rpx'
-		}
-	}
+    // 组合商品数据传入组件
+    const hanldeCombinationGoodsData = (item : any) => {
+        return {
+            id: item.id,
+            image: item.image,
+            name: item.name,
+            brief: item.brief,
+            price: item.price,
+            mktprice: item.mktprice,
+            isRecommend: item.isRecommend,
+            isHot: item.isHot,
+        }
+    }
 
-	const hanlderChangeTab = (e : any) => {
-		goodsState.column = e.column;
-		goodsState.goodsList = splitArrayByStep(e.list.slice(0, e.limit), e.column);
-	}
+    // 根据返回的列数返回商品的图片宽高
+    const hanlderGoodsWidth = () => {
+        if (goodsState.column == 3) {
+            return '180rpx'
+        }
+        if (goodsState.column == 2) {
+            return '295rpx'
+        }
+    }
 
-	const hanldeClickGoods = (data : any) => {
-		handleRouteNavigateTo(`/pages/goods/detail?id=${data?.id}`)
-	}
+    const hanldeClickGoods = (data : any) => {
+        handleRouteNavigateTo(`/pages/goods/detail?id=${data?.id}`)
+    }
 </script>
 <style lang="scss" scoped>
-	@import './home-goods-tab-bar.scss';
+    @import './home-goods-tab-bar.scss';
 </style>