feat:完成【报名人员信息维护】

app.json

@@ -2,7 +2,8 @@
   "pages": [
     "pages/index/index",
     "pages/explore/index",
-    "pages/my/index"
+    "pages/my/index",
+    "pages/person-info/index"
   ],
   "window": {
     "backgroundTextStyle": "light",

mock/occupations.js

@@ -0,0 +1,21 @@
+module.exports = {
+  //模拟接口
+  'api/occupations':{
+    code:200,
+    message:'success',
+    data:{
+      Occupations:[
+        {label:'学生' ,value:'学生',},
+        {label:'计算机从业者' ,value:'计算机从业者',},
+        {label:'医务人员' ,value:'医务人员',},
+        {label:'设计师/艺术从业者',value:'设计师/艺术从业者'},
+        {label:'公职人员',value:'公职人员'},
+        {label:'新闻出版/文化专业人员',value:'新闻出版/文化专业人员'},
+        {label:'经济与金融专业人员',value:'经济与金融专业人员'},
+        {label:'法律/社会/宗教专业人员',value:'法律/社会/宗教专业人员'},
+        {label:'科学研究人员',value:'科学研究人员'},        
+        {label:'自由职业者',value:'自由职业者'},
+      ],
+    }
+  }
+}

package.json

@@ -5,12 +5,15 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "keywords": ["wechat", "miniprogram", "starter"],
+  "keywords": [
+    "wechat",
+    "miniprogram",
+    "starter"
+  ],
   "author": "leejim",
   "license": "MIT",
   "description": "a start-kit for wechat miniprogram powerby TDesign miniprogram",
   "dependencies": {
     "tdesign-miniprogram": "^0.12.1"
-  },
-  "devDependencies": {}
+  }
 }

pages/person-info/index.js

@@ -0,0 +1,163 @@
+
+const mockOccupation = require('../../mock/occupations.js')
+import Toast from 'tdesign-miniprogram/toast/index';
+
+const innerPhoneReg = '^1(?:3\\d|4[4-9]|5[0-35-9]|6[67]|7[0-8]|8\\d|9\\d)\\d{8}$';
+const innerNameReg = '^[\u4e00-\u9fa5]{2,50}$'
+const innerIDCardReg = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
+Page({
+
+
+  data: {
+      dateVisible:false,
+      isDefault:false,
+      OccupationVisible:false,
+      date: new Date('2021-12-23').getTime(),
+      Occupations:'',
+      start: '2000-01-01 00:00:00',
+      end: '2030-09-09 12:12:12',
+
+      name:'',
+      birthday:'',
+      phone:'',
+      IDCard:'',
+      Email:'',
+      occupation:'',
+  },
+  onLoad(options){
+    this.setData({
+      Occupations:mockOccupation['api/occupations'].data.Occupations
+    })
+  },
+  showPicker(e) {
+    this.setData({
+      dateVisible: true,
+    });
+  },
+  hidePicker() {
+    this.setData({
+      dateVisible: false,
+    });
+  },
+  onColumnChange(e) {
+    var my_birthday = e.detail.value.$y+'年'+e.detail.value.$H+"月"+e.detail.value.$D+'日';
+    this.setData({
+        birthday:my_birthday
+      });
+    this.hidePicker();
+  },
+  onOccupationPicker(e){
+    this.setData({
+      OccupationVisible: true,
+    });
+    console.log(this.data.OccupationVisible)
+  },
+  onOccupationConfirm(e) {
+    console.log(e);
+    this.setData({
+      occupation:e.detail.value[0].value
+    });
+    this.onOccupationCancel()
+  },
+  onOccupationCancel(e) {
+    this.setData({
+      OccupationVisible: false,
+    });
+  },
+  onInputValue(e){
+    console.log(e)
+    const { item } = e.currentTarget.dataset;
+    const { value = '' } = e.detail;
+    this.setData(
+      {
+        [`${item}`]: value,
+      })
+  },
+  onVerifyInputLegel(){
+    const {name,birthday,phone,IDCard} = this.data;
+    const prefixNameReg = String(this.properties.nameReg || innerNameReg);
+    const prefixPhoneReg = String(this.properties.phoneReg || innerPhoneReg);
+    const nameRegExp = new RegExp(prefixNameReg)
+    const phoneRegExp = new RegExp(prefixPhoneReg);
+
+    if(!name||!name.trim())
+    return {
+      isLegel:false,
+      tips:'请填写您的姓名',
+    }
+    if(name.trim().length<2||name.trim().length>50)
+    {
+      return {
+        isLegel:false,
+        tips:"姓名长度需要在2~50字之间",
+      }
+    }
+    if(!nameRegExp.test(name))
+    {
+      return {
+        isLegel:false,
+        tips:'姓名只能包括汉字',
+      }
+    }
+    if(!birthday)
+    {
+      return {
+        isLegel:false,
+        tips:'请填写您的生日',
+      }
+    }
+    if(!phone||!phone.trim())
+    {
+      return {
+        isLegel:false,
+        tips:'请填写您的手机号',
+      }
+    }
+    if (!phoneRegExp.test(phone)) 
+    {
+      return {
+        isLegal:false,
+        tips: '请填写正确的手机号',
+      };
+    }
+    if(!innerIDCardReg.test(IDCard))
+    {
+      return {
+        isLegel:false,
+        tips:'请填写正确的身份证号码',
+      }
+    }
+    return {
+      isLegel:true,
+      tips:'添加成功',
+    }
+  },
+  submit(e){
+    const {tips} = this.onVerifyInputLegel();
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: tips,
+        icon: '',
+        duration: 1000,
+      });
+    if(tips!='添加成功')
+      return;
+    var pages = getCurrentPages();
+    var prevPage = pages[pages.length - 2];
+    prevPage.setData({
+      　 addPerson:{
+          name:this.data.name,
+          birthday:this.data.birthday,
+          phone:this.data.phone,
+          IDCard:this.data.IDCard,
+          Email:this.data.Email,
+          occupation:this.data.occupation,
+      }
+      })　　
+    wx.navigateBack({
+      delta:1
+    })
+
+  }
+})

