|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<view class="page-container">
|
|
|
<scroll-view class="scroll-view" scroll-y>
|
|
|
- <view class="content-wrapper" :class="{ 'blur-content': !isLoggedIn }">
|
|
|
+ <view class="content-wrapper">
|
|
|
<!-- 强势趋势池标题 -->
|
|
|
<view class="pool-header-section">
|
|
|
<view class="pool-header">
|
|
|
@@ -29,37 +29,40 @@
|
|
|
|
|
|
<!-- 今日精选高分股 -->
|
|
|
<view class="card stock-list-card">
|
|
|
- <view class="stock-list-header">
|
|
|
- <text class="stock-list-title">今日精选高分股 ({{ stockList.length }}只)</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="stock-item" v-for="(stock, index) in stockList" :key="index">
|
|
|
- <view class="stock-info">
|
|
|
- <view class="stock-name-row">
|
|
|
- <text class="stock-name">{{ stock.name }}</text>
|
|
|
- <text class="stock-code">{{ stock.code }}</text>
|
|
|
- </view>
|
|
|
- <view class="stock-price-row">
|
|
|
- <text class="stock-price-label">价格:</text>
|
|
|
- <text class="stock-price">¥{{ stock.price }}</text>
|
|
|
- </view>
|
|
|
+ <!-- 未购买时显示锁定状态 -->
|
|
|
+ <view v-if="!isPurchased" class="locked-content">
|
|
|
+ <view class="lock-icon-wrapper">
|
|
|
+ <text class="lock-icon">🔒</text>
|
|
|
</view>
|
|
|
- <view class="stock-right">
|
|
|
- <view class="stock-score-badge">
|
|
|
- <text class="stock-score">{{ stock.score }}</text>
|
|
|
- </view>
|
|
|
- <view class="stock-actions">
|
|
|
- <view class="action-btn buy-btn" @click="showBuyModal(stock)">
|
|
|
- <text class="action-icon">+</text>
|
|
|
+ <text class="lock-text">权限锁定: 查看 精选高分股</text>
|
|
|
+ <text class="lock-desc">精选高分股为每日实时更新,捕捉中长期趋势机会。</text>
|
|
|
+ <view class="unlock-button" @click="showPurchaseModal">
|
|
|
+ <text class="unlock-button-text">立即打赏</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 已购买时显示内容 -->
|
|
|
+ <view v-else class="unlocked-content">
|
|
|
+ <text class="unlocked-tip">您已解锁,可以查看高分股内容</text>
|
|
|
+ <view class="stock-item" v-for="(stock, index) in stockList" :key="index">
|
|
|
+ <view class="stock-info">
|
|
|
+ <view class="stock-name-row">
|
|
|
+ <text class="stock-name">{{ stock.name }}</text>
|
|
|
+ <text class="stock-code">{{ stock.code }}</text>
|
|
|
</view>
|
|
|
- <view class="action-btn sell-btn" @click="showSellModal(stock)">
|
|
|
- <text class="action-icon">-</text>
|
|
|
+ </view>
|
|
|
+ <view class="stock-right">
|
|
|
+ <view class="stock-actions">
|
|
|
+ <view class="action-btn buy-btn">
|
|
|
+ <text class="action-icon">+</text>
|
|
|
+ </view>
|
|
|
+ <view class="action-btn sell-btn">
|
|
|
+ <text class="action-icon">-</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
-
|
|
|
- <text class="risk-tip">风险提示:买卖为模拟交易,不涉及真实资金。</text>
|
|
|
</view>
|
|
|
|
|
|
<!-- 历史趋势池回顾 -->
|
|
|
@@ -87,101 +90,45 @@
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
|
|
|
- <!-- 未登录遮罩层 -->
|
|
|
- <view v-if="!isLoggedIn" class="login-mask">
|
|
|
- <view class="login-prompt">
|
|
|
- <view class="lock-icon">🔒</view>
|
|
|
- <text class="prompt-title">登录后进行模拟交易</text>
|
|
|
- <text class="prompt-desc">使用微信授权快速登录</text>
|
|
|
-
|
|
|
- <!-- 跳转到登录页按钮 -->
|
|
|
- <button
|
|
|
- class="login-button-native"
|
|
|
- @click="goToLogin"
|
|
|
- >
|
|
|
- <text>登录</text>
|
|
|
- </button>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <!-- 买入弹窗 -->
|
|
|
- <view v-if="showBuyModalFlag" class="modal-overlay" @click="closeBuyModal">
|
|
|
+ <!-- 购买弹窗 -->
|
|
|
+ <view v-if="showModal" class="modal-overlay" @click="closePurchaseModal">
|
|
|
<view class="modal-content" @click.stop>
|
|
|
<view class="modal-header">
|
|
|
- <text class="modal-title buy-title">模拟买入</text>
|
|
|
- <text class="modal-close" @click="closeBuyModal">×</text>
|
|
|
+ <text class="modal-title">强势池年订阅服务</text>
|
|
|
+ <text class="modal-close" @click="closePurchaseModal">×</text>
|
|
|
</view>
|
|
|
|
|
|
- <view class="modal-body">
|
|
|
- <text class="modal-stock-name">{{ currentStock.name }} ({{ currentStock.code }})</text>
|
|
|
- <view class="modal-price-row">
|
|
|
- <text class="modal-price-label">当前价:</text>
|
|
|
- <text class="modal-price-value">¥ {{ currentStock.price }}</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="modal-input-row">
|
|
|
- <text class="modal-input-label">股数 (100的倍数)</text>
|
|
|
- <input
|
|
|
- class="modal-input"
|
|
|
- type="number"
|
|
|
- v-model="buyQuantity"
|
|
|
- placeholder="100"
|
|
|
- @input="onBuyQuantityChange"
|
|
|
- />
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="modal-total-row">
|
|
|
- <text class="modal-total-label">需支付金额:</text>
|
|
|
- <text class="modal-total-value buy-total">¥ {{ buyTotalAmount.toFixed(2) }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="modal-footer">
|
|
|
- <view class="modal-button buy-button" @click="handleBuy">
|
|
|
- <text class="modal-button-text">确认买入</text>
|
|
|
+ <view class="subscription-options">
|
|
|
+ <view
|
|
|
+ class="subscription-option active"
|
|
|
+ >
|
|
|
+ <view class="option-info">
|
|
|
+ <text class="option-title">年订阅</text>
|
|
|
+ <text class="option-desc">连续查看</text>
|
|
|
+ </view>
|
|
|
+ <text class="option-price">¥98</text>
|
|
|
</view>
|
|
|
- <text class="modal-tip">交易已记录在您的模拟账户中。</text>
|
|
|
</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
|
|
|
- <!-- 卖出弹窗 -->
|
|
|
- <view v-if="showSellModalFlag" class="modal-overlay" @click="closeSellModal">
|
|
|
- <view class="modal-content" @click.stop>
|
|
|
- <view class="modal-header">
|
|
|
- <text class="modal-title sell-title">模拟卖出</text>
|
|
|
- <text class="modal-close" @click="closeSellModal">×</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="modal-body">
|
|
|
- <text class="modal-stock-name">{{ currentStock.name }} ({{ currentStock.code }})</text>
|
|
|
- <view class="modal-price-row">
|
|
|
- <text class="modal-price-label">当前价:</text>
|
|
|
- <text class="modal-price-value">¥ {{ currentStock.price }}</text>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="modal-input-row">
|
|
|
- <text class="modal-input-label">股数 (100的倍数)</text>
|
|
|
- <input
|
|
|
- class="modal-input"
|
|
|
- type="number"
|
|
|
- v-model="sellQuantity"
|
|
|
- placeholder="100"
|
|
|
- @input="onSellQuantityChange"
|
|
|
- />
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="modal-total-row">
|
|
|
- <text class="modal-total-label">总市值估算:</text>
|
|
|
- <text class="modal-total-value sell-total">¥ {{ sellTotalAmount.toFixed(2) }}</text>
|
|
|
+ <!-- 支付方式选择 -->
|
|
|
+ <view class="payment-method-section">
|
|
|
+ <text class="payment-method-title">支付方式</text>
|
|
|
+ <view class="payment-methods">
|
|
|
+ <view
|
|
|
+ class="payment-method-item active"
|
|
|
+ >
|
|
|
+ <text class="payment-icon">💳</text>
|
|
|
+ <text class="payment-name">微信支付</text>
|
|
|
+ <view class="payment-check">✓</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
<view class="modal-footer">
|
|
|
- <view class="modal-button sell-button" @click="handleSell">
|
|
|
- <text class="modal-button-text">确认卖出</text>
|
|
|
+ <view class="pay-button" @click="handlePurchase">
|
|
|
+ <text class="pay-button-text">确认支付并解锁</text>
|
|
|
</view>
|
|
|
- <text class="modal-tip">交易已记录在您的模拟账户中。</text>
|
|
|
+ <text class="agreement-text">点击即表示同意《用户订阅协议》</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -189,12 +136,16 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { ref, computed } from 'vue'
|
|
|
+import { ref } from 'vue'
|
|
|
import { onLoad, onShow } from '@dcloudio/uni-app'
|
|
|
import { isLoggedIn as checkLoginStatus } from '../../utils/auth.js'
|
|
|
|
|
|
// 登录状态
|
|
|
const isLoggedIn = ref(false)
|
|
|
+// 购买状态
|
|
|
+const isPurchased = ref(false)
|
|
|
+const showModal = ref(false)
|
|
|
+const selectedPlan = ref('monthly')
|
|
|
|
|
|
// 股票列表数据
|
|
|
const stockList = ref([
|
|
|
@@ -213,176 +164,114 @@ const stockList = ref([
|
|
|
])
|
|
|
|
|
|
const selectedDate = ref('2025年11月20日')
|
|
|
-const showBuyModalFlag = ref(false)
|
|
|
-const showSellModalFlag = ref(false)
|
|
|
-const currentStock = ref({})
|
|
|
-const buyQuantity = ref('100')
|
|
|
-const sellQuantity = ref('100')
|
|
|
|
|
|
// 检查登录状态(不弹窗提示)
|
|
|
const checkLogin = () => {
|
|
|
isLoggedIn.value = checkLoginStatus()
|
|
|
console.log('[强势池] 登录状态:', isLoggedIn.value)
|
|
|
+ return isLoggedIn.value
|
|
|
+}
|
|
|
+
|
|
|
+// 检查购买状态
|
|
|
+// 检查购买状态
|
|
|
+const checkPurchaseStatus = () => {
|
|
|
+ try {
|
|
|
+ const purchaseInfo = uni.getStorageSync('strong_pool_purchase')
|
|
|
+ if (purchaseInfo) {
|
|
|
+ const now = Date.now()
|
|
|
+ const expireTime = purchaseInfo.expireTime
|
|
|
+ if (now < expireTime) {
|
|
|
+ isPurchased.value = true
|
|
|
+ } else {
|
|
|
+ // 已过期,清除购买信息
|
|
|
+ uni.removeStorageSync('strong_pool_purchase')
|
|
|
+ isPurchased.value = false
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ isPurchased.value = false
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.error('检查购买状态失败:', e)
|
|
|
+ isPurchased.value = false
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-// 跳转到登录页
|
|
|
-const goToLogin = () => {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/login/login'
|
|
|
- })
|
|
|
-}
|
|
|
-
|
|
|
-// 计算买入总金额
|
|
|
-const buyTotalAmount = computed(() => {
|
|
|
- const qty = parseInt(buyQuantity.value) || 0
|
|
|
- const price = parseFloat(currentStock.value.price) || 0
|
|
|
- return qty * price
|
|
|
-})
|
|
|
-
|
|
|
-// 计算卖出总金额
|
|
|
-const sellTotalAmount = computed(() => {
|
|
|
- const qty = parseInt(sellQuantity.value) || 0
|
|
|
- const price = parseFloat(currentStock.value.price) || 0
|
|
|
- return qty * price
|
|
|
-})
|
|
|
-
|
|
|
-// 显示买入弹窗
|
|
|
-const showBuyModal = (stock) => {
|
|
|
- console.log('点击买入按钮')
|
|
|
- currentStock.value = { ...stock }
|
|
|
- buyQuantity.value = '100'
|
|
|
- showBuyModalFlag.value = true
|
|
|
-}
|
|
|
-
|
|
|
-// 关闭买入弹窗
|
|
|
-const closeBuyModal = () => {
|
|
|
- showBuyModalFlag.value = false
|
|
|
-}
|
|
|
-
|
|
|
-// 显示卖出弹窗
|
|
|
-const showSellModal = (stock) => {
|
|
|
- console.log('点击卖出按钮')
|
|
|
- currentStock.value = { ...stock }
|
|
|
- sellQuantity.value = '100'
|
|
|
- showSellModalFlag.value = true
|
|
|
-}
|
|
|
-
|
|
|
-// 关闭卖出弹窗
|
|
|
-const closeSellModal = () => {
|
|
|
- showSellModalFlag.value = false
|
|
|
-}
|
|
|
-
|
|
|
-// 买入股数变化
|
|
|
-const onBuyQuantityChange = (e) => {
|
|
|
- const value = e.detail.value
|
|
|
- // 确保是100的倍数
|
|
|
- if (value && parseInt(value) % 100 !== 0) {
|
|
|
- uni.showToast({
|
|
|
- title: '股数必须是100的倍数',
|
|
|
- icon: 'none'
|
|
|
+// 显示购买弹窗(需要登录)
|
|
|
+const showPurchaseModal = () => {
|
|
|
+ console.log('点击立即解锁')
|
|
|
+
|
|
|
+ // 检查登录状态
|
|
|
+ if (!checkLoginStatus()) {
|
|
|
+ console.log('未登录,跳转到登录页')
|
|
|
+ uni.showModal({
|
|
|
+ title: '登录提示',
|
|
|
+ content: '此功能需要登录后使用,是否前往登录?',
|
|
|
+ confirmText: '去登录',
|
|
|
+ cancelText: '取消',
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/login/login'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
})
|
|
|
+ return
|
|
|
}
|
|
|
+
|
|
|
+ console.log('已登录,显示购买弹窗')
|
|
|
+ showModal.value = true
|
|
|
}
|
|
|
|
|
|
-// 卖出股数变化
|
|
|
-const onSellQuantityChange = (e) => {
|
|
|
- const value = e.detail.value
|
|
|
- // 确保是100的倍数
|
|
|
- if (value && parseInt(value) % 100 !== 0) {
|
|
|
- uni.showToast({
|
|
|
- title: '股数必须是100的倍数',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
+// 关闭购买弹窗
|
|
|
+const closePurchaseModal = () => {
|
|
|
+ showModal.value = false
|
|
|
}
|
|
|
|
|
|
-// 处理买入
|
|
|
-const handleBuy = () => {
|
|
|
- const qty = parseInt(buyQuantity.value)
|
|
|
- if (!qty || qty <= 0) {
|
|
|
+// 处理购买
|
|
|
+const handlePurchase = () => {
|
|
|
+ if (!selectedPlan.value) {
|
|
|
uni.showToast({
|
|
|
- title: '请输入有效的股数',
|
|
|
+ title: '请选择订阅方案',
|
|
|
icon: 'none'
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
+
|
|
|
+ // 计算过期时间
|
|
|
+ const now = Date.now()
|
|
|
+ let expireTime = now
|
|
|
|
|
|
- if (qty % 100 !== 0) {
|
|
|
- uni.showToast({
|
|
|
- title: '股数必须是100的倍数',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
+ if (selectedPlan.value === 'monthly') {
|
|
|
+ // 月订阅:30天后过期
|
|
|
+ expireTime = now + 30 * 24 * 60 * 60 * 1000
|
|
|
}
|
|
|
|
|
|
- // 保存交易记录
|
|
|
- const transaction = {
|
|
|
- type: 'buy',
|
|
|
- stockName: currentStock.value.name,
|
|
|
- stockCode: currentStock.value.code,
|
|
|
- price: parseFloat(currentStock.value.price),
|
|
|
- quantity: qty,
|
|
|
- totalAmount: buyTotalAmount.value,
|
|
|
- timestamp: Date.now()
|
|
|
+ // 保存购买信息
|
|
|
+ const purchaseInfo = {
|
|
|
+ plan: selectedPlan.value,
|
|
|
+ purchaseTime: now,
|
|
|
+ expireTime: expireTime
|
|
|
}
|
|
|
+ uni.setStorageSync('strong_pool_purchase', purchaseInfo)
|
|
|
|
|
|
- // 获取现有交易记录
|
|
|
- const transactions = uni.getStorageSync('simulated_transactions') || []
|
|
|
- transactions.push(transaction)
|
|
|
- uni.setStorageSync('simulated_transactions', transactions)
|
|
|
+ // 更新购买状态
|
|
|
+ isPurchased.value = true
|
|
|
|
|
|
// 关闭弹窗
|
|
|
- closeBuyModal()
|
|
|
+ closePurchaseModal()
|
|
|
|
|
|
// 显示成功提示
|
|
|
uni.showToast({
|
|
|
- title: '买入成功',
|
|
|
+ title: '解锁成功',
|
|
|
icon: 'success'
|
|
|
})
|
|
|
}
|
|
|
|
|
|
-// 处理卖出
|
|
|
-const handleSell = () => {
|
|
|
- const qty = parseInt(sellQuantity.value)
|
|
|
- if (!qty || qty <= 0) {
|
|
|
- uni.showToast({
|
|
|
- title: '请输入有效的股数',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- if (qty % 100 !== 0) {
|
|
|
- uni.showToast({
|
|
|
- title: '股数必须是100的倍数',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- return
|
|
|
- }
|
|
|
-
|
|
|
- // 保存交易记录
|
|
|
- const transaction = {
|
|
|
- type: 'sell',
|
|
|
- stockName: currentStock.value.name,
|
|
|
- stockCode: currentStock.value.code,
|
|
|
- price: parseFloat(currentStock.value.price),
|
|
|
- quantity: qty,
|
|
|
- totalAmount: sellTotalAmount.value,
|
|
|
- timestamp: Date.now()
|
|
|
- }
|
|
|
-
|
|
|
- // 获取现有交易记录
|
|
|
- const transactions = uni.getStorageSync('simulated_transactions') || []
|
|
|
- transactions.push(transaction)
|
|
|
- uni.setStorageSync('simulated_transactions', transactions)
|
|
|
-
|
|
|
- // 关闭弹窗
|
|
|
- closeSellModal()
|
|
|
-
|
|
|
- // 显示成功提示
|
|
|
- uni.showToast({
|
|
|
- title: '卖出成功',
|
|
|
- icon: 'success'
|
|
|
+// 跳转到登录页
|
|
|
+const goToLogin = () => {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/login/login'
|
|
|
})
|
|
|
}
|
|
|
|
|
|
@@ -395,13 +284,13 @@ const onHistorySearch = () => {
|
|
|
}
|
|
|
|
|
|
onLoad(() => {
|
|
|
- // 页面加载时检查登录状态
|
|
|
- checkLogin()
|
|
|
+ // 页面加载时检查购买状态
|
|
|
+ checkPurchaseStatus()
|
|
|
})
|
|
|
|
|
|
onShow(() => {
|
|
|
- // 页面显示时检查登录状态(从登录页返回时会触发)
|
|
|
- checkLogin()
|
|
|
+ // 页面显示时检查购买状态(从登录页返回时会触发)
|
|
|
+ checkPurchaseStatus()
|
|
|
// 设置导航栏标题
|
|
|
uni.setNavigationBarTitle({ title: '量化交易大师' })
|
|
|
})
|
|
|
@@ -501,16 +390,6 @@ onShow(() => {
|
|
|
padding: 32rpx;
|
|
|
}
|
|
|
|
|
|
-.stock-list-header {
|
|
|
- margin-bottom: 24rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.stock-list-title {
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #222222;
|
|
|
-}
|
|
|
-
|
|
|
.stock-item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
@@ -611,14 +490,6 @@ onShow(() => {
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
|
|
|
-.risk-tip {
|
|
|
- display: block;
|
|
|
- margin-top: 24rpx;
|
|
|
- font-size: 22rpx;
|
|
|
- color: #9ca2b5;
|
|
|
- text-align: center;
|
|
|
-}
|
|
|
-
|
|
|
/* 历史股票池回顾 */
|
|
|
.history-card {
|
|
|
padding: 32rpx;
|
|
|
@@ -703,14 +574,7 @@ onShow(() => {
|
|
|
.modal-title {
|
|
|
font-size: 32rpx;
|
|
|
font-weight: 600;
|
|
|
-}
|
|
|
-
|
|
|
-.buy-title {
|
|
|
- color: #3abf81;
|
|
|
-}
|
|
|
-
|
|
|
-.sell-title {
|
|
|
- color: #f16565;
|
|
|
+ color: #222222;
|
|
|
}
|
|
|
|
|
|
.modal-close {
|
|
|
@@ -724,196 +588,195 @@ onShow(() => {
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
-.modal-body {
|
|
|
- margin-bottom: 32rpx;
|
|
|
+.modal-footer {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
|
|
|
-.modal-stock-name {
|
|
|
- display: block;
|
|
|
- font-size: 28rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #222222;
|
|
|
- margin-bottom: 24rpx;
|
|
|
+.bottom-safe-area {
|
|
|
+ height: 80rpx;
|
|
|
}
|
|
|
|
|
|
-.modal-price-row {
|
|
|
+/* 锁定内容样式 */
|
|
|
+.locked-content {
|
|
|
display: flex;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
- margin-bottom: 32rpx;
|
|
|
+ padding: 60rpx 0 40rpx;
|
|
|
}
|
|
|
|
|
|
-.modal-price-label {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666a7f;
|
|
|
- margin-right: 12rpx;
|
|
|
+.lock-icon-wrapper {
|
|
|
+ margin-bottom: 32rpx;
|
|
|
}
|
|
|
|
|
|
-.modal-price-value {
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 700;
|
|
|
- color: #222222;
|
|
|
+.locked-content .lock-icon {
|
|
|
+ font-size: 80rpx;
|
|
|
}
|
|
|
|
|
|
-.modal-input-row {
|
|
|
- margin-bottom: 32rpx;
|
|
|
+.lock-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
|
|
|
-.modal-input-label {
|
|
|
- display: block;
|
|
|
+.lock-desc {
|
|
|
font-size: 24rpx;
|
|
|
color: #9ca2b5;
|
|
|
- margin-bottom: 16rpx;
|
|
|
+ margin-bottom: 48rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 1.6;
|
|
|
}
|
|
|
|
|
|
-.modal-input {
|
|
|
+.locked-content .unlock-button {
|
|
|
width: 100%;
|
|
|
- background: #f7f8fc;
|
|
|
- border-radius: 12rpx;
|
|
|
- padding: 24rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-
|
|
|
-.modal-total-row {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- padding-top: 24rpx;
|
|
|
- border-top: 1rpx solid #f1f2f6;
|
|
|
+ background: linear-gradient(135deg, #5d55e8, #7568ff);
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 28rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ box-shadow: 0 12rpx 24rpx rgba(93, 85, 232, 0.4);
|
|
|
}
|
|
|
|
|
|
-.modal-total-label {
|
|
|
- font-size: 26rpx;
|
|
|
- color: #666a7f;
|
|
|
+.locked-content .unlock-button-text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
|
|
|
-.modal-total-value {
|
|
|
- font-size: 36rpx;
|
|
|
- font-weight: 700;
|
|
|
+/* 已解锁内容样式 */
|
|
|
+.unlocked-content {
|
|
|
+ margin-top: 32rpx;
|
|
|
}
|
|
|
|
|
|
-.buy-total {
|
|
|
+.unlocked-tip {
|
|
|
+ font-size: 26rpx;
|
|
|
color: #3abf81;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ display: block;
|
|
|
}
|
|
|
|
|
|
-.sell-total {
|
|
|
- color: #f16565;
|
|
|
+/* 购买弹窗样式 */
|
|
|
+.subscription-options {
|
|
|
+ margin-bottom: 32rpx;
|
|
|
}
|
|
|
|
|
|
-.modal-footer {
|
|
|
+.subscription-option {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
-}
|
|
|
-
|
|
|
-.modal-button {
|
|
|
- width: 100%;
|
|
|
+ padding: 32rpx 24rpx;
|
|
|
+ border: 2rpx solid #e5e7eb;
|
|
|
border-radius: 16rpx;
|
|
|
- padding: 28rpx 0;
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 24rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ transition: all 0.3s;
|
|
|
}
|
|
|
|
|
|
-.buy-button {
|
|
|
- background: #3abf81;
|
|
|
+.subscription-option.active {
|
|
|
+ border-color: #5d55e8;
|
|
|
+ background: #f7f8fc;
|
|
|
}
|
|
|
|
|
|
-.sell-button {
|
|
|
- background: #f16565;
|
|
|
+.option-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
|
|
|
-.modal-button-text {
|
|
|
- font-size: 30rpx;
|
|
|
+.option-title {
|
|
|
+ font-size: 28rpx;
|
|
|
font-weight: 600;
|
|
|
- color: #ffffff;
|
|
|
+ color: #222222;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
}
|
|
|
|
|
|
-.modal-tip {
|
|
|
- font-size: 22rpx;
|
|
|
+.option-desc {
|
|
|
+ font-size: 24rpx;
|
|
|
color: #9ca2b5;
|
|
|
}
|
|
|
|
|
|
-.bottom-safe-area {
|
|
|
- height: 80rpx;
|
|
|
+.option-price {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #f16565;
|
|
|
}
|
|
|
|
|
|
-/* 模糊效果 */
|
|
|
-.blur-content {
|
|
|
- filter: blur(8rpx);
|
|
|
- pointer-events: none;
|
|
|
+/* 支付方式选择 */
|
|
|
+.payment-method-section {
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ padding-top: 24rpx;
|
|
|
+ border-top: 1rpx solid #f1f2f6;
|
|
|
}
|
|
|
|
|
|
-/* 登录遮罩层 */
|
|
|
-.login-mask {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- background: rgba(0, 0, 0, 0.4);
|
|
|
+.payment-method-title {
|
|
|
+ display: block;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #222222;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.payment-methods {
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- z-index: 999;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 16rpx;
|
|
|
}
|
|
|
|
|
|
-.login-prompt {
|
|
|
- width: 560rpx;
|
|
|
- max-width: 560rpx;
|
|
|
- background: #ffffff;
|
|
|
- border-radius: 24rpx;
|
|
|
- padding: 50rpx 40rpx;
|
|
|
- margin: 0 auto;
|
|
|
- text-align: center;
|
|
|
- box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.3);
|
|
|
- box-sizing: border-box;
|
|
|
+.payment-method-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 24rpx 20rpx;
|
|
|
+ border: 2rpx solid #e5e7eb;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ transition: all 0.3s;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
|
|
|
-.lock-icon {
|
|
|
- font-size: 72rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
+.payment-method-item.active {
|
|
|
+ border-color: #5d55e8;
|
|
|
+ background: #f7f5ff;
|
|
|
}
|
|
|
|
|
|
-.prompt-title {
|
|
|
- display: block;
|
|
|
- font-size: 32rpx;
|
|
|
- font-weight: 600;
|
|
|
- color: #222222;
|
|
|
- margin-bottom: 12rpx;
|
|
|
+.payment-icon {
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
}
|
|
|
|
|
|
-.prompt-desc {
|
|
|
- display: block;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #999999;
|
|
|
- line-height: 1.5;
|
|
|
- margin-bottom: 32rpx;
|
|
|
+.payment-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #222222;
|
|
|
+ flex: 1;
|
|
|
}
|
|
|
|
|
|
-.login-button-native {
|
|
|
- width: 100%;
|
|
|
- height: 80rpx;
|
|
|
- background: linear-gradient(135deg, #4CAF50, #66BB6A);
|
|
|
+.payment-check {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background: #5d55e8;
|
|
|
+ border-radius: 50%;
|
|
|
color: #ffffff;
|
|
|
- border-radius: 40rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- font-weight: 600;
|
|
|
- box-shadow: 0 8rpx 24rpx rgba(76, 175, 80, 0.4);
|
|
|
+ font-size: 24rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
- border: none;
|
|
|
- padding: 0;
|
|
|
- line-height: 80rpx;
|
|
|
}
|
|
|
|
|
|
-.login-button-native::after {
|
|
|
- border: none;
|
|
|
+.pay-button {
|
|
|
+ width: 100%;
|
|
|
+ background: #f16565;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 28rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
}
|
|
|
|
|
|
-.button-icon {
|
|
|
- font-size: 32rpx;
|
|
|
- margin-right: 12rpx;
|
|
|
+.pay-button-text {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #ffffff;
|
|
|
+}
|
|
|
+
|
|
|
+.agreement-text {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #9ca2b5;
|
|
|
}
|
|
|
</style>
|