|
@@ -0,0 +1,318 @@
|
|
|
|
+<route lang="json5" type="page">
|
|
|
|
+{
|
|
|
|
+ layout: 'default',
|
|
|
|
+ style: {
|
|
|
|
+ navigationBarTitleText: 'Checkout',
|
|
|
|
+ navigationBarBackgroundColor: '#fff',
|
|
|
|
+ },
|
|
|
|
+}
|
|
|
|
+</route>
|
|
|
|
+
|
|
|
|
+<script lang="ts" setup>
|
|
|
|
+import DialogBox from '@/components/DialogBox/DialogBox.vue'
|
|
|
|
+import { DialogUtils } from '@/components/DialogBox/utils'
|
|
|
|
+
|
|
|
|
+defineOptions({
|
|
|
|
+ name: 'CheckOut', // 结账页面
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+// 商品信息
|
|
|
|
+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 orderSummary = ref({
|
|
|
|
+ subTotal: 1000.00,
|
|
|
|
+ voucher: 0.00,
|
|
|
|
+ total: 1000.00,
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+// 支付方式
|
|
|
|
+const paymentMethods = ref([
|
|
|
|
+ {
|
|
|
|
+ id: 'bandhubuy',
|
|
|
|
+ name: 'BandhuBuy Wallet',
|
|
|
|
+ balance: 2000.00,
|
|
|
|
+ selected: true,
|
|
|
|
+ icon: '/static/icons/wallet-icon.png',
|
|
|
|
+ },
|
|
|
|
+])
|
|
|
|
+
|
|
|
|
+// 选中的支付方式
|
|
|
|
+const selectedPayment = ref('bandhubuy')
|
|
|
|
+
|
|
|
|
+// DialogBox 相关状态
|
|
|
|
+const dialogConfig = ref({
|
|
|
|
+ show: false,
|
|
|
|
+ icon: 'info-circle',
|
|
|
|
+ iconSize: '120rpx',
|
|
|
|
+ message: '',
|
|
|
|
+ tip: '',
|
|
|
|
+ btnText: 'Got it',
|
|
|
|
+ showButton: true,
|
|
|
|
+ showTip: false,
|
|
|
|
+ closeOnClickOverlay: true,
|
|
|
|
+})
|
|
|
|
+
|
|
|
|
+// 处理支付方式选择
|
|
|
|
+function selectPayment(methodId: string) {
|
|
|
|
+ selectedPayment.value = methodId
|
|
|
|
+ paymentMethods.value.forEach((method) => {
|
|
|
|
+ method.selected = method.id === methodId
|
|
|
|
+ })
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 显示余额不足对话框
|
|
|
|
+function showInsufficientBalanceDialog() {
|
|
|
|
+ Object.assign(dialogConfig.value, DialogUtils.warning(
|
|
|
|
+ 'Your wallet balance is insufficient.\nPlease recharge!',
|
|
|
|
+ {
|
|
|
|
+ tip: 'Recharge Highest Discount 5%',
|
|
|
|
+ showTip: true,
|
|
|
|
+ btnText: 'Recharge Now',
|
|
|
|
+ },
|
|
|
|
+ ))
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 显示支付成功对话框
|
|
|
|
+function showPaymentSuccessDialog() {
|
|
|
|
+ Object.assign(dialogConfig.value, DialogUtils.success(
|
|
|
|
+ 'Payment successful!\nYour order has been placed.',
|
|
|
|
+ {
|
|
|
|
+ btnText: 'View Order',
|
|
|
|
+ showButton: true,
|
|
|
|
+ },
|
|
|
|
+ ))
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 显示支付失败对话框
|
|
|
|
+function showPaymentFailedDialog() {
|
|
|
|
+ Object.assign(dialogConfig.value, DialogUtils.error(
|
|
|
|
+ 'Payment failed!\nPlease try again or contact support.',
|
|
|
|
+ {
|
|
|
|
+ btnText: 'Retry Payment',
|
|
|
|
+ },
|
|
|
|
+ ))
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 显示网络错误对话框
|
|
|
|
+function showNetworkErrorDialog() {
|
|
|
|
+ Object.assign(dialogConfig.value, DialogUtils.error(
|
|
|
|
+ 'Network connection failed.\nPlease check your network settings.',
|
|
|
|
+ {
|
|
|
|
+ btnText: 'Retry',
|
|
|
|
+ iconSize: '100rpx',
|
|
|
|
+ },
|
|
|
|
+ ))
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 显示订单信息对话框
|
|
|
|
+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()
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 处理对话框确认事件
|
|
|
|
+function handleDialogConfirm() {
|
|
|
|
+ const { icon } = dialogConfig.value
|
|
|
|
+
|
|
|
|
+ if (icon === 'warning') {
|
|
|
|
+ // 余额不足,跳转到充值页面
|
|
|
|
+ uni.showToast({ title: 'Redirecting to recharge...', icon: 'none' })
|
|
|
|
+ }
|
|
|
|
+ else if (icon === 'success') {
|
|
|
|
+ // 支付成功,跳转到订单页面
|
|
|
|
+ uni.showToast({ title: 'Redirecting to orders...', icon: 'none' })
|
|
|
|
+ }
|
|
|
|
+ else if (icon === 'error') {
|
|
|
|
+ // 支付失败或网络错误,重新尝试
|
|
|
|
+ uni.showToast({ title: 'Retrying...', icon: 'loading' })
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// 处理对话框关闭事件
|
|
|
|
+function handleDialogClose() {
|
|
|
|
+ console.log('Dialog closed')
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<template>
|
|
|
|
+ <z-paging>
|
|
|
|
+ <view class="pt-20rpx">
|
|
|
|
+ <view class="mb-20rpx flex items-center gap-24rpx bg-white p-24rpx">
|
|
|
|
+ <image
|
|
|
|
+ src="/static/images/avatar.jpg"
|
|
|
|
+ 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]
|
|
|
|
+ </view>
|
|
|
|
+ <view class="py-4rpx text-24rpx text-#3A444C">
|
|
|
|
+ Color:Black Grey
|
|
|
|
+ </view>
|
|
|
|
+ <view class="flex items-center justify-between text-24rpx">
|
|
|
|
+ <view class="text-#FF0010">
|
|
|
|
+ ৳ 300
|
|
|
|
+ </view>
|
|
|
|
+ <view class="text-#3A444C">
|
|
|
|
+ Quantity:1
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="mb-20rpx bg-white p-24rpx">
|
|
|
|
+ <view class="mb-12rpx text-28rpx">
|
|
|
|
+ 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>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="bg-white p-24rpx">
|
|
|
|
+ <view class="mb-12rpx text-28rpx">
|
|
|
|
+ Select Payment Method
|
|
|
|
+ </view>
|
|
|
|
+ <view class="flex flex-col gap-16rpx text-#3A444C">
|
|
|
|
+ <view class="flex items-center justify-between text-24rpx">
|
|
|
|
+ <view class="flex items-center">
|
|
|
|
+ <image
|
|
|
|
+ src="/static/images/avatar.jpg"
|
|
|
|
+ class="mr-32rpx h-68rpx w-68rpx rounded-full"
|
|
|
|
+ />
|
|
|
|
+ <view class="text-24rpx">
|
|
|
|
+ <text>BandhuBuy Wallet(</text>
|
|
|
|
+ <text class="text-[var(--wot-color-theme)]">
|
|
|
|
+ Balance:৳2,000.00
|
|
|
|
+ </text>
|
|
|
|
+ <text>)</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view>
|
|
|
|
+ <image
|
|
|
|
+ src="/static/icons/circle-check.png"
|
|
|
|
+ class="h-36rpx w-36rpx"
|
|
|
|
+ />
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <template #bottom>
|
|
|
|
+ <view class="flex items-center justify-end bg-white/60 px-28rpx py-30rpx backdrop-blur-20">
|
|
|
|
+ <view class="mr-16rpx text-24rpx">
|
|
|
|
+ <text>Total:</text>
|
|
|
|
+ <text class="text-[var(--wot-color-theme)]">
|
|
|
|
+ ৳1,000.00
|
|
|
|
+ </text>
|
|
|
|
+ </view>
|
|
|
|
+ <wd-button @click="handlePlaceOrder">
|
|
|
|
+ Place Order
|
|
|
|
+ </wd-button>
|
|
|
|
+ </view>
|
|
|
|
+ </template>
|
|
|
|
+
|
|
|
|
+ <!-- DialogBox 组件示例 -->
|
|
|
|
+ <DialogBox
|
|
|
|
+ v-model:show="dialogConfig.show"
|
|
|
|
+ :icon="dialogConfig.icon"
|
|
|
|
+ :icon-size="dialogConfig.iconSize"
|
|
|
|
+ :message="dialogConfig.message"
|
|
|
|
+ :tip="dialogConfig.tip"
|
|
|
|
+ :btn-text="dialogConfig.btnText"
|
|
|
|
+ :show-button="dialogConfig.showButton"
|
|
|
|
+ :show-tip="dialogConfig.showTip"
|
|
|
|
+ :close-on-click-overlay="dialogConfig.closeOnClickOverlay"
|
|
|
|
+ @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>
|
|
|
|
+
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.space-y-24rpx > * + * {
|
|
|
|
+ margin-top: 24rpx;
|
|
|
|
+}
|
|
|
|
+</style>
|