uniapp(新增):秒杀详情立即购买,团购详情立即购买,团购详情购买操作,收货地址提交,订单售后提交 添加 按钮loading状态,防止多次点击

This commit is contained in:
21世纪小八路
2024-10-20 11:44:14 +08:00
parent e0618551aa
commit 8edb0f1567
7 changed files with 75 additions and 44 deletions

View File

@@ -96,8 +96,8 @@
<!-- 商品sku弹框 -->
<GoodsDetailSkuPopup :showSku="state.showSku" :goodsDetailData="state.goodsDetailData"
:safeAreaInsetBottom="false" @handleChangePopup="handleChangePopup" @handleAddCart="handleAddCart"
@handleBuyNow="handleBuyNow">
:safeAreaInsetBottom="false" :buyNowNowloading="buyNowLoading" :addCartloading="addCartLoading"
@handleChangePopup="handleChangePopup" @handleAddCart="handleAddCart" @handleBuyNow="handleBuyNow">
</GoodsDetailSkuPopup>
<!-- 头部大分类的弹框 -->
@@ -131,6 +131,7 @@
import { getDomInfo, handleStaticResources, handleRouteNavigateTo, handleShowToast, handleRouteSwitchTab } from '@/core/utils';
import { AddCartEnum, PaymentTypeEnum, RouteSwitchTabEnum } from '@/core/enum';
import GoodsDetailSkuPopup from '@/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.vue';
import { useLoadingFn } from '@/core/hooks';
const instance = getCurrentInstance();
@@ -185,6 +186,13 @@
goodsDetailData: {},
});
const buyNowLoading = ref(false);
const addCartLoading = ref(false);
const handleBuyNow = useLoadingFn(onBuyNow, buyNowLoading);
const handleAddCart = useLoadingFn(onAddCart, addCartLoading)
watch(() => props.data, (newVal : Array<CategoriesType>) => {
if (newVal) {
state.classifyData = newVal.map((item : CategoriesType) => {
@@ -277,7 +285,7 @@
}
/** 添加购物车 */
const handleAddCart = async ({ productId, nums } : any) => {
async function onAddCart({ productId, nums } : any) {
const addCart : Response<number> = await queryAddCart({
productId,
nums,
@@ -295,7 +303,7 @@
}
/** 立即购买 */
const handleBuyNow = async ({ productId, nums } : any) => {
async function onBuyNow({ productId, nums } : any) {
const addCart : Response<number> = await queryAddCart({
productId,
nums,

View File

@@ -127,6 +127,7 @@
const addCartLoading = ref(false);
const handleBuyNow = useLoadingFn(onBuyNow, buyNowLoading);
const handleAddCart = useLoadingFn(onAddCart, addCartLoading)
watch(() => props.data, (newVal : Array<CategoriesType>) => {
if (newVal) {
@@ -208,7 +209,7 @@
}
/** 添加购物车 */
const handleAddCart = async ({ productId, nums } : any) => {
async function onAddCart({ productId, nums } : any) {
const addCart : Response<number> = await queryAddCart({
productId,
nums,

View File

@@ -54,14 +54,14 @@
<!-- 商品sku弹框 -->
<GoodsDetailSkuPopup :showSku="state.showSku" :goodsDetailData="state.goodsDetailData"
:isShowAddCartBtn="false" btnBuyTitlt="立即团购" @handleChangePopup="handleChangePopup"
@handleBuyNow="handleSeckillNow"></GoodsDetailSkuPopup>
:isShowAddCartBtn="false" :buyNowNowloading="loading" btnBuyTitlt="立即团购"
@handleChangePopup="handleChangePopup" @handleBuyNow="handleBuyNow"></GoodsDetailSkuPopup>
</view>
</coreshop-page>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { reactive, ref } from 'vue';
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { queryActivityDetial, queryCartNum, queryShare, queryAddCart } from '@/core/api';
import { PaymentTypeEnum, ShareClientEnum, ShareModelEnum, ShareEnum } from '@/core/enum';
@@ -69,12 +69,11 @@
import { UserToken, shareUrl } from '@/core/consts'
import { useCartStore, useLoginStore } from '@/core/store';
import { handleShowToast, handleRouteNavigateTo } from '@/core/utils';
import GoodsDetail from '@/pages/components/goods-detail/index.vue';
import GoodsDetailRecommend from '@/pages/components/goods-detail/components/goods-detail-recommend/goods-detail-recommend.vue';
import GoodsDetailSkuPopup from '@/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.vue';
import GoodsDetailBottomTabbar from '@/pages/components/goods-detail/components/goods-detail-bottom-tabbar/goods-detail-bottom-tabbar.vue';
import { useLoadingFn } from '@/core/hooks';
interface QueryParams {
id : number;
}
@@ -117,6 +116,9 @@
}
});
const loading = ref(false);
const handleBuyNow = useLoadingFn(onBuyNow, loading)
onLoad((query : QueryParams) => {
state.id = Number(query.id);
/** 获取商品详情 */
@@ -177,7 +179,7 @@
}
/** 立即秒杀 */
const handleSeckillNow = async ({ productId, nums } : any) => {
async function onBuyNow({ productId, nums } : any) {
const addCart : Response<number> = await queryAddCart({
ProductId: productId,
Nums: nums,

View File

@@ -3,7 +3,7 @@
<view class="goods-detail">
<!-- 商品详情 -->
<GoodsDetail :goodsId="state.goodsDetailData?.id" :goodsDetailData="state.goodsDetailData"
:swiperBanner="state.swiperBanner" :shareType="ShareEnum.pinTuan"
:swiperBanner="state.swiperBanner" :shareType="ShareEnum.pinTuan"
:goodsDetailContent="state.goodsDetailContent" :isActivityGoods="true">
<template #activityGoodsOtheService>
<view class="pinTuan-record" v-if="state.goodsDetailData?.pinTuanRecord?.length > 0">
@@ -62,14 +62,14 @@
<!-- 商品sku弹框 -->
<GoodsDetailSkuPopup :showSku="state.showSku" :goodsDetailData="state.goodsDetailData"
:isShowAddCartBtn="false" @handleChangePopup="handleChangePopup" @handleBuyNow="handleBuyNow"
:isShowAddCartBtn="false" :buyNowNowloading="loading" @handleChangePopup="handleChangePopup" @handleBuyNow="handleBuyNow"
:btnBuyTitlt="state.btnBuyTitlt">
</GoodsDetailSkuPopup>
</GoodsDetailSkuPopup>
</view>
</coreshop-page>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { queryPinTuanGoodsDetail, queryCartNum, queryAddCart, queryOrderPinTuanTeamInfo } from '@/core/api';
import type { Response } from '@/core/models';
@@ -83,6 +83,7 @@
import GoodsDetailRecommend from '@/pages/components/goods-detail/components/goods-detail-recommend/goods-detail-recommend.vue';
import GoodsDetailSkuPopup from '@/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.vue';
import GoodsDetailBottomTabbar from '@/pages/components/goods-detail/components/goods-detail-bottom-tabbar/goods-detail-bottom-tabbar.vue';
import { useLoadingFn } from '@/core/hooks';
interface QueryParams {
id : number;
@@ -107,7 +108,7 @@
teamId : number;
isSingleBuy : boolean;
btnBuyTitlt : string;
teamInfo : any;
teamInfo : any;
}>({
id: 0,
goodsDetailData: {},
@@ -120,9 +121,12 @@
teamId: 0,
isSingleBuy: true,
btnBuyTitlt: "发起拼团",
teamInfo: {},
teamInfo: {},
});
const loading = ref(false);
const handleBuyNow = useLoadingFn(onBuyNow, loading)
onLoad((query : QueryParams) => {
if (query?.teamId) {
state.goodsDetailData = {
@@ -193,7 +197,7 @@
state.isSingleBuy = true;
state.btnBuyTitlt = '单独购买';
state.goodsDetailData.skuList.sku_list = state.defaultSkuList;
});
});
}
/** 拼团购买 */
@@ -204,7 +208,7 @@
state.isSingleBuy = false;
state.btnBuyTitlt = '发起拼团';
state.goodsDetailData.skuList.sku_list = state.activitySkuList;
});
});
}
/** 去拼单 */
@@ -219,11 +223,11 @@
}
/** 立即购买购买 */
const handleBuyNow = async ({ productId, nums } : any) => {
async function onBuyNow({ productId, nums } : any) {
if (state.isSingleBuy) {
handleSingleQuery(productId, nums)
await handleSingleQuery(productId, nums)
} else {
handleMultipleQuery(productId, nums)
await handleMultipleQuery(productId, nums)
}
}
@@ -261,7 +265,7 @@
} else {
handleShowToast(addCart.msg);
}
}
}
</script>
<style lang="scss" scoped>
@import './detail.scss';

View File

@@ -3,7 +3,7 @@
<view class="goods-detail">
<!-- 商品详情 -->
<GoodsDetail :goodsId="state.goodsDetailData?.id" :goodsDetailData="state.goodsDetailData"
:swiperBanner="state.swiperBanner" :spesDesc="state.spesDesc"
:swiperBanner="state.swiperBanner" :spesDesc="state.spesDesc"
:goodsDetailContent="state.goodsDetailContent" :isActivityGoods="true" :shareType="ShareEnum.seckill"
@hanldeShowGoodSku="hanldeShowGoodSku">
<template #tip>
@@ -54,32 +54,33 @@
<!-- 商品sku弹框 -->
<GoodsDetailSkuPopup :showSku="state.showSku" :goodsDetailData="state.goodsDetailData"
:isShowAddCartBtn="false" btnBuyTitlt="立即秒杀" @handleChangePopup="handleChangePopup"
@handleBuyNow="handleSeckillNow"></GoodsDetailSkuPopup>
:isShowAddCartBtn="false" btnBuyTitlt="立即秒杀" :buyNowNowloading="loading"
@handleChangePopup="handleChangePopup" @handleBuyNow="handleSeckillNow"></GoodsDetailSkuPopup>
</view>
</coreshop-page>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { reactive, ref } from 'vue';
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { queryActivityDetial, queryCartNum, queryShare, queryAddCart, queryUserInfo } from '@/core/api';
import { PaymentTypeEnum, ShareClientEnum, ShareModelEnum, ShareEnum } from '@/core/enum';
import type { Response, UserInfoType } from '@/core/models';
import type { Response } from '@/core/models';
import { UserToken, shareUrl } from '@/core/consts'
import { useCartStore, useUserInfoStore ,useLoginStore} from '@/core/store';
import { useCartStore, useLoginStore } from '@/core/store';
import { handleShowToast, handleRouteNavigateTo } from '@/core/utils';
import GoodsDetail from '@/pages/components/goods-detail/index.vue';
import GoodsDetailRecommend from '@/pages/components/goods-detail/components/goods-detail-recommend/goods-detail-recommend.vue';
import GoodsDetailSkuPopup from '@/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.vue';
import GoodsDetailBottomTabbar from '@/pages/components/goods-detail/components/goods-detail-bottom-tabbar/goods-detail-bottom-tabbar.vue';
import { useLoadingFn } from '@/core/hooks';
interface QueryParams {
id : number;
}
/** 登录store */
const _useLoginStore = useLoginStore();
const _useLoginStore = useLoginStore();
const cartStore = useCartStore();
@@ -91,7 +92,7 @@
shareUrl : string;
id : number;
showTip : boolean;
spesDesc : string;
spesDesc : string;
timeData : {
days : number,
hours : number,
@@ -106,7 +107,7 @@
shareUrl: "",
id: 0,
showTip: true,
spesDesc: "",
spesDesc: "",
timeData: {
days: 0,
hours: 0,
@@ -115,6 +116,9 @@
}
});
const loading = ref(false);
const handleSeckillNow = useLoadingFn(onSeckillNow, loading)
onLoad((query : QueryParams) => {
state.id = Number(query.id);
/** 获取商品详情 */
@@ -171,11 +175,11 @@
const hanldeShowGoodSku = () => {
_useLoginStore.checkLogin(() => {
state.showSku = true;
});
});
}
/** 立即秒杀 */
const handleSeckillNow = async ({ productId, nums } : any) => {
async function onSeckillNow({ productId, nums } : any) {
const addCart : Response<number> = await queryAddCart({
ProductId: productId,
Nums: nums,
@@ -190,7 +194,7 @@
} else {
handleShowToast(addCart.msg);
}
}
}
/** 获取分享url */
const getShareUrl = async () => {

View File

@@ -46,7 +46,7 @@
</view>
</view>
<coreshop-fixed-bottom-button :radius="100" title="保存"
<coreshop-fixed-bottom-button :radius="100" title="保存" :loading="loading"
@onClick="handleSaveShip"></coreshop-fixed-bottom-button>
<coreshop-select-city :show="state.showSelectCity" :pickerValue="state.pickerValue"
@@ -56,13 +56,14 @@
</coreshop-page>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { reactive, ref } from 'vue';
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import { AddressPageTitltEnum, ShowAllowAddressToUseMap } from '@/core/enum';
import { queryAreaId, querySaveUserShip, queryShipDetail } from '@/core/api';
import type { Response, ShopConfigStoreType, AddressType } from '@/core/models';
import { useShopConfigStore } from '@/core/store';
import { handleShowToast } from '@/core/utils';
import { useLoadingFn } from '@/core/hooks';
interface QueryParams {
type : string;
@@ -103,7 +104,7 @@
city: "",
longitude: 0,
latitude: 0,
region: ['湖南省', '怀化市', '鹤城区'],
region: [],
shipId: 0,
submitStatus: true,
pickerValue: '',
@@ -118,6 +119,11 @@
}
});
const loading = ref(false);
const handleSaveShip = useLoadingFn(onSaveShip, loading)
onShow(() => {
// #ifdef MP-WEIXIN
const chooseLocation = requirePlugin('chooseLocation');
@@ -278,7 +284,7 @@
}
/** 提交地址 */
const handleSaveShip = async () => {
async function onSaveShip() {
if (!state.submitStatus) {
return;
}

View File

@@ -91,20 +91,23 @@
</view>
<!-- 按钮 -->
<view class="btn-box">
<!-- <view class="btn-box">
<view class="btn" @click="handlesubmit">提交</view>
</view>
</view> -->
<coreshop-fixed-bottom-button :loading="loading" title="提交"
@onClick="handlesubmit()"></coreshop-fixed-bottom-button>
</view>
</coreshop-page>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { handleShowToast, handleRouteNavigateTo } from '@/core/utils';
import { queryOrderDetails, queryUploadImages, queryAddAftersales } from '@/core/api';
import type { Response } from '@/core/models';
import { OrderAllStatusTypeEnum, OrderShipStatusEnum } from '@/core/enum';
import { amount } from '@/uni_modules/uv-ui-tools/libs/function/test.js';
import { useLoadingFn } from '@/core/hooks';
enum RefundType {
/** 仅退款 */
@@ -141,6 +144,9 @@
refundPrice: 0,
});
const loading = ref(false);
const handlesubmit = useLoadingFn(onSubmit, loading)
onLoad((query : QueryParams) => {
if (query?.orderId) {
state.orderId = query?.orderId;
@@ -288,7 +294,7 @@
}
/** 提交 */
const handlesubmit = async () => {
async function onSubmit() {
if (!amount(state.refundPrice)) {
handleShowToast('请输入正确金额'); return;
}