请老师帮我看一下,为什么获取不到count
<template>
<!-- 商品列表 -->
<div class="content">
<div class='content_nav' id="content_nav">
<div :class="{ 'content_nav_item': true, 'active': currentTab === item.tab }" data-tab="all"
v-for="item of tabData" :key="item.name" @click="() => getTab(item.tab)">{{ item.name }}</div>
<!-- <div class="content_nav_item " data-tab="all">全部商品</div>
<div class="content_nav_item " data-tab="seckill">秒杀</div>
<div class="content_nav_item " data-tab="fruit">新鲜水果</div> -->
<!-- <div class="content_nav_item ">休闲食品</div>
<div class="content_nav_item ">时令蔬菜</div>
<div class="content_nav_item ">肉蛋家禽</div> -->
</div>
<div class="content_item">
<div class="content_dec" v-for="item of list" :key="item._id">
<img :src="item.imgUrl" class="content_dec_img" alt="">
<div class="content_dec_commodity">
<ul class="commodity_list">
<li class="commodity_list_name">{{ item.name }}</li>
<li class="commodity_list_number">月售{{ item.salce }}件</li>
<li class="commodity_list_price">¥{{ item.price }}</li>
</ul>
<div class="commodity_list_oldprice">¥{{ item.oldPrice }}</div>
</div>
<div class="content_dec_addsub">
<p class="addsub_minus" @click="()=>{changeShopContent(shopId, item._id, item,-1)}">—</p>
<p class="addsub_num">{{ carList?.[shopId]?.[item._id].count || 0 }}</p>
<p class="addsub_add" @click="() => { changeShopContent(shopId, item._id, item,1) }">+</p>
</div>
</div>
</div>
</div>
</template>
<!-- /api/shop/:id/products -->
<script>
import { reactive, toRefs, ref, watchEffect } from 'vue';
import { useRoute } from 'vue-router';
import { get } from '../../utils/request';
import {useShopCarEffect} from './changeShopContent';
const tabData = [{ name: '全部商品', tab: 'all' },
{ name: '秒杀', tab: 'seckill' },
{ name: '新鲜水果', tab: 'fruit' }]
//Tab相关
const useTabDeffect = () => {
const currentTab = ref(tabData[0].tab,)
// console.log(ref(tabData[0].tab,));
const getTab = (tab) => {
currentTab.value = tab;
console.log(tab);
// getContentData(tab)
// const content_nav_item=document.querySelectorAll('.content_nav_item')
// for(let i=0;i<content_nav_item.length;i++){
// content_nav_item[i].classList.remove('active')
// }
// e.target.classList.add('active')
}
return { currentTab, getTab }
}
//List列表相关
const useGetContentDataEffect = (currentTab, shopId) => {
const contentList = reactive({ list: [] });
// console.log(reactive([{ a: 1 }, { b: 2 }]));
//获取列表商品数据
const getContentData = async () => {
const result = await get(`/api/shop/${shopId}/products`, { tab: currentTab.value });
if (result?.errno === 0 && result?.data) {
contentList.list = result.data
}
}
//watchEffect监听getContentData中数据变动
watchEffect(() => {
getContentData()
})
const { list } = toRefs(contentList)
// console.log(list);
return { list }
}
export default {
name: 'Content',
setup() {
const route = useRoute();
const shopId = route.params.id
const { currentTab, getTab } = useTabDeffect();
const { list } = useGetContentDataEffect(currentTab, shopId);
// const { contentList } = toRefs(data)
const { changeShopContent,carList } = useShopCarEffect()
return {
getTab, tabData, currentTab, list,
shopId,changeShopContent,carList
};
}
}
</script>
<style lang="scss" scoped>
@import '../../style/viriables.scss';
@import '../../style/mixins.scss';
.content {
position: absolute;
left: 0;
right: 0;
top: 1.60rem;
bottom: .49rem;
display: flex;
&_nav {
// width: .76rem;
background-color: $content_bcgColor;
&_item {
width: 0.76rem;
height: .40rem;
font-size: .14rem;
text-align: center;
line-height: .40rem;
}
.active {
background-color: #ffffff;
}
}
&_item {
flex-grow: 1;
// width: 265px;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0 .18rem 0 .16rem;
}
&_dec {
width: 100%;
height: .80rem;
display: flex;
justify-content: space-around;
margin-bottom: .12rem;
border-bottom: 1px solid #F1F1F1;
position: relative;
box-sizing: border-box;
&_img {
width: .68rem;
height: .68rem;
}
&_commodity {
display: flex;
justify-content: space-between;
flex-grow: 1;
padding-left: .16rem;
height: .68rem;
overflow: hidden;
position: relative;
.commodity_list {
line-height: .24rem;
&_name {
@include ellipsis;
font-size: .14rem;
}
&_number {
font-size: .12rem;
}
&_price {
font-size: .14rem;
color: #E93B3B;
}
}
.commodity_list_oldprice {
position: absolute;
font-size: 12px;
text-decoration: line-through;
bottom: 0;
left: .60rem;
color: #999999;
transform: scale(.7);
}
}
&_addsub {
height: .20rem;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0px;
bottom: .08rem;
box-sizing: border-box;
.addsub_minus,
.addsub_add {
width: .2rem;
height: .2rem;
display: inline-block;
border-radius: 50%;
text-align: center;
line-height: .173rem;
}
.addsub_minus {
width: .1858rem;
height: .1858rem;
border: 1px solid #666;
color: #666;
font-size: .10rem;
}
.addsub_add {
width: .20rem;
height: .2rem;
background-color: #0091FF;
color: #fff;
font-size: .20rem;
}
.addsub_num {
margin: 0 .10rem;
}
}
}
}
</style>import { toRefs } from 'vue';
import { createStore } from 'vuex'
export default createStore({
state: {
carList: {
}
},
getters: {
},
mutations: {
changeShopContent(state, payload) {
const { shopId, productId, productData } = payload;
let shopInfo = state.carList[shopId]
if (!shopInfo) {
shopInfo = {}
}
let productInfo = shopInfo[productId]
if (!productInfo) {
productInfo = productData
productInfo.count = 0
}
productInfo.count = productInfo.count + payload.num;
if (payload.num > 0) {
productInfo.checked = true
}
if (productInfo.count >= 99) {
productInfo.count = 99
}
if (productInfo.count <= 0) {
productInfo.count = 0
}
shopInfo[productId] = productInfo;
state.carList[shopId] = shopInfo;
},
toChangeChecked(state, payload) {
const { shopId, productId } = payload;
let product = state.carList[shopId][productId]
product.checked=!product.checked
}
},
actions: {
},
modules: {
}
})import { useStore } from 'vuex';
//购物车相关数据
export const useShopCarEffect = () => {
const store = useStore();
const carList = store.carList
console.log(carList);
const changeShopContent = (shopId, productId, productData, num) => {
store.commit('changeShopContent', {
shopId, productId, productData, num
})
}
return { carList, changeShopContent }
}代码和老师一样的,就不知道哪里错了
5
收起
正在回答 回答被采纳积分+1
1回答
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星