|
@@ -10,10 +10,12 @@
|
|
|
</route>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-import { computedPrice, loadPre } from '@/api/order'
|
|
|
+import { computedPrice, createOrder, loadPre } from '@/api/order'
|
|
|
+import { getWalletInfo } from '@/api/wallet'
|
|
|
import DialogBox from '@/components/DialogBox/DialogBox.vue'
|
|
|
import { DialogUtils } from '@/components/DialogBox/utils'
|
|
|
import { useUserStore } from '@/store'
|
|
|
+import { formatNumber } from '@/utils'
|
|
|
import { getPageParams } from '@/utils/page'
|
|
|
|
|
|
defineOptions({
|
|
@@ -29,30 +31,33 @@ onLoad((options) => {
|
|
|
orderId.value = params.orderId
|
|
|
getPrice()
|
|
|
})
|
|
|
-const orderDetail = ref<any>({})
|
|
|
-async function getPrice() {
|
|
|
- const preOrderDetail = await loadPre({ preOrderNo: orderId.value })
|
|
|
- console.log(preOrderDetail)
|
|
|
- orderDetail.value = preOrderDetail.data.orderInfoVo.orderDetailList
|
|
|
- const res = await computedPrice({ preOrderNo: orderId.value, userId: userInfo.value.userId, shippingType: 1 })
|
|
|
- console.log(res)
|
|
|
-}
|
|
|
|
|
|
-// 商品信息
|
|
|
-const productInfo = ref({
|
|
|
- name: 'BOLON Classic Aviator Polarized Sunglasses, Exclusive Eyewear Brand',
|
|
|
- color: 'Black Grey',
|
|
|
- price: 1000.00,
|
|
|
- quantity: 1,
|
|
|
- image: '/static/images/avatar.jpg',
|
|
|
-})
|
|
|
+// 商品详情
|
|
|
+const orderDetail = ref<any>({})
|
|
|
|
|
|
// 订单摘要
|
|
|
const orderSummary = ref({
|
|
|
- subTotal: 1000.00,
|
|
|
- voucher: 0.00,
|
|
|
- total: 1000.00,
|
|
|
+ SubTotal: 0,
|
|
|
+ // Voucher: 0,
|
|
|
+ Total: 0,
|
|
|
})
|
|
|
+// 钱包余额
|
|
|
+const walletBalance = ref(0)
|
|
|
+async function getPrice() {
|
|
|
+ // 预下单详情
|
|
|
+ const preOrderRes = await loadPre({ preOrderNo: orderId.value })
|
|
|
+ console.log(preOrderRes)
|
|
|
+ orderDetail.value = preOrderRes?.data?.orderInfoVo?.orderDetailList?.[0]
|
|
|
+ // 计算价格
|
|
|
+ const computedPriceRes = await computedPrice({ preOrderNo: orderId.value, userId: userInfo.value.userId, shippingType: 1 })
|
|
|
+ console.log(computedPriceRes)
|
|
|
+ orderSummary.value.SubTotal = computedPriceRes?.data?.proTotalFee
|
|
|
+ orderSummary.value.Total = computedPriceRes?.data?.payFee
|
|
|
+ // 获取钱包信息-查询余额
|
|
|
+ const walletInfoRes = await getWalletInfo()
|
|
|
+ console.log(walletInfoRes)
|
|
|
+ walletBalance.value = walletInfoRes?.data?.balance
|
|
|
+}
|
|
|
|
|
|
// 支付方式
|
|
|
const paymentMethods = ref([
|
|
@@ -133,45 +138,14 @@ function showNetworkErrorDialog() {
|
|
|
))
|
|
|
}
|
|
|
|
|
|
-// 显示订单信息对话框
|
|
|
-function showOrderInfoDialog() {
|
|
|
- Object.assign(dialogConfig.value, DialogUtils.info(
|
|
|
- 'Order Details:\n• Product: Sunglasses\n• Quantity: 1\n• Total: ৳1,000.00',
|
|
|
- {
|
|
|
- btnText: 'OK',
|
|
|
- showButton: true,
|
|
|
- },
|
|
|
- ))
|
|
|
-}
|
|
|
-
|
|
|
// 下单处理
|
|
|
-function handlePlaceOrder() {
|
|
|
- const selectedMethod = paymentMethods.value.find(method => method.selected)
|
|
|
-
|
|
|
- if (!selectedMethod) {
|
|
|
- Object.assign(dialogConfig.value, DialogUtils.info('Please select a payment method'))
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- // 模拟不同的支付结果
|
|
|
- const random = Math.random()
|
|
|
-
|
|
|
- if (random < 0.3) {
|
|
|
- // 30% 概率余额不足
|
|
|
- showInsufficientBalanceDialog()
|
|
|
- }
|
|
|
- else if (random < 0.7) {
|
|
|
- // 40% 概率支付成功
|
|
|
- showPaymentSuccessDialog()
|
|
|
- }
|
|
|
- else if (random < 0.9) {
|
|
|
- // 20% 概率支付失败
|
|
|
- showPaymentFailedDialog()
|
|
|
- }
|
|
|
- else {
|
|
|
- // 10% 概率网络错误
|
|
|
- showNetworkErrorDialog()
|
|
|
+async function handlePlaceOrder() {
|
|
|
+ const params = {
|
|
|
+ preOrderNo: orderId.value,
|
|
|
+ userId: userInfo.value.userId,
|
|
|
}
|
|
|
+ const res = await createOrder(params)
|
|
|
+ console.log(res)
|
|
|
}
|
|
|
|
|
|
// 处理对话框确认事件
|
|
@@ -203,22 +177,22 @@ function handleDialogClose() {
|
|
|
<view class="pt-20rpx">
|
|
|
<view class="mb-20rpx flex items-center gap-24rpx bg-white p-24rpx">
|
|
|
<image
|
|
|
- src="/static/images/avatar.jpg"
|
|
|
+ :src="orderDetail.image"
|
|
|
class="h-160rpx w-160rpx shrink-0"
|
|
|
/>
|
|
|
<view class="flex-1">
|
|
|
<view class="line-clamp-2 text-28rpx">
|
|
|
- SUCGLES for iPhone 14 Plus Case with MagSafe [Ultra Strong Magnetic]
|
|
|
+ {{ orderDetail.productName }}
|
|
|
</view>
|
|
|
<view class="py-4rpx text-24rpx text-#3A444C">
|
|
|
- Color:Black Grey
|
|
|
+ Selected: {{ orderDetail.sku }}
|
|
|
</view>
|
|
|
<view class="flex items-center justify-between text-24rpx">
|
|
|
<view class="text-#FF0010">
|
|
|
- ৳ 300
|
|
|
+ ৳ {{ formatNumber(orderDetail.price) }}
|
|
|
</view>
|
|
|
<view class="text-#3A444C">
|
|
|
- Quantity:1
|
|
|
+ Quantity:{{ orderDetail.payNum }}
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
@@ -228,10 +202,12 @@ function handleDialogClose() {
|
|
|
Oder Summary
|
|
|
</view>
|
|
|
<view class="flex flex-col gap-16rpx text-#3A444C">
|
|
|
- <view class="flex items-center justify-between text-24rpx">
|
|
|
- <text>SubTotal</text>
|
|
|
- <text>৳1,000.00</text>
|
|
|
- </view>
|
|
|
+ <template v-for="(item, key) in orderSummary" :key="key">
|
|
|
+ <view class="flex items-center justify-between text-24rpx">
|
|
|
+ <text>{{ key }}</text>
|
|
|
+ <text>৳ {{ formatNumber(item) }}</text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="bg-white p-24rpx">
|
|
@@ -246,11 +222,11 @@ function handleDialogClose() {
|
|
|
class="mr-32rpx h-68rpx w-68rpx rounded-full"
|
|
|
/>
|
|
|
<view class="text-24rpx">
|
|
|
- <text>BandhuBuy Wallet(</text>
|
|
|
+ <text>BandhuBuy Wallet(</text>
|
|
|
<text class="text-[var(--wot-color-theme)]">
|
|
|
- Balance:৳2,000.00
|
|
|
+ Balance: ৳ {{ formatNumber(walletBalance) }}
|
|
|
</text>
|
|
|
- <text>)</text>
|
|
|
+ <text>)</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view>
|
|
@@ -268,7 +244,7 @@ function handleDialogClose() {
|
|
|
<view class="mr-16rpx text-24rpx">
|
|
|
<text>Total:</text>
|
|
|
<text class="text-[var(--wot-color-theme)]">
|
|
|
- ৳1,000.00
|
|
|
+ ৳ {{ formatNumber(orderSummary.Total) }}
|
|
|
</text>
|
|
|
</view>
|
|
|
<wd-button @click="handlePlaceOrder">
|
|
@@ -291,45 +267,6 @@ function handleDialogClose() {
|
|
|
@confirm="handleDialogConfirm"
|
|
|
@close="handleDialogClose"
|
|
|
/>
|
|
|
-
|
|
|
- <!-- 测试按钮区域 (开发时使用,生产环境可删除) -->
|
|
|
- <view class="fixed bottom-100rpx right-40rpx z-999 flex flex-col gap-20rpx">
|
|
|
- <wd-button
|
|
|
- size="small"
|
|
|
- type="primary"
|
|
|
- @click="showInsufficientBalanceDialog"
|
|
|
- >
|
|
|
- 余额不足
|
|
|
- </wd-button>
|
|
|
- <wd-button
|
|
|
- size="small"
|
|
|
- type="success"
|
|
|
- @click="showPaymentSuccessDialog"
|
|
|
- >
|
|
|
- 支付成功
|
|
|
- </wd-button>
|
|
|
- <wd-button
|
|
|
- size="small"
|
|
|
- type="error"
|
|
|
- @click="showPaymentFailedDialog"
|
|
|
- >
|
|
|
- 支付失败
|
|
|
- </wd-button>
|
|
|
- <wd-button
|
|
|
- size="small"
|
|
|
- type="warning"
|
|
|
- @click="showNetworkErrorDialog"
|
|
|
- >
|
|
|
- 网络错误
|
|
|
- </wd-button>
|
|
|
- <wd-button
|
|
|
- size="small"
|
|
|
- type="info"
|
|
|
- @click="showOrderInfoDialog"
|
|
|
- >
|
|
|
- 订单信息
|
|
|
- </wd-button>
|
|
|
- </view>
|
|
|
</z-paging>
|
|
|
</template>
|
|
|
|