pages/person-info/index.json

@@ -0,0 +1,15 @@
+{
+  "navigationBarTitleText": "个人信息",
+  "usingComponents": {
+    "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
+    "t-switch": "tdesign-miniprogram/switch/switch",
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-input": "tdesign-miniprogram/input/input",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker",
+    "t-picker": "tdesign-miniprogram/picker/picker",
+    "t-picker-item": "tdesign-miniprogram/picker/picker-item",
+    "t-toast": "tdesign-miniprogram/toast/toast"
+  }
+}

pages/person-info/index.less

@@ -0,0 +1,71 @@
+.person-info-detail{
+  width: 750rpx;
+}
+.verify-button
+{
+  width: 686rpx;
+  height: 96rpx;
+  border-radius: 12rpx;
+  border: 0px;
+  padding: 32rpx;
+  position:fixed;
+  bottom: 48rpx;
+  opacity: 1;
+}
+.form-cell{
+  width: 359rpx;
+  height: 56rpx;
+  opacity: 1;
+  border-bottom: 0.5rpx solid #e7e7e7;
+}
+.t-input{
+  padding: 32rpx 0rpx !important;
+}
+.t-cell{
+  padding:32rpx 32rpx !important;
+}
+.t-cell__right{
+  margin-left: 0rpx !important;
+}
+.t-cell__title{
+  width: 162rpx;
+  height: 48rpx;
+  padding-right: 32rpx;
+  opacity: 1;
+}
+.t-cell__right{
+  margin-right: 0rpx;
+}
+.t-cell__title, .t-cell__note{
+  flex:0 0 auto;
+}
+.t-cell__note{
+    width: 492rpx;
+    height: 48rpx;
+    opacity: 1;
+    color: #00000066;
+    font-size: 32rpx;
+    font-weight: 400;
+    font-family: "PingFang SC";
+    text-align: left;
+    line-height: 48rpx; 
+}
+.info{
+  flex:1 0 auto;
+}
+.t-class-icon{
+    width: 412rpx;
+    height: 48rpx;
+    opacity: 1;
+    color: #000000e6;
+    font-size: 16rpx;
+    font-weight: 400;
+    font-family: "PingFang SC";
+    text-align: left;
+    line-height: 24rpx;
+    padding-right: 32rpx;
+}
+.t-switch{
+  width: 90rpx;
+  height: 56rpx;
+}