信息等级调整

pages/basicInformation/basicInformation.js

@@ -1,8 +1,6 @@
 Page({
   data: {
     statusBarHeight: 44, // 导航高度
-    modalY: 0, // 楼栋选择top值
-    unitModalY: 0, // 单元选择top值
     addressList: [{
         buildingId: '1',
         descr: '世界大厦A座'
@@ -35,47 +33,19 @@ Page({
   },
   // 更新当前选择的单元
   setunitItem(e){
-    const index = e.currentTarget.dataset['index'];
     this.setData({
-      unitItem: this.data.unitList[index],
-      unitModalY: 0, // 单元选择top值
-    })
-  },
-  // 更新当前选择的楼栋
-  setAddressItem(e) {
-    const index = e.currentTarget.dataset['index'];
-    this.setData({
-      addressSelectItem: this.data.addressList[index],
-      modalY: 0, // 楼栋选择top值
+      unitItem: this.data.unitList[e.detail.value]
     })
   },
   // 更新门牌号的值
   bindKeyHouseNumber(e) {
 
   },
-  // 获取单元元素信息
-  showSelectUnit(){
-    const _this = this;
-    wx.createSelectorQuery().selectAll('#information-unit-btn-wrap').boundingClientRect(function (rect) {
-      // console.log(rect[0])
-      // 根据按钮位置计算下拉框top值
-      _this.setData({
-        unitModalY: _this.data.unitModalY ? 0 : parseInt(rect[0].top) + parseInt(rect[0].height),
-        modalY:0
-      })
-    }).exec()
-  },
-  // 获取楼栋元素信息
-  showSelectAddress(e) {
-    const _this = this;
-    wx.createSelectorQuery().selectAll('#information-address-btn-wrap').boundingClientRect(function (rect) {
-      // console.log(rect[0])
-      // 根据按钮位置计算下拉框top值
-      _this.setData({
-        modalY: _this.data.modalY ? 0 : parseInt(rect[0].top) + parseInt(rect[0].height),
-        unitModalY:0
-      })
-    }).exec()
+  // 更新选择的楼栋
+  bindPickerChange(e) {
+    this.setData({
+      addressSelectItem: this.data.addressList[e.detail.value]
+    })
   },
   onLoad() {
     const _this = this;
@@ -83,7 +53,6 @@ Page({
     let systemInfo = wx.getSystemInfoSync();
     // 获取信号区高度, 并设置标题高度
     let statusBarHeight = systemInfo['statusBarHeight'];
-    // console.log(systemInfo.platform);
     if (systemInfo.platform === 'andorid') {
       statusBarHeight = statusBarHeight + 10;
     } else if (systemInfo.platform === 'ios') {

pages/basicInformation/basicInformation.wxml

@@ -20,21 +20,10 @@
           <view class="information-title">请选择您的楼栋：</view>
           <view class="information-address-wrap">
             <view class="information-address-btn-wrap" id="information-address-btn-wrap">
-              <button class="information-address-btn" type="default" plain
-                bindtap="showSelectAddress">{{addressSelectItem.descr}}</button>
-              <image class="information-address-icon"
-                src="http://8.140.133.55:8096/public/uploadfile/select-address-down.png"></image>
-            </view>
-            <view class="information-address-select-wrap"
-              style="top: {{modalY}}px; display: {{modalY ? 'block':'none'}}">
-              <view class="information-address-select-bg-wrap">
-                <view class="information-address-select-content-wrap">
-                  <view wx:for="{{addressList}}" wx:key="index" data-index="{{index}}" bindtap="setAddressItem"
-                    class="information-address-list {{addressSelectItem.buildingId===item.buildingId? 'information-address-list-select' : ''}}">
-                    {{item.descr}}
-                  </view>
-                </view>
-              </view>
+              <picker bindchange="bindPickerChange" range="{{addressList}}" range-key="descr">
+                <button class="information-address-btn" type="default" plain >{{addressSelectItem.descr}}</button>
+              <image class="information-address-icon" src="http://8.140.133.55:8096/public/uploadfile/select-address-down.png" />
+              </picker>
             </view>
           </view>
         </view>
@@ -42,21 +31,10 @@
           <view class="information-title">请选择您的单元：</view>
           <view class="information-address-wrap">
             <view class="information-address-btn-wrap" id="information-unit-btn-wrap">
-              <button class="information-address-btn" type="default" plain
-                bindtap="showSelectUnit">{{unitItem.descr}}</button>
-              <image class="information-address-icon"
-                src="http://8.140.133.55:8096/public/uploadfile/select-address-down.png"></image>
-            </view>
-            <view class="information-address-select-wrap"
-              style="top: {{unitModalY}}px; display: {{unitModalY ? 'block':'none'}}">
-              <view class="information-unit-select-bg-wrap">
-                <view class="information-address-select-content-wrap">
-                  <view wx:for="{{unitList}}" wx:key="index" data-index="{{index}}" bindtap="setunitItem"
-                    class="information-address-list {{unitItem.buildingId===item.buildingId? 'information-address-list-select' : ''}}">
-                    {{item.descr}}
-                  </view>
-                </view>
-              </view>
+              <picker bindchange="setunitItem" range="{{unitList}}" range-key="descr">
+                <button class="information-address-btn" type="default" plain>{{unitItem.descr}}</button>
+              <image class="information-address-icon" src="http://8.140.133.55:8096/public/uploadfile/select-address-down.png" />
+              </picker>
             </view>
           </view>
         </view>
@@ -74,4 +52,5 @@
       </view>
     </view>
   </view>
+
 </view>

pages/basicInformation/basicInformation.wxss

@@ -39,7 +39,7 @@
   width: 100%;
   height: 100%;
   box-sizing: border-box;
-  padding-top: 354rpx;
+  padding-top: 320rpx;
   padding-bottom: 200rpx;
   background: #fff;
   border-radius: 32px 32px 0px 0px;
@@ -48,7 +48,7 @@
 /* 用户基本信息 */
 .user-details{
   position: absolute;
-  top: 132rpx;
+  top: 96rpx;
   left: 0;
   width: 100%;
   height: 200rpx;
@@ -73,7 +73,7 @@
 }
 .information-wrap{
   width: 100%;
-  margin-bottom: 72rpx;
+  margin-bottom: 48rpx;
 }
 .information-title{
   font-size: 32rpx;
@@ -100,6 +100,7 @@
   color: #333333 !important;
   font-weight: 500 !important;
   text-align: left;
+  font-size: 32rpx;
   padding-left: 26rpx;
   background: #FAFAFA !important;
 }
@@ -110,75 +111,26 @@
   width: 32rpx;
   height: 32rpx;
 }
-.information-address-select-wrap{
-  position: fixed;
-  left: 0;
-  width: 100%;
-  z-index: 3;
-  display: none;
-  background: #fff;
-  box-sizing: border-box;
-  padding-bottom: 10rpx;
-  overflow: hidden;
-}
-.information-address-select-bg-wrap{
-  width: calc( 100vw - 26rpx );
-  height: 430rpx;
-  box-sizing: border-box;
-  padding: 10rpx 34rpx;
-  padding-top: 32rpx;
-  margin-left: 13rpx;
-  background: url("http://8.140.133.55:8096/public/uploadfile/address-bg.png") no-repeat;
-  background-size: 100% 477rpx;
-}
-/* unit-bg.png */
-.information-unit-select-bg-wrap{
-  width: calc( 100vw - 26rpx );
-  height: 215rpx;
-  box-sizing: border-box;
-  padding: 10rpx 34rpx;
-  padding-top: 32rpx;
-  margin-left: 13rpx;
-  background: url("http://8.140.133.55:8096/public/uploadfile/unit-bg.png") no-repeat;
-  background-size: 100% 262rpx;
-}
-.information-address-select-content-wrap{
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-}
-.information-address-list{
-  position: relative;
-  width: 100%;
-  height: 100rpx;
-  font-size: 32rpx;
-  font-family: PingFang-SC-Medium, PingFang-SC;
-  font-weight: 500;
-  color: #333333;
-  line-height: 100rpx;
-  text-shadow: 0 16rpx 32rpx rgba(0, 0, 0, 0.08);
-  box-sizing: border-box;
-  padding: 0 26rpx;
-}
-
-.information-address-list-select{
-  background: #F0F1F3;
-}
-
 .information-title-text{
   float: left;
-  width: 46%;
+  width: 48%;
+  height: 44rpx;
+  font-size: 32rpx;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #727373;
+  line-height: 44rpx;
 }
 .information-title-input{
   float: right;
-  width: 53%;
-  height: 56rpx;
-  line-height: 56rpx;
-  border-bottom: 1px solid #DDDDDD;
-  margin-bottom: 50rpx;
-  color: #333333;
-  font-weight: 500;
+  width: 51%;
+  height: 50rpx;
+  line-height: 50rpx;
   font-size: 32rpx;
+  font-family: PingFang-SC-Medium, PingFang-SC;
+  font-weight: 500;
+  color: #333333;
+  border-bottom: 1px solid #DDDDDD;
 }
 /* title */
 .content-details-title{