Quellcode durchsuchen

ui修改,认证弹框添加

cc0011 vor 6 Tagen
Ursprung
Commit
5f8500a87f
9 geänderte Dateien mit 1326 neuen und 41 gelöschten Zeilen
  1. 171 2
      src/views/Apply.vue
  2. 85 6
      src/views/China.vue
  3. 169 1
      src/views/Dynamic.vue
  4. 157 1
      src/views/Mall.vue
  5. 159 6
      src/views/Mention.vue
  6. 182 16
      src/views/Payment.vue
  7. 2 2
      src/views/Profile.vue
  8. 170 1
      src/views/Share.vue
  9. 231 6
      src/views/Signin.vue

+ 171 - 2
src/views/Apply.vue

@@ -16,12 +16,32 @@
       <button class="apply-btn" @click="applyDan">我要参党</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>
 
 <script>
 import {applyDangyuan} from '@/api/home.js'
+import { getUserInfo } from '@/api/home'
 import { Toast } from 'vant';
+
 export default {
   name: 'InvitePeople',
   data() {
@@ -51,21 +71,42 @@ export default {
           amount: '20000元',
           count: '1份'
         }
-      ]
+      ],
+      userInfo: {},
+      showAuthDialog: false
     }
   },
   methods:{
     goBack() {
       this.$router.go(-1)
     },
+    async getUserInfo() {
+      try {
+        const res = await getUserInfo();
+        this.userInfo = res.data;
+      } catch (error) {
+        console.error('获取用户信息失败:', error);
+      }
+    },
     async applyDan() {
+      // 检查实名认证状态
+      if (this.userInfo.if_real === 0) {
+        this.showAuthDialog = true;
+        return;
+      }
+      
       const res = await applyDangyuan();
       if(res.cooe === 1){
         Toast.success('申请成功');
       }
     },
+    goToAuth() {
+      this.$router.push('/user-center');
+    }
   },
-  
+  created() {
+    this.getUserInfo();
+  }
 }
 </script>
 
@@ -163,4 +204,132 @@ export default {
 .apply-btn:hover {
   background: #c9104a;
 }
+
+/* 新增认证弹窗样式 */
+.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 {
+  position: relative;
+  width: 280px;
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  text-align: center;
+  animation: dialogFadeIn 0.3s ease;
+}
+
+.dialog-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 16px;
+}
+
+.auth-icon {
+  width: 100%;
+  height: 100%;
+}
+
+.dialog-title {
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 12px;
+}
+
+.auth-title {
+  color: #1890FF;
+}
+
+.dialog-content {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.8;
+  margin: 16px 0 24px;
+}
+
+.dialog-btn {
+  width: 100%;
+  height: 40px;
+  border: none;
+  border-radius: 20px;
+  font-size: 16px;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.auth-btn {
+  background: #1890FF;
+}
+
+.auth-btn:hover {
+  background: #40a9ff;
+}
+
+.auth-dialog {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.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);
+}
+
+@keyframes dialogFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 </style>

+ 85 - 6
src/views/China.vue

@@ -1,7 +1,21 @@
 <template>
   <div class="usremei-container">
-    <div class="invite-header">
-      红旗资本医疗补贴
+    <div class="header-section">
+      <div class="invite-header">红旗资本医疗补贴
+        <div class="sub-header">(每份收益三年)</div>
+      </div>
+      
+      <div class="desc-text">
+        国务院国资委帮扶完成指标,医疗补贴(或称医疗补助,医疗救助),是国家或地方政府为减轻低收入人口的医疗费用负担,在基本医疗保险的基础上,提供的额外经济支持。
+      </div>
+      <div class="commission-card">
+        <span class="commission-title">团队返佣:</span>
+        <div class="commission-list">
+          <span class="commission-item">一级5%</span>
+          <span class="commission-item">二级2%</span>
+          <span class="commission-item">三级1%</span>
+        </div>
+      </div>
     </div>
     <div class="invite-list">
       <div class="invite-item" v-for="(item,i) in rewards" :key="item.id">
@@ -64,24 +78,89 @@ export default {
   background-image: url('../assets/dabag.png');
   background-size: cover;
   background-position: center;
-  padding-top: 60px;
+  padding-top: 30px;
   padding-bottom: 80px;
   box-sizing: border-box;
   overflow-y: auto;
   position: relative;
 }
 
