From aeb5aba22c30269359f17a3e7ccd6674c671b8ec Mon Sep 17 00:00:00 2001
From: daiyangcheng <daiyangcheng@outlook.com>
Date: Sat, 24 Feb 2024 20:28:14 +0800
Subject: [PATCH] =?UTF-8?q?[+]=20=E5=AE=9E=E4=BA=BA=E8=AE=A4=E8=AF=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/RealName.vue | 260 +++++++++++++++++++++++++++++++----------
 1 file changed, 199 insertions(+), 61 deletions(-)

diff --git a/src/views/RealName.vue b/src/views/RealName.vue
index 68bc714..98ab854 100644
--- a/src/views/RealName.vue
+++ b/src/views/RealName.vue
@@ -17,76 +17,149 @@
       <i class="twa twa-card-file-box"></i>
       <n-text type="primary"> 实名认证</n-text>
     </n-h1>
+    <n-collapse default-expanded-names="1" accordion v-show="!showFinishModal">
+      <n-collapse-item title="实名认证 （二级认证，可使用非流量计费节点）" name="1">
+        <n-grid cols="1" item-responsive>
+          <n-gi span="1" v-show="showRealnameModal">
+            <n-card title="实名认证">
+              <n-form :ref="formRef" :model="UserProfile" label-width="auto" :size="'large'">
+                <n-grid cols="1" item-responsive :y-gap="5">
+                  <n-grid-item>
+                    <p style="color: red">
+                      请填写您的姓名和身份证号进行实名认证（请认真填写，实名一旦成功除特殊情况外无法修改）
+                    </p>
+                    <p>
+                      若点击提交后 5
+                      秒内没有回调信息出现，请再次点击按钮，直到出现提示框。若无法实名，请联系管理员解决！
+                    </p>
+                    <p>
+                      本站全部个人隐私信息遵守
+                      <a style="color: dodgerblue" href="https://www.locyan.cn/doc/yszc.html" target="_blank">LoCyan
+                        隐私协议</a>
+                      的约束，我们将最大限度的保护用户的个人信息数据
+                    </p>
+                    <p>
+                      我们允许<a style="color: red"><b>未成年人注册</b></a>，请勿冒用非本人身份证实名，已经实名过得既往不咎！
+                    </p>
+                  </n-grid-item>
+                  <n-grid-item span="1">
+                    <n-form-item label="姓名" path="name">
+                      <n-input v-model:value="UserProfile.name" placeholder="您的姓名" />
+                    </n-form-item>
+                  </n-grid-item>
+                  <n-grid-item span="1">
+                    <n-form-item label="身份证号" path="idcard">
+                      <n-input v-model:value="UserProfile.idcard" placeholder="您的身份证号" />
+                    </n-form-item>
+                  </n-grid-item>
+                </n-grid>
+                <div style="display: flex; justify-content: flex-end">
+                  <n-button round type="primary" @click="submitrealname()"> 提交 </n-button>
+                </div>
+              </n-form>
+            </n-card>
+          </n-gi>
+          <n-gi cols="1" item-responsive>
+            <n-card v-show="!showRealnameModal">
+              <i class="twa twa-2x twa-party-popper"></i>您已经完成实名认证！
+            </n-card>
+          </n-gi>
+        </n-grid>
+      </n-collapse-item>
+      <n-collapse-item title="实人认证（一级认证，可使用全部节点）" name="2">
+        <n-grid cols="1" item-responsive>
+          <n-gi span="1">
+            <n-card v-show="showRealpersonMoal && !showPayModal" title="实人认证">
+              <n-form :ref="formRef" :model="UserProfile" label-width="auto" :size="'large'">
+                <n-grid cols="1" item-responsive :y-gap="5">
+                  <n-grid-item>
+                    <p style="color: red">
+                      请填写您的姓名和身份证号进行实名认证（请认真填写，实名一旦成功除特殊情况外无法修改）
+                    </p>
+                    <p>
+                      若点击提交后 5
+                      秒内没有回调信息出现，请再次点击按钮，直到出现提示框。若无法实名，请联系管理员解决！
+                    </p>
+                    <p>
+                      本站全部个人隐私信息遵守
+                      <a style="color: dodgerblue" href="https://www.locyan.cn/doc/yszc.html" target="_blank">LoCyan
+                        隐私协议</a>
+                      的约束，我们将最大限度的保护用户的个人信息数据
+                    </p>
+                    <p>
+                      我们允许<a style="color: red"><b>未成年人注册</b></a>，请勿冒用非本人身份证实名，已经实名过得既往不咎！
+                    </p>
+                  </n-grid-item>
+                  <n-grid-item span="1">
+                    <n-form-item label="姓名" path="name">
+                      <n-input v-model:value="UserProfile.name" placeholder="您的姓名" />
+                    </n-form-item>
+                  </n-grid-item>
+                  <n-grid-item span="1">
+                    <n-form-item label="身份证号" path="idcard">
+                      <n-input v-model:value="UserProfile.idcard" placeholder="您的身份证号" />
+                    </n-form-item>
+                  </n-grid-item>
+                </n-grid>
+                <div style="display: flex; justify-content: flex-end">
+                  <n-button round type="primary" @click="submitrealperson()"> 提交 </n-button>
+                </div>
+              </n-form>
+            </n-card>
+            <n-card title="支付宝扫描二维码" v-show="showScanCodeModal">
+              <n-space justify="vertical">
+                <n-qr-code :value="realPersonUrl" :size="200" :error-correction-level="'L'"/>
+                <n-button type="primary" @click="queryRealPersonStatus()">点此刷新实人状态</n-button>
+              </n-space>
+            </n-card>
+            <n-card title="支付订单" v-show="showPayModal">
+              <div style="text-align: center;">
+                <n-space justify="vertical">
+                  <n-button type="primary" @click="realPersonPay();">
+                    点此付款
+                  </n-button>
+                  <n-button type="primary" @click="CheckRealNameStatus();">
+                    刷新付款状态
+                  </n-button>
+                </n-space>
+              </div>
+            </n-card>
+          </n-gi>
+        </n-grid>
+      </n-collapse-item>
+    </n-collapse>
     <n-grid cols="1" item-responsive>
