|
@@ -59,6 +59,59 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- 签到成功弹窗 -->
|
|
|
+ <div v-if="showSuccessDialog" class="custom-dialog-mask">
|
|
|
+ <div class="custom-dialog success-dialog">
|
|
|
+ <div class="dialog-icon">
|
|
|
+ <svg t="1710400631664" class="success-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4266">
|
|
|
+ <path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#52C41A" p-id="4267"></path>
|
|
|
+ <path d="M466.7 679.8c-8.5 0-16.6-3.4-22.6-9.4l-181-181.1c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l158.4 158.4 249.7-249.6c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L489.3 670.4c-6 6-14.1 9.4-22.6 9.4z" fill="#FFFFFF" p-id="4268"></path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-title success-title">签到成功</div>
|
|
|
+ <div class="dialog-content">
|
|
|
+ <p>获得2000红旗资产</p>
|
|
|
+ <p>获得2元每日现金</p>
|
|
|
+ </div>
|
|
|
+ <button class="dialog-btn success-btn" @click="showSuccessDialog = false">确定</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 已签到提示弹窗 -->
|
|
|
+ <div v-if="showAlreadySignedDialog" class="custom-dialog-mask">
|
|
|
+ <div class="custom-dialog warning-dialog">
|
|
|
+ <div class="dialog-icon">
|
|
|
+ <svg t="1710400708095" class="warning-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5311">
|
|
|
+ <path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#FAAD14" p-id="5312"></path>
|
|
|
+ <path d="M512 720m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#FFFFFF" p-id="5313"></path>
|
|
|
+ <path d="M512 608c-17.7 0-32-14.3-32-32V320c0-17.7 14.3-32 32-32s32 14.3 32 32v256c0 17.7-14.3 32-32 32z" fill="#FFFFFF" p-id="5314"></path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-title warning-title">温馨提示</div>
|
|
|
+ <div class="dialog-content">今日已签到,请明天再来</div>
|
|
|
+ <button class="dialog-btn warning-btn" @click="showAlreadySignedDialog = false">我知道了</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 实名认证提示弹窗 -->
|
|
|
+ <div v-if="showAuthDialog" class="custom-dialog-mask">
|
|
|
+ <div class="custom-dialog auth-dialog">
|
|
|
+ <div class="dialog-close" @click="showAuthDialog = false">
|
|
|
+ <i class="close-icon"></i>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-icon">
|
|
|
+ <svg t="1710401275044" class="auth-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6356">
|
|
|
+ <path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#1890FF" p-id="6357"></path>
|
|
|
+ <path d="M512 320c-17.7 0-32 14.3-32 32v256c0 17.7 14.3 32 32 32s32-14.3 32-32V352c0-17.7-14.3-32-32-32z" fill="#FFFFFF" p-id="6358"></path>
|
|
|
+ <path d="M512 720m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" fill="#FFFFFF" p-id="6359"></path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-title auth-title">温馨提示</div>
|
|
|
+ <div class="dialog-content">您还未完成实名认证<br/>请先进行实名认证</div>
|
|
|
+ <button class="dialog-btn auth-btn" @click="goToAuth">去认证</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -73,7 +126,10 @@ export default {
|
|
|
userInfo: {},
|
|
|
dailyBonus: 2800,
|
|
|
dailyCoins: 10,
|
|
|
- lastSignDate: null
|
|
|
+ lastSignDate: null,
|
|
|
+ showSuccessDialog: false,
|
|
|
+ showAlreadySignedDialog: false,
|
|
|
+ showAuthDialog: false
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -97,27 +153,34 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
async handleSignIn() {
|
|
|
- // 如果今天已经签到,就不再调用接口
|
|
|
+ // 先检查是否已签到
|
|
|
if (this.hasSignedToday) {
|
|
|
- alert('今日已签到,请明天再来');
|
|
|
+ this.showAlreadySignedDialog = true;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 检查是否实名认证
|
|
|
+ if (this.userInfo.if_real === 0) {
|
|
|
+ this.showAuthDialog = true;
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
await signIn();
|
|
|
- // 保存签到日期到本地存储
|
|
|
const today = new Date().toLocaleDateString();
|
|
|
localStorage.setItem('lastSignDate', today);
|
|
|
this.lastSignDate = today;
|
|
|
|
|
|
- alert('签到成功');
|
|
|
- // 刷新用户信息以更新签到天数
|
|
|
+ this.showSuccessDialog = true;
|
|
|
await this.getUserInfo();
|
|
|
} catch (error) {
|
|
|
console.error('签到失败:', error);
|
|
|
alert('签到失败,请重试');
|
|
|
}
|
|
|
},
|
|
|
+ goToAuth() {
|
|
|
+ this.$router.push('/user-center');
|
|
|
+ },
|
|
|
handleInvite() {
|
|
|
// 邀请处理逻辑
|
|
|
}
|
|
@@ -284,4 +347,166 @@ export default {
|
|
|
opacity: 0.9;
|
|
|
transform: scale(0.98);
|
|
|
}
|
|
|
+
|
|
|
+.custom-dialog-mask {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ z-index: 9999;
|
|
|
+}
|
|
|
+
|
|
|
+.custom-dialog {
|
|
|
+ width: 280px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 20px;
|
|
|
+ text-align: center;
|
|
|
+ animation: dialogFadeIn 0.3s ease;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-icon {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ margin: 0 auto 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.success-icon,
|
|
|
+.warning-icon {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.success-title {
|
|
|
+ color: #52C41A;
|
|
|
+}
|
|
|
+
|
|
|
+.warning-title {
|
|
|
+ color: #FAAD14;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-content {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1.6;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.success-btn {
|
|
|
+ background: #52C41A;
|
|
|
+}
|
|
|
+
|
|
|
+.warning-btn {
|
|
|
+ background: #FAAD14;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-btn:hover {
|
|
|
+ opacity: 0.9;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-btn:active {
|
|
|
+ transform: scale(0.98);
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes dialogFadeIn {
|
|
|
+ from {
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0.9);
|
|
|
+ }
|
|
|
+ to {
|
|
|
+ opacity: 1;
|
|
|
+ transform: scale(1);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.auth-title {
|
|
|
+ color: #1890FF;
|
|
|
+}
|
|
|
+
|
|
|
+.auth-btn {
|
|
|
+ background: #1890FF;
|
|
|
+}
|
|
|
+
|
|
|
+.auth-icon {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.auth-dialog {
|
|
|
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
+}
|
|
|
+
|
|
|
+.auth-btn:hover {
|
|
|
+ background: #40a9ff;
|
|
|
+}
|
|
|
+
|
|
|
+.auth-dialog .dialog-content {
|
|
|
+ margin: 16px 0 24px;
|
|
|
+ line-height: 1.8;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-close {
|
|
|
+ position: absolute;
|
|
|
+ top: 12px;
|
|
|
+ right: 12px;
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.3s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-close:hover {
|
|
|
+ transform: rotate(90deg);
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-close .close-icon {
|
|
|
+ position: relative;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-close .close-icon::before,
|
|
|
+.dialog-close .close-icon::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 2px;
|
|
|
+ background-color: #999;
|
|
|
+ top: 50%;
|
|
|
+ left: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-close .close-icon::before {
|
|
|
+ transform: rotate(45deg);
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-close .close-icon::after {
|
|
|
+ transform: rotate(-45deg);
|
|
|
+}
|
|
|
</style>
|