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

uniapp【修复】:商品分类页面无论是返回进入，重新计算购物车数量

Browse Source
This commit is contained in:
花城
2024-11-17 11:57:28 +08:00
parent cb4f24b4f5
commit 38b037bf79
4 changed files with 55 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
CoreCms.Net.Uni-App/CoreShop/core/models/cart.ts
View File

@@ -10,4 +10,9 @@ export interface CartListType {
userId ?: number; userId ?: number;
weight ?: number; weight ?: number;
select ?: boolean; select ?: boolean;
}
export interface CartMoneyNumType {
count ?: number,
money ?: number,
} }

36
CoreCms.Net.Uni-App/CoreShop/pages/classify/classify-page/classify-five/classify-five.vue
View File

@@ -85,8 +85,8 @@
<image class="img" :src="handleStaticResources('/static/images/cart-bag.png')"></image> <image class="img" :src="handleStaticResources('/static/images/cart-bag.png')"></image>
</view> </view>
<view class="price-box"> <view class="price-box">
<text class="num">购物车数量:{{ state.cartCount }}</text> <text class="num">购物车数量:{{ props.cartData.count }}</text>
<text class="price">￥{{ state.cartMoney }}</text> <text class="price">￥{{ props.cartData.money }}</text>
</view> </view>
</view> </view>
<view class="btn-buy" @click="handleGoPay"> <view class="btn-buy" @click="handleGoPay">
@@ -126,8 +126,8 @@
import { reactive, watch, ref, onMounted, getCurrentInstance, nextTick } from 'vue'; import { reactive, watch, ref, onMounted, getCurrentInstance, nextTick } from 'vue';
import { advertPosition, UserToken, onClassifyPageHide, onClassifyPagePullDownRefresh } from '@/core/consts'; import { advertPosition, UserToken, onClassifyPageHide, onClassifyPagePullDownRefresh } from '@/core/consts';
import { useLoginStore } from '@/core/store'; import { useLoginStore } from '@/core/store';
import { queryGoodsPageList, queryCartNumAndMoney, queryGoodsDetailByToken, queryGoodsDetail, queryAddCart } from '@/core/api'; import { queryGoodsPageList, queryGoodsDetailByToken, queryGoodsDetail, queryAddCart } from '@/core/api';
import type { CategoriesType, Response, GoodsListType, GoodsType } from '@/core/models'; import type { CategoriesType, Response, GoodsListType, GoodsType, CartMoneyNumType } from '@/core/models';
import { getDomInfo, handleStaticResources, handleRouteNavigateTo, handleShowToast, handleRouteSwitchTab } from '@/core/utils'; import { getDomInfo, handleStaticResources, handleRouteNavigateTo, handleShowToast, handleRouteSwitchTab } from '@/core/utils';
import { AddCartEnum, PaymentTypeEnum, RouteSwitchTabEnum } from '@/core/enum'; import { AddCartEnum, PaymentTypeEnum, RouteSwitchTabEnum } from '@/core/enum';
import GoodsDetailSkuPopup from '@/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.vue'; import GoodsDetailSkuPopup from '@/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.vue';
@@ -142,10 +142,12 @@
data : Array<CategoriesType>, data : Array<CategoriesType>,
height : number, height : number,
statusBarHeight : number, statusBarHeight : number,
cartData : CartMoneyNumType,
}>(), { }>(), {
data: () => [], data: () => [],
height: 0, height: 0,
statusBarHeight: 0, statusBarHeight: 0,
cartData: () => ({}),
}); });
const bigClassifyPop = ref(); const bigClassifyPop = ref();
@@ -190,8 +192,9 @@
const addCartLoading = ref(false); const addCartLoading = ref(false);
const handleBuyNow = useLoadingFn(onBuyNow, buyNowLoading); const handleBuyNow = useLoadingFn(onBuyNow, buyNowLoading);
const handleAddCart = useLoadingFn(onAddCart, addCartLoading) const handleAddCart = useLoadingFn(onAddCart, addCartLoading)
const emit = defineEmits(['getCartNumAndMoney'])
watch(() => props.data, (newVal : Array<CategoriesType>) => { watch(() => props.data, (newVal : Array<CategoriesType>) => {
if (newVal) { if (newVal) {
@@ -216,9 +219,9 @@
}) })
onMounted(() => { onMounted(() => {
if (uni.getStorageSync(UserToken)) { uni.$on(onClassifyPageHide, () => {
getCartNumAndMoney(); state.showSku = false;
} })
uni.$on(onClassifyPagePullDownRefresh, () => { uni.$on(onClassifyPagePullDownRefresh, () => {
state.page = 1; state.page = 1;
@@ -226,10 +229,6 @@
state.goodsList = []; state.goodsList = [];
}) })
uni.$on(onClassifyPageHide, () => {
state.showSku = false;
})
nextTick(async () => { nextTick(async () => {
state.bigClassifyH = ((await getDomInfo('.big-classify', instance.proxy)) as { height : number }).height; state.bigClassifyH = ((await getDomInfo('.big-classify', instance.proxy)) as { height : number }).height;
setTimeout(async () => { setTimeout(async () => {
@@ -252,13 +251,6 @@
} }
} }
/** 获取购物车数量和价格 */
const getCartNumAndMoney = async () => {
const cartNumAndMoney : Response<{ count : number, money : number }> = await queryCartNumAndMoney();
state.cartCount = cartNumAndMoney?.data?.count || 0;
state.cartMoney = cartNumAndMoney?.data?.money || 0;
}
/** 选择sku */ /** 选择sku */
const handleSelectSku = (id : number) => { const handleSelectSku = (id : number) => {
_useLoginStore.checkLogin(async () => { _useLoginStore.checkLogin(async () => {
@@ -296,7 +288,7 @@
if (addCart.status) { if (addCart.status) {
handleShowToast(addCart.msg, "success"); handleShowToast(addCart.msg, "success");
/** 添加成功后，重新获取购物车数量和价格 */ /** 添加成功后，重新获取购物车数量和价格 */
getCartNumAndMoney(); emit("getCartNumAndMoney");
/** 关闭sku弹框 */ /** 关闭sku弹框 */
handleChangePopup(false); handleChangePopup(false);
} else { } else {
@@ -336,7 +328,7 @@
state.leftTabId = item?.child[0].id; state.leftTabId = item?.child[0].id;
state.leftTabList = item?.child; state.leftTabList = item?.child;
state.rightTabList = item?.child[0]?.child; state.rightTabList = item?.child[0]?.child;
handleResetGoodsList(); handleResetGoodsList();
hanlderHidebigClassifyPop(); hanlderHidebigClassifyPop();
} }

27
CoreCms.Net.Uni-App/CoreShop/pages/classify/classify-page/classify-four/classify-four.vue
View File

@@ -56,8 +56,8 @@
<image class="img" :src="handleStaticResources('/static/images/cart-bag.png')"></image> <image class="img" :src="handleStaticResources('/static/images/cart-bag.png')"></image>
</view> </view>
<view class="price-box"> <view class="price-box">
<text class="num">购物车数量:{{ state.cartCount }}</text> <text class="num">购物车数量:{{ props.cartData.count }}</text>
<text class="price">￥{{ state.cartMoney }}</text> <text class="price">￥{{ props.cartData.money }}</text>
</view> </view>
</view> </view>
<view class="btn-buy" @click="handleGoPay"> <view class="btn-buy" @click="handleGoPay">
@@ -77,8 +77,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'; import { onMounted, reactive, ref, watch } from 'vue';
import { UserToken, advertPosition, onClassifyPageHide, onClassifyPagePullDownRefresh } from '@/core/consts'; import { UserToken, advertPosition, onClassifyPageHide, onClassifyPagePullDownRefresh } from '@/core/consts';
import { queryGoodsPageList, queryCartNumAndMoney, queryGoodsDetailByToken, queryGoodsDetail, queryAddCart } from '@/core/api'; import { queryGoodsPageList, queryGoodsDetailByToken, queryGoodsDetail, queryAddCart } from '@/core/api';
import type { CategoriesType, Response, GoodsListType, GoodsType } from '@/core/models'; import type { CategoriesType, Response, GoodsListType, GoodsType ,CartMoneyNumType} from '@/core/models';
import { handleStaticResources, handleRouteNavigateTo, handleShowToast, handleRouteSwitchTab } from '@/core/utils'; import { handleStaticResources, handleRouteNavigateTo, handleShowToast, handleRouteSwitchTab } from '@/core/utils';
import { useLoginStore } from '@/core/store' import { useLoginStore } from '@/core/store'
import { AddCartEnum, PaymentTypeEnum, RouteSwitchTabEnum } from '@/core/enum'; import { AddCartEnum, PaymentTypeEnum, RouteSwitchTabEnum } from '@/core/enum';
@@ -91,9 +91,11 @@
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
data : Array<CategoriesType>, data : Array<CategoriesType>,
height : number, height : number,
cartData : CartMoneyNumType,
}>(), { }>(), {
data: () => [], data: () => [],
height: 0, height: 0,
cartData:()=>({}),
}); });
const state = reactive<{ const state = reactive<{
@@ -127,7 +129,9 @@
const handleBuyNow = useLoadingFn(onBuyNow, buyNowLoading); const handleBuyNow = useLoadingFn(onBuyNow, buyNowLoading);
const handleAddCart = useLoadingFn(onAddCart, addCartLoading) const handleAddCart = useLoadingFn(onAddCart, addCartLoading)
const emit = defineEmits(['getCartNumAndMoney'])
watch(() => props.data, (newVal : Array<CategoriesType>) => { watch(() => props.data, (newVal : Array<CategoriesType>) => {
if (newVal) { if (newVal) {
state.classifyData = newVal.map((item : CategoriesType) => { state.classifyData = newVal.map((item : CategoriesType) => {
@@ -147,10 +151,6 @@
}) })
onMounted(() => { onMounted(() => {
if (uni.getStorageSync(UserToken)) {
getCartNumAndMoney();
}
uni.$on(onClassifyPagePullDownRefresh, () => { uni.$on(onClassifyPagePullDownRefresh, () => {
state.page = 1; state.page = 1;
state.totalPages = 1; state.totalPages = 1;
@@ -176,13 +176,6 @@
} }
} }
/** 获取购物车数量和价格 */
const getCartNumAndMoney = async () => {
const cartNumAndMoney : Response<{ count : number, money : number }> = await queryCartNumAndMoney();
state.cartCount = cartNumAndMoney?.data?.count || 0;
state.cartMoney = cartNumAndMoney?.data?.money || 0;
}
/** 选择sku */ /** 选择sku */
const handleSelectSku = (id : number) => { const handleSelectSku = (id : number) => {
_useLoginStore.checkLogin(async () => { _useLoginStore.checkLogin(async () => {
@@ -220,7 +213,7 @@
if (addCart.status) { if (addCart.status) {
handleShowToast(addCart.msg, 'success'); handleShowToast(addCart.msg, 'success');
/** 添加成功后，重新获取购物车数量和价格 */ /** 添加成功后，重新获取购物车数量和价格 */
await getCartNumAndMoney(); emit("getCartNumAndMoney");
/** 关闭sku弹框 */ /** 关闭sku弹框 */
handleChangePopup(false); handleChangePopup(false);
} else { } else {

34
CoreCms.Net.Uni-App/CoreShop/pages/classify/classify.vue
View File

@@ -33,10 +33,10 @@
<classifyThree v-else-if="shopConfigStore.config.cateStyle == GoodsListEnum.three" <classifyThree v-else-if="shopConfigStore.config.cateStyle == GoodsListEnum.three"
:data="state.categoriesList" :height="state.height"></classifyThree> :data="state.categoriesList" :height="state.height"></classifyThree>
<classifyFour v-else-if="shopConfigStore.config.cateStyle == GoodsListEnum.four" <classifyFour v-else-if="shopConfigStore.config.cateStyle == GoodsListEnum.four"
:data="state.categoriesList" :height="state.height"> :data="state.categoriesList" :cartData="state.cartData" :height="state.height" @getCartNumAndMoney="getCartNumAndMoney">
</classifyFour> </classifyFour>
<classifyFive v-else-if="shopConfigStore.config.cateStyle == GoodsListEnum.five" <classifyFive v-else-if="shopConfigStore.config.cateStyle == GoodsListEnum.five"
:data="state.categoriesList" :height="state.height" :statusBarHeight="statusBarHeight"> :data="state.categoriesList" :cartData="state.cartData" :height="state.height" :statusBarHeight="statusBarHeight" @getCartNumAndMoney="getCartNumAndMoney">
</classifyFive> </classifyFive>
</view> </view>
</view> </view>
@@ -45,13 +45,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, reactive, watchEffect, ref } from 'vue'; import { onMounted, reactive, watchEffect, ref } from 'vue';
import { onHide, onPullDownRefresh } from '@dcloudio/uni-app'; import { onHide, onPullDownRefresh, onShow } from '@dcloudio/uni-app';
import { useShopConfigStore } from '@/core/store'; import { useShopConfigStore } from '@/core/store';
import { queryAllCategories } from '@/core/api'; import { queryAllCategories, queryCartNumAndMoney } from '@/core/api';
import { GoodsListEnum } from '@/core/enum'; import { GoodsListEnum } from '@/core/enum';
import { handleRouteNavigateTo } from '@/core/utils'; import { handleRouteNavigateTo } from '@/core/utils';
import { onClassifyPageHide, onClassifyPagePullDownRefresh } from '@/core/consts'; import { onClassifyPageHide, onClassifyPagePullDownRefresh, UserToken } from '@/core/consts';
import type { Response, ShopConfigStoreType, CategoriesType } from '@/core/models'; import type { Response, ShopConfigStoreType, CategoriesType ,CartMoneyNumType} from '@/core/models';
import classifyOne from './classify-page/classify-one/classify-one.vue'; import classifyOne from './classify-page/classify-one/classify-one.vue';
import classifyTwo from './classify-page/classify-two/classify-two.vue'; import classifyTwo from './classify-page/classify-two/classify-two.vue';
import classifyThree from './classify-page/classify-three/classify-three.vue'; import classifyThree from './classify-page/classify-three/classify-three.vue';
@@ -70,10 +70,12 @@
categoriesList : Array<CategoriesType>, categoriesList : Array<CategoriesType>,
height : number, height : number,
keyWord : string; keyWord : string;
cartData : CartMoneyNumType;
}>({ }>({
categoriesList: [], categoriesList: [],
height: 0, height: 0,
keyWord: "", keyWord: "",
cartData: {},
}) })
const handleuAllCategories = useLoadingFn(getAllCategories, loading); const handleuAllCategories = useLoadingFn(getAllCategories, loading);
@@ -88,10 +90,17 @@
}) })
onHide(() => { onHide(() => {
/** 触发自定义onhide事件，让后代组件监听页面是关闭 */ /** 触发自定义onhide事件，让后代组件监听页面是关闭 - 用于关闭sku弹框 */
uni.$emit(onClassifyPageHide); uni.$emit(onClassifyPageHide);
}); });
onShow(() => {
if ((shopConfigStore.config.cateStyle == GoodsListEnum.four || shopConfigStore.config.cateStyle == GoodsListEnum.five) &&
uni.getStorageSync(UserToken)) {
getCartNumAndMoney();
}
});
onPullDownRefresh(async () => { onPullDownRefresh(async () => {
/** 触发onPullDownRefresh事件，让后代组件监听页面是下拉刷新 */ /** 触发onPullDownRefresh事件，让后代组件监听页面是下拉刷新 */
uni.$emit(onClassifyPagePullDownRefresh); uni.$emit(onClassifyPagePullDownRefresh);
@@ -101,12 +110,21 @@
}); });
/** 获取购物车数量价格 */ /** 获取数据分类 */
async function getAllCategories() { async function getAllCategories() {
const allCategories : Response<Array<CategoriesType>> = await queryAllCategories(); const allCategories : Response<Array<CategoriesType>> = await queryAllCategories();
state.categoriesList = allCategories.data || []; state.categoriesList = allCategories.data || [];
} }
/** 获取购物车数量和价格 */
const getCartNumAndMoney = async () => {
const cartNumAndMoney : Response<{ count : number, money : number }> = await queryCartNumAndMoney();
state.cartData = {
count: cartNumAndMoney?.data?.count || 0,
money: cartNumAndMoney?.data?.money || 0,
}
}
/** 搜索 */ /** 搜索 */
const handleSearch = () => { const handleSearch = () => {
handleRouteNavigateTo(`/pages/category/category?key=${state.keyWord}`); handleRouteNavigateTo(`/pages/category/category?key=${state.keyWord}`);