buddhism/pages/realName/realName.vue

<template>
  <view class="page">
    <custom-navbar
      ref="customNavbar"
      :style="{ backgroundColor: '#f5f5f5' }"
      title="实名认证"
    />
    <tile-grid />
    <view :style="{ backgroundColor: CommonEnum.BASE_COLOR }" class="header">
      <!--      &lt;!&ndash; 状态展示 &ndash;&gt;-->
      <!--      <status-display v-if="loading" loading-text="加载中..." type="loading" />-->
      <!-- 页面内容将在这里添加 -->

      <view class="title"> 爱心捐助 · 实名认证</view>
      <view class="lotusMeditation">
        <image :src="flower" mode="widthFix" />
      </view>
      <view class="content"
        >根据国家相关规定，为确保捐赠行为的合规性与可追溯性，保
        障您的公益捐赠权益，请进行实名认证
      </view>
      <view class="box"></view>
      <view class="inputYourIdentify">请输入您的有效身份信息</view>

      <view class="inputBox">
        <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" @click="submit()">提交</button>
      <view class="tip"
        >点击提交代表您授权日行一善、项目捐款获取以上信 息，用于实名验证
      </view>
    </view>
  </view>
</template>

<script>
import CommonEnum from "../../enum/common";
import {
  getRefreshRealName,
  putTwoElementRealName,
} from "../../api/realName/realName";

export default {
  components: {},
  data() {
    return {
      flower: "https://api.ccttiot.com/image-1757990177680.png",
      CommonEnum,
      loading: false,
      twoElementRealName: {
        userName: "",
        idCard: "",
      },
    };
  },
  onLoad() {},
  methods: {
    async submit() {
      uni.showLoading({
        title: "实名认证中",
        mask: true,
      });
      try {
        const res = await putTwoElementRealName(this.twoElementRealName);
        if (res.code === 200) {
          uni.hideLoading();
          await getRefreshRealName();
        }
        // 成功后的操作，比如跳转页面
      } catch (error) {
        uni.hideLoading();
        console.error("提交失败:", error);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  //background: #f5f0e7;
}

.header {
  width: 100%;
  //min-height: 100vh;//可能导致页面留白
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 0 0 40rpx;

  .title {
    position: absolute;
    left: 54rpx; /* 27px * 2 */
    top: 326rpx; /* 163px * 2 */
    height: 60rpx; /* 30px * 2 */
    opacity: 1;

    font-family: AlibabaPuHuiTi;
    font-size: 44rpx; /* 22px * 2 */
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0em;

    font-feature-settings: "kern" on;
    color: #522510;
  }

  .lotusMeditation {
    position: absolute;
    left: 502rpx; /* 251px * 2 */
    top: 222rpx; /* 111px * 2 */
    width: 33.07%; /* 33.07% 保持不变（百分比单位不受影响） */
    height: 13.67%; /* 百分比单位保持不变 */
    opacity: 1;
  }

  .content {
    position: absolute;
    left: 54rpx; /* 27px * 2 */
    top: 412rpx; /* 206px * 2 */
    width: 638rpx; /* 319px * 2 */
    height: 64rpx; /* 32px * 2 */
    opacity: 1;

    font-family: AlibabaPuHuiTi;
    font-size: 24rpx; /* 12px * 2 */
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0em;

    font-feature-settings: "kern" on;
    color: #522510;
  }

  .box {
    position: absolute;
    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: 1rpx solid #c7a26d; /* 0.5px * 2 */
  }

  .inputYourIdentify {
    position: absolute;
    left: 100rpx; /* 50px * 2 */
    top: 564rpx; /* 282px * 2 */

    height: 44rpx; /* 22px * 2 */
    opacity: 1;

    font-family: AlibabaPuHuiTi;
    font-size: 32rpx; /* 16px * 2 */
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0em;

    font-feature-settings: "kern" on;
    color: #3d3d3d;
  }

  .inputBox {
    position: relative;
    top: 400rpx;
    width: 550rpx;
    left: 100rpx;
    height: 300rpx;

    .input {
      height: 100rpx;
      font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
      font-weight: 400;
      font-size: 28rpx;
      color: #000000;
      line-height: 38rpx;
      text-align: left;
      font-style: normal;
      text-transform: none;
      border-bottom: #d8d8d8 solid 2rpx; /* 1px * 2 */
    }
  }

  .submit {
    position: absolute;
    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;
  }

  .tip {
    position: absolute;
    left: 100rpx; /* 50px * 2 */
    top: 1098rpx; /* 549px * 2 */
    width: 544rpx; /* 272px * 2 */
    height: 64rpx; /* 32px * 2 */
    opacity: 1;

    font-family: AlibabaPuHuiTi;
    font-size: 24rpx; /* 12px * 2 */
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0em;

    font-feature-settings: "kern" on;
    color: #695347;
  }
}
</style>