首先是搭建显示的基本页面
在paperdetails.wxml文件中
<view class='content' wx:if="{{show}}"> <view class='top'> <text>被评老师:{{teachername}}</text> </view> <swiper bindchange='change' current='{{currentid}}' wx:if="{{show_swiper}}"> <swiper-item wx:for="{{paperdetails}}"> <text class='content'>{{item.content}}</text> <radio-group bindchange="radiochange" data-id="{{item.id}}"> <label class='item'> <radio value='a#{{item.scorea}}'/>{{item.itema}} </label> <label class='item'> <radio value='b#{{item.scoreb}}'/>{{item.itemb}} </label> <label class='item' wx:if="{{item.itemc!=''}}"> <radio value='c#{{item.scorec}}'/>{{item.itemc}} </label> <label class='item' wx:if="{{item.itemd!=''}}"> <radio value='d#{{item.scored}}'/>{{item.itemd}} </label> </radio-group> </swiper-item> </swiper> <view class='message' wx:if="{{show_message}}"> <textarea placeholder='请给该老师做出评价' bindinput='write_message'></textarea> </view> <button type='primary' disabled='{{btn_disabled}}' bindtap='mySubmit'>提交</button> </view>
在paperdetails.wxss文件中设置页面样式
/* pages/pj/pj.wxss */ .content{ margin: 20rpx; border-radius: 20rpx; } .top{ text-align: center; background-color: #c4e1ff; border-radius: 20rpx; height: 80rpx; line-height: 80rpx; } swiper{ background-color: #fff; margin: 10rpx; border: 2px dashed #cccfff; } .content{ margin: 10rpx; } radio-group{ margin: 10rpx; } .item{ display: flex; } button{ background-color: #fff; } .message{ background-color: #fff; margin: 20rpx; border: 2px dashed #cccfff; }接下来就是调用接口获取信息,data用来传数据
// pages/pj/pj.js Page({ /** * 页面的初始数据 */ data: { pj:null, currentid:0, count:0, paperdetails:null, teachername:null, message:'', answer:{}, score:{}, student:{}, btn_disabled:true, show:false, 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){ 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){ setTimeout(this.next,2000); var id=e.currentTarget.dataset.id; // console.log(id); var str = e.detail.value; var arr = str.split('#'); var _answer = this.data.answer; var _score = this.data.score; _answer[id] = arr[0]; _score[id] = arr[1]; 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 }); } }, mySubmit:function(e){ // console.log(e.pjid); // console.log(this.data.answer); // console.log(this.data.score); //计算分值 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; } var pjid=this.data.pj.pjid; // console.log(pjid); var testpaperid = this.data.pj.testpaperid; // console.log(testpaperid); var stu = this.data.student; stu['no'] = wx.getStorageSync('student').no; stu['name'] = wx.getStorageSync('student').name; stu['classid'] = wx.getStorageSync('student').classid; // console.log(stu); this.setData({student:stu}); console.log(this.data.student); var url ="https://www.zhangsan.top/pj/index.php/student/api/pj"; wx.request({ url: url, 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({ belta: 1 }) }, 2000) } }) } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // console.log(options); var url ="https://www.zhangsan.top/pj/index.php/student/api/paperdetails"; var id = options.id; var no=wx.getStorageSync('student').no; wx.request({ url: url, data: { 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({belta: 1}) },2000) } }) }else{ this.setData({show:true}); this.setData({ pj: res.data.pj, paperdetails: res.data.data, teachername: res.data.pj.teachername, count: res.data.data.length }); } } }) }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })