upload project source code
This commit is contained in:
270
前端源码/uni-app/components/NamingPayModal.vue
Normal file
270
前端源码/uni-app/components/NamingPayModal.vue
Normal file
@@ -0,0 +1,270 @@
|
||||
<template>
|
||||
<view v-if="visible" class="pay-modal-overlay" @click="handleClose">
|
||||
<view class="pay-modal" @click.stop>
|
||||
<view class="pay-modal-header">
|
||||
<text class="pay-modal-title">解锁完整报告</text>
|
||||
<view class="pay-modal-close" @click="handleClose">✕</view>
|
||||
</view>
|
||||
|
||||
<view class="pay-modal-content">
|
||||
<view class="pay-modal-preview">
|
||||
<view class="pay-modal-name">{{ data?.name || '吉名' }}</view>
|
||||
<view class="pay-modal-pinyin">{{ data?.pinyin || '' }}</view>
|
||||
<view class="pay-modal-lock-icon">🔒</view>
|
||||
<text class="pay-modal-lock-text">详细解析已加密</text>
|
||||
</view>
|
||||
|
||||
<view class="pay-modal-features">
|
||||
<view class="pay-modal-feature">
|
||||
<text class="pay-modal-feature-icon">✦</text>
|
||||
<text class="pay-modal-feature-text">字义与生肖解析</text>
|
||||
</view>
|
||||
<view class="pay-modal-feature">
|
||||
<text class="pay-modal-feature-icon">✦</text>
|
||||
<text class="pay-modal-feature-text">三才五格数理分析</text>
|
||||
</view>
|
||||
<view class="pay-modal-feature">
|
||||
<text class="pay-modal-feature-icon">✦</text>
|
||||
<text class="pay-modal-feature-text">六维格局与周易卦象</text>
|
||||
</view>
|
||||
<view class="pay-modal-feature">
|
||||
<text class="pay-modal-feature-icon">✦</text>
|
||||
<text class="pay-modal-feature-text">开运锦囊与人生运程</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pay-modal-price">
|
||||
<text class="pay-modal-price-label">限时特惠</text>
|
||||
<text class="pay-modal-price-value">¥9.9</text>
|
||||
<text class="pay-modal-price-original">¥29.9</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pay-modal-actions">
|
||||
<button class="pay-modal-btn pay-modal-btn-share" open-type="share" @click="handleShare">
|
||||
<text class="pay-modal-btn-text">分享解锁</text>
|
||||
</button>
|
||||
<button class="pay-modal-btn pay-modal-btn-pay" @click="handlePay">
|
||||
<text class="pay-modal-btn-text">立即解锁</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="pay-modal-tip">
|
||||
<text>分享给好友即可免费解锁完整报告</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { GeneratedName } from "./NamingResult.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
visible: boolean;
|
||||
data: GeneratedName | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [];
|
||||
pay: [data: GeneratedName];
|
||||
share: [];
|
||||
unlock: [data: GeneratedName];
|
||||
}>();
|
||||
|
||||
const handleClose = () => {
|
||||
emit("close");
|
||||
};
|
||||
|
||||
const handlePay = () => {
|
||||
// 支付成功后直接跳转到详情页
|
||||
if (props.data) {
|
||||
emit("pay", props.data);
|
||||
}
|
||||
};
|
||||
|
||||
const handleShare = () => {
|
||||
emit("share");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pay-modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.pay-modal {
|
||||
width: 85%;
|
||||
max-width: 600rpx;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
border-radius: 24rpx;
|
||||
border: 1px solid rgba(212, 175, 55, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pay-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.pay-modal-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #d4af37;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.pay-modal-close {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #a0a0a0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.pay-modal-content {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.pay-modal-preview {
|
||||
text-align: center;
|
||||
padding: 32rpx;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.pay-modal-name {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #e2e2e2;
|
||||
letter-spacing: 0.2em;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.pay-modal-pinyin {
|
||||
font-size: 12px;
|
||||
color: #a0a0a0;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.pay-modal-lock-icon {
|
||||
font-size: 32px;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.pay-modal-lock-text {
|
||||
font-size: 12px;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
|
||||
.pay-modal-features {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.pay-modal-feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
|
||||
.pay-modal-feature-icon {
|
||||
color: #d4af37;
|
||||
margin-right: 16rpx;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pay-modal-feature-text {
|
||||
font-size: 13px;
|
||||
color: #a0a0a0;
|
||||
}
|
||||
|
||||
.pay-modal-price {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
padding: 24rpx;
|
||||
background: rgba(212, 175, 55, 0.1);
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.pay-modal-price-label {
|
||||
font-size: 12px;
|
||||
color: #d4af37;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.pay-modal-price-value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #d4af37;
|
||||
}
|
||||
|
||||
.pay-modal-price-original {
|
||||
font-size: 14px;
|
||||
color: #5a5a5a;
|
||||
text-decoration: line-through;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.pay-modal-actions {
|
||||
display: flex;
|
||||
gap: 16rpx;
|
||||
padding: 0 32rpx 32rpx;
|
||||
}
|
||||
|
||||
.pay-modal-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12rpx;
|
||||
border-radius: 12rpx;
|
||||
border: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pay-modal-btn-share {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #e2e2e2;
|
||||
}
|
||||
|
||||
.pay-modal-btn-pay {
|
||||
background: linear-gradient(135deg, #d4af37 0%, #8a6e1e 100%);
|
||||
color: #1a1a2e;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pay-modal-btn-icon {
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
|
||||
.pay-modal-btn-text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.pay-modal-tip {
|
||||
text-align: center;
|
||||
padding: 0 32rpx 32rpx;
|
||||
}
|
||||
|
||||
.pay-modal-tip text {
|
||||
font-size: 11px;
|
||||
color: #5a5a5a;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user