页面

src/pages/wo/writeInformation/index.vue

 <template>
   <!-- 冬奥会测试赛填报资料 -->
   <div class="writeInformation">
-    <i class="iconfont icon-sousuo1"></i>
+    <div class="info flex">
+      <i class="iconfont icon-gantanhao"></i>
+      <p>输入真实姓名和身份证号码并上传证件照以校验您的身份</p>
+    </div>
+    <div class="user">
+      <div class="cell flex idPhoto">
+        <div class="label">
+          <p>证件照</p>
+        </div>
+        <div class="img">
+          <image v-if="idPhoto" mode="widthFix" :src="idPhoto" alt=""></image>
+          <image
+            v-else
+            mode="widthFix"
+            src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/f96b596d-e1e4-43c1-b707-226ff7d107bd.png"
+            alt=""
+          ></image>
+        </div>
+      </div>
+      <div class="cell flex">
+        <div class="label">
+          <p>姓名</p>
+        </div>
+        <div class="text">
+          <input
+            type="text"
+            maxlength="20"
+            class="ipt"
+            placeholder="请输入姓名"
+            v-model="name"
+          />
+          <i class="iconfont icon-you"></i>
+        </div>
+      </div>
+      <div class="cell flex">
+        <div class="label">
+          <p>身份证号码</p>
+        </div>
+        <div class="text">
+          <input
+            type="text"
+            maxlength="18"
+            class="ipt"
+            placeholder="请输入身份证号码"
+            @input="input_id_number"
+            v-model="idNum"
+          />
+          <i class="iconfont icon-you"></i>
+        </div>
+      </div>
+    </div>
+    <div class="btm">
+      <p class="btm-info">本次操作遵守国家相关法律法规，采集信息仅用于测试赛相关核验查询</p>
+      <div class="btn" :class="{'btn1':onInput}" @click="next">下一步</div>
+    </div>
   </div>
 </template>
 
