to: improve form submission information

app.json

@@ -14,7 +14,8 @@
   "usingComponents": {
     "van-icon": "@vant/weapp/icon/index",
     "van-overlay": "@vant/weapp/overlay/index",
-    "van-dialog": "@vant/weapp/dialog/index"
+    "van-dialog": "@vant/weapp/dialog/index",
+    "van-field": "@vant/weapp/field/index"
   },
   "window": {
     "backgroundTextStyle": "light",

pages/createFile/createFile.js

@@ -5,7 +5,12 @@ Page({
    * 页面的初始数据
    */
   data: {
-
+    choseAvatar: false,
+    choseAvaSrc: '',
+    sexIndex: '0',
+    pickerText: '请选择',
+    relativeText: '请选择',
+    relativeRange: ['爸爸','妈妈', '爷爷', '奶奶']
   },
 
   /**
@@ -30,37 +35,67 @@ Page({
   },
 
   /**
-   * 生命周期函数--监听页面隐藏
+   * 保存
    */
-  onHide() {
-
+  handleSave() {
+    wx.showLoading({
+      title: '加载中...',
+      mask: true
+    })
+    setTimeout(() => {
+      wx.hideLoading({
+        success: (res) => {},
+      })
+    }, 1400);
   },
 
   /**
-   * 生命周期函数--监听页面卸载
+   * 选择关系
    */
-  onUnload() {
-
+  bindReaPickerChange(e) {
+    var value = this.data.relativeRange[e.detail.value]
+    this.setData({
+      relativeText: value
+    })
   },
 
   /**
-   * 页面相关事件处理函数--监听用户下拉动作
+   * 用户选择生日
    */
-  onPullDownRefresh() {
-
+  bindPickerChange(e) {
+    this.setData({
+      pickerText: e.detail.value
+    })
   },
 
   /**
-   * 页面上拉触底事件的处理函数
+   * 切换性别
    */
-  onReachBottom() {
-
+  handleSex(e) {
+    console.log(e.currentTarget.dataset.index);
+    this.setData({
+      sexIndex: e.currentTarget.dataset.index
+    })
   },
 
   /**
-   * 用户点击右上角分享
+   * 用户选择头像
    */
-  onShareAppMessage() {
-
+  handleChoseAvatar() {
+    var that = this
+    wx.chooseImage({
+      count: 1,
+      sizeType: ['original', 'compressed'],
+      sourceType: ['album', 'camera'],
+      success (res) {
+        // tempFilePath可以作为 img 标签的 src 属性显示图片
+        const tempFilePaths = res.tempFilePaths
+        console.log(tempFilePaths);
+        that.setData({
+          choseAvatar: true,
+          choseAvaSrc: tempFilePaths
+        })
+      }
+    })
   }
 })

pages/createFile/createFile.wxml

@@ -2,10 +2,66 @@
 <view class="createfile-content">
   <view class="main-content">
     <view class="form create-form">
-      <view class="form-item avatar">
+      <view class="form-item avatar ittflex-jcb">
         <view class="label ittflex-jcs">头像:</view>
-        <view class="actiosn"></view>
+        <view class="actiosn chsoe-img ittflex" bindtap="handleChoseAvatar">
+          <view class="default-img ittflex" wx:if="{{!choseAvatar}}">
+            <van-icon name="contact" color="#fff" />
+          </view>
+          <view class="chsoe-img-item ittflex" wx:if="{{choseAvatar}}">
+            <image class="avat-item" src="{{choseAvaSrc}}"></image>
+          </view>
+          <view class="arrow-right ittflex">
+            <van-icon name="arrow" color="#999999"/>
+          </view>
+        </view>
+      </view>
+      <view class="form-item username ittflex-jcb">
+        <view class="label ittflex-jcs">姓名:</view>
+        <view class="actions file-input">
+          <input class="weui-input"  placeholder="请输入" 	placeholder-style="text-align: right;font-size:26rpx;color:#999;"/>
+        </view>
+      </view>
+      <view class="form-item sex ittflex-jcs">
+        <view class="label ittflex-jcs">性别:</view>
+        <view class="actions radio-sex ittflex-jcs">
+          <view class="radio radio-man ittflex" data-index="0" bindtap="handleSex">
+            <view class="readio-item b-cricle ittflex {{ sexIndex == '0' ? 'readio-item-active' : ''}}">
+              <view class="in-cricle"></view>
+            </view>
+            <view class="radio-text">男</view>
+          </view>
+          <view class="radio radio-woman ittflex" data-index="1" bindtap="handleSex">
+            <view class="readio-item b-cricle ittflex {{ sexIndex == '1' ? 'readio-item-active' : ''}}">
+              <view class="in-cricle"></view>
+            </view>
+            <view class="radio-text">女</view>
+          </view>
+        </view>
+      </view>
+      <view class="form-item bothday ittflex-jcb">
+        <view class="label ittflex-jcs">生日:</view>
+        <view class="actions actions-bothday ittflex">
+          <picker class="my-picker" mode="date" bindchange="bindPickerChange" value="{{index}}">
+            <view class="picker-item ittflex">
+              <text class="picker-text">{{pickerText}}</text>
+              <van-icon name="calendar-o" size="34rpx"/>
+            </view>
+          </picker>
+        </view>
+      </view>
+      <view class="form-item relative ittflex-jcb">
+        <view class="label ittflex-jcs">关系:</view>
+        <view class="actions actions-bothday ittflex">
+          <picker class="my-picker" mode="selector" range="{{relativeRange}}" bindchange="bindReaPickerChange">
+            <view class="picker-item ittflex">
+              <text class="picker-text">{{relativeText}}</text>
+              <van-icon name="arrow-down" color="#999"/>
+            </view>
+          </picker>
+        </view>
       </view>
     </view>
+    <view class="itt-btn submit-btn" bindtap="handleSave">保存</view>
   </view>
 </view>

pages/createFile/createFile.wxss

@@ -12,17 +12,127 @@
 .form {
   width: 100%;
   min-height: 500rpx;
-  background-color: #fff;
 }
 .form-item {
   width: 100%;
   height: 94rpx;
   border-bottom: 1rpx solid #E4E4E4;
 }
+.no-border {
+  border: 0;
+}
+.avatar {
+  height: 140rpx;
+}
 .label {
   width: 100rpx;
   height: 100%;
   font-size: 26rpx;
   font-weight: 400;
   color: #333333;
+}
+.actions {
+  width: 70%;
+}
+.radio-sex {
+  height: 100%;
+}
+.default-img {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background-color: #E4E4E4;
+  margin-right: 10rpx;
+}
+.chsoe-img-item {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  margin-right: 10rpx;
+}
+.avat-item {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+}
+.arrow-right {
+  width: 32rpx;
+  height: 32rpx;
+}
+.weui-input {
+  text-align: right;
+  padding-right: 20rpx;
+  color: #999;
+  font-size: 26rpx;
+}
+.radio-woman {
+  margin-left: 98rpx;
+}
+.readio-item {
+  width: 33rpx;
+  height: 32rpx;
+  background: #f7f7f7;
+  border-radius: 50%;
+  border: 1rpx solid #D9D9D9;
+  margin-right: 14rpx;
+}
+
+
+.in-cricle {
+  width: 16rpx;
+  height: 16rpx;
+  background-color: #f7f7f7;
+  border-radius: 50%;
+}
+
+.readio-item-active {
+  border-color: #1890FF;
+}
+
+.readio-item-active .in-cricle {
+  background: #1890FF;
+}
+
+.actions-bothday {
+  width: calc(100% - 100rpx);
+  height: 100%;
+}
+.my-picker {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.my-picker .picker-item {
+  width: 500rpx;
+  height: 90rpx;
+  line-height: 90rpx;
+  text-align: right;
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #999999;
+  justify-content: flex-end;
+}
+.picker-text {
+  margin-right: 14rpx;
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #999999;
+}
+.relative-picker {
+  justify-content: flex-end;
+  height: 90rpx;
+}
+.relative-text {
+  font-size: 26rpx;
+  font-weight: 400;
+  color: #999999;
+  margin-right: 16rpx;
+}
+.submit-btn {
+  width: 690rpx;
+  height: 80rpx;
+  border-radius: 10rpx;
+  margin-top: 138rpx;
 }