//index.js
//获取应用实例
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
/**
* 选中的位置
*/
list: [],
/**
* status
* 1 可预订
* 2 已售完
* 3 已选择
* 4 我的预订
* 5 锁定
*
*/
obj: [
[{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 2,
"price": 60
},
{
"status": 5,
"price": 60
},
{
"status": 2,
"price": 60
},
{
"status": 2,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 4,
"price": 60
},
{
"status": 4,
"price": 60
},
{
"status": 2,
"price": 60
},
{
"status": 2,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 2,
"price": 60
},
{
"status": 5,
"price": 60
},
{
"status": 2,
"price": 60
},
{
"status": 2,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 2,
"price": 60
},
{
"status": 5,
"price": 60
},
{
"status": 2,
"price": 60
},
{
"status": 2,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 2,
"price": 60
},
{
"status": 5,
"price": 60
},
{
"status": 2,
"price": 60
},
{
"status": 2,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 2,
"price": 60
},
{
"status": 5,
"price": 60
},
{
"status": 2,
"price": 60
},
{
"status": 2,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
[{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
{
"status": 1,
"price": 60
},
],
],
time: [
"8:00",
"9:00",
"10:00",
"11:00",
"12:00",
"1:00",
"2:00",
"3:00",
"4:00",
"5:00",
"6:00",
"7:00",
"8:00",
"8:00",
"9:00",
],
area: [
"1号场",
"2号场",
"3号场",
"4号场",
"5号场",
"6号场",
"7号场",
"8号场",
"9号场",
],
/**
* 场次
*/
session: [{
name: 'A场',
id: 1
},
{
name: 'B场',
id: 2
},
{
name: 'C场',
id: 1
},
{
name: 'D场',
id: 2
},
{
name: 'E场',
id: 1
},
{
name: 'F场',
id: 2
},
{
name: 'G场',
id: 1
},
{
name: 'H场',
id: 1
},
],
date: [{
title: '今天',
subTitle: '03月14日'
},
{
title: '周五',
subTitle: '03月15日'
},
{
title: '周六',
subTitle: '03月16日'
},
{
title: '周日',
subTitle: '03月17日'
},
{
title: '周一',
subTitle: '03月18日'
},
],
submitTitle: '提交订单',
/**
* 日期选中
*/
datePosition: 0,
/**
* 场次选中
*/
sessionPosition: 0,
/**
* 上拖动效果越界
*/
offsetTop: 0,
/**
* 做拖动效果越界
*/
offsetLeft: 0,
/**
* 调整左边的滚动条位置
*/
left: 0,
/**
* 调整上的滚动条位置
*/
top: 0,
/**
* 选座区域最小高度
*/
min: 100,
/**
* 选座区域最大高度
*/
max: 700,
/**
* 场地价格
*/
price: 0,
},
/**
* 确认订单
*/
confirm: function(e) {
if (this.data.price <= 0) {
wx.showToast({
title: '最少选择1场',
icon: 'none',
duration: 2000
})
return
}
var session = this.data.session[this.data.sessionPosition].name
var date = this.data.date[this.data.datePosition].subTitle
// console.log(session)
// console.log(date)
// console.log(this.data.list)
var data = {
allPrice: this.data.price,
session: session,
date: date,
list: this.data.list
}
wx.navigateTo({
url: '../placeSubmit/placeSubmit?data=' + JSON.stringify(data),
})
},
/**
* 选择场次
*/
chooseSession: function(e) {
var index = parseInt(e.currentTarget.id)
if (index != this.data.sessionPosition) {
this.setData({
sessionPosition: index
})
}
},
/**
* 选择日期
*/
chooseDate: function(e) {
var index = parseInt(e.currentTarget.id)
if (index != this.data.datePosition) {
this.setData({
datePosition: index
})
}
},
bindChange: function(e) {
// console.log(e)
var x = e.detail.x
var y = e.detail.y
var offsetTop = 0;
if (y > 0) {
offsetTop += y
}
var offsetLeft = 0;
if (x > 0) {
offsetLeft += x;
}
this.setData({
left: x,
offsetLeft: offsetLeft,
offsetTop: offsetTop,
top: y
})
},
choose: function(e) {
var p = e.currentTarget.id.split(",")
var i = parseInt(p[0])
var j = parseInt(p[1])
var id = i + ',' + j // 1,2
var item = this.data.obj[i][j]
// 1 可预订
// 2 已售完
// 3 已选择
// 4 我的预订
// 5 锁定
//
var status = item.status
/**
* 可预订
*/
if (status == 1) {
//判断数组长度最多选4个座位
if (this.data.list.length == 4) {
wx.showToast({
title: '最多选择4场',
icon: 'none',
duration: 2000
})
return
}
/**
* 判断上下是否是靠近的
* i,j
* 可以选择
* 0,0
* 1,0
* 不能选择
* 0,0
* 1,2
*/
var arithmeticList = []
var isAdd = false
for (var index in this.data.list) {
var temp = this.data.list[index].id.split(",");
var x = parseInt(temp[0])
var y = parseInt(temp[1])
if (y == j) {
//判断在一列
arithmeticList.push(x)
isAdd = true
}
};
/**
* 判断等差数列
*/
if (null != arithmeticList && isAdd && arithmeticList.length > 0) {
var tempArithmeticList = arithmeticList
tempArithmeticList.push(i)
if (!this.isArithmeticList(tempArithmeticList)) {
wx.showToast({
title: '请选择两个连续的场地',
icon: 'none',
duration: 2000
})
return
}
}
item.status = 3
/**
* 生成框里的数据
*/
this.data.list.push({
price: this.data.obj[i][j].price,
time: this.data.time[i] + '-' + this.data.time[i + 1],
area: this.data.session[this.data.sessionPosition].name + this.data.area[j],
id: id
})
/**
* 计算价格
*/
var title = this.getTitle(this.data.list)
this.setData({
submitTitle: title,
obj: this.data.obj,
list: this.data.list
})
} else if (status == 3) {
//i j
var arithmeticList = []
var isAdd = false
for (var index in this.data.list) {
var temp = this.data.list[index].id.split(",");
var x = parseInt(temp[0])
var y = parseInt(temp[1])
if (y == j && x != i) {
//判断在一列
arithmeticList.push(x)
isAdd = true
}
};
if (null != arithmeticList && isAdd && arithmeticList.length > 0) {
if (!this.isArithmeticList(arithmeticList)) {
wx.showToast({
title: '请选择两个连续的场地',
icon: 'none',
duration: 2000
})
return
}
}
/**
* 已选择 取消选择
*/
item.status = 1
for (var m = 0; m < this.data.list.length; m++) {
if (this.data.list[m].id == id) {
this.data.list.splice(m, 1)
break;
}
}
/**
* 计算价格
*/
var title = this.getTitle(this.data.list)
this.setData({
submitTitle: title,
obj: this.data.obj,
list: this.data.list
})
} else if (status == 2) {
wx.showToast({
title: '已售空',
icon: 'none',
duration: 2000
})
} else if (status == 5) {
wx.showToast({
title: '已锁定',
icon: 'none',
duration: 2000
})
}
},
getTitle: function(list) {
if (list.length <= 0) {
this.setData({
price: 0
})
return '提交订单'
}
this.data.price = 0
for (var index in list) {
this.data.price += list[index].price
}
this.setData({
price: this.data.price
})
return '¥' + this.data.price + '提交订单'
},
/**
* 判断是否为等差数列
*/
isArithmeticList: function(list) {
var tempArithmeticList = this.sortarr(list)
for (var i = 0; i < tempArithmeticList.length - 1; i++) {
var res = tempArithmeticList[i + 1] - tempArithmeticList[i]
if (res < 0) res = res * -1;
if (res != 1) {
wx.showToast({
title: '请选择两个连续的场地',
icon: 'none',
duration: 2000
})
return false
}
}
return true
},
/**
* 排序
*/
sortarr: function(arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var h = this.data.time.length
var w = this.data.area.length
var offsetH = h * 58 + h * 2
var offsetW = w * 96 + h * 2
var currentH = offsetH
console.log(this.data.obj.length)
// console.log(offsetH)
/**
* 最大宽度
*/
// if (offsetW < 670) {
// offsetW = 670
// }
// if (offsetH < this.data.min) {
// offsetH = this.data.min
// }
/**
* 设置最高高度
*/
if (offsetH > this.data.max) {
// offsetH = this.data.max
currentH = this.data.max
}
this.setData({
offsetH: offsetH,
offsetW: offsetW,
currentH: currentH
})
},
})
<wxs module="itema">
var getTypeByStatus = function(obj) {
switch (obj.status) {
case 1:
return 'reservation'
break;
case 2:
return 'soldout'
break;
case 3:
return 'select'
break;
case 4:
return 'mine'
break;
case 5:
return 'lock'
break;
}
}
module.exports.getTypeByStatus = getTypeByStatus;
</wxs>
<!--选择时间-->
<scroll-view scroll-x class='date center'>
<view class='common-flex-row' style='margin-top:5rpx;'>
<view class='common-flex-row' id='{{index}}' bindtap='chooseDate' wx:for='{{date}}' wx:for-index="index" wx:key='item'>
<view class="common-flex-column {{datePosition==index?'time-select':'time-unselect'}}">
<text>{{item.title}}</text>
<text>{{item.subTitle}}</text>
</view>
<view style='width:16rpx;' />
</view>
</view>
</scroll-view>
<!--选择时间-->
<!--选择场次-->
<scroll-view scroll-x>
<view class='common-flex-row session'>
<view class='common-flex-row' wx:for='{{session}}' wx:for-index="index" wx:key='item'>
<text class="{{sessionPosition==index?'session-select':'session-unselect'}}" bindtap='chooseSession' id='{{index}}'>{{item.name}}</text>
<view style='width:80rpx;' />
</view>
</view>
</scroll-view>
<!--选择场次-->
<!--中间-->
<view style='padding-top:10rpx;background-color: #f5f5f5;'>
<view class='item' style='height:{{currentH}}rpx;'>
<!-- <view class='mask' /> -->
<!--左边时间-->
<movable-area class='movable-area-left' style='height:{{currentH}}rpx;'>
<movable-view animation='' y="{{top}}" direction="vertical" out-of-bounds class='movable-view-left' disabled='false' style='height:{(currentH+100)}}rpx;'>
<view style='margin:{{offsetTop}}px 0px 0px 0px; '>
<view style='height:22rpx;' />
<text class='left' wx:for='{{time}}' wx:key='i'>{{item}}-</text>
</view>
</movable-view>
</movable-area>
<!--左边时间-->
<!--右边块-->
<view class='item-right'>
<!--上-->
<movable-area class='movable-area-top'>
<movable-view animation='' direction="horizontal" out-of-bounds class='movable-view-top' x="{{left}}" disabled='false' style='width: {{(offsetW+100)}}rpx;'>
<view style='margin-left:{{offsetLeft}}px;' class='item-right-top'>
<view class='flex-row' wx:key='j' wx:for='{{area}}'>
<text class='top'>{{item}}</text>
<view style='width:2rpx;' />
</view>
</view>
</movable-view>
</movable-area>
<!--上-->
<!--下-->
<view style='height:2rpx;' />
<movable-area class='movable-area-content' style='height:{{currentH}}rpx;'>
<movable-view direction="all" out-of-bounds bindchange='bindChange' class='movable-view-content' style='width:{{offsetW}}rpx;height:{{offsetH}}rpx'>
<view class='flex-row' wx:key='m' wx:for='{{obj}}' wx:for-index='i'>
<block wx:key='n' wx:for='{{obj[i]}}' wx:for-index='j'>
<text class='content {{itema.getTypeByStatus(item)}}' wx:if='{{item.status==2}}' bindtap='choose' id='{{i}},{{j}}'></text>
<view class='lock-big' wx:elif='{{item.status==5}}' bindtap='choose' id='{{i}},{{j}}'>
<image src='/img/place/lock_big.png' style='width:21rpx;height:28rpx;'></image>
</view>
<text bindtap='choose' id='{{i}},{{j}}' class='content {{itema.getTypeByStatus(item)}}' wx:else>¥{{item.price}}</text>
</block>
</view>
</movable-view>
</movable-area>
<!--下-->
</view>
<!--右边块-->
</view>
<view class='flex-row' style='justify-content:space-around;padding-bottom:21rpx;margin-top:21rpx'>
<view class='flex-row' style='align-items: center;'>
<view class='reservation' style='width:42rpx;height:26rpx;' />
<text class='item-text'>可预订</text>
</view>
<view class='flex-row' style='align-items: center;'>
<view class='soldout' style='width:42rpx;height:26rpx;' />
<text class='item-text'>已售完</text>
</view>
<view class='flex-row' style='align-items: center;'>
<view class='select' style='width:42rpx;height:26rpx;' />
<text class='item-text'>已选择</text>
</view>
<view class='flex-row' style='align-items: center;'>
<view class='mine' style='width:42rpx;height:26rpx;' />
<text class='item-text'>我的预订</text>
</view>
<view class='flex-row' style='align-items: center;'>
<view class='lock lock-small'>
<image src='/img/place/lock_small.png' style='width:12rpx;height:16rpx;'></image>
</view>
<text class='item-text'>锁定</text>
</view>
</view>
</view>
<!--中间-->
<!-- 选择提醒-->
<text class='tip' wx:if='{{list.length==0}}'>最多可预订4块场地,请尽量保持场次连续</text>
<!-- 选择提醒-->
<!-- 选择列表-->
<view class='common-flex-row' style='margin-left:40rpx;'>
<view class='common-flex-row' wx:for='{{list}}' wx:key='{{item}}'>
<view class='common-flex-column list-item'>
<text>{{item.time}}</text>
<text>{{item.area}}</text>
</view>
<view style='width:24rpx;' />
</view>
</view>
<!-- 选择列表-->
<!-- 提交订单-->
<view class='common-flex-column center'>
<text class='confirm' bindtap='confirm'>{{submitTitle}}</text>
<view style='height:24rpx;' />
</view>
<!-- 提交订单-->
/**index.wxss**/
page {
width: 100%;
}
.mask {
position: fixed;
width: 80rpx;
height: 29rpx;
z-index: 99;
background-color: #f5f5f5;
}
.left {
display: flex;
font-size: 22rpx;
align-items: center;
justify-content: center;
height: 58rpx;
width: 96rpx;
color: #101010;
margin: 0rpx 2rpx 2rpx 0rpx;
}
.content {
display: flex;
font-size: 22rpx;
align-items: center;
justify-content: center;
height: 58rpx;
width: 96rpx;
color: #fff;
margin: 0rpx 2rpx 2rpx 0rpx;
background-color: #4cae62;
}
.top {
display: flex;
font-size: 22rpx;
align-items: center;
justify-content: center;
height: 58rpx;
width: 96rpx;
color: #131313;
}
.item {
width: 100%;
display: flex;
height: 700rpx;
flex-direction: row;
background-color: #f5f5f5;
}
.item-right {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.flex-row {
display: flex;
flex-direction: row;
}
.item-right-top {
width: 100%;
height: 58rpx;
display: flex;
flex-direction: row;
}
.movable-view-left {
display: flex;
flex-direction: column;
color: #fff;
width: 96rpx;
/** 调高 可以有上拉的空间*/
height: 1200rpx;
}
.movable-area-left {
height: 700rpx;
width: 96rpx;
overflow: hidden;
}
.movable-view-top {
display: flex;
flex-direction: column;
/** 调宽 可以有右拉的空间*/
width: 1750rpx;
height: 58rpx;
}
.movable-area-top {
height: 58rpx;
width: 670rpx;
overflow: hidden;
}
.movable-view-content {
display: flex;
flex-direction: column;
/**动态修改 内容区的宽高**/
width: 1568rpx;
/**动态修改 内容区的宽高**/
height: 992rpx;
}
.movable-area-content {
height: 100%;
width: 100%;
overflow: hidden;
}
.item-text {
margin-left: 10rpx;
font-size: 22rpx;
font-family: PingFang-SC-Regular;
color: rgba(119, 118, 118, 1);
}
/* * status
* 1 可预订
* 2 已售完
* 3 已选择
* 4 我的预订
* 5 锁定*/
/* 已售完 */
.soldout {
background-color: #cdcdcd;
}
/* 可预订 */
.reservation {
background-color: #4cae62;
}
/* 已选择 */
.select {
background-color: #b7c147;
}
/* 我的预订 */
.mine {
background-color: #f6843b;
}
.lock {
background-color: #57c2f8;
}
.lock-small {
display: flex;
justify-content: center;
align-items: center;
width: 42rpx;
height: 26rpx;
}
.lock-big {
display: flex;
font-size: 22rpx;
align-items: center;
justify-content: center;
height: 58rpx;
width: 96rpx;
color: #fff;
margin: 0rpx 2rpx 2rpx 0rpx;
background-color: #57c2f8;
}
.session {
margin-left: 20rpx;
align-items: center;
padding-top: 23rpx;
padding-bottom: 29rpx;
}
.session-select {
flex-shrink: 0;
font-size: 28rpx;
color: rgba(7, 158, 99, 1);
}
.session-unselect {
flex-shrink: 0;
font-size: 28rpx;
color: rgba(33, 33, 33, 1);
}
.time-select {
width: 182rpx;
height: 100rpx;
justify-content: center;
align-items: center;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
background: rgba(76, 174, 99, 1);
}
.time-unselect {
width: 182rpx;
/* border: 1rpx solid rgb(250, 248, 248); */
height: 100rpx;
justify-content: center;
align-items: center;
border-top-left-radius: 10rpx;
border-top-right-radius: 10rpx;
background: #fff;
box-shadow:0rpx 0rpx 6rpx 0rpx rgba(220,220,220,1);
}
.time-select text {
font-size: 28rpx;
color: #fff;
}
.time-unselect text {
font-size: 28rpx;
color: #0d0d0d;
}
.confirm {
display: flex;
align-items: center;
justify-content: center;
width: 620rpx;
height: 88rpx;
background: rgba(183, 193, 71, 1);
border-radius: 44px;
color: #fff;
font-size: 34rpx;
align-self: center;
}
.list-item {
width: 148rpx;
height: 98rpx;
background: rgba(255, 255, 255, 1);
border: 2rpx solid rgba(246, 132, 59, 1);
border-radius: 10rpx;
align-items: center;
justify-content: center;
margin-bottom: 33rpx;
margin-top: 27rpx;
}
.list-item text {
color: #f86b24;
font-size: 22rpx;
}
.tip {
font-size: 22rpx;
color: rgba(71, 71, 71, 1);
align-self: center;
justify-content: center;
display: flex;
margin-top: 25rpx;
margin-bottom: 95rpx;
}
.center {
align-items: center;
justify-content: center;
}
.date {
display: flex;
margin-left: 20rpx;
margin-top: 75rpx;
height: 110rpx;
}
/* flex column*/
.common-flex-column {
display: flex;
flex-direction: column;
}
/* flex row*/
.common-flex-row {
display: flex;
flex-direction: row;
}
/* flex 填充布局*/
.common-fill {
flex: 1;
display: flex;
}
/* 横线*/
.common-line {
height: 1rpx;
background-color: #EFEFEF;
}