From 3902e20553c84dee032c4dd1335f6556153b4530 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Tue, 16 Sep 2025 13:49:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E5=90=8D=E8=AE=A4=E8=AF=81=E5=8A=A8?=
 =?UTF-8?q?=E6=80=810.5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/realName/realName.js                   |  16 +
 components/custom-navbar/custom-navbar.vue | 322 +++++++++++----------
 pages/realName/realName.vue                |  97 ++++---
 3 files changed, 243 insertions(+), 192 deletions(-)
 create mode 100644 api/realName/realName.js

diff --git a/api/realName/realName.js b/api/realName/realName.js
new file mode 100644
index 0000000..fa66feb
--- /dev/null
+++ b/api/realName/realName.js
@@ -0,0 +1,16 @@
+import request from "../../utils/request";
+
+export function putTwoElementRealName(data) {
+  return request({
+    url: "/app/realName/twoElementRealName",
+    method: "PUT",
+    data,
+  });
+}
+
+export function getRefreshRealName() {
+  return request({
+    url: "/app/realName/refreshRealName",
+    method: "GET",
+  });
+}
diff --git a/components/custom-navbar/custom-navbar.vue b/components/custom-navbar/custom-navbar.vue
index bda457d..cab3fcc 100644
--- a/components/custom-navbar/custom-navbar.vue
+++ b/components/custom-navbar/custom-navbar.vue
@@ -1,7 +1,10 @@
 <template>
   <view>
     <!-- 填充区，避免内容被导航栏遮挡 -->
-    <view :style="{ height: navBarHeight + 'px' }" class="navbar-placeholder"></view>
+    <view
+      :style="{ height: navBarHeight + 'px' }"
+      class="navbar-placeholder"
+    ></view>
 
     <!-- 自定义导航栏 -->
     <view
@@ -14,19 +17,28 @@
       class="custom-navbar"
     >
       <view
-        :style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }"
+        :style="{
+          height: capsuleHeight + 'px',
+          lineHeight: capsuleHeight + 'px',
+        }"
         class="navbar-left"
         @click="handleBack"
       >
         <image :src="backIcon" class="back-icon" mode="aspectFit"></image>
       </view>
       <view
-        :style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }"
+        :style="{
+          height: capsuleHeight + 'px',
+          lineHeight: capsuleHeight + 'px',
+        }"
         class="navbar-title"
         >{{ title }}
       </view>
       <view
-        :style="{ height: capsuleHeight + 'px', lineHeight: capsuleHeight + 'px' }"
+        :style="{
+          height: capsuleHeight + 'px',
+          lineHeight: capsuleHeight + 'px',
+        }"
         class="navbar-right"
       >
         <slot name="right"></slot>
@@ -36,173 +48,179 @@
 </template>
 
 <script>
-  import CommonEnum from '../../enum/common'
+import CommonEnum from "../../enum/common";
 
