init project
This commit is contained in:
limqhz
196
pages/bookClasses/index.js
Normal file
196
pages/bookClasses/index.js
Normal file
@@ -0,0 +1,196 @@
|
||||
// pages/bookClasses/index.js
|
||||
const app = getApp();
|
||||
let weekday = [
|
||||
'星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'
|
||||
];
|
||||
let veneuType = '';
|
||||
let venueId = '';
|
||||
let isFrist = true;
|
||||
let clickDate = '';
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
currentIndex: 1,
|
||||
calendar: [],
|
||||
venueLessons: [],
|
||||
isShowNewplot: false,
|
||||
isGoHome: false,
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad: function(options) {
|
||||
isFrist = false;
|
||||
veneuType = options.type;
|
||||
venueId = options.venueId;
|
||||
app.$api.venueLessonShow({
|
||||
type: options.type,
|
||||
venueId: options.venueId
|
||||
}).then(res => {
|
||||
let list = [];
|
||||
let subList = [];
|
||||
let currentDate = new Date(new Date().setHours(8, 0, 0, 0));
|
||||
let currentDateValue = ''
|
||||
for (let i = 0; i < res.lessons.length; i++) {
|
||||
if (i % 7 == 0 && i != 0) {
|
||||
list.push(subList);
|
||||
subList = [];
|
||||
}
|
||||
let obj = {}
|
||||
let date = new Date(res.lessons[i].dateList);
|
||||
obj.date = (date.getMonth() + 1) + '.' + date.getDate()
|
||||
obj.week = weekday[date.getDay()];
|
||||
obj.value = res.lessons[i].dateList;
|
||||
obj.flg = res.lessons[i].flg;
|
||||
if (currentDate.getTime() == date.getTime()) {
|
||||
obj.isSelected = true;
|
||||
currentDateValue = obj.value;
|
||||
clickDate = obj.value;
|
||||
}
|
||||
subList.push(obj);
|
||||
}
|
||||
list.push(subList);
|
||||
subList = [];
|
||||
this.setData({
|
||||
calendar: list,
|
||||
isShowNewplot: true,
|
||||
})
|
||||
this.getData(currentDateValue);
|
||||
}, err => {
|
||||
this.setData({
|
||||
isShowNewplot: true,
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function() {
|
||||
let pages = getCurrentPages();
|
||||
this.setData({
|
||||
isGoHome: pages.length == 1
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面显示
|
||||
*/
|
||||
onShow: function() {
|
||||
// if (isFrist) {
|
||||
// // clickDate = new
|
||||
// this.getData(clickDate);
|
||||
// }
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面隐藏
|
||||
*/
|
||||
onHide: function() {
|
||||
isFrist = true;
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面卸载
|
||||
*/
|
||||
onUnload: function() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面相关事件处理函数--监听用户下拉动作
|
||||
*/
|
||||
onPullDownRefresh: function() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function() {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage: function() {
|
||||
return {
|
||||
title: '预约课程'
|
||||
}
|
||||
},
|
||||
|
||||
// 向左划
|
||||
leftClick() {
|
||||
if (this.data.currentIndex == 0) {
|
||||
return;
|
||||
}
|
||||
this.data.currentIndex--;
|
||||
this.setData({
|
||||
currentIndex: this.data.currentIndex
|
||||
})
|
||||
},
|
||||
// 向右滑
|
||||
rightClick() {
|
||||
if (this.data.currentIndex == this.data.calendar.length - 1) {
|
||||
return;
|
||||
}
|
||||
this.data.currentIndex++;
|
||||
this.setData({
|
||||
currentIndex: this.data.currentIndex
|
||||
})
|
||||
},
|
||||
|
||||
// 点击日历
|
||||
clickItem(e) {
|
||||
let idx = e.currentTarget.dataset.idx;
|
||||
let index = e.currentTarget.dataset.index;
|
||||
for (let i = 0; i < this.data.calendar.length; i++) {
|
||||
for (let j = 0; j < this.data.calendar[i].length; j++) {
|
||||
if (index == i && idx == j) {
|
||||
this.data.calendar[i][j].isSelected = true;
|
||||
} else {
|
||||
this.data.calendar[i][j].isSelected = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.setData({
|
||||
calendar: this.data.calendar
|
||||
})
|
||||
clickDate = this.data.calendar[index][idx].value;
|
||||
this.getData(this.data.calendar[index][idx].value);
|
||||
},
|
||||
|
||||
// 跳转详情
|
||||
clickCell(e) {
|
||||
let id = e.currentTarget.dataset.id;
|
||||
wx.navigateTo({
|
||||
url: `/pages/bookClassesDetail/index?id=${id}`,
|
||||
success: function(res) {},
|
||||
fail: function(res) {},
|
||||
complete: function(res) {},
|
||||
})
|
||||
},
|
||||
|
||||
getData(date) {
|
||||
wx.showLoading({
|
||||
title: '加载中...',
|
||||
mask: true,
|
||||
})
|
||||
app.$api.venueLessonDate({
|
||||
date: date,
|
||||
type: veneuType,
|
||||
venueId: venueId
|
||||
}).then(res => {
|
||||
this.setData({
|
||||
venueLessons: res.venueLessons
|
||||
})
|
||||
}, err => {
|
||||
|
||||
})
|
||||
}
|
||||
})
|
||||
6
pages/bookClasses/index.json
Normal file
6
pages/bookClasses/index.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"navigationBarTitleText": "预约课程",
|
||||
"usingComponents": {
|
||||
"header": "/component/header/header"
|
||||
}
|
||||
}
|
||||
54
pages/bookClasses/index.wxml
Normal file
54
pages/bookClasses/index.wxml
Normal file
@@ -0,0 +1,54 @@
|
||||
<header title="预约课程" isGoHome="{{isGoHome}}"></header>
|
||||
<view class="container">
|
||||
<view class='header'>
|
||||
<!-- wx:if="{{currentIndex > 0}}" -->
|
||||
<view class='img' bindtap='leftClick'>
|
||||
<image src='../../images/44@3x.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
<swiper class='swiper' current="{{currentIndex}}">
|
||||
<block wx:for="{{calendar}}" wx:key="{{index}}">
|
||||
<swiper-item class="cell">
|
||||
<view wx:for="{{item}}" wx:for-item="data" class='{{data.isSelected? "item isActive" : "item"}}' wx:key="{{index}}" wx:for-index="idx" data-idx='{{idx}}' data-index='{{index}}' bindtap='clickItem'>
|
||||
<view class='date'>{{data.date}}</view>
|
||||
<!-- wx:if="{{data.isSelected}}" -->
|
||||
<view class='date' >{{data.week}}</view>
|
||||
<view class='flg' wx:if="{{data.flg == 1}}">预</view>
|
||||
<view class='flg past' wx:if="{{data.flg == 2}}">预</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
<!-- wx:if="{{currentIndex < calendar.length - 1}}" -->
|
||||
<view class='img' bindtap='rightClick'>
|
||||
<image src='../../images/43@3x.png' mode='aspectFit'></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='list'>
|
||||
<view class='cell' wx:for="{{venueLessons}}" wx:key="{{index}}" bindtap='clickCell' data-id='{{item.id}}'>
|
||||
<view class='image-box'>
|
||||
<image src='{{item.coach.avatar}}' mode='aspectFill'></image>
|
||||
<!-- <view class='sold-out'>已售{{item.saleNum}}份</view> -->
|
||||
</view>
|
||||
<view class='cell-center'>
|
||||
<view class='title-box'>
|
||||
<text>{{item.name}}</text>
|
||||
<view wx:for="{{item.venueLessonTagConfigs}}" wx:for-item="i" wx:for-index="idx" wx:key="{{idx}}" class='tip'>{{i.name}}</view>
|
||||
</view>
|
||||
<text>时间: {{item.startTime}} ~ {{item.endTime}}</text>
|
||||
<text>价格: ￥{{item.price}} </text>
|
||||
</view>
|
||||
<view class='{{item.flg == 0? "type-btn isActive" : "type-btn"}}'>{{item.flg == 0 ? "预约":(item.flg == 1? "结束" : "满额")}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='newplot' wx:if="{{isShowNewplot && venueLessons.length == 0}}">
|
||||
<image src='../../images/noContent.png'></image>
|
||||
<text>暂无课程 ~</text>
|
||||
</view>
|
||||
|
||||
<view class='share-btn-box'>
|
||||
<button open-type='share'></button>
|
||||
<image src='https://yingdd.oss-cn-hangzhou.aliyuncs.com/9bc27242fd0c9f9f08d867dc027cc82b.png' style='width:100%; height: 100%'></image>
|
||||
</view>
|
||||
226
pages/bookClasses/index.wxss
Normal file
226
pages/bookClasses/index.wxss
Normal file
@@ -0,0 +1,226 @@
|
||||
/* pages/bookClasses/index.wxss */
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 140rpx;
|
||||
padding: 0 16rpx;
|
||||
background: #1a191e;
|
||||
}
|
||||
|
||||
.header .swiper {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
margin: 0 10rpx;
|
||||
}
|
||||
|
||||
.header .img {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20rpx;
|
||||
height: 100%;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
|
||||
.header .img>image {
|
||||
width: 20rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.header .swiper .cell {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header .swiper .cell .item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: calc((100% - 120rpx)/7);
|
||||
/* height: 60rpx; */
|
||||
height: 70rpx;
|
||||
border: 2rpx solid #57565a;
|
||||
border-radius: 10rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.header .swiper .cell .item .date {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.header .swiper .cell .item.isActive {
|
||||
/* flex-direction: column; */
|
||||
/* width: calc((100% - 140rpx)/7 + 20rpx); */
|
||||
/* height: 70rpx; */
|
||||
border: 2rpx solid #b39a29;
|
||||
color: #9b8627;
|
||||
}
|
||||
|
||||
.header .swiper .cell .item .flg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(35%, -50%);
|
||||
height: 36rpx;
|
||||
width: 36rpx;
|
||||
font-size: 20rpx;
|
||||
background: #ffda2e;
|
||||
color: #1a191e;
|
||||
line-height: 36rpx;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header .swiper .cell .item .flg.past {
|
||||
background: #989898;
|
||||
}
|
||||
|
||||
.list .cell {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 160rpx;
|
||||
margin-top: 30rpx;
|
||||
padding: 0 16rpx;
|
||||
background: #1a191e;
|
||||
}
|
||||
|
||||
.list .cell .image-box {
|
||||
position: relative;
|
||||
width: 130rpx;
|
||||
height: 110rpx;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
.list .cell .image-box>image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.list .cell .image-box .sold-out {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 30rpx;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
text-align: center;
|
||||
line-height: 30rpx;
|
||||
}
|
||||
|
||||
.list .cell .cell-center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
flex: 1;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
|
||||
.list .cell .cell-center .title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.list .cell .cell-center .title-box>text {
|
||||
color: #fff;
|
||||
font-size: 26rpx;
|
||||
line-height: 26rpx;
|
||||
}
|
||||
|
||||
.list .cell .cell-center .title-box .tip {
|
||||
margin-left: 10rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 20rpx;
|
||||
color: #a08a27;
|
||||
border: 2rpx solid #675a23;
|
||||
border-radius: 4rpx;
|
||||
padding: 4rpx 6rpx;
|
||||
}
|
||||
|
||||
.list .cell .cell-center>text {
|
||||
font-size: 24rpx;
|
||||
line-height: 24rpx;
|
||||
color: #b89e29;
|
||||
}
|
||||
|
||||
.list .cell .cell-center>text:last-child {
|
||||
margin-top: 12rpx;
|
||||
}
|
||||
|
||||
.list .cell .type-btn {
|
||||
position: absolute;
|
||||
top: calc(50% + 6rpx);
|
||||
right: 20rpx;
|
||||
transform: translateY(-50%);
|
||||
height: 50rpx;
|
||||
width: 100rpx;
|
||||
background: #767578;
|
||||
color: #1a191e;
|
||||
text-align: center;
|
||||
line-height: 50rpx;
|
||||
border-radius: 25rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
|
||||
.list .cell .type-btn.isActive {
|
||||
background: #ffda2e;
|
||||
}
|
||||
|
||||
.newplot {
|
||||
position: fixed;
|
||||
top: 270rpx;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.newplot>image {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
margin-top: -200rpx;
|
||||
}
|
||||
|
||||
.share-btn-box {
|
||||
position: fixed;
|
||||
right: 30rpx;
|
||||
bottom: 130rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 110rpx;
|
||||
height: 110rpx;
|
||||
color: #1a191e;
|
||||
font-size: 24rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.share-btn-box>button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
font-size: 24rpx;
|
||||
color: #1a191e;
|
||||
}
|
||||
.share-btn-box>button::after {
|
||||
border: none;
|
||||
}
|
||||
Reference in New Issue
Block a user