微信小程序小白前端入门学习记录-友邻小程序（二）

折叠表单的组件开发

此处以发布招募者填写匹配测试的页面作为例子，有兴趣的人可以直接搜索小程序查看页面效果

页面需要实现的功能是：
1.不同模块的问题要分隔开，并通过折叠按钮控制可见与否
2.用户点选答案要有反馈，还需记录用户的答案
3.同时测试中所获取的部分答案要转化为用户的信息，上传至userInfo数据库
3.用户点击提交测试则需要判断用户是否完成了所有的试题，然后上传至testAnswer数据库
4.用户点击自动填写，需判断是否在之前已填写，若是则直接跳转至下一页（功能未上线）

此页面可将填写测试的部分直接封装为组件，因为其将在参与者填写招募时再次复用。以下是WXML的代码：

<view class="form-container" bind:tap="onForm"> 
  <text class="form-title">{{formTitle}}</text>
  <image class="form-icon"  src="{{isshowform ? down_url : up_url}}"></image>
</view>
<block wx:if="{{isshowform}}">
  <view wx:for="{{queslist}}" we:key="{{id}}" wx:for-index="outterIndex" class="question-container">
    <text class="question-content">{{item.id}}.{{item.question}}</text>
    <view wx:for="{{item.answers}}" wx:key="content" bindtap="onAnswer" data-outidx='{{outterIndex}}' data-idx="{{index}}" class="answer-content">
      <view class="{{item.selected?'active':''}}">
        <text>{{item.index}}.</text>
        <text> {{item.content}}</text>
      </view>
    </view>
  </view>
</block>

以下是组件Js的代码

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isshowform:Boolean,
    formTitle:String,
    queslist:Object,
  },
  
  /**
   * 组件的初始数据
   */
  data: {
    up_url:'images/upArrow.png',
    down_url:'images/downArrow.png'
  },

  /**
   * 组件的方法列表
   */
  methods: {
  onForm: function(event){
  let isshowform = this.properties.isshowform
  this.setData({
   isshowform: isshowform? false:true
 })
  },
  //控制表单折叠
  onAnswer:function(event){
  let outidx = event.currentTarget.dataset.outidx;
  let idx = event.currentTarget.dataset.idx;
  let question = this.data.queslist[outidx];
  //找到对应的question
  for (let item of question.answers) {
  item.selected = false;
    }
  //首先对此question中的所有answer的selected属性赋值false
  question.answers[idx].selected = true;
  //对被选中的answer的selected属性赋值true
  this.setData({
      queslist: this.data.queslist
  });
  //对页面数据进行了刷新 

  let {queslist} = this.data;
  //let queslist=this.data.queslist
  let answerSelected = [];
  //用来存储答案的数组
  for (let quesItem of queslist) {
  let isSelected = false;
      for (let answerItem of quesItem.answers)
      if (answerItem.selected) {
      //答案被选中
        isSelected = true;
        answerSelected.push(answerItem.index);
      } 
      if (!isSelected) {
      //如果一个都没选
      answerSelected.push('');
      }
      //将组件的数据传到页面中
    this.triggerEvent('submit', {
      answerSelected
  }, {})
}
  }
}})

以上的内容参考了在我收藏夹中的一些文章
页面中的WXML代码为：

<import src="/template/pageHeader/pageHeader.wxml" />
<view class="container">
      <template is="pageHeader" data="{{imageUrl:imageUrl}}"></template>
       <image class="test-header" src="/images/start-test-header.png"></image>
  <view class="test-container">    
    <block wx:for="{{[0,1,2,3,4,5]}}" wx:for-item="i">
        <foldableForm queslist="{{queslist[i]}}" formTitle="{{formTitle[i]}}" bind:submit="onSubmit" data-idx="{{index}}" >
        </foldableForm>
    </block>
  </view>
     <view class="button-container">
         <view class="button button1" bindtap="auto">
            <text class="text">自动填写</text>
         </view>
         <view class="button button2" bindtap="submit">
            <text class="text">提交测试</text>
         </view>
      </view>