+.header-section {
+  width: 90%;
+  margin: 0 auto 20px;
+}
+
 .invite-header {
   background: #ffeddf;
   color: #f11859;
-  font-size: 24px;
+  font-size: 20px;
   font-weight: bold;
   text-align: center;
-  margin: 0 auto 30px auto;
   padding: 20px 0 10px 0;
-  width: 90%;
   box-shadow: 0 4px 16px rgba(208,2,27,0.08);
   letter-spacing: 2px;
+  position: relative;
+  clip-path: polygon(60px 0, calc(100% - 60px) 0, 100% 100%, 0 100%);
+}
+
+.sub-header {
+  color: #f11859;
+  background: #ffeddf;
+  font-size: 14px;
+  text-align: center;
+}
+
+.desc-text {
+  background: #ffeddf;
+  color: #f11859;
+  font-size: 14px;
+  line-height: 1.6;
+  padding: 15px;
+  text-align: justify;
+  font-weight: bold;
+}
+
+.commission-card {
+  background: #ffeddf;
+  margin-top: 2px;
+  padding: 15px;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.commission-title {
+  color: #9c1492;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.commission-list {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #9c1492;
+  flex: 1;
+}
+
+.commission-item {
+  /* margin: 0 15px; */
+  font-size: 16px;
+  white-space: nowrap;
+  font-weight: bold;
+}
+
+.commission-item:last-child {
+  margin-right: 0;
+}
+
+.level {
+  color: #f11859;
+  margin-right: 4px;
+}
+
+.rate {
+  color: #f11859;
 }
 
 .invite-list {

+ 169 - 1
src/views/Dynamic.vue

@@ -12,11 +12,30 @@
         <button class="btn" @click="receiveReward(item.renshu)">领取</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>
 
 <script>
 import { getShareccb } from '@/api/profile';
+import { getUserInfo } from '@/api/home';
 
 export default {
   name: 'Dynamic',
@@ -29,18 +48,40 @@ export default {
         { renshu: 50, title: '邀请50人实名认证', reward: '奖励800000元红旗资产' },
         { renshu: 100, title: '邀请100人实名认证', reward: '奖励1800000元红旗资产' },
         { renshu: 150, title: '邀请150人实名认证', reward: '获得国家神秘奖励' }
-      ]
+      ],
+      userInfo: {},
+      showAuthDialog: false
     }
   },
   methods: {
+    async getUserInfo() {
+      try {
+        const res = await getUserInfo();
+        this.userInfo = res.data;
+      } catch (error) {
+        console.error('获取用户信息失败:', error);
+      }
+    },
     async receiveReward(renshu) {
+      // 检查实名认证状态
+      if (this.userInfo.if_real === 0) {
+        this.showAuthDialog = true;
+        return;
+      }
+
       try {
         const res = await getShareccb(renshu);
         alert(res.data.msg);
       } catch (e) {
         // 接口异常时不弹窗
       }
+    },
+    goToAuth() {
+      this.$router.push('/user-center');
     }
+  },
+  created() {
+    this.getUserInfo();
   }
 }
 </script>
@@ -127,4 +168,131 @@ export default {
   background: #d0021b;
   color: #fff;
 }
+
+.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 {
+  position: relative;
+  width: 280px;
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  text-align: center;
+  animation: dialogFadeIn 0.3s ease;
+}
+
+.dialog-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 16px;
+}
+
+.auth-icon {
+  width: 100%;
+  height: 100%;
+}
+
+.dialog-title {
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 12px;
+}
+
+.auth-title {
+  color: #1890FF;
+}
+
+.dialog-content {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.8;
+  margin: 16px 0 24px;
+}
+
+.dialog-btn {
+  width: 100%;
+  height: 40px;
+  border: none;
+  border-radius: 20px;
+  font-size: 16px;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.auth-btn {
+  background: #1890FF;
+}
+
+.auth-btn:hover {
+  background: #40a9ff;
+}
+
+.auth-dialog {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.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);
+}
+
+@keyframes dialogFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 </style> 

+ 157 - 1
src/views/Mall.vue

@@ -42,6 +42,24 @@
       <div class="loading-spinner"></div>
       <div>加载中...</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>
 
@@ -90,7 +108,8 @@ export default {
           }
       ],
       userInfo: {},
