微信小程序（评教系统--教师列表，评教方式，评教问题）

评教中，当学生陆后显示需要评教的教师列表，选择评教老师，再选择是常规评教还是统一评教，进入后选择每道题目所选的选项提交后得到总分数。流程如下：

教师列表：再建一个teacher目录，分别写js和wxml：

wxml中：用wx:for循环teachers，分别取teachers中用到的数据，用{{item.name}},等显示

<view class='header'>
<text>教师列表</text>
</view>
 <view class='tea' wx:for="{{teachers}}"  data-teacherid='{{item.teacherid}}' bindtap='selectTeacher'> 
   <image style="width: 80px; height: 80px; margin-top:10px;" mode="{{item.mode}}" src="{{src}}"></image> 
   <view class='section'>
    <view class='section_one'>
      <text>{{item.teachername}}</text>
    </view>
     <view class='section_two'>
       <text>{{item.course}}</text> 
    </view> 
  </view> 
</view> 

js中：调用teachers接口，读取学生缓存，根据classid参数，存储teachers中的数据

 

// pages/teachers/teachers.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
  //页面的变量存放位置
  teachers: null,
  src: '../images/9.jpg'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  // var url = "https://www.lishuming.top/pj/index.php/student/api/teachers";
    var url = app.globalData.url.teachers;
  //读取缓存
  var student = wx.getStorageSync('student');
  // console.log(student);
  var classid = student.classid;
  // console.log(classid);
  wx.request({
    url:url,
    data:{
      classid:classid
    },
    header: {
      'content-type': 'application/json' // 默认值
    },
    success:(res)=> {
      console.log(res.data)
      this.setData({teachers:res.data});
    }
  })
  },
  selectTeacher: function (e) {
    var teacherid = e.currentTarget.dataset.teacherid;
    wx.navigateTo({
      url: '../testpaper/testpaper?teacherid=' + teacherid,
    })
  }
})

评教方式：再建一个testpaper目录，分别写js和wxml：调用testpaper接口，

// pages/testpaper/testpaper.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    src:'../images/9.jpg',
    teacher:null,
    testpaper:null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // var url = "https://www.lishuming.top/pj/index.php/student/api/testpaper";
    var url = app.globalData.url.testpaper;
    var teacherid = options.teacherid;
    // console.log(teacherid);
    wx.request({
      url: url,
      data:{
        teacherid:teacherid
      },
      header:{
        'content-type': 'application/json'
      },
      success: (res) => {
        console.log(res.data);
        this.setData({
          testpaper: res.data.testpaper,
          teacher: res.data.teacher
        });
      }
    })
  },
  selectTeacher: function (e) {
    var id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../paperdetails/paperdetails?id=' + id,
    })
  }
})

wxml中：循环testpaper数组，取用到的数据

<view class='nav'>
  <view class='msg'>
    <view class='name'>{{teacher.name}}</view>
    <view class='job'>
      <text>{{teacher.sex}}</text>
      <text>{{teacher.zhicheng}}</text>
    </view>
  </view>
  <view class='pic'>
    <image style='width:80px; height:80px' mode='{{item.mode}}' src='{{src}}'></image>
  </view> 
</view>

<view class='content' wx:for="{{testpaper}}">
  <view class='content_one'>
    <view class='all'>
      <text class='allpj'>{{item.type}}</text>
      <text class='time' wx:if="{{item.papertypeid==2}}">{{item.start}}至{{item.end}}</text>
    </view>
      <view class='title' data-id='{{item.id}}' bindtap='selectTeacher'>{{item.name}}</view> 
  </view>
</view>

再建一个paperdetails目录写题目的js和wxml：

js中：调用paperdetails，pj接口，代码及解释如下：

// pages/paperdetails/paperdetails.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    currentid:0,
    count:0,
    pj:null,
    testpaperid:null,
    paperdetails:null,
    teachername:null,
    message:'',
    answer:{},
    score:{},
    student:{},
    btn_disabled:true,
    show_swiper:true,
    show_message:false
  },
  change:function(e){
    console.log(e);
    if(e.detail.source=='touch'){
      this.setData({currentid:e.detail.current})
    }
  },
// 写留言
write_message:function(e){
  // console.log(e.detail.value);
  this.setData({message:e.detail.value})
},
// 到下一题
  next:function(e){
    var index = this.data.currentid;
    index++;
    if(index>=this.data.count){
      index=this.data.count-1;
    }
    this.setData({currentid:index});
  },