-      <n-grid-item span="1">
-        <n-form
-          :ref="formRef"
-          :model="UserProfile"
-          label-width="auto"
-          :size="'large'"
-          v-show="showRealnameModal"
-        >
-          <n-grid cols="1" item-responsive :y-gap="5">
-            <n-grid-item>
-              <p style="color: red">
-                请填写您的姓名和身份证号进行实名认证（请认真填写，实名一旦成功除特殊情况外无法修改）
-              </p>
-              <p>
-                若点击提交后 5
-                秒内没有回调信息出现，请再次点击按钮，直到出现提示框。若无法实名，请联系管理员解决！
-              </p>
-              <p>
-                本站全部个人隐私信息遵守
-                <a
-                  style="color: dodgerblue"
-                  href="https://www.locyan.cn/doc/yszc.html"
-                  target="_blank"
-                  >LoCyan 隐私协议</a
-                >
-                的约束，我们将最大限度的保护用户的个人信息数据
-              </p>
-              <p>
-                我们允许<a style="color: red"><b>未成年人注册</b></a
-                >，请勿冒用非本人身份证实名，已经实名过得既往不咎！
-              </p>
-            </n-grid-item>
-            <n-grid-item span="1">
-              <n-form-item label="姓名" path="name">
-                <n-input v-model:value="UserProfile.name" placeholder="您的姓名" />
-              </n-form-item>
-            </n-grid-item>
-            <n-grid-item span="1">
-              <n-form-item label="身份证号" path="idcard">
-                <n-input v-model:value="UserProfile.idcard" placeholder="您的身份证号" />
-              </n-form-item>
-            </n-grid-item>
-          </n-grid>
-          <div style="display: flex; justify-content: flex-end">
-            <n-button round type="primary" @click="submitrealname()"> 提交 </n-button>
-          </div>
-        </n-form>
-      </n-grid-item>
-    </n-grid>
-    <n-grid cols="1" item-responsive>
-      <n-grid-item span="1">
-        <n-card v-show="!showRealnameModal">
-          <i class="twa twa-2x twa-party-popper"></i>您已经完成实名认证！
+      <n-gi span="1" v-show="showFinishModal">
+        <n-card title="认证完成">
+          <n-h1>
+            恭喜完成全部认证流程
+          </n-h1>
         </n-card>