-  export default {
-    name: 'CustomNavbar',
-    props: {
-      title: {
-        type: String,
-        default: '',
-      },
-      backIcon: {
-        type: String,
-        default: CommonEnum.BACK_BUTTON,
-      },
-      showBack: {
-        type: Boolean,
-        default: true,
-      },
-      // 新增：滚动相关配置
-      backgroundColor: {
-        type: String,
-        default: CommonEnum.BASE_COLOR, // 滚动时的背景色，使用基调颜色
-      },
-      scrollThreshold: {
-        type: Number,
-        default: 20, // 滚动阈值，超过此值开始变色
-      },
-      enableScrollEffect: {
-        type: Boolean,
-        default: true, // 是否启用滚动效果
-      },
+export default {
+  name: "CustomNavbar",
+  props: {
+    title: {
+      type: String,
+      default: "",
     },
-    data() {
-      return {
-        statusBarHeight: 0,
-        navBarHeight: 0,
-        menuButtonInfo: null,
-        capsuleHeight: 0,
-        // 新增：滚动状态
-        isScrolled: false,
-        scrollTop: 0,
-        lastScrollTop: 0,
+    backIcon: {
+      type: String,
+      default: CommonEnum.BACK_BUTTON,
+    },
+    showBack: {
+      type: Boolean,
+      default: true,
+    },
+    // 新增：滚动相关配置
+    backgroundColor: {
+      type: String,
+      default: CommonEnum.BASE_COLOR, // 滚动时的背景色，使用基调颜色
+    },
+    scrollThreshold: {
+      type: Number,
+      default: 20, // 滚动阈值，超过此值开始变色
+    },
+    enableScrollEffect: {
+      type: Boolean,
+      default: true, // 是否启用滚动效果
+    },
+  },
+  data() {
+    return {
+      statusBarHeight: 0,
+      navBarHeight: 0,
+      menuButtonInfo: null,
+      capsuleHeight: 0,
+      // 新增：滚动状态
+      isScrolled: false,
+      scrollTop: 0,
+      lastScrollTop: 0,
+    };
+  },
+  mounted() {
+    this.getSystemInfo();
+  },
+  methods: {
+    getSystemInfo() {
+      // 获取系统信息
+      const systemInfo = uni.getSystemInfoSync();
+      // 获取状态栏高度
+      this.statusBarHeight = systemInfo.statusBarHeight;
+
+      // 获取胶囊按钮信息
+      this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
+
+      // 计算胶囊高度
+      this.capsuleHeight = this.menuButtonInfo.height;
+
+      // 计算导航栏高度（胶囊底部到状态栏顶部的距离）
+      this.navBarHeight = this.menuButtonInfo.bottom + 8;
+    },
+    handleBack() {
+      if (this.showBack) {
+        // 先触发自定义事件，让父组件有机会处理
+        this.$emit("back");
+        // 自动执行返回逻辑
+        uni.navigateBack({
+          delta: 1,
+        });
       }
     },
-    mounted() {
-      this.getSystemInfo()
-    },
-    methods: {
-      getSystemInfo() {
-        // 获取系统信息
-        const systemInfo = uni.getSystemInfoSync()
-        // 获取状态栏高度
-        this.statusBarHeight = systemInfo.statusBarHeight
 
-        // 获取胶囊按钮信息
-        this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+    // 新增：处理页面滚动（供父组件调用）
+    handlePageScroll(e) {
+      if (!this.enableScrollEffect) return;
 
-        // 计算胶囊高度
-        this.capsuleHeight = this.menuButtonInfo.height
+      this.scrollTop = e.scrollTop;
 
-        // 计算导航栏高度（胶囊底部到状态栏顶部的距离）
-        this.navBarHeight = this.menuButtonInfo.bottom + 8
-      },
-      handleBack() {
-        if (this.showBack) {
-          // 先触发自定义事件，让父组件有机会处理
-          this.$emit('back')
-          // 自动执行返回逻辑
-          uni.navigateBack({
-            delta: 1,
-          })
+      // 判断是否超过滚动阈值
+      if (this.scrollTop > this.scrollThreshold) {
+        if (!this.isScrolled) {
+          this.isScrolled = true;
+          this.$emit("scroll-change", {
+            isScrolled: true,
+            scrollTop: this.scrollTop,
+          });
         }
-      },
-
-      // 新增：处理页面滚动（供父组件调用）
-      handlePageScroll(e) {
-        if (!this.enableScrollEffect) return
-
-        this.scrollTop = e.scrollTop
-
-        // 判断是否超过滚动阈值
-        if (this.scrollTop > this.scrollThreshold) {
-          if (!this.isScrolled) {
-            this.isScrolled = true
-            this.$emit('scroll-change', { isScrolled: true, scrollTop: this.scrollTop })
-          }
-        } else {
-          if (this.isScrolled) {
-            this.isScrolled = false
-            this.$emit('scroll-change', { isScrolled: false, scrollTop: this.scrollTop })
-          }
+      } else {
+        if (this.isScrolled) {
+          this.isScrolled = false;
+          this.$emit("scroll-change", {
+            isScrolled: false,
+            scrollTop: this.scrollTop,
+          });
         }
+      }
 
-        // 触发滚动事件，让父组件可以获取滚动信息
-        this.$emit('scroll', {
-          scrollTop: this.scrollTop,
-          isScrolled: this.isScrolled,
-        })
-      },
-
-      // 新增：手动设置滚动状态（供父组件调用）
-      setScrollState(scrollTop) {
-        if (!this.enableScrollEffect) return
-
-        this.scrollTop = scrollTop
-        this.isScrolled = scrollTop > this.scrollThreshold
-      },
+      // 触发滚动事件，让父组件可以获取滚动信息
+      this.$emit("scroll", {
+        scrollTop: this.scrollTop,
+        isScrolled: this.isScrolled,
+      });
     },
-  }
+
+    // 新增：手动设置滚动状态（供父组件调用）
+    setScrollState(scrollTop) {
+      if (!this.enableScrollEffect) return;
+
+      this.scrollTop = scrollTop;
+      this.isScrolled = scrollTop > this.scrollThreshold;
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-  /* 填充区样式 */
-  .navbar-placeholder {
-    width: 100%;
-    background-color: transparent;
-  }
+/* 填充区样式 */
+.navbar-placeholder {
+  width: 100%;
+  background-color: transparent;
+}
 
-  /* 自定义导航栏样式 */
-  .custom-navbar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 999;
-    padding-top: 0;
-    background-color: transparent;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-left: 30rpx;
-    padding-right: 30rpx;
-    box-sizing: border-box;
-    transition: background-color 0.3s ease; /* 添加过渡动画 */
-  }
+/* 自定义导航栏样式 */
+.custom-navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  padding-top: 0;
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 30rpx;
+  padding-right: 30rpx;
+  box-sizing: border-box;
+  transition: background-color 0.3s ease; /* 添加过渡动画 */
+}
 
-  /* 滚动状态样式 */
-  .navbar-scrolled {
-    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); /* 滚动时添加阴影 */
-  }
+/* 滚动状态样式 */
+.navbar-scrolled {
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); /* 滚动时添加阴影 */
+}
 
-  .navbar-left {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 60rpx;
+.navbar-left {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60rpx;
 
-    .back-icon {
-      width: 56rpx;
-      height: 56rpx;
-    }
+  .back-icon {
+    width: 56rpx;
+    height: 56rpx;
   }
+}
 
-  .navbar-title {
-    font-size: 36rpx;
-    font-weight: bold;
-    color: #695347;
-    flex: 1;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+.navbar-title {
+  font-size: 36rpx;
+  font-weight: bold;
+  color: #695347;
+  flex: 1;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-  .navbar-right {
-    width: 60rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
+.navbar-right {
+  width: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>
diff --git a/pages/realName/realName.vue b/pages/realName/realName.vue
index 75803ee..436d648 100644
--- a/pages/realName/realName.vue
+++ b/pages/realName/realName.vue
@@ -23,12 +23,22 @@
       <view class="inputYourIdentify">请输入您的有效身份信息</view>
 
       <view class="inputBox">
-        <input class="input" placeholder="请输入您的姓名" type="text" />
-        <input class="input" placeholder="请输入您的身份证号" type="text" />
-        <input class="input" placeholder="请输入您的手机号" type="text" />
+        <input
+          v-model="twoElementRealName.userName"
+          class="input"
+          placeholder="请输入您的姓名"
+          type="text"
+        />
+        <input
+          v-model="twoElementRealName.idCard"
+          class="input"
+          placeholder="请输入您的身份证号"
+          type="text"
+        />
+        <!--        <input class="input" placeholder="请输入您的手机号" type="text" />-->
       </view>
 
-      <button class="submit">提交</button>
+      <button class="submit" @click="submit()">提交</button>
       <view class="tip"
         >点击提交代表您授权日行一善、项目捐款获取以上信 息，用于实名验证
       </view>
@@ -38,6 +48,10 @@
 
 <script>
 import CommonEnum from "../../enum/common";
+import {
+  getRefreshRealName,
+  putTwoElementRealName,
+} from "../../api/realName/realName";
 
 export default {
   components: {},
@@ -46,26 +60,29 @@ export default {
       flower: "https://api.ccttiot.com/image-1757990177680.png",
       CommonEnum,
       loading: false,
+      twoElementRealName: {
+        userName: "",
+        idCard: "",
+      },
     };
   },
-  onLoad() {
-    // 页面加载时获取数据
-    this.loadPageData();
-  },
+  onLoad() {},
   methods: {
-    // 加载页面数据
-    async loadPageData() {
-      this.loading = true;
+    async submit() {
+      uni.showLoading({
+        title: "实名认证中",
+        mask: true,
+      });
       try {
-        // TODO: 调用页面数据API
-        // const response = await getPageData()
-        // 模拟加载
-        setTimeout(() => {
-          this.loading = false;
-        }, 1000);
+        const res = await putTwoElementRealName(this.twoElementRealName);
+        if (res.code === 200) {
+          uni.hideLoading();
+          await getRefreshRealName();
+        }
+        // 成功后的操作，比如跳转页面
       } catch (error) {
-        console.error("获取页面数据失败:", error);
-        this.loading = false;
+        uni.hideLoading();
+        console.error("提交失败:", error);
       }
     },
   },
@@ -131,29 +148,29 @@ export default {
 
   .box {
     position: absolute;
-    left: 27px;
-    top: 259px;
-    width: 321px;
-    height: 356px;
-    border-radius: 15px;
+    left: 54rpx; /* 27px * 2 */
+    top: 518rpx; /* 259px * 2 */
+    width: 642rpx; /* 321px * 2 */
+    height: 712rpx; /* 356px * 2 */
+    border-radius: 30rpx; /* 15px * 2 */
     opacity: 1;
 
     background: #fffbf5;
 
     box-sizing: border-box;
-    border: 0.5px solid #c7a26d;
+    border: 1rpx solid #c7a26d; /* 0.5px * 2 */
   }
 
   .inputYourIdentify {
     position: absolute;
-    left: 50px;
-    top: 282px;
+    left: 100rpx; /* 50px * 2 */
+    top: 564rpx; /* 282px * 2 */
 
-    height: 22px;
+    height: 44rpx; /* 22px * 2 */
     opacity: 1;
 
     font-family: AlibabaPuHuiTi;
-    font-size: 16px;
+    font-size: 32rpx; /* 16px * 2 */
     font-weight: 500;
     line-height: normal;
     letter-spacing: 0em;
@@ -179,17 +196,17 @@ export default {
       text-align: left;
       font-style: normal;
       text-transform: none;
-      border-bottom: #d8d8d8 solid 1px;
+      border-bottom: #d8d8d8 solid 2rpx; /* 1px * 2 */
     }
   }
 
   .submit {
     position: absolute;
-    left: 50px;
-    top: 488px;
-    width: 275px;
-    height: 49px;
-    border-radius: 10px;
+    left: 100rpx; /* 50px * 2 */
+    top: 976rpx; /* 488px * 2 */
+    width: 550rpx; /* 275px * 2 */
+    height: 98rpx; /* 49px * 2 */
+    border-radius: 20rpx; /* 10px * 2 */
     opacity: 0.5;
 
     background: #c7a26d;
@@ -197,14 +214,14 @@ export default {
 
   .tip {
     position: absolute;
-    left: 50px;
-    top: 549px;
-    width: 272px;
-    height: 32px;
+    left: 100rpx; /* 50px * 2 */
+    top: 1098rpx; /* 549px * 2 */
+    width: 544rpx; /* 272px * 2 */
+    height: 64rpx; /* 32px * 2 */
     opacity: 1;
 
     font-family: AlibabaPuHuiTi;
-    font-size: 12px;
+    font-size: 24rpx; /* 12px * 2 */
     font-weight: normal;
     line-height: normal;
     letter-spacing: 0em;