wgh/coreshoppro
1
0
Fork 0
mirror of http://git.coreshop.cn/jianweie/coreshoppro.git synced 2025-12-06 17:23:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into 'master'

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

See merge request jianweie/coreshoppro!101
This commit is contained in:
花城
2024-11-27 02:34:22 +00:00
parent 04abe40a43 a9c223c825
commit a416bb4048
1 changed files with 94 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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