<CategoryGoodsList @update-cart="onCartUpdate" />
这个是父组件调用
<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" style="height: 800rpx;" 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(item1.id)">
<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" @click="goShop(item1.id)">
<view class="text-bold" style="font-size: 30rpx;">
{{item1.title}}
</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 ">
<view class="text-red " style="font-size: 24rpx;">
¥{{item1.newMoney}}
</view>
<view class="text-gray padding-lr-xs"
style="text-decoration: line-through">
¥{{item1.newMoney}}
</view>
<view class=" flex align-center justify-center"
style="font-size: 20rpx; 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" @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>
import {
customizeLabel
} from '@/api/shop.js'
export default {
name: 'CategoryGoodsList',
data() {
return {
scrollTop: 0, //tab标题的滚动条位置
current: 0, // 预设当前项的值
menuHeight: 0, // 左边菜单的高度
menuItemHeight: 0, // 左边菜单item的高度
tabbar: [{
"name": "品类名称",
"foods": [{
"id": 1,
"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
}, {
"id": 2,
"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
}, {
"id": 3,
"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
}, {
"id": 10,
"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
}, {
"id": 11,
"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": [{
"id": 4,
"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": [{
"id": 5,
"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": [{
"id": 6,
"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": [{
"id": 7,
"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": [{
"id": 8,
"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": [{
"id": 9,
"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
}]
},
],
// storeData: [{
// "name": '',
// "foods": []
// }]
}
},
computed: {
},
methods: {
async getCustomizeLabel() {
console.log("函数被调用了")
this.loading = true;
try {
const data = {
pageNo: 1,
pageSize: -1
}
const response = await customizeLabel(data);
if (response.code === 200 || response.code === 0) {
console.log("response.data", response.data)
} else {
console.error('接口返回错误:', response.message);
}
} catch (error) {
console.log("请求失败", error)
} finally {
this.loading = false;
}
},
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() {
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,
images: food.images,
oldMoney: food.money,
buySum,
price: parseFloat(food.newMoney),
subtotal: itemTotal
});
totalAmount += buySum;
totalPrice += itemTotal;
}
});
});
// 将计算结果格式化并提交到 Vuex
const cartData = {
cartItems,
totalAmount,
totalPrice: parseFloat(totalPrice.toFixed(2))
};
// 提交到 Vuex 的 mutation
this.$store.commit('SET_CART_DATA', cartData);
console.log('数据更新', cartData)
},
// 安全获取 buySum 值
getBuySum(item) {
return typeof item.buySum === 'number' && !isNaN(item.buySum) ? item.buySum : 0;
},
goShop(id) {
// console.log('id', id)
uni.navigateTo({
url: `/pages/shop/shop?id=${id}`
})
},
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();
})
}
},
onLoad() {
this.getShopList()
this.getCustomizeLabel()
}
}
</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>
为什么函数都没进入
最新发布
本文介绍了一个通过移位操作计算整数二进制表示中1的个数的方法。使用x = x & (x - 1)巧妙地将x的二进制表示中最右边的一个1变为0，直到x为0，计数器记录了操作次数即为1的个数。以9999为例，其二进制表示中有8个1。
扫一扫
3578
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