-      </n-grid-item>
+      </n-gi>
     </n-grid>
   </template>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import { SendSuccessDialog, SendWarningDialog } from '../utils/dialog'
+import { SendErrorDialog, SendSuccessDialog, SendWarningDialog } from '../utils/dialog'
 import { FinishLoadingBar, StartLoadingBar } from '../utils/loadingbar'
 import { get, post } from '../utils/request.js'
 import store from '../utils/stores/store.js'
 
 const loading = ref(true)
 const showRealnameModal = ref(true)
+const showRealpersonMoal = ref(true)
+const showPayModal = ref(false)
+const showFinishModal = ref(false)
+const showScanCodeModal = ref(false)
 const formRef = ref(null)
+const realName = ref(false)
+const realPersonCount = ref(0)
+const realPerson = ref(false)
+const realPersonUrl = ref("")
+const ci = ref("")
+const payUrl = ref("")
 const UserProfile = ref({
   name: '',
   idcard: ''
@@ -113,20 +186,85 @@ function submitrealname() {
   })
 }
 
+function submitrealperson() {
+  const SubmitForm = {
+    username: store.getters.get_username,
+    name: UserProfile.value.name,
+    id_card: UserProfile.value.idcard,
+  }
+  const rs = post("https://api-v2.locyanfrp.cn/api/v2/realperson/submit", SubmitForm)
+  rs.then((res) => {
+    if (res.status === 200){
+      realPersonUrl.value = res.data.url
+      ci.value = res.data.certify_id
+      showScanCodeModal.value = true
+    }
+  })
+}
+
+function queryRealPersonStatus(){
+  const rs = get("https://api-v2.locyanfrp.cn/api/v2/realperson/query?username=" + store.getters.get_username + "&certify_id=" + ci.value)
+  rs.then((res) => {
+    if (res.status === 200){
+      // 后端会处理所有审核通过的事宜，前端处理消息显示
+      SendSuccessDialog("实人成功")
+      showScanCodeModal.value = false
+      CheckRealNameStatus()
+    } else {
+      SendErrorDialog("查询失败")
+    }
+  })
+}
+
 function CheckRealNameStatus() {
   const rs = get(
-    'https://api.locyanfrp.cn/Account/GetRealnameStatus?username=' + store.getters.get_username
+    'https://api-v2.locyanfrp.cn/api/v2/realperson/get_status?username=' + store.getters.get_username
   )
   rs.then((res) => {
-    if (res.status) {
+    // 如果已经完成实名，那么关闭实名的框，展示实人的框
+    realName.value = res.data.real_name
+    realPersonCount.value = res.data.real_person_count
+    realPerson.value = res.data.real_person
+
+    // 实名和实人都完成则展示最终窗口
+    if (realName.value === true && realPerson.value == true) {
+      showFinishModal.value = true
       showRealnameModal.value = false
-      loading.value = false
-    } else {
-      showRealnameModal.value = true
-      loading.value = false
+      showRealpersonMoal.value = false
+      showPayModal.value = false
+    }
+
+    // 实名完成但是实人没有完成，展示实人窗口关闭实名窗口
+    if (realName.value === true && realPerson.value == false) {
+      showFinishModal.value = false
+      showRealnameModal.value = false
+      // 实人次数足够展示实人，不够展示支付
+      if (realPersonCount.value < 1) {
+        getPayUrl();
+        showRealpersonMoal.value = false
+        showPayModal.value = true
+      } else {
+        showRealpersonMoal.value = true
+        showPayModal.value = false
+      }
+    }
+
+    // 两个都没完成则全部展示
+    loading.value = false;
+  })
+}
+
+function getPayUrl() {
+  const rs = get("https://api-v2.locyanfrp.cn/api/v2/realperson/pay?username=" + store.getters.get_username + "&notify_url=https://api-v2.locyanfrp.cn/api/v2/realperson/notify&redirect_url=https://www.locyanfrp.cn");
+  rs.then((res) => {
+    if (res.status === 200) {
+      payUrl.value = res.data.url;
     }
   })
 }
 
+function realPersonPay() {
+  window.open(payUrl.value);
+}
 CheckRealNameStatus()
 </script>