uniapp【新增】： 新增添加购物车，提交订单，立即购买，代理，分销店铺设置，订单支付添加loading 禁用多次点击状态

CoreCms.Net.Uni-App/CoreShop/components/coreshop-button/coreshop-button.vue

@@ -1,7 +1,7 @@
 <template>
-	<view class="btn" :style="{'border-radius':radiusComp,'background-color':props.backgroundColor,'color':props.color}" @click="onClick()">
-		{{props.title}}
-	</view>
+	<uv-button :text="props.title" :loading="props.loading"
+		:custom-style="{'border-radius':radiusComp,'height':'100%','width':'100%','background-color':props.backgroundColor,'color':props.color,...customStyleComp}"
+		@click="onClick()"></uv-button>
 </template>
 
 <script setup lang="ts">
@@ -14,26 +14,31 @@
 		radius ?: number;
 		backgroundColor ?: string;
 		color ?: string;
+		loading : boolean;
+		customStyle ?: { [key : string] : any }
 	}>(), {
 		title: '保存',
 		radius: 44,
 		backgroundColor: '#D33123',
-		color: '#FFFFFF'
+		color: '#FFFFFF',
+		loading: false,
 	})
 
 	const radiusComp = computed(() => `${props.radius}px`);
-
+	const customStyleComp = computed(() => {
+		return props.customStyle || { 'height': '88rpx' };
+	});
 	const onClick = () => {
 		emits('onClick');
 	}
 </script>
 
 <style lang="scss" scoped>
-	.btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 88rpx;
-		font-size: 32rpx;
-	}
+	// .base-btn {
+	// 	display: flex;
+	// 	align-items: center;
+	// 	justify-content: center;
+	// 	height: 88rpx;
+	// 	font-size: 32rpx;
+	// }
 </style>

CoreCms.Net.Uni-App/CoreShop/pages/cart/cart.vue

@@ -101,9 +101,6 @@
 				</view>
 			</view>
 		</view>
-
-		<!-- 登录提示 -->
-		<!-- <coreshop-login-modal></coreshop-login-modal> -->
 	</view>
 </template>
 
@@ -313,12 +310,8 @@
 
 	/** 去购买 */
 	const handleGoToBuy = () => {
-		let ids : Array<number> = [];
-		state.cartList.forEach((item : CartListType) => {
-			if (item.select) {
-				ids.push(item.id)
-			}
-		})
+		const ids : Array<number>= state.cartList.filter(x=>x.select).map(x=>x.id);
+		
 		if (ids.length > 0) {
 			handleRouteNavigateTo(`/pages/order/submit/submit?cartIds=${ids.join(',')}`)
 		} else {

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

@@ -67,15 +67,15 @@
 
 		<!-- 商品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>
 
 	</view>
 </template>
 
 <script setup lang="ts">
-	import { reactive, watch } from 'vue';
+	import { reactive, ref, watch } from 'vue';
 	import { onShow } from '@dcloudio/uni-app';
 	import { UserToken, advertPosition, onClassifyPageHide } from '@/core/consts';
 	import { queryGoodsPageList, queryCartNumAndMoney, queryGoodsDetailByToken, queryGoodsDetail, queryAddCart } from '@/core/api';
@@ -84,6 +84,7 @@
 	import { useLoginStore } from '@/core/store'
 	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';
 
 	/** 登录store */
 	const _useLoginStore = useLoginStore();
@@ -122,6 +123,11 @@
 		goodsDetailData: {},
 	});
 
