Quellcode durchsuchen

feat: 钱包信息接口、创建订单接口调试

liangan vor 3 Wochen
Ursprung
Commit
8551529f9e
4 geänderte Dateien mit 63 neuen und 110 gelöschten Zeilen
  1. 7 0
      src/api/order.ts
  2. 1 1
      src/api/product.ts
  3. 9 0
      src/api/wallet.ts
  4. 46 109
      src/pages/productDetail/checkOut.vue

+ 7 - 0
src/api/order.ts

@@ -22,3 +22,10 @@ export function loadPre(data: any) {
 export function computedPrice(data: any) {
   return http.post<any>(`/mall/order/computed/price`, data)
 }
+/**
+ * 支付-创建订单
+ * @returns
+ */
+export function createOrder(data: any) {
+  return http.post<any>(`/mall/order/add`, data)
+}

+ 1 - 1
src/api/product.ts

@@ -7,7 +7,7 @@ import { extractAndRetained, qs } from '@/utils/index'
  */
 export function getList(data: any) {
   const { extract, retained } = extractAndRetained(data, ['page', 'size'])
-  return http.post<any>(`/mall/product/list?${qs(extract)}`, retained)
+  return http.post<any>(`/mall/product/list?${qs(extract)}`, { ...retained, isShow: 1 })
 }
 
 /**

+ 9 - 0
src/api/wallet.ts

@@ -0,0 +1,9 @@
+import { http } from '@/utils/http'
+
+/**
+ * 查询账号钱包信息
+ * @returns
+ */
+export function getWalletInfo() {
+  return http.get<any>(`/cif/account/api/getAccountInfo`)
+}

+ 46 - 109
src/pages/productDetail/checkOut.vue

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