|
@@ -0,0 +1,567 @@
|
|
|
+<template>
|
|
|
+ <div class="wallet-page">
|
|
|
+ <!-- 导航栏 -->
|
|
|
+ <s-header name="我的钱包" :noback="false" :isBorder="false"></s-header>
|
|
|
+
|
|
|
+ <!-- 新版余额卡片 -->
|
|
|
+ <!-- <div class="new-balance-card">
|
|
|
+ <div class="card-bg">
|
|
|
+ <div class="wave"></div>
|
|
|
+ <div class="deco-circle"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="balance-content">
|
|
|
+ <div class="balance-header">
|
|
|
+ <van-icon name="balance-pay" color="rgba(255,255,255,0.9)" size="20" />
|
|
|
+ <span class="balance-label">可用余额(元)</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="balance-main">
|
|
|
+ <span class="currency">¥</span>
|
|
|
+ <span class="amount">8,888.00</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="action-buttons">
|
|
|
+ <van-button round class="recharge-btn" @click="handleRecharge">
|
|
|
+ <van-icon name="cash-back-record" size="16" />
|
|
|
+ <span>立即充值</span>
|
|
|
+ </van-button>
|
|
|
+
|
|
|
+ <van-button round plain class="withdraw-btn" @click="handleWithdraw">
|
|
|
+ <van-icon name="cash-on-deliver" size="16" />
|
|
|
+ <span>申请提现</span>
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <!-- 余额概览 -->
|
|
|
+ <div class="balance-section">
|
|
|
+ <div class="section-title">
|
|
|
+ <van-icon name="balance-list" color="#4d6add" size="18" />
|
|
|
+ <span>资金账户</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="balance-cards">
|
|
|
+ <!-- 今日收款卡片 -->
|
|
|
+ <div class="balance-card today-card">
|
|
|
+ <div class="card-header">
|
|
|
+ <van-icon name="cash-back-record" color="white" size="18" />
|
|
|
+ <div class="card-title">
|
|
|
+ <h3>今日收款余额(元)</h3>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="amount">8,888.00</div>
|
|
|
+ <van-button icon="cash-back-record" @click="handleRecharge">
|
|
|
+ 立即充值
|
|
|
+ </van-button>
|
|
|
+ <!-- <div class="hint-text">
|
|
|
+ <van-icon name="info" size="12" />
|
|
|
+ <span>T+1自动转入可提现余额</span>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 可提现卡片 -->
|
|
|
+ <div class="balance-card withdraw-card">
|
|
|
+ <div class="card-header">
|
|
|
+ <van-icon name="cash-on-deliver" color="white" size="18" />
|
|
|
+ <div class="card-title">
|
|
|
+ <h3>可提现余额(元)</h3>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="amount">6,666.00</div>
|
|
|
+ <van-button icon="cash-on-deliver" @click="handleWithdraw">
|
|
|
+ 立即提现
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 记录入口 -->
|
|
|
+ <div class="record-section">
|
|
|
+ <div class="section-title">
|
|
|
+ <van-icon name="records" color="#4d6add" size="18" />
|
|
|
+ <span>交易记录</span>
|
|
|
+ </div>
|
|
|
+ <div class="record-cards">
|
|
|
+ <div class="record-card" @click="goToAutoRecord">
|
|
|
+ <div class="card-icon auto">
|
|
|
+ <van-icon name="passed" size="24" />
|
|
|
+ </div>
|
|
|
+ <div class="card-content">
|
|
|
+ <h3>自动结算</h3>
|
|
|
+ <p>查看系统自动结算记录</p>
|
|
|
+ </div>
|
|
|
+ <van-icon name="arrow" size="16" color="#ccc" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="record-card" @click="goToManualRecord">
|
|
|
+ <div class="card-icon manual">
|
|
|
+ <van-icon name="cash-on-deliver" size="24" />
|
|
|
+ </div>
|
|
|
+ <div class="card-content">
|
|
|
+ <h3>手动提现</h3>
|
|
|
+ <p>查看手动提现操作记录</p>
|
|
|
+ </div>
|
|
|
+ <van-icon name="arrow" size="16" color="#ccc" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 银行卡管理 -->
|
|
|
+ <div class="bank-section">
|
|
|
+ <div class="section-title">
|
|
|
+ <van-icon name="credit-pay" color="#4d6add" size="18" />
|
|
|
+ <span>银行卡管理</span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="bank-cards">
|
|
|
+ <!-- 已绑卡状态 -->
|
|
|
+ <div class="bank-card" v-if="hasBankCard">
|
|
|
+ <div class="card-header">
|
|
|
+ <van-icon name="card" size="20" />
|
|
|
+ <span>储蓄卡</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-number">**** **** **** 1234</div>
|
|
|
+ <div class="card-footer">
|
|
|
+ <span>中国工商银行</span>
|
|
|
+ <van-icon name="ellipsis" size="16" />
|
|
|
+ </div>
|
|
|
+ <div class="auto-settle-hint" v-if="autoSettle">
|
|
|
+ <van-icon name="checked" color="#4d6add" size="18" />
|
|
|
+ <span>本卡已启用自动结算</span>
|
|
|
+ </div>
|
|
|
+ <div class="auto-settle-hint" v-if="!autoSettle">
|
|
|
+ <van-icon name="circle" color="#4d6add" size="18" />
|
|
|
+ <span>本卡已关闭自动结算</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 未绑卡状态 -->
|
|
|
+ <div class="bank-card empty-state" v-else>
|
|
|
+ <div class="empty-content">
|
|
|
+ <p class="empty-title">尚未绑定银行卡</p>
|
|
|
+ <p class="empty-desc">绑定后可享受快捷支付服务</p>
|
|
|
+ <van-button type="primary" round size="small" @click="handleBindCard" class="bind-btn">
|
|
|
+ <van-icon name="plus" size="16" />
|
|
|
+ 立即绑卡
|
|
|
+ </van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-spacer"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import sHeader from "../../components/SimpleHeader";
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: { sHeader },
|
|
|
+ setup() {
|
|
|
+
|
|
|
+
|
|
|
+ const handleRecharge = () => {
|
|
|
+ console.log('handleRecharge');
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleWithdraw = () => {
|
|
|
+ console.log('handleWithdraw');
|
|
|
+ };
|
|
|
+
|
|
|
+ const goToAutoRecord = () => {
|
|
|
+ console.log('goToAutoRecord');
|
|
|
+ };
|
|
|
+
|
|
|
+ const goToManualRecord = () => {
|
|
|
+ console.log('goToManualRecord');
|
|
|
+ }
|
|
|
+
|
|
|
+ return {
|
|
|
+ handleRecharge,
|
|
|
+ handleWithdraw,
|
|
|
+ goToAutoRecord,
|
|
|
+ goToManualRecord
|
|
|
+ };
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+/* 公共样式 */
|
|
|
+.wallet-page {
|
|
|
+ background: #f8f9ff;
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ padding: 10px 10px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #4d6add;
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+
|
|
|
+/**
|
|
|
+余额卡片
|
|
|
+ */
|
|
|
+.balance-section {
|
|
|
+ margin: 10px 0px;
|
|
|
+}
|
|
|
+
|
|
|
+.balance-cards {
|
|
|
+ display: grid;
|
|
|
+ gap: 15px;
|
|
|
+ padding: 0 12px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 基础卡片样式 */
|
|
|
+.balance-card {
|
|
|
+ border-radius: 16px;
|
|
|
+ padding: 15px;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.12);
|
|
|
+ transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
+ min-height: 180px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 卡片悬停动效 */
|
|
|
+.balance-card:hover {
|
|
|
+ transform: translateY(-5px);
|
|
|
+}
|
|
|
+
|
|
|
+/* 今日收款卡片 */
|
|
|
+.today-card {
|
|
|
+ background: linear-gradient(135deg,
|
|
|
+ #4f6cdf 0%,
|
|
|
+ #6b8cff 100%);
|
|
|
+ color: white;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.15);
|
|
|
+ --start-color: #4f6cdf;
|
|
|
+ --end-color: #6b8cff;
|
|
|
+}
|
|
|
+
|
|
|
+/* 可提现卡片 */
|
|
|
+.withdraw-card {
|
|
|
+ background: linear-gradient(135deg,
|
|
|
+ #38b48d 0%,
|
|
|
+ #5cd4b0 100%);
|
|
|
+ color: white;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.15);
|
|
|
+ --start-color: #38b48d;
|
|
|
+ --end-color: #5cd4b0;
|
|
|
+}
|
|
|
+
|
|
|
+/* 装饰性光斑 */
|
|
|
+.balance-card::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ background: radial-gradient(circle,
|
|
|
+ rgba(255, 255, 255, 0.15) 0%,
|
|
|
+ rgba(255, 255, 255, 0) 70%);
|
|
|
+ top: -50px;
|
|
|
+ right: -50px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 卡片内容样式 */
|
|
|
+.card-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.card-header .van-icon {
|
|
|
+ background: rgba(255, 255, 255, 0.15);
|
|
|
+ padding: 8px;
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-title h3 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 500;
|
|
|
+ letter-spacing: 0.5px;
|
|
|
+}
|
|
|
+
|
|
|
+.amount {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin: 10px 0;
|
|
|
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
|
+ position: relative;
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+/* 按钮样式 */
|
|
|
+/* 限定在卡片内的按钮 */
|
|
|
+.balance-card .van-button {
|
|
|
+ backdrop-filter: blur(8px);
|
|
|
+ background: rgba(255, 255, 255, 0.15) !important;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0.3) !important;
|
|
|
+ color: white !important;
|
|
|
+ border-radius: 20px;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+ width: auto
|
|
|
+}
|
|
|
+
|
|
|
+/* 仅影响卡片内的按钮悬停状态 */
|
|
|
+.balance-card .van-button:hover {
|
|
|
+ background: rgba(255, 255, 255, 0.25) !important;
|
|
|
+ transform: scale(1.05);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+/* 提示文字 */
|
|
|
+.hint-text {
|
|
|
+ font-size: 12px;
|
|
|
+ opacity: 0.9;
|
|
|
+ margin-top: 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 响应式调整 */
|
|
|
+@media (max-width: 480px) {
|
|
|
+ .amount {
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .balance-card {
|
|
|
+ min-height: 140px;
|
|
|
+ padding: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 动态光效增强 */
|
|
|
+@keyframes glow {
|
|
|
+ 0% {
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ 50% {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.balance-card::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: linear-gradient(45deg,
|
|
|
+ transparent 40%,
|
|
|
+ rgba(255, 255, 255, 0.1) 50%,
|
|
|
+ transparent 60%);
|
|
|
+ animation: glow 3s infinite;
|
|
|
+ pointer-events: none;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/* 记录入口 */
|
|
|
+.record-section {
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.record-cards {
|
|
|
+ display: grid;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.record-card {
|
|
|
+ background: white;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 0 10px;
|
|
|
+ margin: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ box-shadow: 0 2px 8px rgba(77, 106, 221, 0.05);
|
|
|
+ transition: transform 0.2s ease;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.98);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.card-icon {
|
|
|
+ width: 44px;
|
|
|
+ height: 44px;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ &.auto {
|
|
|
+ background: rgba(77, 106, 221, 0.1);
|
|
|
+ color: #4d6add;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.manual {
|
|
|
+ background: rgba(255, 152, 0, 0.1);
|
|
|
+ color: #ff9500;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.card-content {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 银行卡管理 */
|
|
|
+.bank-section {
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.bank-cards {
|
|
|
+ display: grid;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.bank-card {
|
|
|
+ background: white;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 10px 5px;
|
|
|
+ margin: 0 10px;
|
|
|
+ // box-shadow: 0 2px 8px rgba(77, 106, 221, 0.05);
|
|
|
+ box-shadow: 0 4px 12px rgba(77, 106, 221, 0.08);
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 4px;
|
|
|
+ background: #4d6add;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.backup::before {
|
|
|
+ background: #6a82ee;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.card-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .van-tag {
|
|
|
+ transform: scale(0.9);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.card-number {
|
|
|
+ font-family: monospace;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ margin: 16px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.card-footer {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ color: #999;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 统一按钮样式 */
|
|
|
+:deep(.van-button) {
|
|
|
+ font-weight: 500;
|
|
|
+ letter-spacing: 0.5px;
|
|
|
+}
|
|
|
+
|
|
|
+.auto-settle-hint {
|
|
|
+ margin-top: 12px;
|
|
|
+ padding-top: 12px;
|
|
|
+ border-top: 1px dashed #eee;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ color: #666;
|
|
|
+ font-size: 13px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 未绑卡状态样式 */
|
|
|
+.bank-card.empty-state {
|
|
|
+ background: linear-gradient(135deg, #ffffff 0%, #f6f7fc 100%);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-content {
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-icon {
|
|
|
+ margin-bottom: 12px;
|
|
|
+ filter: drop-shadow(0 2px 4px rgba(77, 106, 221, 0.1));
|
|
|
+}
|
|
|
+
|
|
|
+.empty-title {
|
|
|
+ color: #2d3447;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.empty-desc {
|
|
|
+ color: #a3aac7;
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.bind-btn {
|
|
|
+ background: #4d6add;
|
|
|
+ padding: 8px 24px;
|
|
|
+ box-shadow: 0 3px 8px rgba(77, 106, 221, 0.2);
|
|
|
+}
|
|
|
+
|
|
|
+.bind-btn .van-icon {
|
|
|
+ margin-right: 6px;
|
|
|
+ vertical-align: -2px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 占位元素样式 */
|
|
|
+.bottom-spacer {
|
|
|
+ height: 50px;
|
|
|
+ height: calc(60px + env(safe-area-inset-bottom));
|
|
|
+ pointer-events: none; /* 防止遮挡点击 */
|
|
|
+}
|
|
|
+</style>
|