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

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

Browse Source
This commit is contained in:
21世纪小八路
2024-10-19 23:05:56 +08:00
parent 7376ee980f
commit 52c856b980
10 changed files with 138 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>

11
CoreCms.Net.Uni-App/CoreShop/pages/cart/cart.vue
View File

@@ -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 {

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

@@ -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,

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

@@ -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;
}
}

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

@@ -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']);

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

@@ -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';
@@ -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);
}
});

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

@@ -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('请选择支付方式');
}

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

@@ -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(() => {
@@ -561,7 +564,7 @@
}
/** 立即购买 */
const handleSubmit = async () => {
async function onSubmit() {
let delivery : any = {};
/** 如果是快递物流 / 同城送货 */
if (state.tabSelectType === OrderDistributionEnum.mailing || state.tabSelectType == OrderDistributionEnum.homeDelivery) {

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

@@ -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;
}

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

@@ -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;
}