// 选中选项
  radioChange:function(e){
  //获取选项及对应分值  
    var value = e.detail.value;//选项及分数
    // console.log(value);
    var id = e.currentTarget.dataset.id;//题目id
    // console.log(id);
    var arr = value.split("#");//分割字符串
    // console.log(arr);
    var _answer = this.data.answer;//题目id对应的选项
    _answer[id] = arr[0];
    // console.log(_answer);
    var _score = this.data.score;//题目id及对应的选项分数
    _score[id] = arr[1];
    // console.log(_score);
    this.setData({answer:_answer,
                  score: _score
    });

    var len = 0;
    for(var i in _answer){
      len++;
    }
    if(len<this.data.count){
      this.setData({btn_disabled:true});
    }else{
      this.setData({btn_disabled:false});
    }
  },
// 提交数据
  submit: function () {
    // console.log(this.data.answer);
    // console.log(this.data.score);
  //学生信息
    var _student = this.data.student;
    _student["no"] = wx.getStorageSync('student').no;
    _student["name"] = wx.getStorageSync('student').name;
    _student["classid"] = wx.getStorageSync('student').classid;
    this.setData({student:_student});
    // console.log(this.data.student);
  //计算分值
  var _score = 0;
  for(var i in this.data.score){
    _score += parseInt(this.data.score[i]);
  }
  // console.log(_score);
//判断分数是否低于最低分
  if(_score<this.data.pj.min_score && this.data.message==''){
    this.setData({show_swiper:false,show_message:true});
    return;
  }
  //pjid及testpaperid
  var pjid = this.data.pj.pjid;
  var testpaperid = this.data.pj.testpaperid;
  // console.log(pjid);
  // console.log(testpaperid);
  wx.request({
    // url: "https://www.lishuming.top/pj/index.php/student/api/pj",
    url: app.globalData.url.pj,
    method:'POST',
    data:{
      pjid:pjid,
      testpaperid:testpaperid,
      message:this.data.message,
      answer:JSON.stringify(this.data.answer),
      student: JSON.stringify(this.data.student),
      score:_score
    },
    header:{
      'content-type':'application/x-www-form-urlencoded'
    },
    success:(res)=>{
      console.log(res.data);
      wx.showToast({
        title: res.data[0],
        icon: 'success',
        duration: 2000,
        success: function () {
          setTimeout(function () {
            wx.navigateBack({
              delta: 1
            })
          }, 2000)
        }
      })
    }
  })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // var url = "https://www.lishuming.top/pj/index.php/student/api/paperdetails";
    var url = app.globalData.url.paperdetails;
    var id = options.id;
    // consol.log(id);
    //读取缓存
    var no = wx.getStorageSync('student').no;
    wx.request({
      url: url,
      data: {
        // no:1635050238,
        no:no,
        id:id
      },
      header: {
        'content-type': 'application/json'
      },
      success: (res) => {
        console.log(res.data);
        if(res.data.error){
          wx.showToast({
            title: res.data.errormsg,
            icon:'none',
            duration:2000,
            success:function(){
              setTimeout(function(){
                wx.navigateBack({
                  delta:1
                })
              }, 2000)
            }
          })
        }else{ 
          this.setData({
            show:true,
            pj:res.data.pj,
            paperdetails: res.data.data,
            teachername: res.data.pj.teachername,
            count:res.data.data.length
          });
        }
      }
    })
  },
})

wxml中：

<!--pages/paperdetails/paperdetails.wxml-->
<view wx:if="{{show}}">
<view class='header'>
  <text>被评老师:{{teachername}}</text>
</view>
<form bindsubmit='submit'>
  <swiper  class='swr' bindchange='change' current='{{currentid}}' wx:if="{{show_swiper}}">
    <block wx:for="{{paperdetails}}">
      <swiper-item>
        <view class='content' bindtap='next'>
          <text>{{index+1}}.{{item.content}}</text>
            <radio-group class="radio-group" bindchange="radioChange" data-id="{{item.id}}">
              <label class='rdo'>
                <radio value='a#{{item.scorea}}'>{{item.itema}}</radio>
              </label>
              <label class='rdo'>
                <radio class='rdo' value='b#{{item.scoreb}}'>{{item.itemb}}</radio>
              </label>
              <label class='rdo' wx:if="{{item.itemc!=''}}">
                <radio class='rdo' value='c#{{item.scorec}}'>{{item.itemc}}</radio>
              </label>
              <label class='rdo' wx:if="{{item.itemd!=''}}">
                <radio class='rdo' value='d#{{item.scored}}'>{{item.itemd}}</radio>
              </label>
            </radio-group>
        </view>
      </swiper-item>
    </block>
  </swiper>
  <view class="message" wx:if="{{show_message}}">
    <textarea placeholder='请给该位老师作出评价' bindinput='write_message'></textarea>
  </view>   
  <button class='btn' disabled='{{btn_disabled}}'  form-type='submit'>提交</button>   
</form>
</view>