You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
207 lines
3.7 KiB
207 lines
3.7 KiB
<!--二维码支付弹窗组件-->
|
|
<template>
|
|
<view class="qrcode-payment-modal">
|
|
<!-- 弹窗头部 -->
|
|
<view class="modal-header">
|
|
<text class="modal-title">扫码支付</text>
|
|
<view class="close-btn" @click="handleClose">
|
|
<text>✕</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 订单信息 -->
|
|
<view class="order-info">
|
|
<view class="info-row">
|
|
<text class="label">订单号：</text>
|
|
<text class="value">{{ paymentData.order.order_no }}</text>
|
|
</view>
|
|
<view class="info-row">
|
|
<text class="label">支付金额：</text>
|
|
<text class="amount">¥{{ paymentData.order.total_amount }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 二维码区域 -->
|
|
<view class="qrcode-container">
|
|
<image
|
|
v-if="paymentData.qrcodeImage"
|
|
:src="paymentData.qrcodeImage"
|
|
class="qrcode-image"
|
|
mode="aspectFit"
|
|
/>
|
|
<text v-else class="qrcode-placeholder">二维码加载中...</text>
|
|
<text class="qrcode-tip">请使用微信扫码完成支付</text>
|
|
</view>
|
|
|
|
<!-- 操作按钮 -->
|
|
<view class="modal-buttons">
|
|
<view class="btn secondary" @click="handleClose">取消支付</view>
|
|
<view class="btn primary" @click="handleConfirm">确认已支付</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'QRCodePaymentDialog',
|
|
props: {
|
|
paymentData: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
handleClose() {
|
|
this.$emit('close')
|
|
},
|
|
|
|
handleConfirm() {
|
|
this.$emit('confirm')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.qrcode-payment-modal {
|
|
background: #2A2A2A;
|
|
border-radius: 24rpx;
|
|
padding: 48rpx;
|
|
width: 600rpx;
|
|
max-width: 90vw;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.modal-title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.close-btn {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 50%;
|
|
font-size: 32rpx;
|
|
color: #ffffff;
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
}
|
|
|
|
.order-info {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 16rpx;
|
|
padding: 32rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.info-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.label {
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.value {
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.amount {
|
|
font-size: 40rpx;
|
|
font-weight: 600;
|
|
color: #FFC107;
|
|
}
|
|
|
|
.qrcode-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40rpx;
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.qrcode-image {
|
|
width: 400rpx;
|
|
height: 400rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.qrcode-placeholder {
|
|
width: 400rpx;
|
|
height: 400rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.qrcode-tip {
|
|
font-size: 26rpx;
|
|
color: #666666;
|
|
text-align: center;
|
|
}
|
|
|
|
.modal-buttons {
|
|
display: flex;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.btn {
|
|
flex: 1;
|
|
height: 88rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 44rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
|
|
&.secondary {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #ffffff;
|
|
|
|
&:active {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
}
|
|
|
|
&.primary {
|
|
background: #29D3B4;
|
|
color: #ffffff;
|
|
|
|
&:active {
|
|
background: #1fb396;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|