|
@@ -5,11 +5,7 @@
|
|
|
<div class="header-content">
|
|
|
<div class="logo-wrapper">
|
|
|
<div class="logo-container">
|
|
|
- <img
|
|
|
- src="@/assets/images/logo.png"
|
|
|
- alt="告白语音"
|
|
|
- class="logo-image"
|
|
|
- />
|
|
|
+ <img src="@/assets/images/logo.png" alt="告白语音" class="logo-image" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -34,23 +30,11 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="action-buttons">
|
|
|
- <van-button
|
|
|
- v-if="canExchange === 'true'"
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- round
|
|
|
- @click="goToCoinExchange"
|
|
|
- class="action-btn"
|
|
|
- >
|
|
|
+ <van-button v-if="canExchange === 'true'" type="primary" size="small" round @click="goToCoinExchange"
|
|
|
+ class="action-btn">
|
|
|
金币兑换
|
|
|
</van-button>
|
|
|
- <van-button
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- round
|
|
|
- @click="logout"
|
|
|
- class="action-btn logout-btn"
|
|
|
- >
|
|
|
+ <van-button type="primary" size="small" round @click="logout" class="action-btn logout-btn">
|
|
|
退出登录
|
|
|
</van-button>
|
|
|
</div>
|
|
@@ -62,19 +46,10 @@
|
|
|
<h2 class="section-title">充值金额</h2>
|
|
|
|
|
|
<div class="recharge-grid">
|
|
|
- <div
|
|
|
- v-for="(item, index) in rechargeOptionsWithCustom"
|
|
|
- :key="index"
|
|
|
- class="recharge-item"
|
|
|
- :class="{ active: selectedRecharge === index }"
|
|
|
- @click="selectRecharge(index)"
|
|
|
- >
|
|
|
+ <div v-for="(item, index) in rechargeOptionsWithCustom" :key="index" class="recharge-item"
|
|
|
+ :class="{ active: selectedRecharge === index }" @click="selectRecharge(index)">
|
|
|
<div class="diamond-icon">
|
|
|
- <img
|
|
|
- src="@/assets/images/recharge_zuanshi.png"
|
|
|
- alt="钻石"
|
|
|
- class="diamond-img"
|
|
|
- />
|
|
|
+ <img src="@/assets/images/recharge_zuanshi.png" alt="钻石" class="diamond-img" />
|
|
|
</div>
|
|
|
<template v-if="!item.isCustom">
|
|
|
<div class="recharge-amount">{{ item.amount }}</div>
|
|
@@ -88,13 +63,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div v-if="isCustomSelected" class="custom-input">
|
|
|
- <van-field
|
|
|
- v-model="customAmount"
|
|
|
- type="number"
|
|
|
- input-align="center"
|
|
|
- placeholder="请输入自定义金额(元)"
|
|
|
- clearable
|
|
|
- />
|
|
|
+ <van-field v-model="customAmount" type="number" input-align="center" placeholder="请输入自定义金额(元)" clearable />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
@@ -102,11 +71,7 @@
|
|
|
<div class="payment-section">
|
|
|
<div v-if="paymentType === 'alipay'" class="payment-option">
|
|
|
<div class="payment-icon">
|
|
|
- <img
|
|
|
- src="@/assets/images/recharge_paypal.png"
|
|
|
- alt="支付宝支付"
|
|
|
- class="alipay-icon"
|
|
|
- />
|
|
|
+ <img src="@/assets/images/recharge_paypal.png" alt="支付宝支付" class="alipay-icon" />
|
|
|
</div>
|
|
|
<div class="payment-name">支付宝支付</div>
|
|
|
<div class="payment-selected">
|
|
@@ -115,11 +80,7 @@
|
|
|
</div>
|
|
|
<div v-if="paymentType === 'wechat'" class="payment-option">
|
|
|
<div class="payment-icon">
|
|
|
- <img
|
|
|
- src="@/assets/images/recharge_wechat.png"
|
|
|
- alt="微信支付"
|
|
|
- class="wechat-icon"
|
|
|
- />
|
|
|
+ <img src="@/assets/images/recharge_wechat.png" alt="微信支付" class="wechat-icon" />
|
|
|
</div>
|
|
|
<div class="payment-name">微信支付</div>
|
|
|
<div class="payment-selected">
|
|
@@ -150,44 +111,26 @@
|
|
|
<!-- 协议勾选 -->
|
|
|
<div class="agreement-checkbox" @click="toggleAgreement">
|
|
|
<div class="checkbox-wrapper" :class="{ checked: agreementChecked }">
|
|
|
- <van-icon
|
|
|
- v-if="agreementChecked"
|
|
|
- name="success"
|
|
|
- size="14"
|
|
|
- color="#fff"
|
|
|
- />
|
|
|
+ <van-icon v-if="agreementChecked" name="success" size="14" color="#fff" />
|
|
|
</div>
|
|
|
<div class="agreement-text">
|
|
|
我已阅读并同意
|
|
|
- <span class="agreement-link" @click.stop="showAgreement"
|
|
|
- >《用户充值协议》</span
|
|
|
- >
|
|
|
+ <span class="agreement-link" @click.stop="showAgreement">《用户充值协议》</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 支付按钮 -->
|
|
|
<div class="pay-button">
|
|
|
- <van-button type="primary" block round @click="confirmPay"
|
|
|
- >确认支付</van-button
|
|
|
- >
|
|
|
+ <van-button type="primary" block round @click="confirmPay">确认支付</van-button>
|
|
|
</div>
|
|
|
|
|
|
<!-- 协议弹框 -->
|
|
|
- <van-dialog
|
|
|
- v-model="agreementVisible"
|
|
|
- title="用户充值协议"
|
|
|
- confirm-button-text="我已阅读"
|
|
|
- @confirm="agreementChecked = true"
|
|
|
- :show-cancel-button="false"
|
|
|
- >
|
|
|
+ <van-dialog v-model="agreementVisible" title="用户充值协议" confirm-button-text="我已阅读" @confirm="agreementChecked = true"
|
|
|
+ :show-cancel-button="false">
|
|
|
<div class="agreement-content">
|
|
|
- <iframe
|
|
|
- v-if="agreementVisible"
|
|
|
- src="https://gbyy91.com/agreement/recharge.html"
|
|
|
- frameborder="0"
|
|
|
- class="agreement-iframe"
|
|
|
- ></iframe>
|
|
|
+ <iframe v-if="agreementVisible" src="https://gbyy91.com/agreement/recharge.html" frameborder="0"
|
|
|
+ class="agreement-iframe"></iframe>
|
|
|
</div>
|
|
|
</van-dialog>
|
|
|
</div>
|
|
@@ -246,10 +189,9 @@ export default {
|
|
|
},
|
|
|
// 是否选择了自定义
|
|
|
isCustomSelected() {
|
|
|
- return (
|
|
|
- this.selectedRecharge === this.rechargeOptionsWithCustom.length - 1
|
|
|
- );
|
|
|
- },
|
|
|
+ const selectedOption = this.rechargeOptionsWithCustom[this.selectedRecharge];
|
|
|
+ return selectedOption && selectedOption.isCustom === true;
|
|
|
+ }
|
|
|
},
|
|
|
created() {
|
|
|
// 获取用户信息
|