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