feat: 创建自定义金币toast组件

- 添加coin-toast组件,- bazi.vue使用自定义toast
- 金币图标金色,数字金色加粗
This commit is contained in:
H1d3rOne committed 2026-03-10 19:59:59 +08:00
1 parent 064606fd0f
commit c8879fc04e
4 files changed
+148 -24

No files matched your search

+12
View File
@@ -6,6 +6,7 @@ export default {
console.log('App Launch')
this.setupGlobalListeners()
this.setupRouteInterceptor()
this.setupCoinToast()
},
onShow: function() {
console.log('App Show')
@@ -15,6 +16,17 @@ export default {
this.removeGlobalListeners()
},
methods: {
setupCoinToast() {
uni.$coinToast = {
success: () => {
uni.$emit('showCoinToast', true)
},
error: () => {
uni.$emit('showCoinToast', false)
}
}
},
setupRouteInterceptor() {
const self = this
@@ -0,0 +1,110 @@
<template>
<view class="coin-toast" v-if="visible">
<view class="toast-content" :class="{ 'toast-success': isSuccess }">
<view class="coin-icon">
<text class="coin-emoji">🪙</text>
</view>
<view class="toast-text">
<text class="toast-title">{{ isSuccess ? '测算成功' : '测算失败' }}</text>
<text class="toast-amount" :class="{ 'amount-success': isSuccess }">{{ isSuccess ? '-1' : '-0' }}</text>
</view>
</view>
</view>
</template>
<script>
export default {
name: 'CoinToast',
data() {
return {
visible: false,
isSuccess: true,
timer: null
}
},
methods: {
show(success = true, duration = 2000) {
if (this.timer) {
clearTimeout(this.timer)
}
this.isSuccess = success
this.visible = true
this.timer = setTimeout(() => {
this.visible = false
}, duration)
},
success(duration = 2000) {
this.show(true, duration)
},
error(duration = 2000) {
this.show(false, duration)
},
hide() {
if (this.timer) {
clearTimeout(this.timer)
}
this.visible = false
}
}
}
</script>
<style scoped>
.coin-toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99999;
}
.toast-content {
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.75);
padding: 24rpx 40rpx;
border-radius: 20rpx;
min-width: 280rpx;
}
.coin-icon {
margin-right: 16rpx;
}
.coin-emoji {
font-size: 48rpx;
filter: drop-shadow(0 0 8rpx rgba(255, 215, 0, 0.6));
}
.toast-text {
display: flex;
align-items: center;
}
.toast-title {
font-size: 28rpx;
color: #ffffff;
margin-right: 8rpx;
}
.toast-amount {
font-size: 36rpx;
font-weight: bold;
color: #888888;
}
.amount-success {
color: #FFD700;
text-shadow: 0 0 10rpx rgba(255, 215, 0, 0.5);
}
.toast-success .toast-title {
color: #10B981;
}
</style>
+7 -10
View File
@@ -1,5 +1,6 @@
<template>
<view class="container">
<coin-toast ref="coinToast"></coin-toast>
<view class="header-card">
<view class="header-icon">
<text class="icon-text">八</text>
@@ -92,8 +93,12 @@
<script>
import api from '@/utils/api.js'
import coinUtils from '@/utils/coinUtils.js'
import CoinToast from '@/components/coin-toast/coin-toast.vue'
export default {
components: {
CoinToast
},
data() {
return {
name: '',
@@ -253,11 +258,7 @@ export default {
await coinUtils.consumeCoin('bazi', '八字命理测算', recordId)
uni.showToast({
title: '测算成功 🪙-1',
icon: 'success',
duration: 2000
})
this.$refs.coinToast.success()
setTimeout(() => {
uni.navigateTo({
@@ -267,11 +268,7 @@ export default {
} catch (e) {
uni.hideLoading()
console.error('测算错误:', e)
uni.showToast({
title: '测算失败 🪙-0',
icon: 'none',
duration: 3000
})
this.$refs.coinToast.error()
} finally {
this.loading = false
}
+19 -14
View File
@@ -1,24 +1,29 @@
const coinToast = {
show(success) {
const icon = '🪙'
const message = success
? `测算成功,${icon} -1`
: `测算失败,${icon} -0`
show(success = true) {
const pages = getCurrentPages()
if (pages.length > 0) {
const currentPage = pages[pages.length - 1]
if (currentPage.$refs && currentPage.$refs.coinToast) {
if (success) {
currentPage.$refs.coinToast.success()
} else {
currentPage.$refs.coinToast.error()
}
return
}
}
uni.showToast({
title: message,
title: success ? '测算成功 🪙-1' : '测算失败 🪙-0',
icon: 'none',
duration: 2000
})
},
success() {
this.show(true)
},
error() {
this.show(false)
}
}
function getCurrentPages() {
const pages = getCurrentPages()
return pages
}
export default coinToast