答题界面逻辑交互

app.json

@@ -2,7 +2,6 @@
   "pages": [
     "pages/basicInformation/basicInformation",
     "pages/authorization/authorization",
-    
     "pages/questionnaire/questionnaire",
     "pages/answercomplete/answercomplete",
     "pages/pagefailure/pagefailure"

pages/basicInformation/basicInformation.wxml

@@ -49,7 +49,7 @@
         </view>
       </view>
       <view class="content-details-btn-wrap">
-        <button class="content-details-btn" type="primary" bindtap="getUserProfile"> 开始答题 </button>
+        <button class="content-details-btn" disabled="{{(addressSelectIndex != '' || addressOne || addressTwo) ? false:true}}" type="primary" bindtap="getUserProfile"> 开始答题 </button>
       </view>
     </view>
   </view>

pages/basicInformation/basicInformation.wxss

@@ -217,4 +217,8 @@
   line-height: 100rpx;
   margin-top: 32rpx;
   padding: 0 !important;
-}
+}
+.content-details-btn[disabled][type='primary'] {
+  color: #fff;
+  background: rgba(0, 0, 0, 0.16) !important;
+}

pages/questionnaire/questionnaire.js

@@ -1,23 +1,259 @@
 Page({
   data: {
-    statusBarHeight: 44
+    statusBarHeight: 44, // 导航高度
+    questionnaireList: [{
+      questionnaireDesc: '请您对物业管理公司提供的整体服务评分？',
+      questionnaireOptionList: [{
+          optionid: 'E',
+          optiontext: '非常不满意'
+        },
+        {
+          optionid: 'D',
+          optiontext: '不满意'
+        },
+        {
+          optionid: 'C',
+          optiontext: '一般'
+        },
+        {
+          optionid: 'B',
+          optiontext: '满意'
+        },
+        {
+          optionid: 'A',
+          optiontext: '非常满意'
+        }
+      ],
+      subjecttype: '单选题',
+      questionNaireItem: {}
+    }, {
+      questionnaireDesc: '请您对物业管理公司提供的整体服务评分？',
+      questionnaireOptionList: [{
+          optionid: 'E',
+          optiontext: '非常不满意'
+        },
+        {
+          optionid: 'D',
+          optiontext: '不满意'
+        },
+        {
+          optionid: 'C',
+          optiontext: '一般'
+        },
+        {
+          optionid: 'B',
+          optiontext: '满意'
+        },
+        {
+          optionid: 'A',
+          optiontext: '非常满意'
+        }
+      ],
+      subjecttype: '单选题',
+      questionNaireItem: {}
+    }, {
+      questionnaireDesc: '请您对物业管理公司提供的整体服务评分？',
+      questionnaireOptionList: [{
+          optionid: 'E',
+          optiontext: '非常不满意'
+        },
+        {
+          optionid: 'D',
+          optiontext: '不满意'
+        },
+        {
+          optionid: 'C',
+          optiontext: '一般'
+        },
+        {
+          optionid: 'B',
+          optiontext: '满意'
+        },
+        {
+          optionid: 'A',
+          optiontext: '非常满意'
+        }
+      ],
+      subjecttype: '单选题',
+      questionNaireItem: {}
+    }, {
+      questionnaireDesc: '请您对物业管理公司提供的整体服务评分？',
+      questionnaireOptionList: [{
+          optionid: 'E',
+          optiontext: '非常不满意'
+        },
+        {
+          optionid: 'D',
+          optiontext: '不满意'
+        },
+        {
+          optionid: 'C',
+          optiontext: '一般'
+        },
+        {
+          optionid: 'B',
+          optiontext: '满意'
+        },
+        {
+          optionid: 'A',
+          optiontext: '非常满意'
+        }
+      ],
+      subjecttype: '单选题',
+      questionNaireItem: {}
+    }, {
+      questionnaireDesc: '请您对物业管理公司提供的整体服务评分？',
+      questionnaireOptionList: [{
+          optionid: 'E',
+          optiontext: '非常不满意'
+        },
+        {
+          optionid: 'D',
+          optiontext: '不满意'
+        },
+        {
+          optionid: 'C',
+          optiontext: '一般'
+        },
+        {
+          optionid: 'B',
+          optiontext: '满意'
+        },
+        {
+          optionid: 'A',
+          optiontext: '非常满意'
+        }
+      ],
+      subjecttype: '单选题',
+      questionNaireItem: {}
+    }, {
+      questionnaireDesc: '请您对物业管理公司提供的整体服务评分？',
+      questionnaireOptionList: [{
+          optionid: 'E',
+          optiontext: '非常不满意'
+        },
+        {
+          optionid: 'D',
+          optiontext: '不满意'
+        },
+        {
+          optionid: 'C',
+          optiontext: '一般'
+        },
+        {
+          optionid: 'B',
+          optiontext: '满意'
+        },
+        {
+          optionid: 'A',
+          optiontext: '非常满意'
+        }
+      ],
+      subjecttype: '单选题',
+      questionNaireItem: {}
+    },{
+      questionnaireDesc: '请您对物业管理公司提供的整体服务评分？',
+      questionnaireOptionList: [{
+          optionid: 'E',
+          optiontext: '非常不满意'
+        },
+        {
+          optionid: 'D',
+          optiontext: '不满意'
+        },
+        {
+          optionid: 'C',
+          optiontext: '一般'
+        },
+        {
+          optionid: 'B',
+          optiontext: '满意'
+        },
+        {
+          optionid: 'A',
+          optiontext: '非常满意'
+        }
+      ],
+      subjecttype: '单选题',
+      questionNaireItem: {}
+    }, {
+      questionnaireDesc: '请您对物业管理公司提供的整体服务评分',
+      subjecttype: '简述题',
+      questionNaireItem: {}
+      // #FFAE00
+    }], // 题目列表
+    isCalibrationScore: false, // 是否开启评分校验
+    scrollTop: 0
+  },
+  // 所有题目完成后跳转至答题完成页面
+  getUserProfile() {
+    const _this = this;
+    // 开启校验
+    _this.setData({
+      isCalibrationScore: true
+    })
+    // 校验是否有未答题项，如果有则滚动至第一个未答题项目位置
+    const filterIndex = _this.data.questionnaireList.findIndex(e => !e.questionNaireItem.optiontext)
+    if (filterIndex > -1) {
+      wx.createSelectorQuery().selectAll('.content-details-list').boundingClientRect(function (rect) {
+        const domList = rect.filter((e, index) => index < filterIndex);
+        console.log(domList);
+        _this.setData({
+          scrollTop: domList.reduce(function (sum, item) { //sum2 前两个数的和
+            return sum + (item.height+48); // 48代表元素margin-bottom值的一半
+          }, 0)
+        })
+      }).exec()
+      return false;
+    }
+    // 提交问卷成功，跳转至答题完成页面
+    wx.reLaunch({
+      url: '/pages/answercomplete/answercomplete'
+    })
+  },
+  // 更新开放性问题输入的值
+  setGradeValue(e) {
+    const index = e.currentTarget.dataset['index'];
+    if (e.detail.value.replace(/\s/g, "")) {
+      this.data.questionnaireList[index].questionNaireItem = {
+        optionid: true,
+        optiontext: e.detail.value.replace(/\s/g, "")
+      };
+    } else {
+      this.data.questionnaireList[index].questionNaireItem = {
+        optionid: false,
+        optiontext: ""
+      };
+    }
+    this.setData({
+      questionnaireList: [...this.data.questionnaireList]
+    })
+  },
+  // 更新评分
+  setGrade(e) {
+    const index = e.currentTarget.dataset['index'];
+    const item = e.currentTarget.dataset['value'];
+    this.data.questionnaireList[index].questionNaireItem = item;
+    this.setData({
+      questionnaireList: [...this.data.questionnaireList]
+    })
   },
   // 返回信息登记页面
-  navigateBack(){
+  navigateBack() {
     wx.navigateBack({
       delta: 1
     })
   },
-  onLoad(){
+  onLoad() {
     // 获取设备的信息  
     let systemInfo = wx.getSystemInfoSync();
     // 获取信号区高度, 并设置标题高度
     let statusBarHeight = systemInfo['statusBarHeight']
-    if (systemInfo.platform === 'andorid' ) {
-      statusBarHeight = statusBarHeight+1;
-    }else if (systemInfo.platform === 'ios') {
-      statusBarHeight = statusBarHeight+6;
-    }else{
+    if (systemInfo.platform === 'andorid') {
+      statusBarHeight = statusBarHeight + 1;
+    } else if (systemInfo.platform === 'ios') {
+      statusBarHeight = statusBarHeight + 6;
+    } else {
       statusBarHeight = statusBarHeight;
     }
     this.setData({
@@ -30,10 +266,10 @@ Page({
           // 必须是在用户已经授权的情况下调用
           wx.getUserInfo({
             success: function (res) {
-              console.log(res)
+              // console.log(res)
             }
           })
-        }else{
+        } else {
           // 如果未授权则关闭所有页面，跳转至授权登录页
           wx.reLaunch({
             url: '/pages/authorization/authorization'
@@ -42,13 +278,6 @@ Page({
       }
     });
   },
-  // 跳转至答题完成页面
-  getUserProfile() {
-    // 提交问卷成功，跳转至答题完成页面
-    wx.reLaunch({
-      url: '/pages/answercomplete/answercomplete'
-    })
-  },
   // 分享朋友
   onShareAppMessage: (res) => {
     return {

pages/questionnaire/questionnaire.wxml

@@ -1,73 +1,33 @@
 <!--基础信息维护-->
 <view class="questionnaire">
-    <view class="questionnaire-title-wrap">
-      <view class="questionnaire-title" style="top:{{statusBarHeight}}px">问卷调查</view>
-      <mp-icon class="navigateBack" bindtap="navigateBack" icon="back" style="top:{{statusBarHeight}}px" type="field" color="#fff" size="{{14}}"></mp-icon>
-    </view>
-    <view class="content-wrap">
-      <view class="content-details-wrap">
-        
-        <view class="content-details-title">问卷调查</view>
-        <view class="content-details-content-wrap">
+  <view class="questionnaire-title-wrap">
+    <view class="questionnaire-title" style="top:{{statusBarHeight}}px">问卷调查</view>
+    <mp-icon class="navigateBack" bindtap="navigateBack" icon="back" style="top:{{statusBarHeight}}px" type="field"
+      color="#fff" size="{{14}}"></mp-icon>
+  </view>
+  <view class="content-wrap">
+    <view class="content-details-wrap">
+      <view class="content-details-title">问卷调查</view>
+        <scroll-view class="content-details-content-wrap" scroll-with-animation scroll-y="true" scroll-top="{{scrollTop}}">
           <!-- 问卷列表 -->
-          <view class="content-details-list">
-            <view class="content-details-list-title">1、请您对物业管理公司提供的整体服务评分？</view>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <span class="content-details-result">非常满意</span>
-          </view>
-          <view class="content-details-list">
-            <view class="content-details-list-title">1、请您对物业管理公司提供的整体服务评分请您对物业管理公司提供的整体服务评分？</view>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <span class="content-details-result">非常满意</span>
-          </view>
-          <view class="content-details-list">
-            <view class="content-details-list-title">1、请您对物业管理公司提供的整体服务评分？</view>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <span class="content-details-result">非常满意</span>
-          </view>
-          <view class="content-details-list">
-            <view class="content-details-list-title">1、请您对物业管理公司提供的整体服务评分？</view>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <span class="content-details-result">非常满意</span>
-          </view>
-          <view class="content-details-list">
-            <view class="content-details-list-title">1、请您对物业管理公司提供的整体服务评分？</view>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <span class="content-details-result">非常满意</span>
-          </view>
-          <view class="content-details-list">
-            <view class="content-details-list-title">1、请您对物业管理公司提供的整体服务评分？</view>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <mp-icon class="content-details-field" icon="star" type="field" color="#FFAE00" size="{{26}}"></mp-icon>
-            <span class="content-details-result">非常满意</span>
+          <view class="content-details-list" wx:for="{{questionnaireList}}" wx:key="index" wx:for-index="parentTndex">
+            <view
+              class="content-details-list-title {{isCalibrationScore && !item.questionNaireItem.optiontext? 'content-details-list-title-not' : ''}}">
+              {{parentTndex+1}}、{{item.questionnaireDesc}}</view>
+            <mp-icon wx:if="{{item.subjecttype=='单选题'}}" wx:for="{{item.questionnaireOptionList}}" wx:for-item="grade"
+              wx:key="index" bindtap="setGrade" data-index="{{parentTndex}}" data-value="{{grade}}"
+              class="content-details-field" icon="star" type="field"
+              color="{{grade.optionid >= item.questionNaireItem.optionid?'#FFAE00':'#D8D8D8'}}" size="{{26}}"></mp-icon>
+            <span wx:if="{{item.subjecttype=='单选题'}}"
+              class="content-details-result">{{item.questionNaireItem.optiontext}}</span>
+            <textarea wx:else bindinput="setGradeValue" data-index="{{parentTndex}}"
+              value="{{item.questionNaireItem.optiontext}}" class="questionnaire-textarea" maxlength="100" />
           </view>
-        </view>
-        <view class="content-details-btn-wrap">
-          <button class="content-details-btn" type="primary" bindtap="getUserProfile"> 提交问卷 </button>
-        </view>
+        </scroll-view>
+      
+      <view class="content-details-btn-wrap">
+        <button class="content-details-btn" type="primary" bindtap="getUserProfile"> 提交问卷 </button>
       </view>
     </view>
+  </view>
 </view>

pages/questionnaire/questionnaire.wxss

@@ -71,7 +71,6 @@
 .content-details-content-wrap{
   width: 100%;
   height: 100%;
-  overflow-y: auto;
   box-sizing: border-box;
   padding: 0 34rpx;
 }
@@ -83,15 +82,28 @@
   width: 100%;
   margin-bottom: 48rpx;
 }
+.content-details-list-title-not{
+  color: #DC605C;
+}
 .content-details-field{
   margin-left: 32rpx;
 }
 .content-details-result{
+  float: right;
   color: #727373;
   font-size: 28rpx;
   font-family: PingFang-SC-Medium, PingFang-SC;
   line-height: 40rpx;
   margin-left: 32rpx;
+  margin-top: 15rpx;
+}
+.questionnaire-textarea{
+  width: 100%;
+  height: 310rpx;
+  border-radius: 8rpx;
+  box-sizing: border-box;
+  padding: 5rpx 19rpx;
+  border: 1px solid #D8D8D8;
 }
 /* 底部提交按钮 */
 .content-details-btn-wrap{