小程序答题选择题

小程序选择题

点击后进入下一题

wxml

<view class="option" wx:for="{{dataInfo}}" wx:for-item="item">
  <view class="{{uhide==item.id?'':'hidden'}}" >
    <!--题目-->
    <view style="font-size:24px;font-weight:bold">{{item.id}}.{{item.title}}</view>
    <!--选项-->
    <view wx:for="{{item.option}}" wx:for-item="itemed">
      <view class='xue {{itemed.checked?"xued":""}}' data-id="{{item.id}}" value='{{}}' data-opt="{{itemed.opt}}" bindtap='toggleBtn'>
        <block style='font-weight:bold;'>
        {{itemed.opt}} 
        </block>
        {{itemed.ion}}
      </view>
    </view>
  </view>
    
</view>
<view hidden="{{nextBtn}}">
  <view class="option">
  <view>测评结束</view>
  <button class="sumit" style="width:180px" bindtap="nextBtn"> 点击提交进入下一阶段 </button>
  </view>
  
</view>

js

import { config } from '../../config.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    uhide:1,
    nextBtn:true,
    dataInfo:[
      {
        "id":1,
        "title":"汽车维修类课程",
        "option":[
          {
            "opt":"A",
            "ion":"喜欢"
          },
          {
            "opt": "B",
            "ion": "不喜欢"
          }
        ]
      }
    ],
    //定义选项答案数组
  jobList:[]

  },

  //选题
  toggleBtn:function(res){
    var uhide = this.data.uhide;
    var that = this;
    var dataInfo = this.data.dataInfo;//获取Json数组

    var opt = res.currentTarget.dataset.opt  //选项
    var id = res.currentTarget.dataset.id  //题id

    var _list = [{'id': id,'opt': opt}]

    var jobList = that.data.jobList.concat(_list);  //加入数组
    that.setData({
      jobList: jobList
    })
    if (id == jobList.length){ //野路子
      // 记录做到哪了  也不知道该不该用
      wx.setStorage({
        key: 'jobList',
        data: jobList,
      })
      // setTimeout(function(){ //如果有需要加延迟打开这里
      if (uhide >= dataInfo.length) {
        that.setData({
          nextBtn: false,
          uhide: 0
        })
      } else {
        that.setData({
          uhide: uhide + 1  //下一题
        })
      }
    // },500)
    }else{  // 解决重复
      jobList.splice(jobList.length-1,1);  // 删除不对的
    }
    console.log(jobList)
    
  },
  /**
   * 点击进入下一阶段
   * 需上传选项答案到服务器保存 保存成功后跳转下一阶段
   */
  nextBtn:function(){
    var that = this;
    wx.request({
      url: config.baseURL + '/api/submit1',
      data: that.data.jobList,
      method: 'post',
      success: function (res) {
        console.log(res)
        // that.setData({
        //   dataInfo: res.data.data
        // })
      }
    })
    wx.navigateTo({
      url: '/pages/second/second',
    })

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  var that = this;
    wx.request({  //获取题
      url: config.baseURL + '/api/appraisal',
      method: 'post',
      success: function (res) {
        that.setData({
          dataInfo: res.data.data
        })
      }
    })

    // 这里是保存他答题的过程
    wx.getStorage({
      key: 'jobList',
      success: function (res) {
        console.log(res.data)
        if(res.data.length>0){
          console.log('继续做题？？')
        }
      },
    })


  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

wxss

.sumit{
  background-color: #4797f8;
  margin-left: 40rpx 16rpx 40rpx 0rpx;
  color:white;
}
.option{
  margin: 36rpx 60rpx;
}
.xue{
  margin:15px 0px;
  /* width:100%; */
  height:60px;
  background-color:#f6f6f6;line-height:60px;
  padding-left: 15px;
}
.xued{
  background-color:#4797f8;
  color: #fff;
}
.hidden{
  display:none;
}