<template>
<view class="u-wrap">
<view class="u-menu-wrap">
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop">
<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
:class="[current==index ? 'u-tab-item-active' : '']" :data-current="index"
@tap.stop="swichMenu(index)">
<text class="">{{item.name}}</text>
</view>
</scroll-view>
<block v-for="(item,index) in tabbar" :key="index">
<scroll-view scroll-y class="right-box" v-if="current==index">
<view class="page-view">
<view class="" style="position: relative; width: 550rpx;" v-for="(item1, index1) in item.foods"
:key="item1.id">
<view class="item u-border-bottom flex justify-start align-center "
style="height: 200rpx;">
<view class="" @click="goShop()">
<u-image :src="item1.images" height="152" width="152"></u-image>
</view>
<view class="margin-left-sm" style="width: 392rpx;">
<view class=" flex justify-between align-center">
<view class="text-bold" style="font-size: 30rpx;">
{{item1.title}}
</view>
<!-- <view class="flex justify-center align-center text-bold align-center buy">
<u-image src="/static/my/collect/buy.png" height="22" width="22"></u-image>
<view class="text-sm padding-left-xs">
抢购
</view>
</view> -->
</view>
<view class="flex text-sm align-center justify-start margin-top-xs"
style="color: #D27E1B;">
<view class="padding-right-xs">
评分:{{item1.score}}
</view>
<view class="">
月售:{{item1.sell}}
</view>
</view>
<view class="text-sm padding-tb-xs" style="color: #999999;">
月浏览量:{{item1.browse}}
</view>
<view class="flex justify-between align-center">
<view class="flex justify-start align-center text-sm">
<view class="text-red ">
¥{{item1.newMoney}}
</view>
<view class="text-gray padding-lr-xs"
style="text-decoration: line-through">
¥{{item1.newMoney}}
</view>
<view class="text-xs flex align-center justify-center"
style="height: 36rpx; width: 70rpx; border: 2rpx solid #FF4848;color: #FF4848; border-radius: 12rpx;">
{{item1.discount}}折
</view>
</view>
<view class="flex align-center justify-end">
<view class="flex align-center" v-if=" item1.buySum >0">
<!-- 减号按钮 -->
<view v-if="getBuySum(item1) > 0"
class="flex justify-center align-center"
style="width: 36rpx; height: 36rpx; border-radius: 50%; background-color: #f0f0f0;"
@click.stop="decrease(item1)">
<u-icon name="minus-circle" size="36rpx" color="#AAA8A7"></u-icon>
</view>
<!-- 数量显示 -->
<text v-if="getBuySum(item1) > 0" class="margin-lr-xs"
style="font-size: 28rpx; border-radius: 8rpx; background-color: #D9D9D9; color: #333; min-width: 40rpx; text-align: center;">
{{ getBuySum(item1) }}
</text>
<!-- 加号按钮 -->
<view @click.stop="add(item1)" class="flex justify-center align-center"
style="width: 36rpx; height: 36rpx; border-radius: 50%; background-color: #fff;">
<u-icon name="plus-circle" color="#FC7746" size="36rpx"></u-icon>
</view>
</view>
<!-- <view class="" v-if=" item1.buySum >0"> -->
<!-- '<u-number-box2 v-model="item1.buySum " :min="0" positive-integer
@change="(val) => handleNumberChange(item1, val)" />' -->
<!-- </view> -->
<view class="" v-if="item1.buySum ==0" @click="add(item1)">
<u-icon name="plus-circle" color="#FC7746" size="36rpx"></u-icon>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</block>
</view>
</view>
</template>
<script>
export default {
name: 'CategoryGoodsList',
data() {
return {
scrollTop: 0, //tab标题的滚动条位置
current: 0, // 预设当前项的值
menuHeight: 0, // 左边菜单的高度
menuItemHeight: 0, // 左边菜单item的高度
tabbar: [{
"name": "品类名称",
"foods": [{
"title": "镇江陈醋500ml",
"images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png",
'score': "5分",
"sell": "1000+",
"browse": '453456',
"newMoney": 45.56,
"money": 68,
"discount": 6.7,
'buySum': 0
}, {
"title": "镇江陈醋500ml",
"images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png",
'score': "5分",
"sell": "1000+",
"browse": '453456',
"newMoney": 45.56,
"money": 68,
"discount": 6.7,
'buySum': 0
}, {
"title": "镇江陈醋500ml",
"images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png",
'score': "5分",
"sell": "1000+",
"browse": '453456',
"newMoney": 45.56,
"money": 68,
"discount": 6.7,
'buySum': 0
}]
},
{
"name": "品类名称",
"foods": [{
"title": "镇江陈醋500ml",
"images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png",
'score': "5分",
"sell": "1000+",
"browse": '453456',
"newMoney": 45.56,
"money": 68,
"discount": 6.7,
'buySum': 0
}]
},
{
"name": "品类名称",
"foods": [{
"title": "镇江陈醋500ml",
"images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png",
'score': "5分",
"sell": "1000+",
"browse": '453456',
"newMoney": 45.56,
"money": 68,
"discount": 6.7,
'buySum': 0
}
]
},
{
"name": "品类名称",
"foods": [{
"title": "镇江陈醋500ml",
"images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png",
'score': "5分",
"sell": "1000+",
"browse": '453456',
"newMoney": 45.56,
"money": 68,
"discount": 6.7,
'buySum': 0
}]
},
{
"name": "品类名称",
"foods": [{
"title": "镇江陈醋500ml",
"images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png",
'score': "5分",
"sell": "1000+",
"browse": '453456',
"newMoney": 45.56,
"money": 68,
"discount": 6.7,
'buySum': 0
}]
},
{
"name": "品类名称",
"foods": [{
"title": "镇江陈醋500ml",
"images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png",
'score': "5分",
"sell": "1000+",
"browse": '453456',
"newMoney": 45.56,
"money": 68,
"discount": 6.7,
'buySum': 0
}]
},
{
"name": "品类名称",
"foods": [{
"title": "镇江陈醋500ml",
"images": "https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png",
'score': "5分",
"sell": "1000+",
"browse": '453456',
"newMoney": 45.56,
"money": 68,
"discount": 6.7,
'buySum': 0
}]
},
]
}
},
computed: {
},
methods: {
add(item) {
const current = this.getBuySum(item);
this.$set(item, 'buySum', current + 1);
this.updateCart();
},
// 减少商品数量
decrease(item) {
const current = this.getBuySum(item);
if (current <= 0) return;
this.$set(item, 'buySum', current - 1);
this.updateCart();
},
updateCart() {
// 构建购物车数据:只保留 buySum > 0 的商品
const cartItems = [];
let totalAmount = 0; // 总件数
let totalPrice = 0; // 总金额
this.tabbar.forEach(category => {
category.foods.forEach(food => {
const buySum = this.getBuySum(food);
if (buySum > 0) {
const itemTotal = buySum * parseFloat(food.newMoney);
cartItems.push({
id: food.id,
title: food.title,
buySum,
price: parseFloat(food.newMoney),
subtotal: itemTotal
});
totalAmount += buySum;
totalPrice += itemTotal;
}
});
});
// 发送到父组件
this.$emit('update-cart', {
cartItems, // 所有选中的商品明细
totalAmount, // 总数量
totalPrice: parseFloat(totalPrice.toFixed(2)) // 保留两位小数
});
},
// 安全获取 buySum 值
getBuySum(item) {
return typeof item.buySum === 'number' && !isNaN(item.buySum) ? item.buySum : 0;
},
goShop() {
uni.navigateTo({
url: '/pages/shop/shop'
})
},
add(item1) {
// 安全地递增
if (typeof item1.buySum !== 'number') {
item1.buySum = 0;
}
item1.buySum++;
this.$emit('update-buy-sum', this.tabbar);
console.log(item1.buySum);
},
handleNumberChange(item, val) {
item.buySum = val;
},
getImg() {
return Math.floor(Math.random() * 35);
},
// 点击左边的栏目切换
async swichMenu(index) {
if (index == this.current) return;
this.current = index;
// 如果为0,意味着尚未初始化
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
await this.getElRect('menu-scroll-view', 'menuHeight');
await this.getElRect('u-tab-item', 'menuItemHeight');
}
// 将菜单菜单活动item垂直居中
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
},
// 获取一个目标元素的高度
getElRect(elClass, dataVal) {
new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this);
query.select('.' + elClass).fields({
size: true
}, res => {
// 如果节点尚未生成,res值为null,循环调用执行
if (!res) {
setTimeout(() => {
this.getElRect(elClass);
}, 10);
return;
}
this[dataVal] = res.height;
}).exec();
})
}
}
}
</script>
<style lang="scss" scoped>
.u-wrap {
height: calc(100vh);
/* #ifdef H5 */
height: calc(100vh - var(--window-top));
/* #endif */
display: flex;
flex-direction: column;
}
.u-menu-wrap {
flex: 1;
display: flex;
overflow: hidden;
// border-radius: 20rpx;
}
.u-tab-view {
width: 200rpx;
height: 100%;
// border-radius: 20rpx;
}
.u-tab-item {
height: 110rpx;
background: #fff;
box-sizing: border-box;
border-radius: 20rpx 20rpx 0 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 28rpx;
color: #444;
font-weight: 400;
line-height: 1;
}
.u-tab-item-active {
position: relative;
color: #fff;
// font-size: 30rpx;
// font-weight: 600;
background: #E96F50;
}
.u-tab-view {
height: 100%;
}
.right-box {
background-color: rgb(250, 250, 250);
}
.page-view {
padding-left: 16rpx;
padding-right: 16rpx;
.buy {
height: 48rpx;
width: 112rpx;
color: #fff;
border-radius: 24rpx;
background-color: #FC7746;
}
}
.class-item {
margin-bottom: 30rpx;
background-color: #fff;
padding: 16rpx;
border-radius: 8rpx;
}
.item-title {
font-size: 26rpx;
color: $u-main-color;
font-weight: bold;
}
.item-menu-name {
font-weight: normal;
font-size: 24rpx;
color: $u-main-color;
}
.item-container {
display: flex;
flex-wrap: wrap;
}
.thumb-box {
width: 33.333333%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 20rpx;
}
.item-menu-image {
width: 120rpx;
height: 120rpx;
}
</style>
这是子组件
<template>
<view>
<z-paging :paging-style="{
background: 'linear-gradient(to bottom, #FFEB70 10%, #F9F9F9 20%)'
}">
<!-- #ifdef H5 -->
<view style="height: 40rpx"></view>
<view class="flex align-center padding-lr">
<view class="text-bold text-lg padding-right-lg" @click="goback()">
<u-icon name="arrow-left"></u-icon>
</view>
<view class="text-bold text-lg">
超市百货
</view>
</view>
<!-- #endif -->
<!-- #ifndef H5 -->
<view class="" :style="{height: navBarHeight + 'px'}">
</view>
<view class="flex align-center padding">
<view class="text-bold text-lg padding-right-lg" @click="goback()">
<u-icon name="arrow-left"></u-icon>
</view>
<view class="text-bold text-lg">
超市百货
</view>
</view>
<!-- #endif -->
<view class="w-94 padding-top-lg">
<view class="item u-border-bottom flex justify-start align-center padding-lr-sm"
style="height: 200rpx;background-color: #fff; border-radius: 20rpx;">
<view class="">
<u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png"
height="152" width="152"></u-image>
</view>
<!-- 此层wrap在此为必写的,否则可能会出现标题定位错误 -->
<view class="margin-left" style="width: 480rpx;">
<view class=" flex justify-between align-center">
<view class="text-bold" style="font-size: 30rpx;">
华润万家
</view>
<view class="flex justify-between align-center">
<view class="padding-right" @click="Collect()">
<view class="" v-if="!isCollect">
<u-image
src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/collect.svg"
height="40" width="40" color='#FF9526'></u-image>
</view>
<view class="" v-if="isCollect">
<u-image
src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/select.svg"
height="40" width="40" color='#FF9526'></u-image>
</view>
</view>
<view class="shop flex align-center justify-center">
到店
</view>
<view class="send margin-left-sm flex align-center justify-center">
配送
</view>
</view>
</view>
<view class="flex text-sm align-center justify-between margin-top-xs" style="color: #D27E1B;">
<view class="">
5.0分
</view>
<view class="">
月售:1000+
</view>
<view class="">
月浏览量:4000+
</view>
</view>
<view class="flex justify-between align-center margin-top text-sm" style="color: #999999;">
<view class="">
起送价¥20.00
</view>
<view class="">
配送费¥5.00
</view>
<view class="flex justify-between align-center">
<u-image
src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/address.svg"
height="25" width="20"></u-image>
<view class="padding-left-xs">
1.2Km
</view>
</view>
</view>
</view>
</view>
</view>
<view class="w-94 margin-top flex align-center padding justify-between"
style="background-color: #F7F8DB; height: 64rpx; border-radius: 32rpx;">
<view class="flex align-center justify-start">
<u-icon name="volume-up-fill" size="48" color="#F1AF5A"></u-icon>
<view class="padding-left-sm" style="font-size: 26rpx; color: #D7B06E;">
这里是公告内容这里是公告内容
</view>
</view>
<view class="">
<u-icon name="arrow-right" color="#F1AF5A"></u-icon>
</view>
</view>
<view class=" margin-tb-sm" style="width: 100%;">
<u-tabs :list="tabs" :current="current" active-color="#000" :is-scroll="false" @change="change"
bar-width="25" font-size="28" bg-color="#F5F9F8" bar-height="6" inactive-color="#191915"
:bar-style="{background:'#F09E37'}" gutter="20"></u-tabs>
</view>
<!-- 搜索 -->
<view v-if="current ==0">
<view class="w-94 margin-tb-sm flex align-center justify-between"
style=" height: 80rpx;border-radius: 40rpx; background-color: #F2F2F2;">
<view class="padding-left-lg flex align-center justify-start">
<u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/home/search.svg"
height="40" width="40"></u-image>
<u-search search-icon placeholder-color="#666666" placeholder="搜索附近商品" :show-action="false"
v-model="keyword"></u-search>
</view>
<view class="">
<view class="flex align-center text-white justify-center margin-right-sm "
style="height: 60rpx; width: 116rpx; background: linear-gradient(to right, #F0965F, #E76649 10vh, #E76649 100%); border-radius: 30rpx;">
搜索
</view>
</view>
</view>
<CategoryGoodsList @update-cart="onCartUpdate" />
<view class="fixed-button flex justify-around align-center">
<view class="left">
<view class="item car">
<u-badge class="car-num" :count="8" type="error" :offset="[-6, -3]"></u-badge>
<u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/shopcar.svg"
height="58" width="64"></u-image>
</view>
</view>
<view class="text-bold" style="font-size: 26rpx; ">
数量: <text style="color: #999999;">1</text>
</view>
<view class="text-bold" style="font-size: 28rpx; ">
总价:<text style="color: #FE4343;">¥</text> <text
style="color: #FE4343;font-size: 32rpx;">437.00</text>
</view>
<view class="text-df flex align-center justify-center text-bold"
style="height: 88rpx; width: 172rpx; background-color: #FE4343; border-radius: 20rpx; color: #fff;"
@click="goOrder()">
去结算
</view>
</view>
</view>
<view class="" v-else-if="current ==1">
<comment></comment>
</view>
<view class="w-94" v-else-if="current ==2" style="background-color: #fff; border-radius: 16rpx;">
<view class="padding">
<view class="text-bold" style="font-size: 32rpx;">
商家信息
</view>
<view class="flex justify-between align-center margin-top padding-bottom"
style="font-size: 28rpx; height: 60rpx; border-bottom: 2rpx solid #F1F3F2;">
<view class="">
商家电话
</view>
<view class="text-bold flex align-center justify-between margin-top-xs"
style="color: #00976A; font-size: 26rpx;">
<view class="padding-right-xs flex align-center justify-center">
<u-icon name="phone-fill" size="32rpx"></u-icon>
</view>
联系商家
</view>
</view>
<view class="flex justify-between align-center margin-top padding-bottom"
style="font-size: 28rpx; height: 60rpx; border-bottom: 2rpx solid #F1F3F2;">
<view class="">
地址
</view>
<view class="text-bold flex align-center justify-between"
style="color: #B3B4B8; font-size: 26rpx;">
金塔东路14号
<view class="padding-left-xs flex align-center justify-center">
<u-icon name="map-fill" size="32rpx" color="#11A9FF"></u-icon>
</view>
</view>
</view>
<view class="flex justify-between align-center margin-top padding-bottom"
style="font-size: 28rpx; height: 60rpx; border-bottom: 2rpx solid #F1F3F2;">
<view class="">
营业时间
</view>
<view class="flex align-center justify-between" style="color: #B3B4B8; font-size: 26rpx;">
10:00-22:00
</view>
</view>
<view class="margin-top">
<view class="">
营业资质
</view>
<view class="margin-top flex align-center justify-between">
<view class="" v-for="item in 3 " :key="item.index">
<u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png"
height="192" width="192"></u-image>
</view>
</view>
</view>
<view class="margin-top">
<view class="">
商家图片
</view>
<view class="margin-top flex align-center justify-between">
<view class="" v-for="item in 3 " :key="item.index">
<u-image src="https://env-00jxta4kb22c.normal.cloudstatic.cn/1/static/my/collect/1.png"
height="192" width="192"></u-image>
</view>
</view>
</view>
</view>
</view>
<view class="" style="height: 80rpx;">
</view>
</z-paging>
</view>
</template>
<script>
export default {
data() {
return {
navBarHeight: '',
isCollect: false,
current: 0,
tabs: [{
name: '商品'
}, {
name: '评价'
},
{
name: '商家'
}
],
};
},
methods: {
change(index) {
this.current = index;
},
goOrder() {
uni.navigateTo({
url: '/pages/order/order'
})
},
goback() {
uni.navigateBack({
delta: 1
})
},
Collect() {
this.isCollect = !this.isCollect
},
onCartUpdate(data) {
console.log('收到购物车更新:', data);
this.cart = {
...data
}; // 更新本地状态
}
},
onLoad() {
this.$nextTick(() => {
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.navBarHeight = statusBarHeight
})
}
}
</script>
<style lang="scss">
.shop {
height: 40rpx;
width: 60rpx;
border-radius: 12rpx;
font-size: 20rpx;
color: #fff;
background: linear-gradient(to right, #FF8F1F 50%, #E9664A 100%);
}
.send {
height: 40rpx;
width: 60rpx;
border-radius: 12rpx;
font-size: 20rpx;
color: #fff;
background: linear-gradient(to right, #FFDA6E 50%, #FF8F20 100%);
}
.buy {
height: 48rpx;
width: 112rpx;
color: #fff;
position: absolute;
right: 24rpx;
bottom: 18rpx;
border-radius: 24rpx;
background-color: #FC7746;
}
.title {
width: 100%;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
line-height: 1.5;
}
.fixed-button {
position: fixed;
height: 150rpx;
background-color: #fff;
border: 1px solid #F4F4F4;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
.left {
display: flex;
font-size: 20rpx;
.item {
margin: 0 30rpx;
&.car {
text-align: center;
position: relative;
.car-num {
position: absolute;
top: -10rpx;
right: -10rpx;
}
}
}
}
}
.btn {
text-align: center;
color: #fff;
padding: 20rpx;
margin: 50rpx;
border-radius: 20rpx;
background-color: #2979ff;
}
</style>
这是父组件
收不到子组件传来的数据分析问题解决问题
最新发布