信息登记页面调整

pages/basicInformation/basicInformation.js

@@ -2,89 +2,83 @@ Page({
   data: {
     statusBarHeight: 44, // 导航高度
     modalY: 0, // 楼栋选择top值
-    addressList:[
-      {buildingId:'1', descr: '世界大厦1#1-1-1'},
-      {buildingId:'2', descr: '世界大厦1#1-1-2'},
-      {buildingId:'3', descr: '世界大厦1#1-1-3'},
-      {buildingId:'4', descr: '世界大厦1#1-2-1'},
-      {buildingId:'5', descr: '世界大厦1#1-2-2'},
-      {buildingId:'6', descr: '世界大厦1#1-2-3'},
-      {buildingId:'7', descr: '世界大厦1#1-3-1'},
-      {buildingId:'8', descr: '世界大厦1#1-3-2'},
-      {buildingId:'9', descr: '世界大厦1#1-3-3'},
-      {buildingId:'10', descr: '世界大厦1#1-4-1'},
-      {buildingId:'11', descr: '世界大厦1#1-4-2'},
-      {buildingId:'12', descr: '世界大厦1#1-4-3'}
+    unitModalY: 0, // 单元选择top值
+    addressList: [{
+        buildingId: '1',
+        descr: '世界大厦A座'
+      },
+      {
+        buildingId: '2',
+        descr: '世界大厦B座'
+      },
+      {
+        buildingId: '3',
+        descr: '其他'
+      }
     ], // 楼栋列表
-    addressSelectIndex:'', // 当前选择楼栋对应下标， 用下标解决第一个被选中时样式特殊处理
-    addressSelectItem:{}, // 当道选择的楼栋对象
-    addressOne: "", // 第一个地址输入框的值
-    addressTwo: "", // 第二个地址输入框的值
-    addressOneLength: 0, // 第一个地址输入框可输入字符个数
-    focusNumber: 0, // 地址输入框获得焦点时的位置
-    focusIndex: '', // 确定第几个地址输入获得光标 one-第一个， two-第二个
+    unitList: [{
+      buildingId: '1',
+      descr: '1单元'
+    },
+    {
+      buildingId: '2',
+      descr: '2单元'
+    },
+    {
+      buildingId: '3',
+      descr: '其他'
+    }
+  ], // 楼栋列表
+    addressSelectItem: {}, // 当道选择的楼栋对象
+    unitItem: {}, // 单元号
+    houseNumber: "", // 门牌号
   },
-  // 更新当前选择的楼栋
-  setAddressItem(e){
-    const index=e.currentTarget.dataset['index'];
+  // 更新当前选择的单元
+  setunitItem(e){
+    const index = e.currentTarget.dataset['index'];
     this.setData({
-      addressSelectIndex:index, // 当前选择楼栋对应下标， 用下标解决第一个被选中时样式特殊处理
-      addressSelectItem:this.data.addressList[index], // 当道选择的楼栋对象
-      modalY: 0, // 楼栋选择top值
+      unitItem: this.data.unitList[index],
+      unitModalY: 0, // 单元选择top值
     })
   },
-  // 更新第一个输入框的值
-  bindKeyAddressOne(e) {
-    // 去空格，拼接字符串，拼接做特殊处理，防止字符串拼接错乱
-    const value = (e.detail.value.substring(0, this.data.addressOneLength) + this.data.addressTwo + e.detail.value.substring(this.data.addressOneLength)).replace(/\s/g, "");
-    let focusNumber = 0;
-    if (value.substring(this.data.addressOneLength).length) {
-      focusNumber = value.substring(this.data.addressOneLength).length
-    }
+  // 更新当前选择的楼栋
+  setAddressItem(e) {
+    const index = e.currentTarget.dataset['index'];
     this.setData({
-      addressOne: value.substring(0, this.data.addressOneLength),
-      addressTwo: value.substring(this.data.addressOneLength),
-      focusNumber,
-      focusIndex: value.substring(0, this.data.addressOneLength).length>=this.data.addressOneLength?'two':'one'
+      addressSelectItem: this.data.addressList[index],
+      modalY: 0, // 楼栋选择top值
     })
   },
-  // 更新第二个输入框的值
-  bindKeyAddressTwo(e) {
-    // 去空格，拼接字符串
-    const value = this.data.addressOne + e.detail.value.replace(/\s/g, "");
-    let focusNumber = 0;
-    if (e.detail.value.replace(/\s/g, "").length) {
-      focusNumber = e.detail.value.replace(/\s/g, "").length
-    } else {
-      focusNumber = this.data.addressOne.length
-    }
-    this.setData({
-      addressOne: value.substring(0, this.data.addressOneLength),
-      addressTwo: value.substring(this.data.addressOneLength),
-      focusNumber,
-      focusIndex: e.detail.value.replace(/\s/g, "").length?'two':'one'
-    })
+  // 更新门牌号的值
+  bindKeyHouseNumber(e) {
+
   },
-  // 获取元素信息
-  showSelectAddress(e) {
+  // 获取单元元素信息
+  showSelectUnit(){
     const _this = this;
-    wx.createSelectorQuery().selectAll('#information-address-btn-wrap').boundingClientRect(function (rect) {
+    wx.createSelectorQuery().selectAll('#information-unit-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: _this.data.unitModalY ? 0 : parseInt(rect[0].top) + parseInt(rect[0].height),
+        modalY:0
       })
     }).exec()
   },
-  onLoad() {
-    const _this=this;
-    // 计算第一个地址输入框可视范围内能输入字符串的个数
-    wx.createSelectorQuery().selectAll('.information-title-input').boundingClientRect(function (rect) {
+  // 获取楼栋元素信息
+  showSelectAddress(e) {
+    const _this = this;
+    wx.createSelectorQuery().selectAll('#information-address-btn-wrap').boundingClientRect(function (rect) {
       // console.log(rect[0])
+      // 根据按钮位置计算下拉框top值
       _this.setData({
-        addressOneLength: parseInt(rect[0].width/16)
+        modalY: _this.data.modalY ? 0 : parseInt(rect[0].top) + parseInt(rect[0].height),
+        unitModalY:0
       })
-    }).exec();
+    }).exec()
+  },
+  onLoad() {
+    const _this = this;
     // 获取设备的信息  
     let systemInfo = wx.getSystemInfoSync();
     // 获取信号区高度, 并设置标题高度

pages/basicInformation/basicInformation.wxml

@@ -30,8 +30,30 @@
               <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 {{addressSelectIndex===index? 'information-address-list-select' : ''}}">
-                  {{item.descr}}
+                    class="information-address-list {{addressSelectItem.buildingId===item.buildingId? 'information-address-list-select' : ''}}">
+                    {{item.descr}}
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="information-wrap">
+          <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>
@@ -41,15 +63,14 @@
         <view class="information-wrap">
           <view class="information-title">
             <view class="information-title-text">请输入您的门牌号：</view>
-            <input class="weui-input information-title-input" cursor="{{focusNumber}}" focus="{{focusIndex==='one'}}"
-              bindinput="bindKeyAddressOne" value="{{addressOne}}" />
+            <input class="weui-input information-title-input" bindinput="bindKeyHouseNumber" maxlength="10" value="{{houseNumber}}" />
           </view>
-          <input class="weui-input information-title-input-two" cursor="{{focusNumber}}" focus="{{focusIndex==='two'}}"
-            maxlength="19" bindinput="bindKeyAddressTwo" value="{{addressTwo}}" />
         </view>
       </view>
       <view class="content-details-btn-wrap">
-        <button class="content-details-btn" disabled="{{(addressSelectIndex != '' || addressOne || addressTwo) ? false:true}}" type="primary" bindtap="getUserProfile"> 开始答题 </button>
+        <button class="content-details-btn"
+          disabled="{{(addressSelectItem.buildingId && unitItem.buildingId ) ? false:true}}" type="primary"
+          bindtap="getUserProfile"> 开始答题 </button>
       </view>
     </view>
   </view>

pages/basicInformation/basicInformation.wxss

@@ -131,6 +131,17 @@
   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%;
@@ -169,15 +180,6 @@
   font-weight: 500;
   font-size: 32rpx;
 }
-.information-title-input-two{
-  width: 100%;
-  height: 56rpx;
-  line-height: 56rpx;
-  border-bottom: 1px solid #DDDDDD;
-  font-weight: 500;
-  color: #333333;
-  font-size: 32rpx;
-}
 /* title */
 .content-details-title{
   position: absolute;

pages/questionnaire/questionnaire.js

@@ -2,7 +2,7 @@ Page({
   data: {
     statusBarHeight: 44, // 导航高度
     questionnaireList: [{
-      questionnaireDesc: '请您对物业管理公司提供的整体服务评分？',
+      questionnaireDesc: '请您对物业管理公司提供的整体服务评分?',
       questionnaireOptionList: [{
           optionid: 'E',
           optiontext: '非常不满意'
@@ -27,7 +27,7 @@ Page({
       subjecttype: '单选题',
       questionNaireItem: {}
     }, {
-      questionnaireDesc: '请您对物业管理公司提供的整体服务评分？',
+      questionnaireDesc: '请您对物业管理公司提供的整体服务评分?',
       questionnaireOptionList: [{
           optionid: 'E',
           optiontext: '非常不满意'
@@ -52,7 +52,7 @@ Page({
       subjecttype: '单选题',
       questionNaireItem: {}
     }, {
-      questionnaireDesc: '请您对物业管理公司提供的整体服务评分？',
+      questionnaireDesc: '请您对物业管理公司提供的整体服务评分?',
       questionnaireOptionList: [{
           optionid: 'E',
           optiontext: '非常不满意'
@@ -77,7 +77,7 @@ Page({
       subjecttype: '单选题',
       questionNaireItem: {}
     }, {
-      questionnaireDesc: '请您对物业管理公司提供的整体服务评分？',
+      questionnaireDesc: '请您对物业管理公司提供的整体服务评分?',
       questionnaireOptionList: [{
           optionid: 'E',
           optiontext: '非常不满意'
@@ -102,7 +102,7 @@ Page({
       subjecttype: '单选题',
       questionNaireItem: {}
     }, {
-      questionnaireDesc: '请您对物业管理公司提供的整体服务评分？',
+      questionnaireDesc: '请您对物业管理公司提供的整体服务评分?',
       questionnaireOptionList: [{
           optionid: 'E',
           optiontext: '非常不满意'
@@ -127,7 +127,7 @@ Page({
       subjecttype: '单选题',
       questionNaireItem: {}
     }, {
-      questionnaireDesc: '请您对物业管理公司提供的整体服务评分？',
+      questionnaireDesc: '请您对物业管理公司提供的整体服务评分?',
       questionnaireOptionList: [{
           optionid: 'E',
           optiontext: '非常不满意'
@@ -152,7 +152,7 @@ Page({
       subjecttype: '单选题',
       questionNaireItem: {}
     },{
-      questionnaireDesc: '请您对物业管理公司提供的整体服务评分？',
+      questionnaireDesc: '请您对物业管理公司提供的整体服务评分?',
       questionnaireOptionList: [{
           optionid: 'E',
           optiontext: '非常不满意'

pages/questionnaire/questionnaire.wxss

@@ -71,25 +71,30 @@
 .content-details-content-wrap{
   width: 100%;
   height: 100%;
-  box-sizing: border-box;
-  padding: 0 34rpx;
+  
 }
 .content-details-list{
   width: 100%;
+  box-sizing: border-box;
+  padding: 0 34rpx;
   margin-bottom: 96rpx;
+  overflow: hidden;
+  clear: both;
 }
 .content-details-list-title{
   width: 100%;
+  font-size: 32rpx;
   margin-bottom: 48rpx;
 }
 .content-details-list-title-not{
   color: #DC605C;
 }
 .content-details-field{
+  float: left;
   margin-left: 32rpx;
 }
 .content-details-result{
-  float: right;
+  float: left;
   color: #727373;
   font-size: 28rpx;
   font-family: PingFang-SC-Medium, PingFang-SC;