+	const buyNowLoading = ref(false);
+	const addCartLoading = ref(false);
+
+	const handleBuyNow = useLoadingFn(onBuyNow, buyNowLoading);
+
 	watch(() => props.data, (newVal : Array<CategoriesType>) => {
 		if (newVal) {
 			state.classifyData = newVal.map((item : CategoriesType) => {
@@ -211,7 +217,7 @@
 		if (addCart.status) {
 			handleShowToast(addCart.msg, 'success');
 			/** 添加成功后，重新获取购物车数量和价格 */
-			getCartNumAndMoney();
+			await getCartNumAndMoney();
 			/** 关闭sku弹框 */
 			handleChangePopup(false);
 		} else {
@@ -220,7 +226,7 @@
 	}
 
 	/** 立即购买 */
-	const handleBuyNow = async ({ productId, nums } : any) => {
+	async function onBuyNow({ productId, nums } : any) {
 		const addCart : Response<number> = await queryAddCart({
 			productId,
 			nums,

CoreCms.Net.Uni-App/CoreShop/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.scss

@@ -108,4 +108,15 @@
 	.buy-now {
 		background-color: #d33123;
 	}
+	.core-button-confirm{
+		flex: 1;
+		font-size: 27rpx;
+		text-align: center;
+		color: #fff;
+		height: 90rpx;
+	}
+	coreshop-button{
+		display: block;
+		height: 90rpx;
+	}
 }

CoreCms.Net.Uni-App/CoreShop/pages/components/goods-detail/components/goods-detail-sku/goods-detail-sku.vue

@@ -30,8 +30,16 @@
 					@change="handleChangeNumberVal"></uv-number-box>
 			</view>
 			<view class="btn-box">
-				<view v-if="props.isShowAddCartBtn" class="btn add-cart" @click="handleAddCart">加入购物车</view>
-				<view class="btn buy-now" @click="handleBuyNow">{{ props.btnBuyTitlt }}</view>
+				<!-- 	<view v-if="props.isShowAddCartBtn" class="btn add-cart" @click="handleAddCart">加入购物车</view> -->
+				<view v-if="props.isShowAddCartBtn" class="core-button-confirm add-cart">
+					<coreshop-button :loading="props.addCartloading" class="core-button-confirm_" :radius="0" title="加入购物车"
+						:customStyle="addCartCustomStyle" @onClick="handleAddCart()"></coreshop-button>
+				</view>
+				<!-- <view class="btn buy-now" @click="handleBuyNow">{{ props.btnBuyTitlt }}</view> -->
+				<view class="core-button-confirm">
+					<coreshop-button :loading="props.buyNowNowloading" class="core-button-confirm_" :radius="0"
+						:title="props.btnBuyTitlt" :customStyle="buyNowCustomStyle" @onClick="handleBuyNow()"></coreshop-button>
+				</view>
 			</view>
 		</view>
 	</uv-popup>
@@ -43,18 +51,50 @@
 	import { handleStaticResources, handleShowToast } from '@/core/utils';
 	import { deepClone } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
 
+	const buyNowCustomStyle = {
+		'border': 'none',
+		'background-color': '#d33123',
+		'flex': 1,
+		'padding': '32rpx 0',
+		'font-size': '27rpx',
+		'text-align': 'center',
+		'color': '#fff',
+		'height': '90rpx'
+	}
+
+	const addCartCustomStyle = {
+		...buyNowCustomStyle,
+		'background-color': '#000',
+	}
+
+
 	const props = withDefaults(defineProps<{
 		showSku : boolean,
 		goodsDetailData : any,
 		isShowAddCartBtn : boolean,
 		btnBuyTitlt : string,
 		safeAreaInsetBottom : boolean;
+		buyNowCustomStyle : { [key : string] : any },
+		buyNowNowloading : boolean,
+		addCartloading : boolean
 	}>(), {
 		showSku: false,
 		goodsDetailData: {},
 		isShowAddCartBtn: true,
 		btnBuyTitlt: '立即购买',
 		safeAreaInsetBottom: true,
+		buyNowCustomStyle: {
+			'border': 'none',
+			'background-color': '#d33123',
+			'flex': 1,
+			'padding': '25rpx 0',
+			'font-size': '27rpx',
+			'text-align': 'center',
+			'color': '#fff',
+			'height': '90rpx'
+		},
+		buyNowNowloading: false,
+		addCartloading: false
 	});
 
 	const emits = defineEmits(['handleChangePopup', 'handleAddCart', 'handleBuyNow', 'handleChangeGoodSku']);
@@ -116,12 +156,12 @@
 	const handleChangeNumberVal = (e : any) => {
 		state.numberVal = e.value;
 	}
-	
+
 	/** sku弹框显示或者隐藏 */
 	const handleChangePopup = (e : any) => {
 		emits('handleChangePopup', e.show)
 	}
-	
+
 	/** sku选择 */
 	const handleChooseSku = (index : number, sku : GoodsSpecListType) => {
 		let chooseSku : GoodsSkuListType = {}; // 选中的sku
@@ -163,7 +203,7 @@
 		});
 
 	}
-	
+
 	/** 立即购买 */
 	const handleBuyNow = () => {
 		if (!handleHaveStock()) {
@@ -174,7 +214,7 @@
 			nums: state.numberVal,
 		});
 	}
-	
+
 	/** 判断库存 */
 	const handleHaveStock = () => {
 		if (state.chooseSku.stock === 0) {

CoreCms.Net.Uni-App/CoreShop/pages/components/pay-method/index.vue

@@ -19,7 +19,7 @@
 	</view>
 </template>
 <script setup lang="ts">
-	import { reactive, watch } from 'vue';
+	import { Ref, reactive, watch } from 'vue';
 	import { PayMethodCodeEnum, PaymentTypeEnum } from '@/core/enum';
 	import { handleStaticResources, handleShowToast, handleRouteRedirectTo } from '@/core/utils';
 	import type { PayMethodListType, Response } from '@/core/models';
@@ -64,13 +64,13 @@
 			if (props.orderType === PaymentTypeEnum.recharge) {
 				payMethodList = payMethodList.filter(item => item.code !== 'balancepay' || !item.isOnline);
 			}
-			
+
 			/** 当支付方式只有一个的时候，默认选择 */
-			if(payMethodList.length == 1){
+			if (payMethodList.length == 1) {
 				state.payCode = payMethodList[0].code;
 				emits('handleSelectPay', payMethodList[0].code);
 			}
-			state.payMethodList = payMethodList; 
+			state.payMethodList = payMethodList;
 		}
 	})
 
@@ -118,7 +118,7 @@
 		)
 	}
 
-	const handlePayNow = async () => {
+	const handlePayNow = async (loading : Ref<boolean>) => {
 		uni.showLoading({
 			title: '加载中',
 		});
@@ -150,18 +150,20 @@
 		const pay : Response<any> = await queryPay(data);
 		if (pay.status) {
 			if (state.payCode === PayMethodCodeEnum.wechatpay) {
-				handleWxpay(pay);
+				handleWxpay(pay, loading);
 			} else if (state.payCode === PayMethodCodeEnum.alipay) {
-				handleAlipay(pay);
+				handleAlipay(pay, loading);
 			} else if (state.payCode === PayMethodCodeEnum.balancepay) {
 				uni.hideLoading();
 				handleShowToast('支付成功', 'success', () => {
 					setTimeout(() => {
+						loading.value = false;
 						handleRouteRedirectTo(`/pages/order/result/result?id=${pay.data.paymentId}`)
 					}, 1000)
 				})
 			} else if (state.payCode === PayMethodCodeEnum.offline) {
 				uni.hideLoading();
+				loading.value = false;
 				uni.showModal({
 					title: '线下支付说明',
 					content: '请联系客服进行线下支付',
@@ -170,6 +172,7 @@
 			}
 		} else {
 			handleShowToast(pay.msg, 'none', () => {
+				loading.value = false;
 				setTimeout(() => {
 					uni.hideLoading();
 				}, 1000);
@@ -179,7 +182,7 @@
 	}
 
 	/** 微信支付 */
-	const handleWxpay = (res : any) => {
+	const handleWxpay = (res : any, loading : Ref<boolean>) => {
 		uni.requestPayment({
 			provider: 'wxpay',
 			// #ifdef MP-WEIXIN
@@ -208,6 +211,7 @@
 				if (e.errMsg === 'requestPayment:ok') {
 					handleShowToast('支付成功', 'success', () => {
 						setTimeout(() => {
+							loading.value = false;
 							handleRouteRedirectTo(`/pages/order/result/result?id=${res.data.paymentId}`)
 						}, 1000)
 					})
@@ -217,12 +221,14 @@
 				// #ifdef APP-PLUS || APP-PLUS-NVUE
 				handleShowToast('支付成功', 'success', () => {
 					setTimeout(() => {
+						loading.value = false;
 						handleRouteRedirectTo(`/pages/order/result/result?id=${res.data.paymentId}`)
 					}, 1000)
 				})
 				// #endif 
 			},
 			fail: function (e : any) {
+				loading.value = false;
 				if (e.errMsg === 'requestPayment:fail cancel') {
 					handleShowToast('您已经取消此方式支付,可继续选择其他方式支付。');
 				}
@@ -234,7 +240,7 @@
 	}
 
 	/** 支付宝支付 */
-	const handleAlipay = (res : any) => {
+	const handleAlipay = (res : any, loading : Ref<boolean>) => {
 		uni.requestPayment({
 			provider: 'alipay',
 			orderInfo: res.data.tradeNo,
@@ -243,6 +249,7 @@
 				if (e.errMsg === 'requestPayment:ok') {
 					handleShowToast('支付成功', 'success', () => {
 						setTimeout(() => {
+							loading.value = false;
 							handleRouteRedirectTo(`/pages/order/result/result?id=${res.data.paymentId}`)
 						}, 1000)
 					})
@@ -252,12 +259,14 @@
 				// #ifdef APP-PLUS || APP-PLUS-NVUE
 				handleShowToast('支付成功', 'success', () => {
 					setTimeout(() => {
+						loading.value = false;
 						handleRouteRedirectTo(`/pages/order/result/result?id=${res.data.paymentId}`)
 					}, 1000)
 				})
 				// #endif 
 			},
 			fail: function (res) {
+				loading.value = false;
 				console.log(res);
 			}
 		});

CoreCms.Net.Uni-App/CoreShop/pages/order/pay/pay.vue

@@ -72,11 +72,8 @@
 			<view class="tips-box">注：如果您在支付中选择的支付方式不适合或异常，请再次选择其他支付方式。</view>
 
 			<!-- 底部按钮 -->
-			<view class="fixed-box">
-				<view class="fixed-btn">
-					<view class="btn-box" @click="handlePayNow">立即支付</view>
-				</view>
-			</view>
+			<coreshop-fixed-bottom-button title="立即支付" @onClick="onPayNow()"
+				:loading="loading"></coreshop-fixed-bottom-button>
 		</view>
 	</coreshop-page>
 </template>
@@ -98,7 +95,7 @@
 	}
 
 	const payMethod = ref();
-
+	const loading = ref(false);
 	const state = reactive<{
 		payMethodList : Array<PayMethodListType>;
 		payCode : string;
@@ -241,9 +238,11 @@
 	}
 
 	/** 立即支付 */
-	const handlePayNow = () => {
+	async function onPayNow() {
 		if (state.payCode) {
-			payMethod.value.handlePayNow()
+			loading.value = true;
+			payMethod.value.handlePayNow(loading);
+			console.log('xxx');
 		} else {
 			handleShowToast('请选择支付方式');
 		}

CoreCms.Net.Uni-App/CoreShop/pages/order/submit/submit.vue

@@ -226,7 +226,8 @@
 								<text>￥{{ state.cartData?.amount }}</text>
 							</view>
 						</view>
-						<view class="btn" @click="handleSubmit">确认下单</view>
+						<coreshop-button class="btn" title="确认下单" @onClick="handleSubmit" :loading="loading"
+							:customStyle="{'border':'none','height':'90rpx'}"></coreshop-button>
 					</view>
 				</view>
 			</view>
@@ -234,7 +235,7 @@
 	</coreshop-page>
 </template>
 <script setup lang="ts">
-	import { reactive, computed } from 'vue';
+	import { reactive, computed, ref } from 'vue';
 	import { onLoad, onShow } from '@dcloudio/uni-app';
 	import {
 		PaymentTypeEnum, OrderDistributionEnum, ShowStoresSwitchEnum,
@@ -247,6 +248,7 @@
 	import { mobile } from '@/uni_modules/uv-ui-tools/libs/function/test.js';
 	import { handleRouteNavigateTo, handleShowToast, handleRouteRedirectTo } from '@/core/utils';
 	import { addressUserShip, userInvoice, userStore } from '@/core/consts';
+	import { useLoadingFn } from '@/core/hooks';
 
 	interface QueryParams {
 		cartIds ?: string;
@@ -257,7 +259,6 @@
 
 	/** 获取项目配置 */
 	const shopConfigStore : ShopConfigStoreType = useShopConfigStore();
-
 	const state = reactive<{
 		orderType : PaymentTypeEnum;    // 订单类型
 		tabList : Array<{               // 送达方式
@@ -308,6 +309,8 @@
 		couponCodeList: [],
 	});
 
+	const loading = ref(false);
+	const handleSubmit = useLoadingFn(onSubmit, loading);
 
 	/** 是否显示积分兑换价合计 */
 	const isShowPointRedemptionPrice = computed(() => {
@@ -512,7 +515,7 @@
 		} else {
 			state.couponCodeList.push(item.couponCode);
 		}
-		
+
 		getCartList({
 			success() {
 				item.checked = !item.checked;
@@ -561,7 +564,7 @@
 	}
 
 	/** 立即购买 */
-	const handleSubmit = async () => {
+	async function onSubmit() {
 		let delivery : any = {};
 		/** 如果是快递物流 / 同城送货 */
 		if (state.tabSelectType === OrderDistributionEnum.mailing || state.tabSelectType == OrderDistributionEnum.homeDelivery) {

CoreCms.Net.Uni-App/CoreShop/pages/subpackage/agency/store-set/index.vue

@@ -30,17 +30,18 @@
 				</view>
 			</view>
 		</view>
-		<coreshop-fixed-bottom-button :radius="100" title="保存"
-			@onClick="onConfirmStoreSet()"></coreshop-fixed-bottom-button>
+		<coreshop-fixed-bottom-button :radius="100" title="保存" :loading="loading"
+			@onClick="hanldeConfirmStoreSet()"></coreshop-fixed-bottom-button>
 	</coreshop-page>
 </template>
 
 <script setup lang="ts">
-	import { reactive } from 'vue';
+	import { reactive, ref } from 'vue';
 	import { onLoad } from '@dcloudio/uni-app';
 	import { queryUploadImages, queryAgentInfo, queryAgentSetStore } from '@/core/api';
 	import type { Response } from '@/core/models';
 	import { handleShowToast } from '@/core/utils';
+	import { useLoadingFn } from '@/core/hooks/use-loading';
 
 	const state = reactive<{
 		logoFile : Array<{ [key : string] : any }>;
@@ -54,6 +55,10 @@
 		storeDesc: null,
 	})
 
+	const loading = ref<boolean>(false);
+
+	const hanldeConfirmStoreSet = useLoadingFn(onConfirmStoreSet, loading);
+
 	onLoad(() => {
 		getAgentInfo();
 	});
@@ -105,7 +110,7 @@
 	};
 
 	/** 保存 */
-	const onConfirmStoreSet = async () => {
+	async function onConfirmStoreSet() {
 		if (!state.storeName) {
 			handleShowToast('请输入店铺名称'); return;
 		}

CoreCms.Net.Uni-App/CoreShop/pages/subpackage/distribution/store-set/index.vue

@@ -30,17 +30,18 @@
 				</view>
 			</view>
 		</view>
-		<coreshop-fixed-bottom-button :radius="100" title="保存"
-			@onClick="onConfirmStoreSet()"></coreshop-fixed-bottom-button>
+		<coreshop-fixed-bottom-button :radius="100" title="保存" :loading="loading"
+			@onClick="hanldeConfirmStoreSet()"></coreshop-fixed-bottom-button>
 	</coreshop-page>
 </template>
 
 <script setup lang="ts">
-	import { reactive } from 'vue';
+	import { reactive, ref } from 'vue';
 	import { onLoad } from '@dcloudio/uni-app';
 	import { queryUploadImages, queryDistributionInfo, querySetStore } from '@/core/api';
 	import type { Response } from '@/core/models';
 	import { handleShowToast } from '@/core/utils';
+	import { useLoadingFn } from '@/core/hooks/use-loading';
 
 	const state = reactive<{
 		logoFile : Array<{ [key : string] : any }>;
@@ -54,6 +55,10 @@
 		storeDesc: null,
 	})
 
+	const loading = ref<boolean>(false);
+
+	const hanldeConfirmStoreSet = useLoadingFn(onConfirmStoreSet, loading);
+
 	onLoad(() => {
 		getDistributionInfo();
 	});
@@ -105,7 +110,7 @@
 	};
 
 	/** 保存 */
-	const onConfirmStoreSet = async () => {
+	async function onConfirmStoreSet() {
 		if (!state.storeName) {
 			handleShowToast('请输入店铺名称'); return;
 		}