本次只分享小程序端的代码实现，后端每个人都有自己的实现方法，就不写在此。
好了，先看实现样式：
本次投票实现需要一个页面和一个弹窗实现，我们做的是淘汰赛部分，在此，黄啊码将淘汰赛部分直接选用选择队伍投票方式，比分这块实现方式其实也类似：
那就先走第一个图吧，wxml如下：
<view class="contain item"><view wx:for="{{all_list}}" wx:key="index" wx:for-item="item" style="border-bottom: 1px solid #36a2e6;"><view class="date"><view class="game-type"><text>淘汰赛</text></view><text>2022-12-15</text><view>猜中积分<text style="color: rgb(255, 26, 26);font-weight: bold;">+500}</text></view></view><view class="guess_item"><view class="time"><text space="nbsp">12月15日 03:00半决赛</text></view><view class="country"><view class="country-item"><text space="emsp">法国 </text><image src="{{img_url+item.country_flag1}}" /></view><view class="vs">VS</view><view class="country-item diff"><image src="{{img_url+item.country_flag2}}" /><text space="emsp">摩洛哥</text></view></view><view class="btn_box"><button>参与竞猜</button></view><view class="result"><view class="pre-item"><span>我的预测</span><view><text space="ensp" style="color: #3c3c3c;">---</text></view></view><view class="line"></view><view class="pre-item"><view>未参与竞猜</view></view></view></view></view></view>
</view>wxss如下： 【对应颜色有做调整，别顾着照抄哦】
.item {margin: 20rpx;border-bottom: 4rpx solid #36a2e6;
}
.contain .item:last-child{border-bottom: 0; overflow: hidden;
}
.item_index{margin-left: 20rpx;font-size: 32rpx;color: #36a2e6;
}
.item .guess_item {width: 100%;height: 410rpx;background-color: #fff;border-radius: 8px;position: relative;
}
.item .date {display: flex;position: relative;justify-content: space-between;height: 130rpx;line-height: 130rpx;font-size: 30rpx;color: #36a2e6; margin: 0rpx 25rpx;
}
.item .date .game-type {position: absolute;top: -1rpx;left: -26rpx;width: 110rpx;height: 42rpx;line-height: 42rpx;background-color: #36a2e6;text-align: center;border-bottom-right-radius: 22rpx;font-size:24rpx;color: #fff;
}
.item .time {height: 70rpx;line-height: 70rpx;text-align: center;color: rgb(66, 66, 66);font-size: 28rpx;margin-left: 11rpx;
}
.item .guess_item .country{display: flex;margin-top: 16rpx;
}.country-item {width: 40%;height: 48rpx;display: flex;align-items: center;justify-content: flex-end;font-size: 30rpx;
}.diff {justify-content: flex-start;
}
.item .guess_item .country .country-item image {width: 82rpx;height: 100%;
}
.item .guess_item .country .country-item text {color: rgb(46, 46, 46);
}
.item .guess_item .country .vs {width: 20%;text-align: center;height: 48rpx;line-height: 48rpx;color: rgb(255, 26, 26);font-weight: bold;font-size: 32rpx;
}
.item .guess_item .btn_box {display: flex;justify-content: center;height: 130rpx;line-height: 130rpx;align-items: center;
}
.item .guess_item .btn_box .btn {width: 220rpx;height: 58rpx;line-height: 58rpx;text-align: center;background-color: #ffc320;color: #fff;border-radius: 30rpx;font-size: 29rpx;
}
.item .guess_item .btn_box button {width: 220rpx;height: 52rpx;font-weight: unset;
}
.item .guess_item .btn_box text {color:#3c3c3c;font-size: 30rpx;
}
.item .guess_item .result {display: flex;justify-content: space-between;
}.item .guess_item .result .pre-item text {width: 50%;text-align: center;
}
.item .guess_item .result .pre-item {width: 44%;height: 110rpx;display: flex;flex-direction: column;align-items: center;
}
.item .guess_item .result .pre-item span {width: 76%;display: block;height: 52rpx;font-size: 28rpx;color:#36a2e6;text-align: center;line-height: 52rpx;border: 4rpx solid #36a2e6;border-radius: 32rpx;
}
.item .guess_item .result .pre-item view {width: 80%;height: 58rpx;text-align: center;line-height: 82rpx;font-size: 30rpx;color: rgb(255, 26, 26);
}
.line {width: 0;height: 64rpx;border-left:1rpx solid #36a2e6;border-right: 1rpx solid #36a2e6;background-color: #36a2e6;
}
.submit_box {position: fixed;top: 356rpx;left: 50%;transform: translateX(-50%);width: 92%;height: 42%;background-image:linear-gradient(to bottom,#36a2e6,#fff);opacity: 0.92;border-radius: 24rpx;box-shadow: 2rpx 2rpx 16rpx 4rpx #d4d4d4;border: 2rpx solid #36a2e6;
}.submit_box .tip {height: 150rpx;text-align: center;line-height: 150rpx;font-size: 34rpx;color: #fff;
}
.submit_box .score {display: flex;justify-content: center;align-items: center;
}
.submit_box .score input {width: 86rpx;height: 86rpx;background-color: #fff;border-radius: 8rpx;margin: 0 46rpx;font-size: 36rpx;font-weight: bold;color: rgb(0, 0, 0);text-align: center;
}
.submit_box .score view {width: 40rpx;height: 8rpx;background-color: #fff;
}.close {height: 70rpx;display: flex;justify-content: flex-end;
}.close view {width: 76rpx;height: 66rpx;line-height: 64rpx;text-align: center;
}
.icon-guanbi {color: #fff;
}.sub_btn_box {height: 180rpx;display: flex;justify-content: center;align-items: center;
}.sub_btn_box .sub_btn {width: 300rpx;height: 70rpx;line-height: 70rpx;background-color: #ffc320;text-align: center;border-radius: 14rpx;font-size: 34rpx;color: #fff;
}
.end {position: absolute;width:460rpx;height:100rpx;text-align: center;line-height: 100rpx;top: 194rpx;left: 50%;border-radius: 20rpx;transform: translateX(-50%);text-align: center;font-size: 28rpx;color: rgb(255, 26, 26);
}接下来是弹出窗体的wxml代码和wxss代码
<view class="choose_box">
<view bindtap="chooseFn" class="left {{is_choose1?'choose_color':''}}" data-id="1">猜TA胜</view>
<view bindtap="chooseFn" class="{{is_choose2?'choose_color':''}}" data-id="2">平局</view>
<view bindtap="chooseFn" class="right {{is_choose3?'choose_color':''}}" data-id="3" >猜TA胜</view>
</view>
.choose_box {
display: flex;
justify-content: center;
}
.choose_box view {
width: 178rpx;
height: 74rpx;
line-height: 74rpx;
background-color: #fff;
margin: 0 1rpx;
text-align: center;
border:2rpx solid #36a2e6;
color: #36a2e6;
}
.choose_box .choose_color {
background-color: #36a2e6;
color: #fff;
}
.choose_box .left{
border-top-left-radius: 22rpx;
border-bottom-left-radius: 22rpx;
}
.choose_box .right{
border-top-right-radius: 22rpx;
border-bottom-right-radius: 22rpx;
}
最后实现的时候别忘了把点击事件加上
这里的dataset.id表示的是你选中的国家id，我在上边代码就直接省略了，毕竟每个认对于变量的命名都有所不同。
chooseFn(e) {if(e.currentTarget.dataset.id=="1") {this.setData({is_choose1:true,is_choose2:false,is_choose3:false,})}else if(e.currentTarget.dataset.id=="2") {this.setData({ is_choose1:false,is_choose2:true,is_choose3:false,})}else if(e.currentTarget.dataset.id=="3") {this.setData({ is_choose1:false,is_choose2:false,is_choose3:true,})}},至于如何弹窗和关闭事件这个部分，我相信大多数只要入门过小程序的都知道，我就不一一阐述了，如果再不懂直接扣我也行。
好了，今天的分享就这里，有问题的留个言，别忘了一键三连，下次我们还会再见！
我是黄啊码，码字的码，退。。。退。。。退。。。朝！