-      loading: false
+      loading: false,
+      showAuthDialog: false
     }
   },
   methods:{
@@ -111,6 +130,12 @@ export default {
       })
     },
     toPayment(item) {
+      // 检查实名认证状态
+      if (this.userInfo.if_real === 0) {
+        this.showAuthDialog = true;
+        return;
+      }
+
       this.loading = true;
       joinRetirement(item.type)
         .then(res => {
@@ -138,6 +163,9 @@ export default {
           return false;
       }
     },
+    goToAuth() {
+      this.$router.push('/user-center');
+    }
   },
   mounted() {
     this.getUserInfo()
@@ -265,4 +293,132 @@ export default {
   0% { transform: rotate(0deg);}
   100% { transform: rotate(360deg);}
 }
+
+/* 认证弹窗样式 */
+.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 {
+  position: relative;
+  width: 280px;
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  text-align: center;
+  animation: dialogFadeIn 0.3s ease;
+}
+
+.dialog-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 16px;
+}
+
+.auth-icon {
+  width: 100%;
+  height: 100%;
+}
+
+.dialog-title {
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 12px;
+}
+
+.auth-title {
+  color: #1890FF;
+}
+
+.dialog-content {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.8;
+  margin: 16px 0 24px;
+}
+
+.dialog-btn {
+  width: 100%;
+  height: 40px;
+  border: none;
+  border-radius: 20px;
+  font-size: 16px;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.auth-btn {
+  background: #1890FF;
+}
+
+.auth-btn:hover {
+  background: #40a9ff;
+}
+
+.auth-dialog {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.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);
+}
+
+@keyframes dialogFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 </style> 

+ 159 - 6
src/views/Mention.vue

@@ -68,6 +68,25 @@
         提现
       </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>
 
@@ -82,7 +101,8 @@ export default {
       amount: '',
       password: '',
       showPassword: false,
-      type: ''
+      type: '',
+      showAuthDialog: false
     }
   },
   computed: {
@@ -127,6 +147,12 @@ export default {
       this.showPassword = !this.showPassword;
     },
     async handleWithdraw() {
+      // 检查实名认证
+      if (this.userInfo.if_real === 0) {
+        this.showAuthDialog = true;
+        return;
+      }
+
       if (!this.amount) {
         alert('请输入提现金额');
         return;
@@ -150,18 +176,18 @@ export default {
         let res = await withdrawCoin(params);
         
         if(res.code == 1){
-        alert('提现申请已提交')
+          alert('提现申请已提交')
         }else{
-          
-        alert(res.msg)
-          
+          alert(res.msg)
         }
-        // 刷新用户信息
         await this.getUserInfo();
       } catch (error) {
         console.error('提现失败:', error);
         alert('提现失败,请重试');
       }
+    },
+    goToAuth() {
+      this.$router.push('/user-center');
     }
   }
 }
