feat: add activity popup for milk tea

This commit is contained in:
Tim
2025-07-29 13:50:26 +08:00
parent 9f3e5df9ca
commit 816eacde42
4 changed files with 182 additions and 33 deletions

View File

@@ -23,16 +23,15 @@
</div>
<div v-if="user && user.currentLevel >= 1 && !info.ended" class="redeem-button" @click="openDialog">兑换</div>
<div v-else class="redeem-button disabled">兑换</div>
<div v-if="dialogVisible" class="redeem-dialog">
<div class="redeem-dialog-overlay" @click="closeDialog"></div>
<div class="redeem-dialog-content">
<BaseInput textarea="" rows="5" v-model="contact" placeholder="联系方式 (手机号/Email/微信/instagram/telegram等, 务必注明来源)" />
<div class="redeem-actions">
<div class="redeem-submit-button" @click="submitRedeem" :disabled="loading">提交</div>
<div class="redeem-cancel-button" @click="closeDialog">取消</div>
<BasePopup :visible="dialogVisible" @close="closeDialog">
<div class="redeem-dialog-content">
<BaseInput textarea="" rows="5" v-model="contact" placeholder="联系方式 (手机号/Email/微信/instagram/telegram等, 务必注明来源)" />
<div class="redeem-actions">
<div class="redeem-submit-button" @click="submitRedeem" :disabled="loading">提交</div>
<div class="redeem-cancel-button" @click="closeDialog">取消</div>
</div>
</div>
</div>
</div>
</BasePopup>
</div>
</template>
@@ -40,12 +39,13 @@
import ProgressBar from '../components/ProgressBar.vue'
import LevelProgress from '../components/LevelProgress.vue'
import BaseInput from './BaseInput.vue'
import BasePopup from './BasePopup.vue'
import { API_BASE_URL, toast } from '../main'
import { getToken, fetchCurrentUser } from '../utils/auth'
export default {
name: 'MilkTeaActivityComponent',
components: { ProgressBar, LevelProgress, BaseInput },
components: { ProgressBar, LevelProgress, BaseInput, BasePopup },
data () {
return {
info: { level1Count: 0, ended: false },
@@ -146,27 +146,6 @@ export default {
background-color: var(--primary-color-disabled);
}
.redeem-dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
}
.redeem-dialog-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.milk-tea-status-container {
display: flex;