首先是搭建显示的基本页面
在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 () {
}
})