pref: optimize the filling style of user information

pages/permisission/permission.js

@@ -8,7 +8,8 @@ Page({
     phoneLoading: false,
     showCreateForm: true,
     createForm: null,
-    date: '',
+    pickerText: '请选择',
+    logoImgSrc: '../../imaes/logo1@2x.png',
     sexList: [
       {
         id: 1,
@@ -35,7 +36,19 @@ Page({
   onShow() {
 
   },
-
+  handleChooseMedia () {
+    var itt = this
+    wx.chooseMedia({
+      count: 1,
+      mediaType: ['image'],
+      sourceType: ['album'],
+      success(res) {
+        itt.setData({
+          logoImgSrc: res.tempFiles[0].tempFilePath
+        })
+      }
+    })
+  },
   /**
    * 获取用户手机号权限
    */
@@ -65,7 +78,7 @@ Page({
   bindDateChange (e) {
     console.log(e);
     this.setData({
-      date: e.detail.value
+      pickerText: e.detail.value
     })
   },
   handleSex (e) {
@@ -81,9 +94,7 @@ Page({
     setTimeout(() => {
       wx.hideLoading({
         success: (res) => {
-          wx.reLaunch({
-            url: '/pages/index/index',
-          })
+          
         }
       })
     }, 1000);

pages/permisission/permission.wxml

@@ -7,20 +7,23 @@
   <block wx:else>
     <view class="form-box">
       <view class="avatar">
-        <view class="img-item"></view>
+        <view class="img-item" bindtap="handleChooseMedia">
+          <image class="logo-img" src="{{logoImgSrc}}"></image>
+        </view>
       </view>
       <view class="form">
         <view class="form-item username">
           <view class="title">真实姓名：</view>
           <view class="username-input">
-            <input class="weui-input" style="width:270px;" placeholder="请输入" placeholder-style="font-size: 26rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #999999;text-align:right"/>
+            <input class="weui-input" style="width:270rpx;" placeholder="请输入" placeholder-style="font-size: 26rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #999999;text-align:right"/>
           </view>
         </view>
         <view class="form-item form-item-date date">
           <view class="title">生日：</view>
-          <view class="chose-date">{{date}}</view>
-          <picker class="chose-date-picker" mode="date" value="{{date}}" bindchange="bindDateChange">
-            <view class="picker">请选择</view>
+          <picker class="my-picker" mode="date" bindchange="bindDateChange">
+            <view class="picker-item ittflex">
+              <text class="picker-text">{{pickerText}}</text>
+            </view>
           </picker>
         </view>
         <view class="form-item sex">

pages/permisission/permission.wxss

@@ -27,7 +27,11 @@
 .img-item {
   width: 160rpx;
   height: 160rpx;
-  background-color: var(--maincolor);
+  border-radius: 50%;
+}
+.logo-img {
+  width: 160rpx;
+  height: 160rpx;
   border-radius: 50%;
 }
 .form {
@@ -41,16 +45,12 @@
   position: relative;
   border-bottom:1px solid #E4E4E4;
   display: flex;
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
 }
-.chose-date-picker {
-  position: absolute;
-  right: 20rpx;
-}
-.form-item .title {
+.title {
+  width: 320rpx;
   font-size: 26rpx;
-  font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #333333;
 }
@@ -59,25 +59,31 @@
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #333333;
+  text-align: right;
+  padding-right: 20rpx;
 }
-.picker {
+.my-picker {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+.my-picker .picker-item {
+  width: 300rpx;
+  height: 90rpx;
+  line-height: 90rpx;
+  text-align: right;
   font-size: 26rpx;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
   font-weight: 400;
   color: #999999;
+  justify-content: flex-end;
 }
-.form-item .chose-date {
-  width: 400rpx;
-  height: 100%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
+.picker-text {
+  margin-right: 14rpx;
   font-size: 26rpx;
-  font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
-  color: #333333;
-  margin-left: 26rpx;
+  color: #999999;
 }
 .radio {
   display: flex;