@@ -9,18 +63,212 @@
 export default {
   name: "writeInformation",
   data() {
-    return {};
+    return {
+      idPhoto: "",
+      name: "",
+      idNum: "",
+    };
   },
   components: {},
-  computed: {},
+  computed: {
+    onInput() {
+      return this.name.trim() == '' || this.idNum.trim() == ''
+    }
+  },
   onReady() {
     wx.setNavigationBarTitle({ title: "填报资料" });
   },
-  methods: {},
+  methods: {
+    // 下一步
+    next(){
+      this.check_id_number();
+      console.log('--下一步--');
+    },
+    input_id_number() {
+      let n = this.idNum.match(/\d{0,17}(\d|x)/i);
+      this.idNum = n === null ? "" : n[0];
+      if (this.idNum.length == 18) {
+        this.check_id_number();
+      }
+    },
+    check_id_number() {
+      let n = this.idNum.match(
+        /^[1-9][1-7]\d{4}(18|19|20)?\d{2}((0[1-9])|(1[012]))((0[1-9])|([12]\d)|(3[01]))\d{3}(\d|x)$/i
+      );
+      if (n === null) {
+        this.idNum = "身份证号码有误，请重新输入";
+        return false;
+      } else {
+        this.idNum = n[0];
+      }
+      let p = {
+        11: "北京",
+        12: "天津",
+        13: "河北",
+        14: "山西",
+        15: "内蒙古",
+        21: "辽宁",
+        22: "吉林",
+        23: "黑龙江 ",
+        31: "上海",
+        32: "江苏",
+        33: "浙江",
+        34: "安徽",
+        35: "福建",
+        36: "江西",
+        37: "山东",
+        41: "河南",
+        42: "湖北 ",
+        43: "湖南",
+        44: "广东",
+        45: "广西",
+        46: "海南",
+        50: "重庆",
+        51: "四川",
+        52: "贵州",
+        53: "云南",
+        54: "西藏 ",
+        61: "陕西",
+        62: "甘肃",
+        63: "青海",
+        64: "宁夏",
+        65: "新疆",
+        71: "台湾",
+        81: "香港",
+        82: "澳门",
+        91: "国外",
+      };
+      if (!p[this.idNum.substr(0, 2)]) {
+        this.idNum = "身份证号码有误，请重新输入";
+        return false;
+      }
+      let month = this.idNum.substr(10, 2);
+      let day = this.idNum.substr(12, 2);
+      let max_month = "01,03,05,07,08,10,12,";
+      if (max_month.indexOf(month + ",") < 0 && day == 31) {
+        this.idNum = "身份证号码有误，请重新输入";
+        return false;
+      }
+      if (month == "02") {
+        if (day > 29) {
+          this.idNum = "身份证号码有误，请重新输入";
+          return false;
+        }
+        let year = this.idNum.substr(6, 4);
+        if (
+          (year % 4 > 0 || (year % 100 == 0 && year % 400 > 0)) &&
+          day == 29
+        ) {
+          this.idNum = "身份证号码有误，请重新输入";
+          return false;
+        }
+      }
+      let factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
+      let parity = [1, 0, "x", 9, 8, 7, 6, 5, 4, 3, 2];
+      let sum = 0;
+      for (let i = 0; i < 17; ++i) {
+        sum += this.idNum[i] * factor[i];
+      }
+      if (this.idNum[17] == "X") {
+        this.idNum[17] = "x";
+      }
+      if (parity[sum % 11] != this.idNum[17]) {
+        this.idNum = "身份证号码有误，请重新输入";
+        return false;
+      }
+    },
+  },
 };
 </script>
 
 <style lang="scss" scoped>
 .writeInformation {
+  .cell {
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px 16px 16px 0;
+    margin-left: 16px;
+    background: #fff;
+    border-bottom: 1px solid #d8d8d8;
+    .label {
+      flex-shrink: 0;
+      p {
+        font-size: 15px;
+        color: #333;
+        font-family: PingFangSC-Regular, PingFang SC;
+      }
+    }
+    .text {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      flex: 1;
+      margin-left: 20px;
+      p {
+        font-size: 14px;
+        color: #999;
+        font-weight: 400;
+      }
+      .ipt {
+        width: 100%;
+        font-size: 14px;
+        text-align: right;
+      }
+      .ipt::-webkit-input-placeholder {
+        color: #999;
+      }
+      i {
+        margin-left: 8px;
+        font-size: 14px;
+        color: #999;
+      }
+    }
+    .img {
+      width: 80px;
+      height: 100px;
+      image {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  .info {
+    padding: 10px 20px;
+    background: rgba(34, 157, 241, 0.2);
+    align-items: center;
+    i {
+      color: #f7b500;
+    }
+    p {
+      font-size: 12px;
+      color: #0091ff;
+      margin-left: 6px;
+    }
+  }
+  .btm{
+    position: fixed;
+    bottom: 22px;
+    padding: 0 20px;
+    .btm-info{
+      font-size: 12px;
+      color: #999;
+      font-weight: 400;
+      margin-bottom: 10px;
+    }
+    .btn{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 46px;
+      border-radius: 4px;
+      color: #fff;
+      background: #229DF1;
+    }
+    .btn1{
+      background: #C8DEFC;
+      pointer-events: none;
+    }
+  }
 }
 </style>

static/font/iconfont.css

 @font-face {
-  font-family: 'iconfont';  /* Project id 1026419 */
-  src: url('//at.alicdn.com/t/font_1026419_wowq8sw1kk.woff2?t=1636258466679') format('woff2'),
-       url('//at.alicdn.com/t/font_1026419_wowq8sw1kk.woff?t=1636258466679') format('woff'),
-       url('//at.alicdn.com/t/font_1026419_wowq8sw1kk.ttf?t=1636258466679') format('truetype');
+  font-family: "iconfont"; /* Project id 1026419 */
+  src: url('//at.alicdn.com/t/font_1026419_8w19e9hrgtx.woff2?t=1636266763463') format('woff2'),
+       url('//at.alicdn.com/t/font_1026419_8w19e9hrgtx.woff?t=1636266763463') format('woff'),
+       url('//at.alicdn.com/t/font_1026419_8w19e9hrgtx.ttf?t=1636266763463') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-gantanhao:before {
+  content: "\e69a";
+}
+
+.icon-icon_duihao-mian:before {
+  content: "\e69c";
+}
+
 .icon-sousuo1:before {
   content: "\e699";
 }
@@ -792,4 +800,3 @@
 .icon-qian:before {
   content: "\e60a";
 }
-