541 lines
9.5 KiB
Vue
541 lines
9.5 KiB
Vue
|
<template>
|
||
|
|
<view v-if="show" class="payment-modal-overlay" @click="handleOverlayClick">
|
||
|
|
<view class="payment-modal" @click.stop>
|
||
|
|
<!-- 顶部装饰 -->
|
||
|
|
<view class="modal-decoration">
|
||
|
|
<view class="decoration-circle circle-1"></view>
|
||
|
|
<view class="decoration-circle circle-2"></view>
|
||
|
|
<view class="decoration-circle circle-3"></view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 关闭按钮 -->
|
||
|
|
<view class="close-btn" @click="handleClose">
|
||
|
|
<text class="close-icon">✕</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 图标 -->
|
||
|
|
<view class="icon-section">
|
||
|
|
<view class="icon-wrapper">
|
||
|
|
<text class="icon">💳</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 标题 -->
|
||
|
|
<view class="title-section">
|
||
|
|
<text class="main-title">确认支付</text>
|
||
|
|
<text class="sub-title">{{ serviceName }}</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 价格展示 -->
|
||
|
|
<view class="price-display">
|
||
|
|
<view class="price-wrapper">
|
||
|
|
<text class="price-symbol">¥</text>
|
||
|
|
<text class="price-value">{{ price }}</text>
|
||
|
|
</view>
|
||
|
|
<text class="price-desc">{{ serviceDesc }}</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 订单详情 -->
|
||
|
|
<view class="order-details">
|
||
|
|
<view class="detail-item">
|
||
|
|
<text class="detail-label">订单编号</text>
|
||
|
|
<text class="detail-value">{{ orderNo.slice(-8) }}</text>
|
||
|
|
</view>
|
||
|
|
<view class="detail-divider"></view>
|
||
|
|
<view class="detail-item">
|
||
|
|
<text class="detail-label">创建时间</text>
|
||
|
|
<text class="detail-value">{{ createTime }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 提示信息 -->
|
||
|
|
<view class="tips-section">
|
||
|
|
<view class="tips-content">
|
||
|
|
<text class="tips-icon">🔒</text>
|
||
|
|
<text class="tips-text">安全支付 · 快速到账</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 按钮 -->
|
||
|
|
<view class="action-buttons">
|
||
|
|
<button class="btn btn-cancel" @click="handleClose" :disabled="paying">
|
||
|
|
取消
|
||
|
|
</button>
|
||
|
|
<button class="btn btn-confirm" @click="handleConfirm" :disabled="paying">
|
||
|
|
<text v-if="!paying">立即支付</text>
|
||
|
|
<text v-else class="paying-text">
|
||
|
|
<text class="loading-dot">●</text>
|
||
|
|
<text class="loading-dot">●</text>
|
||
|
|
<text class="loading-dot">●</text>
|
||
|
|
</text>
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'PaymentModal',
|
||
|
|
props: {
|
||
|
|
// 是否显示
|
||
|
|
show: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
// 服务类型
|
||
|
|
serviceType: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
// 服务名称
|
||
|
|
serviceName: {
|
||
|
|
type: String,
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
// 服务描述
|
||
|
|
serviceDesc: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
// 价格
|
||
|
|
price: {
|
||
|
|
type: [String, Number],
|
||
|
|
required: true
|
||
|
|
},
|
||
|
|
// 订单号
|
||
|
|
orderNo: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
// 支付提示
|
||
|
|
paymentTips: {
|
||
|
|
type: String,
|
||
|
|
default: '点击确认支付后将开始处理您的请求'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
paying: false,
|
||
|
|
createTime: ''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
show(val) {
|
||
|
|
if (val) {
|
||
|
|
this.createTime = this.formatTime(new Date());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// 处理遮罩点击
|
||
|
|
handleOverlayClick() {
|
||
|
|
if (!this.paying) {
|
||
|
|
this.handleClose();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 关闭弹窗
|
||
|
|
handleClose() {
|
||
|
|
if (this.paying) return;
|
||
|
|
this.$emit('close');
|
||
|
|
},
|
||
|
|
|
||
|
|
// 确认支付
|
||
|
|
async handleConfirm() {
|
||
|
|
if (this.paying) return;
|
||
|
|
|
||
|
|
this.paying = true;
|
||
|
|
|
||
|
|
try {
|
||
|
|
// 触发支付事件
|
||
|
|
this.$emit('confirm', {
|
||
|
|
serviceType: this.serviceType,
|
||
|
|
orderNo: this.orderNo,
|
||
|
|
price: this.price
|
||
|
|
});
|
||
|
|
} catch (error) {
|
||
|
|
console.error('[PaymentModal] 支付失败:', error);
|
||
|
|
this.paying = false;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
// 支付成功（由父组件调用）
|
||
|
|
paymentSuccess() {
|
||
|
|
this.paying = false;
|
||
|
|
this.$emit('success');
|
||
|
|
},
|
||
|
|
|
||
|
|
// 支付失败（由父组件调用）
|
||
|
|
paymentFailed(error) {
|
||
|
|
this.paying = false;
|
||
|
|
this.$emit('failed', error);
|
||
|
|
},
|
||
|
|
|
||
|
|
// 格式化时间
|
||
|
|
formatTime(date) {
|
||
|
|
const year = date.getFullYear();
|
||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
|
|
const day = String(date.getDate()).padStart(2, '0');
|
||
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
||
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
|
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||
|
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
/* 遮罩层 */
|
||
|
|
.payment-modal-overlay {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background: rgba(0, 0, 0, 0.7);
|
||
|
|
backdrop-filter: blur(10rpx);
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
z-index: 9999;
|
||
|
|
padding: 40rpx;
|
||
|
|
animation: fadeIn 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fadeIn {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 弹窗主体 */
|
||
|
|
.payment-modal {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
max-width: 640rpx;
|
||
|
|
background: #ffffff;
|
||
|
|
border-radius: 40rpx;
|
||
|
|
overflow: hidden;
|
||
|
|
box-shadow: 0 24rpx 80rpx rgba(0, 0, 0, 0.25);
|
||
|
|
animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes slideUp {
|
||
|
|
from {
|
||
|
|
transform: translateY(100rpx);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
transform: translateY(0);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 顶部装饰 */
|
||
|
|
.modal-decoration {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
height: 200rpx;
|
||
|
|
background: linear-gradient(135deg, #D4B996 0%, #8B7355 100%);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.decoration-circle {
|
||
|
|
position: absolute;
|
||
|
|
border-radius: 50%;
|
||
|
|
background: rgba(255, 255, 255, 0.1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle-1 {
|
||
|
|
width: 300rpx;
|
||
|
|
height: 300rpx;
|
||
|
|
top: -150rpx;
|
||
|
|
right: -100rpx;
|
||
|
|
animation: float 6s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle-2 {
|
||
|
|
width: 200rpx;
|
||
|
|
height: 200rpx;
|
||
|
|
top: 50rpx;
|
||
|
|
left: -80rpx;
|
||
|
|
animation: float 8s ease-in-out infinite reverse;
|
||
|
|
}
|
||
|
|
|
||
|
|
.circle-3 {
|
||
|
|
width: 150rpx;
|
||
|
|
height: 150rpx;
|
||
|
|
top: -50rpx;
|
||
|
|
left: 50%;
|
||
|
|
animation: float 7s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes float {
|
||
|
|
0%, 100% {
|
||
|
|
transform: translateY(0) rotate(0deg);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
transform: translateY(-20rpx) rotate(180deg);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 关闭按钮 */
|
||
|
|
.close-btn {
|
||
|
|
position: absolute;
|
||
|
|
top: 32rpx;
|
||
|
|
right: 32rpx;
|
||
|
|
width: 64rpx;
|
||
|
|
height: 64rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background: rgba(255, 255, 255, 0.2);
|
||
|
|
border-radius: 50%;
|
||
|
|
z-index: 10;
|
||
|
|
transition: all 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.close-icon {
|
||
|
|
font-size: 36rpx;
|
||
|
|
color: #ffffff;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.close-btn:active {
|
||
|
|
background: rgba(255, 255, 255, 0.3);
|
||
|
|
transform: scale(0.9);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 图标区域 */
|
||
|
|
.icon-section {
|
||
|
|
padding: 80rpx 0 32rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-wrapper {
|
||
|
|
width: 120rpx;
|
||
|
|
height: 120rpx;
|
||
|
|
background: linear-gradient(135deg, #D4B996 0%, #8B7355 100%);
|
||
|
|
border-radius: 50%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
box-shadow: 0 12rpx 40rpx rgba(139, 115, 85, 0.3);
|
||
|
|
animation: pulse 2s ease-in-out infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse {
|
||
|
|
0%, 100% {
|
||
|
|
transform: scale(1);
|
||
|
|
box-shadow: 0 12rpx 40rpx rgba(139, 115, 85, 0.3);
|
||
|
|
}
|
||
|
|
50% {
|
||
|
|
transform: scale(1.05);
|
||
|
|
box-shadow: 0 16rpx 50rpx rgba(139, 115, 85, 0.4);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon {
|
||
|
|
font-size: 64rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 标题区域 */
|
||
|
|
.title-section {
|
||
|
|
padding: 0 48rpx 32rpx;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.main-title {
|
||
|
|
display: block;
|
||
|
|
font-size: 40rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #1a1a1a;
|
||
|
|
margin-bottom: 12rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sub-title {
|
||
|
|
display: block;
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 价格展示 */
|
||
|
|
.price-display {
|
||
|
|
padding: 40rpx 48rpx;
|
||
|
|
text-align: center;
|
||
|
|
background: linear-gradient(135deg, #FDF8F2 0%, #F5EFE7 100%);
|
||
|
|
margin: 0 32rpx;
|
||
|
|
border-radius: 24rpx;
|
||
|
|
border: 2rpx solid rgba(139, 115, 85, 0.15);
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-wrapper {
|
||
|
|
display: flex;
|
||
|
|
align-items: baseline;
|
||
|
|
justify-content: center;
|
||
|
|
margin-bottom: 12rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-symbol {
|
||
|
|
font-size: 44rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #8B7355;
|
||
|
|
margin-right: 8rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-value {
|
||
|
|
font-size: 88rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
color: #8B7355;
|
||
|
|
line-height: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price-desc {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 订单详情 */
|
||
|
|
.order-details {
|
||
|
|
padding: 32rpx 48rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-item {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 16rpx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-label {
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-value {
|
||
|
|
font-size: 26rpx;
|
||
|
|
color: #333333;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
|
||
|
|
.detail-divider {
|
||
|
|
height: 1rpx;
|
||
|
|
background: #f0f0f0;
|
||
|
|
margin: 8rpx 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 提示信息 */
|
||
|
|
.tips-section {
|
||
|
|
padding: 24rpx 48rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tips-content {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
padding: 20rpx 32rpx;
|
||
|
|
background: #f8f9fa;
|
||
|
|
border-radius: 16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tips-icon {
|
||
|
|
font-size: 28rpx;
|
||
|
|
margin-right: 12rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tips-text {
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 按钮组 */
|
||
|
|
.action-buttons {
|
||
|
|
display: flex;
|
||
|
|
gap: 24rpx;
|
||
|
|
padding: 32rpx 48rpx 48rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
flex: 1;
|
||
|
|
height: 96rpx;
|
||
|
|
border-radius: 48rpx;
|
||
|
|
font-size: 30rpx;
|
||
|
|
font-weight: bold;
|
||
|
|
border: none;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
transition: all 0.3s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-cancel {
|
||
|
|
background: #f5f5f5;
|
||
|
|
color: #666666;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-cancel:active {
|
||
|
|
background: #e8e8e8;
|
||
|
|
transform: scale(0.98);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-confirm {
|
||
|
|
background: linear-gradient(135deg, #D4B996 0%, #8B7355 100%);
|
||
|
|
color: #ffffff;
|
||
|
|
box-shadow: 0 8rpx 24rpx rgba(139, 115, 85, 0.4);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-confirm:active {
|
||
|
|
transform: scale(0.98);
|
||
|
|
box-shadow: 0 4rpx 12rpx rgba(139, 115, 85, 0.3);
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-confirm:disabled {
|
||
|
|
opacity: 0.6;
|
||
|
|
transform: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 支付中动画 */
|
||
|
|
.paying-text {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading-dot {
|
||
|
|
display: inline-block;
|
||
|
|
animation: loadingDot 1.4s ease-in-out infinite;
|
||
|
|
font-size: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading-dot:nth-child(1) {
|
||
|
|
animation-delay: 0s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading-dot:nth-child(2) {
|
||
|
|
animation-delay: 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading-dot:nth-child(3) {
|
||
|
|
animation-delay: 0.4s;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes loadingDot {
|
||
|
|
0%, 60%, 100% {
|
||
|
|
opacity: 0.3;
|
||
|
|
transform: scale(0.8);
|
||
|
|
}
|
||
|
|
30% {
|
||
|
|
opacity: 1;
|
||
|
|
transform: scale(1.2);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|