@@ -278,4 +304,131 @@ export default {
 .withdraw-btn:active {
   opacity: 0.9;
 }
+
+.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;
+}
+
+.auth-icon {
+  width: 100%;
+  height: 100%;
+}
+
+.dialog-title {
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 12px;
+}
+
+.auth-title {
+  color: #1890FF;
+}
+
+.dialog-content {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.8;
+  margin: 16px 0 24px;
+}
+
+.dialog-btn {
+  width: 100%;
+  height: 40px;
+  border: none;
+  border-radius: 20px;
+  font-size: 16px;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.auth-btn {
+  background: #1890FF;
+}
+
+.auth-btn:hover {
+  background: #40a9ff;
+}
+
+.auth-dialog {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+@keyframes dialogFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.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> 

+ 182 - 16
src/views/Payment.vue

@@ -51,11 +51,29 @@
         </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>
 
 <script>
-import {getTong,getChongInfo} from '@/api/home.js'
+import {getTong,getChongInfo,getUserInfo} from '@/api/home.js'
 import { Toast } from 'vant';
 export default {
   name: 'InvitePeople',
@@ -63,7 +81,9 @@ export default {
     return {
       payType: '',
       payList: [],
-      item:{}
+      item:{},
+      userInfo: {},
+      showAuthDialog: false
     }
   },
   methods:{
@@ -74,24 +94,42 @@ export default {
       const res = await getTong()
       this.payList = res.data || []
     },
-     handleSubmit() {
-        // 处理提交逻辑
-        let params = {
-            type: this.payType,
-            money: this.item.money,
+    async getUserInfo() {
+      try {
+        const res = await getUserInfo();
+        this.userInfo = res.data;
+      } catch (error) {
+        console.error('获取用户信息失败:', error);
+      }
+    },
+    handleSubmit() {
+      // 检查实名认证状态
+      if (this.userInfo.if_real === 0) {
+        this.showAuthDialog = true;
+        return;
+      }
+
+      // 处理提交逻辑
+      let params = {
+        type: this.payType,
+        money: this.item.money,
+      }
+      getChongInfo(params).then(res => {
+        if(res.code === 1){
+          Toast.success('提交成功')
+          setTimeout(() => {
+            window.location.href = res.data.payUrl
+          }, 1000);
         }
-        getChongInfo(params).then(res => {
-            if(res.code === 1){
-            Toast.success('提交成功')
-            setTimeout(() => {
-                window.location.href = res.data.payUrl
-            }, 1000);
-            }
-        })
-          }
+      })
+    },
+    goToAuth() {
+      this.$router.push('/user-center');
+    }
   },
   mounted(){
     this.getPayType()
+    this.getUserInfo()
     this.item = this.$route.query.item
   }
 }
@@ -263,4 +301,132 @@ export default {
     cursor: not-allowed;
   }
 }
+
+/* 认证弹窗样式 */
+.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 {
+  position: relative;
+  width: 280px;
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  text-align: center;
+  animation: dialogFadeIn 0.3s ease;
+}
+
+.dialog-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 16px;
+}
+
+.auth-icon {
+  width: 100%;
+  height: 100%;
+}
+
+.dialog-title {
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 12px;
+}
+
+.auth-title {
+  color: #1890FF;
+}
+
+.dialog-content {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.8;
+  margin: 16px 0 24px;
+}
+
+.dialog-btn {
+  width: 100%;
+  height: 40px;
+  border: none;
+  border-radius: 20px;
+  font-size: 16px;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.auth-btn {
+  background: #1890FF;
+}
+
+.auth-btn:hover {
+  background: #40a9ff;
+}
+
+.auth-dialog {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.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);
+}
+
+@keyframes dialogFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 </style>

+ 2 - 2
src/views/Profile.vue

@@ -52,14 +52,14 @@
             <span>退休补贴</span>
             <button class="profit-btn button-click-effect" @click="handleRetirementWithdraw">提现</button>
           </div>
-          <div class="profit-amount">¥{{ userInfo.txbt }}</div>
+          <div class="profit-amount">¥{{ userInfo.txbt?userInfo.txbt:0 }}</div>
         </div>
         <div class="profit-left">
           <div class="profit-header">
             <span>党员薪资</span>
             <button class="profit-btn button-click-effect" @click="handlePartySalaryWithdraw">提现</button>
           </div>
-          <div class="profit-amount">¥{{ userInfo.dyxz }}</div>
+          <div class="profit-amount">¥{{ userInfo.dyxz?userInfo.dyxz:0 }}</div>
         </div>
         <div class="profit-right">
           <div class="profit-header">

+ 170 - 1
src/views/Share.vue

@@ -61,6 +61,25 @@
         </div>
       </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>
 
@@ -82,7 +101,8 @@ export default {
         { people: 60, money: 88, coins: 800 },
         { people: 100, money: 168, coins: 1200 },
         { people: 200, money: 268, coins: 2000 }
-      ]
+      ],
+      showAuthDialog: false
     }
   },
   computed: {
@@ -130,6 +150,12 @@ export default {
       }
     },
     saveQRCode() {
+      // 检查实名认证状态
+      if (this.userInfo.if_real === 0) {
+        this.showAuthDialog = true;
+        return;
+      }
+
       // Create a temporary link to download the QR code
       const link = document.createElement('a');
       link.download = 'invite-qrcode.png';
@@ -140,6 +166,12 @@ export default {
       alert('二维码已保存');
     },
     copyLink() {
+      // 检查实名认证状态
+      if (this.userInfo.if_real === 0) {
+        this.showAuthDialog = true;
+        return;
+      }
+
       // Copy link to clipboard
       const textarea = document.createElement('textarea');
       textarea.value = this.inviteLink;
@@ -150,12 +182,21 @@ export default {
       alert('链接已复制到剪贴板');
     },
     async claimReward(task) {
+      // 检查实名认证状态
+      if (this.userInfo.if_real === 0) {
+        this.showAuthDialog = true;
+        return;
+      }
+
       try {
         const res = await getShareReward(task.people);
         alert(res.msg);
       } catch (error) {
         alert(error.msg || '领取失败');
       }
+    },
+    goToAuth() {
+      this.$router.push('/user-center');
     }
   },
   created() {
@@ -374,4 +415,132 @@ export default {
 .task-action-btn:active {
   opacity: 0.9;
 }
+
+/* 认证弹窗样式 */
+.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 {
+  position: relative;
+  width: 280px;
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  text-align: center;
+  animation: dialogFadeIn 0.3s ease;
+}
+
+.dialog-icon {
+  width: 60px;
+  height: 60px;
+  margin: 0 auto 16px;
+}
+
+.auth-icon {
+  width: 100%;
+  height: 100%;
+}
+
+.dialog-title {
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 12px;
+}
+
+.auth-title {
+  color: #1890FF;
+}
+
+.dialog-content {
+  font-size: 14px;
+  color: #666;
+  line-height: 1.8;
+  margin: 16px 0 24px;
+}
+
+.dialog-btn {
+  width: 100%;
+  height: 40px;
+  border: none;
+  border-radius: 20px;
+  font-size: 16px;
+  color: #fff;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.auth-btn {
+  background: #1890FF;
+}
+
+.auth-btn:hover {
+  background: #40a9ff;
+}
+
+.auth-dialog {
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.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);
+}
+
+@keyframes dialogFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 </style> 

+ 231 - 6
src/views/Signin.vue

@@ -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>