Waiting/suke-mp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

团购支付

Browse Source
This commit is contained in:
Waiting
2024-04-08 21:33:15 +08:00
parent 935d56227d
commit c94ddeed1a
14 changed files with 483 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/mall/subs/goods/detail.vue
View File

@@ -98,7 +98,7 @@ import { assetsUrl } from '@/utils/assets';
import SkuDialog from '@/components/sku-dialog.vue';
import { goPath, showToast } from '@/utils';
import { getGoodsDetail, getGoodsList } from '@/api/goods';
import { GoodsBean, StockBean } from '@/api/goods/types';
import { GoodsBean } from '@/api/goods/types';
import useShoppingCartStore from '@/store/modules/shoppingcart';
const shoppingCartStore = useShoppingCartStore();
@@ -158,8 +158,12 @@ const addShoppingCart = () => {
};
const placeOrder = () => {
showSkuDialog((e: StockBean) => {
goPath('/pages/mall/subs/order/order-confirm');
showSkuDialog((e: GoodsBean) => {
const orderBean = {
totalPrice: e.price * e.checkedStock.count,
orderGoods: [e]
};
goPath(`/pages/mall/subs/order/order-confirm?orderBean=${encodeURIComponent(JSON.stringify(orderBean))}`);
});
};
</script>

252
src/pages/mall/subs/order/order-confirm.vue
View File

@@ -1,102 +1,116 @@
<template>
<view class='content'>
<view class='c-flex-row'>
<view class='tab c-flex-row' :class='{"tab-active": tabIndex === 0}' @click.stop='tabIndex=0'>
<image :src='assetsUrl("ic_order_dd.png")' />
<text>到店</text>
</view>
<view class='tab c-flex-row' :class='{"tab-active": tabIndex === 1}' @click.stop='tabIndex=1'>
<image :src='assetsUrl("ic_order_yj.png")' />
<text>邮寄</text>
</view>
</view>
<view v-show='tabIndex==1' class='address-view c-flex-column'
@click.stop='goPath("/pages/mine/subs/address/index")'>
<view class='user-info c-flex-row'>
<text>默认</text>
<text>黄先生</text>
<text>155****6532</text>
<view style='flex: 1' />
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
</view>
<view class='addr c-flex-row'>
<image :src='assetsUrl("ic_location.png")' />
<text>湖南省 长沙市 详细地址详细地址详细地址</text>
</view>
<image class='dashed-line' :src='assetsUrl("ic_address_dashed_line.png")' />
</view>
<view class='goods-info-view c-flex-column'>
<scroll-view scroll-y>
<view class='content'>
<view class='c-flex-row'>
<image class='goods-image' :src='assetsUrl("test_bg.png")' />
<view class='c-flex-column' style='flex: 1;'>
<view class='c-flex-row'>
<text class='goods-name'>女童夏装套装洋气装短袖阔腿裤子夏装套装</text>
</view>
<text style='color: #999999;margin-top: 30rpx'>
2356235654
</text>
<view class='bottom-view c-flex-row'>
<text>
紫色，120cm x1
<view class='tab c-flex-row' :class='{"tab-active": tabIndex === 0}' @click.stop='tabIndex=0'>
<image :src='assetsUrl("ic_order_dd.png")' />
<text>到店</text>
</view>
<view class='tab c-flex-row' :class='{"tab-active": tabIndex === 1}' @click.stop='tabIndex=1'>
<image :src='assetsUrl("ic_order_yj.png")' />
<text>邮寄</text>
</view>
</view>
<view v-show='tabIndex==1' class='address-view c-flex-column'
@click.stop='goPath("/pages/mine/subs/address/index")'>
<view class='user-info c-flex-row'>
<text>默认</text>
<text>黄先生</text>
<text>155****6532</text>
<view style='flex: 1' />
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
</view>
<view class='addr c-flex-row'>
<image :src='assetsUrl("ic_location.png")' />
<text>湖南省 长沙市 详细地址详细地址详细地址</text>
</view>
<image class='dashed-line' :src='assetsUrl("ic_address_dashed_line.png")' />
</view>
<view class='goods-info-view c-flex-column'>
<view class='c-flex-row' style='margin-bottom: 20rpx' v-for='(item,index) in orderBean?.orderGoods'
:key='index'>
<image class='goods-image' :src='item.images' />
<view class='c-flex-column' style='flex: 1;'>
<view class='c-flex-row'>
<text class='goods-name'>{{ item.name }}</text>
</view>
<text style='color: #999999;margin-top: 30rpx'>
{{ item.code }}
</text>
<view class='bottom-sku-view c-flex-row'>
<text>
{{ item.checkedStock.colorName }}，{{ item.checkedStock.sizeName }} x{{ item.checkedStock.count }}
</text>
<text>¥{{ item.price }}</text>
</view>
</view>
</view>
<view class='divider' />
<view class='remark-view c-flex-row'>
<text>备注</text>
<input placeholder='请填写订单备注' @input='orderBean!.remark = $event.detail.value' />
</view>
</view>
<view class='card-view'>
<view class='c-flex-row'>
<text class='card-view-title'>商品总价</text>
<text class='card-view-value'>￥{{ orderBean?.totalPrice || 0 }}</text>
</view>
<view class='c-flex-row'>
<text class='card-view-title'>运费</text>
<text class='card-view-value'>￥8</text>
</view>
<view class='c-flex-row' @click.stop='showCouponDialog'>
<text class='card-view-title'>优惠券
<text style='font-size: 22rpx;color: #F32B2B;'>已选最大优惠</text>
</text>
<view class='card-view-value' style='color: #F32B2B;margin: 0'>-￥{{ checkedCoupon?.reduce || 0 }}
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
</view>
</view>
<view class='divider' />
<view class='c-flex-row'>
<view style='flex: 1' />
<view class='c-flex-row'>
<text class='card-view-value'>共1件商品 合计：
<text style='font-size: 34rpx;color:#F32B2B'>¥{{ orderBean?.totalPrice || 0 }}</text>
</text>
<text>23.20元</text>
</view>
</view>
</view>
<view class='divider' />
<view class='remark-view c-flex-row'>
<text>备注</text>
<input placeholder='请填写订单备注' />
</view>
</view>
<view class='card-view'>
<view class='c-flex-row'>
<text class='card-view-title'>商品总价</text>
<text class='card-view-value'>￥29.90</text>
</view>
<view class='c-flex-row'>
<text class='card-view-title'>运费</text>
<text class='card-view-value'>￥8</text>
</view>
<view class='c-flex-row' @click.stop='showCouponDialog'>
<text class='card-view-title'>优惠券
<text style='font-size: 22rpx;color: #F32B2B;'>已选最大优惠</text>
</text>
<view class='card-view-value' style='color: #F32B2B;margin: 0'>-￥{{ checkedCoupon?.reduce || 0 }}
<view class='payment-way c-flex-row' @click.stop='changePayment'>
<text>支付方式</text>
<view>{{ paymentType === 0 ? '微信支付' : '余额' }}
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
</view>
</view>
<view class='divider' />
<view class='c-flex-row'>
<view style='flex: 1' />
<view class='c-flex-row'>
<text class='card-view-value'>共1件商品 合计：
<text style='font-size: 34rpx;color:#F32B2B'>¥29.90</text>
</text>
</view>
<view class='bottom-view c-flex-row'>
<text>合计</text>
<text>￥{{ orderBean?.totalPrice || 0 }}</text>
<sqb-pay @bindnavigateTo='navigateTo'
:return_url='payParams.return_url'
:total_amount='payParams.total_amount'
:terminal_sn='payParams.terminal_sn'
:client_sn='payParams.client_sn'
:subject='payParams.subject'
:subject_img='payParams.subject_img '
:merchant_name='payParams.merchant_name'
:notify_url='payParams.notify_url'
:sign='payParams.sign'>
<text class='confirm-order' @click.stop='payment'>确认订单</text>
</sqb-pay>
</view>
</view>
<view class='payment-way c-flex-row' @click.stop='changePayment'>
<text>支付方式</text>
<view>{{ paymentType === 0 ? '微信支付' : '余额' }}
<image :src='assetsUrl("ic_arrow_right_gray.png")' />
</view>
</view>
<view class='bottom-view c-flex-row'>
<text>合计</text>
<text>￥29.90</text>
<text @click.stop='payment'>确认订单</text>
</view>
</view>
</scroll-view>
<payment-dialog ref='paymentDialogRef' @change='args => paymentType=args' />
<coupon-dialog ref='couponDialogRef' @confirm='confirmCoupon' :order-price='500' />
<coupon-dialog ref='couponDialogRef' @confirm='confirmCoupon' :order-price='orderBean?.totalPrice' />
</template>
<script lang='ts' setup>
@@ -106,6 +120,11 @@ import CouponDialog from '@/pages/mall/subs/components/coupon-dialog.vue';
import { goPath } from '@/utils';
import { orderCreate } from '@/api/goods';
import { CouponBean } from '@/api/user/types';
import { OrderBean } from '@/api/goods/types';
import { useUserStore } from '@/store';
const userStore = useUserStore();
const { terminalInfo } = storeToRefs(userStore);
const couponDialogRef = ref();
const paymentDialogRef = ref();
@@ -114,6 +133,24 @@ const tabIndex = ref(0);
const checkedCoupon = ref<CouponBean>();
const payParams = ref({
return_url: '',
total_amount: '',
client_sn: '',
terminal_sn: '',
subject: '',
subject_img: '',
merchant_name: '',
notify_url: '',
sign: ''
});
const orderBean = ref<OrderBean>();
onLoad((e) => {
orderBean.value = JSON.parse(decodeURIComponent(e?.orderBean));
console.log(orderBean.value);
});
const changePayment = () => {
paymentDialogRef.value.show();
};
@@ -126,42 +163,46 @@ const confirmCoupon = (item: CouponBean) => {
checkedCoupon.value = item;
};
const navigateTo = (e: any) => {
};
const payment = async () => {
await uni.showLoading();
const params = {
'discount': 0,
'freePrice': 0,
'reducePrice': 0,
'totalPrice': 0,
'totalPrice': orderBean?.value?.totalPrice,
'integral': 0,
'allowIntegral': 0,
'produceIntegralNumber': 0,
'remark': 'string',
'orderGoods': [
'remark': orderBean.value?.remark,
'orderGoods': orderBean?.value?.orderGoods?.map(item => (
{
'goodsId': 'string',
'goodsCode': 'string',
'goodsNum': 0,
'stockId': 'string',
'originPrice': 0,
'consumePrice': 0,
'goodsId': item.goodsId,
'goodsCode': item.code,
'goodsNum': item.checkedStock.count,
'stockId': item.checkedStock.stockId,
'originPrice': item.price,
'consumePrice': item.price,
'discount': 0,
'discountOriginPrice': 0,
'produceIntegral': 0,
'priceModify': [
0
],
'priceModify': [0],
'offset': 0
}
]
))
};
const result = await orderCreate(params);
uni.hideLoading();
};
</script>
<style lang='scss' scoped>
.content {
padding: 20rpx 30rpx;
padding: 20rpx 30rpx 200rpx 30rpx;
}
.tab {
@@ -283,7 +324,7 @@ const payment = async () => {
flex: 1;
}
.bottom-view {
.bottom-sku-view {
display: flex;
justify-content: space-between;
margin-top: 10rpx;
@@ -296,8 +337,9 @@ const payment = async () => {
}
text:nth-of-type(2) {
font-size: 24rpx;
font-size: 30rpx;
color: #333333;
font-weight: bold;
margin-right: 5rpx;
}
@@ -326,6 +368,7 @@ const payment = async () => {
text-align: right;
font-size: 28rpx;
color: #333333;
z-index: 0;
}
}
}
@@ -390,8 +433,7 @@ const payment = async () => {
bottom: 0;
left: 0;
right: 0;
padding: 12rpx 30rpx 78rpx 30rpx;
padding: 30rpx 30rpx 78rpx 30rpx;
text:nth-of-type(1) {
font-weight: 400;
@@ -407,7 +449,7 @@ const payment = async () => {
flex: 1;
}
text:nth-of-type(3) {
sqb-pay .confirm-order {
padding: 17rpx 45rpx;
border-radius: 43rpx;
border: 1rpx solid #F32B2B;

6
src/pages/mall/subs/shoppingcart/index.vue
View File

@@ -131,7 +131,11 @@ const settlement = () => {
showToast('请选择商品');
return;
}
goPath('/pages/mall/subs/order/order-confirm');
const orderBean = {
totalPrice: totalPayPrice.value,
orderGoods: shoppingCartList.value.filter(res => res.checked)
};
goPath(`/pages/mall/subs/order/order-confirm?orderBean=${encodeURIComponent(JSON.stringify(orderBean))}`);
};
</script>