首先上demo地址:https://github.com/AloneYan/WeChat-SeatSelection
2020/11/02代码迁移至gitee:https://gitee.com/han96/WeChat-SeatSelection.git
最近公司接了新项目 就有新需求啦
有一个功能是要求在线选座,像是买火车票买电影票哪种
此教程由花花同学友情赞助(为啥酱紫说 是因为花花写的demo 我写教程~)
一个很丑的demo如下图所示!!(为啥这么丑-。-不应该呀)
下面就开始实现它了
具体部分的实现请看图片中的注释部分,或者直接联系me
<wxs src="./util.wxs" module="tools" /> <!-- 自定义过滤器 -->
<view class='box'>
<view class='content'>红色:已选择 / 绿色:正在选择</view>
<view wx:for="{{seats}}" wx:for-item="seat" wx:key="index"><!-- 两层循环 -->
<view wx:for="{{seat}}"
wx:key='index'
wx:for-index="idx"
wx:for-item="item"
class="{{( tools.fn(myselectSite, item.num).indexOf?'active':item.userInfo!=null?'used':'seat')}}"
style="{{idx%2!==0&&'margin-right:40rpx'}}"
bindtap='selctedSite'
data-num='{{item.num}}'
data-used='{{item.userInfo==null}}'><!-- 根据不同的判断定义class,绑定点击事件,传输数据 -->
{{item.num}}
</view>
</view>
<view class='content'>您选择了:{{myselectSite}}</view><!-- 展示选择的座位号 -->
</view>
js部分:
Page({
data: {
//模拟假数据
seats: [
{ num: 1, userInfo: { uid: 20190101, name: '阎阎' } },
{ num: 2, userInfo: { uid: 20190101, name: '阎阎' } },
{ num: 3, userInfo: { uid: 20190102, name: '花花' } },
{ num: 4, userInfo:null},
{ num: 5, userInfo: { uid: 20190103, name: '仙球' } },
{ num: 6, userInfo: { uid: 20190104, name: '亮亮' } },
{ num: 7, userInfo: null },
{ num: 8, userInfo: null },
{ num: 9, userInfo: null },
{ num: 10, userInfo: null },
{ num: 11, userInfo: null },
{ num: 12, userInfo: { uid: 20190102, name: '花花' } },
{ num: 13, userInfo: null },
{ num: 14, userInfo: null },
{ num: 15, userInfo: null },
{ num: 16, userInfo: null }
],
myselectSite:[]
},
//重组数据-分为四个一组
reSetData(dataList,num) {
let arr = [];
let len = dataList.length;
for (let i = 0; i < len; i += num) {
arr.push(dataList.slice(i, i + num));
}
return arr;
},
//移除选择的座位
remove (arr,val) {
var index = arr.indexOf(val);
if (index > -1) {
arr.splice(index, 1);
}
},
//选择座位
selctedSite(e){
let { myselectSite } = this.data;
const param = e.target.dataset;
const { num, used } = param;
if (!used) { return false};
if (myselectSite.indexOf(num)===-1){
myselectSite.push(num)
}else{
this.remove(myselectSite,num)
}
this.setData({ myselectSite })
},
onLoad: function (options) {
let { seats } = this.data;
let temp = this.reSetData(seats,4)
this.setData({ seats: temp })
}
})
util.wxs文件——过滤器 (这个文件就相当与在前台试用的js 之前我有写过这种过滤器的教程哦)
function fn(arr, arg) {
var result = {
indexOf: false,
toString: ''
}
result.indexOf = arr.indexOf(arg) > -1;
result.toString = arr.join(","); return result;
}
module.exports.fn = fn;
css文件(这个不重要 毕竟我写的样式超级难看)
.box{
width: 240px;
margin:20rpx auto;
padding-left:-40rpx;
}
/* 这里还是有点重要的 */
.seat,.used,.active{
display: inline-block;
width: 70rpx;
margin:10rpx;
text-align: center;
}
.seat{
background-color: gainsboro;
}
.used{
background-color: red;
}
.active{
background-color: green;
}
.content{
font-size: 30rpx;
padding:40rpx 0;
}
当然这只是一个简单的实现思路
现实的大客车还有许多例外 比如说最后一排一般会有5个座位,还有其他限制条件
这就需要在从需求出发 不断完善了~