</view>

而页面中JS的代码为：

wx.cloud.init();
const db = wx.cloud.database();
var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    genders:['男','女'],
    jobs:['学生','上班族'],
    ages:['18-22岁','23-25岁','25-30岁','30-35岁'],
    hygiene:['要求高','要求适中','要求低'],
    routine:['早睡早起','晚睡晚起','不固定'],
    age:null,
    job:null,
    gender:null,
    imageUrl:'/images/guide-header/guide-header1.png',
    answer:[],
    isshowform:false,
    formTitle:['基础信息','生活习惯','公共使用','责任分配','费用分摊','沟通交流'],
    queslist:[]
  },
  
  onSubmit:function(event){
  let array= event.detail.answerSelected
  //获取到了从组件中获取的对应题目填写的答案
  let i=event.currentTarget.dataset.idx
  //获取对应模块的id
  var s='answer['+i+']'
  //为下一步answer[i]赋值作铺垫
  this.setData({
   [s]:array
  });
},
  //记录每一个模块的答案[]

 submit:function(event){
  let ans=this.data.answer;
  var that=this;
  var finish=true;
  //声明一个参数判断答题是否完成
  if(ans.length!=0)
  {
   for(var i=0; i<ans.length; i++) 
   {
       for(var j=0; j<ans[i].length; j++)
       {
         if(ans[i][j]==''||ans[i].length==0)
       {  
          finish=false;
          break;
       }
       }
   }
  }
  else{
    finish=false;
  }
  //以上的循环用来判断答题是否全部完成
   if(finish){
    wx.showLoading({
      title: '加载中',
    })
    setTimeout(function () {
      wx.hideLoading({
        success(res) {
          that.answerdb();
          //上传答案
          that.transformdb();
          //将部分答案转为用户信息
          wx.navigateTo({
          url: "/pages/edit/edit"
         });
        }
      })
    }, 2000)
   }
   else{
    wx.showModal
    ({
    title: '无法提交',
    content: '您还有部分题目未完成，请检查后重新提交',
    showCancel: false,
    confirmColor: '#54c98c',
    confirmText: "好的",
    success: function (res) {
      if (res.confirm) 
        console.log('用户点击确定')
      }  
    })
   }
  //显示加载并把数据上传至云数据库
   },
  
  answerdb:function(){
    db.collection('testAnswer').add({
      data: {
      testAnswer: this.data.answer,
      openid:app.globalData.OPEN_ID
      },
      success(res) {
      console.log(res._id);
      },
      fail(res) {
      wx.showToast({
        icon: 'none',
        title: '新增记录失败'
      })
        console.error('[数据库] [新增记录] 失败：', err)
      }
    })
  },
  transformdb:function(){
    var that=this
    var a=that.transChar(that.data.answer[0][0])
    var b=that.transChar(that.data.answer[0][1])
    var c=that.transChar(that.data.answer[0][2])
    var d=that.transChar(that.data.answer[1][0])
    var e=that.transChar(that.data.answer[1][1])
    wx.cloud.callFunction({
      // 需调用的云函数名
      name: 'update',
      // 传给云函数的参数
      data: {
      gender:that.data.genders[a],
      age:that.data.ages[b],
      job:that.data.jobs[c],
      hygiene:that.data.hygiene[d],
      routine:that.data.routine[e]
      },
      // 成功回调
      complete: console.log("调用了云函数")
    })
  },
  transChar:function(val){
   var i;
   if(val=='A'){i=0}
   if(val=='B'){i=1}
   if(val=='C'){i=2}
   if(val=='D'){i=3}
   return i;
  },
  auto:function(){
    wx.showToast({
      icon: 'none',
      title: '此功能未开放，敬请期待'
    })
  }