认证接口

src/api/home.js

@@ -32,4 +32,12 @@ export const joinRetirement = (type) => request({
   method: "post", 
   data: new URLSearchParams({ type }),
   headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+});
+
+// 实名认证
+export const setReal = (params) => request({ 
+  url: "index/setreal", 
+  method: "get", 
+  params,
+  loading: true 
 });

src/components/Toast.vue

@@ -0,0 +1,82 @@
+<template>
+  <transition name="toast-fade">
+    <div v-if="visible" class="toast" :class="type">
+      {{ message }}
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'Toast',
+  data() {
+    return {
+      visible: false,
+      message: '',
+      type: 'info',
+      timer: null
+    }
+  },
+  methods: {
+    show(message, type = 'info', duration = 2000) {
+      this.message = message;
+      this.type = type;
+      this.visible = true;
+      
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+      
+      this.timer = setTimeout(() => {
+        this.visible = false;
+      }, duration);
+    }
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.toast {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 10px 20px;
+  border-radius: 4px;
+  color: #fff;
+  font-size: 14px;
+  z-index: 10000;
+  max-width: 80%;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.75);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.toast.success {
+  background: rgba(82, 196, 26, 0.9);
+}
+
+.toast.error {
+  background: rgba(245, 34, 45, 0.9);
+}
+
+.toast.warning {
+  background: rgba(250, 173, 20, 0.9);
+}
+
+.toast-fade-enter-active,
+.toast-fade-leave-active {
+  transition: opacity 0.3s, transform 0.3s;
+}
+
+.toast-fade-enter,
+.toast-fade-leave-to {
+  opacity: 0;
+  transform: translate(-50%, -30%);
+}
+</style> 

src/views/RealAuthentication.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="vh100">
+    <!-- Add Toast component -->
+    <Toast ref="toast" />
     <!-- 导航栏 -->
     <div class="nav-bar">
       <div class="back-btn" @click="$router.back()">
@@ -8,80 +10,129 @@
       <div class="title">实名认证</div>
     </div>
 
-    <!-- 认证表单 -->
-    <div class="flex bgwhite alcenter radius4 pl10 pt10 bdb_blue3">
-      <div class="flex between h40 lh40 pr10 tr flex1">
-        <span>证件认证</span>
-        <span>身份证</span>
+    <!-- 已认证状态 -->
+    <div v-if="userInfo.if_real === 1" class="auth-success">
+      <div class="success-icon">
+        <svg viewBox="64 64 896 896" data-icon="check-circle" width="80px" height="80px" fill="#52c41a" aria-hidden="true">
+          <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path>
+        </svg>
       </div>
+      <div class="success-text">您已完成实名认证</div>
     </div>
 
-    <div class="flex bgwhite alcenter radius4 pl10 pt10 bdb_blue3">
-      <span>证件姓氏：</span>
-      <input 
-        type="text" 
-        class="h40 lh40 pr10 tr flex1 input-uni" 
-        placeholder="姓名"
-        v-model="formData.realName"
-      >
-    </div>
+    <!-- 未认证状态 -->
+    <div v-else>
+      <!-- 认证表单 -->
+      <div class="flex bgwhite alcenter radius4 pl10 pt10 bdb_blue3">
+        <div class="flex between h40 lh40 pr10 tr flex1">
+          <span>证件认证</span>
+          <span>身份证</span>
+        </div>
+      </div>
 
-    <div class="flex bgwhite alcenter radius4 pl10 mt10 bdb_blue3">
-      <span>证件号码：</span>
-      <input 
-        type="text" 
-        class="h40 lh40 pr10 tr flex1 input-uni" 
-        placeholder="输入证件号码"
-        v-model="formData.idCard"
-      >
-    </div>
+      <div class="flex bgwhite alcenter radius4 pl10 pt10 bdb_blue3">
+        <span>证件姓氏：</span>
+        <input 
+          type="text" 
+          class="h40 lh40 pr10 tr flex1 input-uni" 
+          placeholder="姓名"
+          v-model="formData.realName"
+        >
+      </div>
 
-    <div 
-      class="mt30 h40 lh40 tc white bgBlue radius28 ft14 w90 mauto"
-      @click="handleSubmit"
-    >
-      确 认
-    </div>
+      <div class="flex bgwhite alcenter radius4 pl10 mt10 bdb_blue3">
+        <span>证件号码：</span>
+        <input 
+          type="text" 
+          class="h40 lh40 pr10 tr flex1 input-uni" 
+          placeholder="输入证件号码"
+          v-model="formData.idCard"
+        >
+      </div>
 
-    <div class="flex alcenter mt10">
-      <div class="bottom">
-        <ul>
-          <li style="height: 45px;">为保证您的权益请认真查看以下条例，如有疑问请及时联系在线客服</li>
-          <li>身份证件拍摄不完整有反光</li>
-          <li>提交信息和身份证件不一致</li>
-          <li style="height: 45px;">为了您的信息安全审核期间由AI机器人全程负责我们无法干预</li>
-          <li style="height: 45px;">使用虚假信息的用户我们将采取相应措施,包含且不限于封号、冻结资产、限制登录等</li>
-        </ul>
+      <div 
+        class="mt30 h40 lh40 tc white bgBlue radius28 ft14 w90 mauto"
+        @click="handleSubmit"
+      >
+        确 认
+      </div>
+
+      <div class="flex alcenter mt10">
+        <div class="bottom">
+          <ul>
+            <li style="height: 45px;">为保证您的权益请认真查看以下条例，如有疑问请及时联系在线客服</li>
+            <li>身份证件拍摄不完整有反光</li>
+            <li>提交信息和身份证件不一致</li>
+            <li style="height: 45px;">为了您的信息安全审核期间由AI机器人全程负责我们无法干预</li>
+            <li style="height: 45px;">使用虚假信息的用户我们将采取相应措施,包含且不限于封号、冻结资产、限制登录等</li>
+          </ul>
+        </div>
       </div>
     </div>
+
   </div>
 </template>
 
 <script>
+import Toast from '@/components/Toast.vue';
+import { setReal, getUserInfo } from '@/api/home';
 
 export default {
   name: 'RealAuthentication',
+  components: {
+    Toast
+  },
   data() {
     return {
+      userInfo: {},
       formData: {
         realName: '',
         idCard: ''
       }
     }
   },
+  created() {
+    this.getUserInfo();
+  },
   methods: {
+    async getUserInfo() {
+      try {
+        const res = await getUserInfo();
+        this.userInfo = res.data;
+      } catch (error) {
+        this.$refs.toast.show('获取用户信息失败', 'error');
+      }
+    },
     async handleSubmit() {
       if (!this.formData.realName) {
-        alert('请输入姓名');
+        this.$refs.toast.show('请输入姓名', 'warning');
         return;
       }
       if (!this.formData.idCard) {
-        alert('请输入证件号码');
+        this.$refs.toast.show('请输入证件号码', 'warning');
         return;
       }
-      // TODO: 实现实名认证提交逻辑
-      alert('认证信息提交成功');
-      this.$router.back();
+
+      try {
+        const params = {
+          type: '身份证',
+          name: this.formData.realName,
+          idCard: this.formData.idCard
+        };
+
+        const res = await setReal(params);
+
+        if (res.code === 1) {
+          this.$refs.toast.show('认证信息提交成功', 'success');
+          setTimeout(() => {
+            this.$router.back();
+          }, 1500);
+        } else {
+          this.$refs.toast.show(res.msg || '认证失败，请重试', 'error');
+        }
+      } catch (error) {
+        this.$refs.toast.show('网络错误，请稍后重试', 'error');
+      }
     }
   }
 }
@@ -199,4 +250,46 @@ export default {
   background: #666;
   border-radius: 50%;
 }
+
+.auth-success {
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.success-icon {
+  margin-bottom: 20px;
+}
+
+.success-text {
+  font-size: 20px;
+  color: #52c41a;
+  font-weight: 500;
+  margin-bottom: 30px;
+}
+
+.auth-info {
+  background: #f8f8f8;
+  border-radius: 8px;
+  padding: 20px;
+  text-align: left;
+}
+
+.info-item {
+  margin-bottom: 15px;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.info-item:last-child {
+  margin-bottom: 0;
+}
+
+.info-item .label {
+  color: #666;
+}
+
+.info-item .value {
+  color: #333;
+  margin-left: 5px;
+}
 </style> 

src/views/Share.vue

@@ -1,5 +1,7 @@
 <template>
   <div class="share-container">
+    <!-- Add Toast component -->
+    <Toast ref="toast" />
     <!-- 导航栏 -->
     <div class="nav-bar">
       <div class="back-btn" @click="$router.back()">
@@ -123,9 +125,13 @@
 import { getUserInfo } from '@/api/home';
 import { getShareReward } from '@/api/home';
 import QRCode from 'qrcode';
+import Toast from '@/components/Toast.vue';
 
 export default {
   name: 'Share',
+  components: {
+    Toast
+  },
   data() {
     return {
       userInfo: {},
@@ -217,9 +223,9 @@ export default {
 
       try {
         const res = await getShareReward(task.people);
-        alert(res.msg);
+        this.$refs.toast.show(res.msg, 'success');
       } catch (error) {
-        alert(error.msg || '领取失败');
+        this.$refs.toast.show(error.msg || '领取失败', 'error');
       }
     },
     goToAuth() {

src/views/UserCenter.vue

@@ -32,15 +32,9 @@
       <div class="auth-info">
         <div class="info-item">
           <span class="label">认证状态：</span>
-          <span class="value">{{ userInfo.is_auth ? '已认证' : '未认证' }}</span>
-        </div>
-        <div class="info-item" v-if="userInfo.is_auth">
-          <span class="label">真实姓名：</span>
-          <span class="value">{{ userInfo.real_name }}</span>
-        </div>
-        <div class="info-item" v-if="userInfo.is_auth">
-          <span class="label">身份证号：</span>
-          <span class="value">{{ userInfo.id_card }}</span>
+          <span class="value" :class="userInfo.if_real === 1 ? 'text-success' : 'text-warning'">
+            {{ userInfo.if_real === 1 ? '已认证' : '未认证' }}
+          </span>
         </div>
       </div>
     </div>
@@ -165,4 +159,12 @@ export default {
   color: #333;
   margin-left: 5px;
 }
+
+.text-success {
+  color: #52c41a;
+}
+
+.text-warning {
+  color: #faad14;
+}
 </style>