hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(样式调整): 支付金币页

Browse Source
This commit is contained in:
huangzijie130 2025-09-24 16:57:31 +08:00
parent c7dc60d121
commit c2b745cfb5
1 changed files with 101 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
src/views/ExchangeGoldCoinsView.vue
View File

@ -4,45 +4,63 @@
<div class="content">
<!-- 信息部分 -->
<div class="info-section">
<div class="info-header">
<button class="details-btn" @click="showDetails">
ℹ️ Details
</button>
<div>
<div
style="
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
"
>
<div style="font-weight: 600">Information</div>
<div style="display: flex; align-items: center" @click="showDetails">
<div style="color: rgba(0, 0, 0, 0.4)">Details</div>
<img src="../assets/icon/arrow.png" alt="" width="16px" />
</div>
</div>
<div class="available-salary">
<span>Available salary: </span>
<div
style="
background-color: white;
padding: 16px;
border-radius: 12px;
margin-bottom: 12px;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
"
>
<span style="font-weight: 510; font-size: 1em">Available salary: </span>
<span v-if="loading" class="loading-text">Loading...</span>
<span v-else class="amount">{{ availableSalary }}</span>
<span v-else style="font-weight: 700; color: #333; font-size: 1.1em">{{
availableSalary
}}</span>
</div>
</div>
<!-- 兑换部分 -->
<div class="exchange-section">
<h3>Exchange Gold Coins</h3>
<!-- 金币选择 -->
<div class="coins-grid">
<div
v-for="coin in coinOptions"
:key="coin.id"
@click="selectCoin(coin)"
:class="['coin-item', { selected: selectedCoin === coin.id }]"
>
<div class="coin-icon">🪙</div>
<div class="coin-amount">{{ coin.amount }}</div>
<div class="coin-price">${{ coin.price }}</div>
<div>
<div style="font-weight: 600; margin-bottom: 10px">Exchange Gold Coins</div>
<div class="exchange-section">
<!-- 金币选择 -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px">
<div
v-for="coin in coinOptions"
:key="coin.id"
@click="selectCoin(coin)"
:class="['coin-item', { selected: selectedCoin === coin.id }]"
>
<img src="../assets/icon/coin.png" alt="" style="width: 50%" />
<div style="font-weight: 500; color: #373232">{{ coin.amount }}</div>
<div style="font-weight: 500; color: #131111">${{ coin.price }}</div>
</div>
</div>
</div>
<!-- 兑换按钮 -->
<button
class="exchange-btn"
@click="exchangeCoins"
:disabled="!selectedCoin"
>
Exchange
</button>
<div style="display: flex; justify-content: center; margin-top: 10px">
<button class="exchange-btn" @click="exchangeCoins" :disabled="!selectedCoin">
Exchange
</button>
</div>
</div>
</div>
</div>
@ -53,7 +71,7 @@ import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import MobileHeader from '../components/MobileHeader.vue'
import { getBankBalance, userSalaryCheckExchange, userBankExchangeGold } from '../api/wallet.js'
import {showError, showSuccess, showWarning} from "@/utils/toast.js";
import { showError, showSuccess, showWarning } from '@/utils/toast.js'
const router = useRouter()
@ -71,7 +89,7 @@ const coinOptions = reactive([
{ id: 3, amount: 100000, price: 10 },
{ id: 4, amount: 500000, price: 50 },
{ id: 5, amount: 1000000, price: 100 },
{ id: 6, amount: 2000000, price: 200 }
{ id: 6, amount: 2000000, price: 200 },
])
// 获取银行余额
@ -122,14 +140,15 @@ const checkUserRole = async () => {
router.back() // 对于其他严重错误，也建议退出页面
}
} catch (error) {
// 处理特定错误情况
if (error.errorCode === 1083) {
// NOT_OPEN_ERROR
showWarning('Exchange NOT_OPEN_ERROR')
} else if (error.message && error.message.includes('HTTP Error: 406')) {
// 处理 406 Not Acceptable 状态码
showError('The server cannot produce a response matching the list of acceptable values defined in the request headers')
showError(
'The server cannot produce a response matching the list of acceptable values defined in the request headers'
)
} else {
// 其他错误情况
showError('Failed to load user information')
@ -150,19 +169,25 @@ const exchangeCoins = async () => {
return
}
const selectedCoinData = coinOptions.find(coin => coin.id === selectedCoin.value)
const selectedCoinData = coinOptions.find((coin) => coin.id === selectedCoin.value)
// 检查余额是否足够
const coinPrice = selectedCoinData.price
const availableBalance = parseFloat(availableSalary.value)
if (isNaN(availableBalance) || availableBalance < coinPrice) {
showError(`Insufficient balance. Your current balance is $${availableBalance.toFixed(2)}, but you need $${coinPrice} to exchange.`)
showError(
`Insufficient balance. Your current balance is $${availableBalance.toFixed(
2
)}, but you need $${coinPrice} to exchange.`
)
return
}
// 显示确认对话框
const confirmExchange = confirm(`Do you want to exchange ${selectedCoinData.amount} coins for $${selectedCoinData.price}?`)
const confirmExchange = confirm(
`Do you want to exchange ${selectedCoinData.amount} coins for $${selectedCoinData.price}?`
)
if (confirmExchange) {
try {
@ -170,18 +195,19 @@ const exchangeCoins = async () => {
const response = await userBankExchangeGold({
coinId: selectedCoinData.id,
amount: selectedCoinData.price,
price: selectedCoinData.price
price: selectedCoinData.price,
})
if (response.status === true || response.errorCode === 0) {
showSuccess(`Successfully exchanged ${selectedCoinData.amount} coins for $${selectedCoinData.price}`)
showSuccess(
`Successfully exchanged ${selectedCoinData.amount} coins for $${selectedCoinData.price}`
)
// 刷新银行余额
await fetchBankBalance()
// 重置选择
selectedCoin.value = null
} else {
// 接口调用失败
const errorMessage = response.message || 'Exchange failed, please try again later.'
@ -217,6 +243,11 @@ onMounted(() => {
</script>
<style scoped>
* {
color: rgba(0, 0, 0, 0.8);
font-family: 'SF Pro Text';
}
.exchange-gold-coins {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
@ -233,7 +264,7 @@ onMounted(() => {
padding: 16px;
border-radius: 12px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.info-header {
@ -245,7 +276,7 @@ onMounted(() => {
.details-btn {
background: none;
border: none;
color: #8B5CF6;
color: #8b5cf6;
font-size: 14px;
font-weight: 500;
cursor: pointer;
@ -263,7 +294,7 @@ onMounted(() => {
.details-btn:active {
background-color: #e5e7eb;
color: #7C3AED;
color: #7c3aed;
}
.available-salary {
@ -278,7 +309,7 @@ onMounted(() => {
.available-salary .loading-text {
font-weight: 500;
color: #8B5CF6;
color: #8b5cf6;
font-style: italic;
}
@ -287,7 +318,7 @@ onMounted(() => {
background-color: white;
padding: 16px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.exchange-section h3 {
@ -297,77 +328,63 @@ onMounted(() => {
color: #333;
}
/* 金币网格 */
.coins-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
}
.coin-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 16px 8px;
border: 2px solid #e5e7eb;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
background-color: white;
aspect-ratio: 1/1;
}
.coin-item:hover {
border-color: #8B5CF6;
border-color: #8b5cf6;
}
.coin-item.selected {
border-color: #8B5CF6;
background-color: #F3F4F6;
border-color: #8b5cf6;
background-color: #f3f4f6;
}
.coin-item:active {
transform: scale(0.98);
}
.coin-icon {
font-size: 24px;
margin-bottom: 8px;
}
.coin-amount {
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 4px;
}
.coin-price {
font-size: 12px;
color: #666;
}
/* 兑换按钮 */
.exchange-btn {
width: 100%;
padding: 14px;
background-color: #FCD34D;
color: #92400E;
width: 70%;
border-radius: 32px;
background: linear-gradient(135deg, #bb92ff 2.82%, #8b45ff 99.15%);
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
padding: 12px;
color: white;
cursor: pointer;
transition: background-color 0.2s;
}
.exchange-btn:disabled {
background-color: #ccc;
color: #666;
cursor: not-allowed;
}
.exchange-btn:not(:disabled):active {
background-color: #F59E0B;
@media screen and (max-width: 360px) {
* {
font-size: 10px;
}
}
@media screen and (min-width: 360px) {
* {
font-size: 12px;
}
}
@media screen and (min-width: 768px) {
* {
font-size: 24px;
}
}
</style>