《微信小程序开发从入门到实战》学习三十一
3.4 开发参与投票页面
3.4.9 显示投票结果
在实际使用中，一个用户不能对同一个投票进行重复提交，因此需要向服务器端提交投票结果和提交用户ID。另外页面，需要完善。用户提交完投票后 ，还需要显示投票目前的结果，提交过的用户再打开这个页面也能看到投票结果而不是重新投票。通过用户ID可以查询到这个用户的投票信息。
小程序在用云开发技术实现服务端存储时，小程序会自动在请求中携带用户ID。（我还未验证）。
实现以上效果，需要在data对象增加一个voteStatus,记录当前用户是否已经投票，每个选项的投票情况，总投票数量，用户投了哪个选项的票。vote.js代码如下：
voteStatus: {//当前的投票情况
alreadyVoted:false, //当前用户是否已经投票
optionStatus: [], //每个选项的投票情况,包含用户投了哪个选项的票
totalVoteCount: 0 //总投票数
}
修改onLoad页面初加载函数和onTapVote提交投票的事件处理函数，增加对服务器端该用户的投票信息的请求和处理，增加一个getVoteStatusFromServer，代码如下：
onLoad(options) {
const voteID = options.voteID //通过页面路径参数获取投票ID
this.getVoteDateFromServer(voteID) //从服务器端获取投票信息
this.getVoteStatusFromServer(voteID) //从服务器端获取投票情况
},
onTapVote(){
if(this.data.isAnonymous) {//匿名投票的情况
const postData = {//需要提交的数据
voteID: this.data.voteID,
pickedOption: this.data.pickedOption
}
// TODO 将postData数据上传到服务器端
this.getVoteStatusFromServer(voteID) //从服务器端获取投票情况
} else {//实名投票的情况
const _this = this //在API接口的函数中，this会被改变，因此需要提前获取this的值到_this中
wx.getUserProfile({
desc: 'desc',
success:(res) => { //授权成功后，调用wx.getUserProfile接口时会回调这个函数
const postData = {
voteID: _this.data.voteID,
userInfo: res.userInfo, //获取用户信息
pickedOption: _this.data.pickedOption
}
console.log(postData)
// TODO 将postData数据上传到服务器端
_this.getVoteStatusFromServer(_this.data.voteID)
}
})
}
},
getVoteStatusFromServer(voteID){
if(voteID === 'test'){ //如果投票ID为test,则伪造一些测试数据
const voteStatus = {
alreadyVoted: true,
totalVoteCount: 100,
optionStatus: [{
count:25, //第1个选项的投票数量
vote:false
},{
count:35, //第2个选项的投票数量
vote:false
},{
count:10, //第3个选项的投票数量
vote:true //用户选择了该投票
},{
count:30, //第四个选项的投票数量
vote:false
}]
}
/* 以上是伪造的测试数据*/
this.setData({ //将获取的投票更新到data对象中
voteStatus
})
}else{
// TODO 真的从服务端获取投票情况
}
},
然后修改wxml文件，加入投票结果显示的部分。代码如下：
<view wx:if="{{voteStatus.alreadyVoted}}" class="option-list">
<view class="option" wx:for="{{optionList}}" wx:key="index">
<text>{{item}}</text>
<text class="vote-count">({{voteStatus.optionStatus[index].count}}/{{voteStatus.totalVoteCount}} 票)</text>
<text class="vote-picked" wx:if="{{voteStatus.optionStatus[index].vote}}">[已选]</text>
</view>
</view>
<block wx:else>
<checkbox-group wx:if="{{type === 'multiVote'}}" class="option-list" bindchange="onPickOption">...</checkbox-group>
<radio-group wx:else class="option-list" bindchange="onPickOption">...</radio-group>
</block>
...
<button class="btn" type="primary" disabled="{{isExpired || pickedOption.length === 0}}" bind:tap="onTapVote" wx:if="{{!voteStatus.alreadyVoted}}">确认投票</button>
这里有个特殊标签block，它不是一个组件，不会在页面中做渲染。和wx:if,wx:for属性一起使用，将条件或列表应用到内部的所有组件。当需要 一次性判断多个组件是否条件渲染，使用block。
block学习小例子代码如下：
View A
View B
View C
</block>
最后为vote.wxss加入一些样式美化：
.vote-count{
color: #ccc;
}
.vote-picked{
color: #09BB07;
}
预览效果如下：
3-41
