//JS
data: {
navNum:0,
navList: [
{
id: 1,
name: '已预约'
},
{
id: 2,
name: '已消费'
},
{
id: 3,
name: '已取消'
},
],
shopList0: [
{
id: 1,
image: '/imgs/news/class_1.png',
coach: '张胜男',
time: '2017-10-10 09:00-10:00',
age: '11,12',
adress: '浙江省，杭州市，余杭区，乔司镇，保亿风景晨缘G1，128楼，208',
num: 10,
selected: true,
},
{
id: 1,
image: '/imgs/news/class_1.png',
coach: '张胜男',
time: 'er年',
age: '11,12',
adress: '杭州',
num: 20,
selected: false,
}
],
shopList1: [
{
id: 1,
image: '/imgs/news/class_1.png',
coach: '张胜男',
time: 'er年',
age: '11,12',
adress: '杭州',
num: 20,
selected: false,
}
],
shopList2: [
{
id: 1,
image: '/imgs/news/class_1.png',
coach: '张胜男',
time: '2017-10-10 09:00-10:00',
age: '11,12',
adress: '浙江省，杭州市，余杭区，乔司镇，保亿风景晨缘G1，128楼，208',
num: 10,
selected: true,
},
{
id: 1,
image: '/imgs/news/class_1.png',
coach: '张胜男',
time: 'er年',
age: '11,12',
adress: '杭州',
num: 20,
selected: false,
}
],
shopListN: [],
},
// 分页菜单函数
selectNav: function (e) {
var that=this;
// console.log(e.currentTarget.dataset.id)
let id = e.currentTarget.dataset.id;
let index = e.currentTarget.dataset.index;
this.setData({
navNum: index
})
switch (index) {
case 1:
(function(){
that.setData({
shopListN: that.data.shopList0
})
})()
break;
case 2:
(function () {
that.setData({
shopListN: that.data.shopList1
})
})()
break;
default:
(function () {
that.setData({
shopListN: that.data.shopList2
})
})()
}
},
//css
.aside{
border-bottom: 1px solid #f7f7f7;
}
.type-nav{
width: 33.33%;
/* text-align: center; */
height: 88rpx;
">#fff;
}
.type-nav>view text{
color: #333;
margin-bottom: 20rpx;
margin-top: 10rpx;
font-size: 34rpx;
}
.type-nav>view view{
width: 48rpx;
border-bottom: 4rpx solid transparent;
}
.aside .type-nav>view .selected{
color: #19ad17;
border-color: #19ad17;
}
.list{
width: 100%;
}
.news-box{
width: 100%;
">white;
padding: 20rpx 24rpx;
border-bottom: 1rpx solid #f7f7f7;
box-sizing: border-box;
}
.new-left{
float: left;
width: 136rpx;
height: 136rpx;
}
.news-img{
width: 136rpx;
height: 136rpx;
margin: 0 auto;
}
.news-img image{
width: 100%;
height: 100%;
border-radius:50%;
}
.news-title {
flex: 1;
padding-left: 20rpx;
box-sizing: border-box;
}
.news-title>view{
width: 100%;
overflow: hidden;
}
.new-titleright{
margin-left: 30rpx;
box-sizing: border-box;
}
.new-titleright button{
margin-top: 10px;
padding: 10rpx 20rpx;
box-sizing: border-box;
font-size: 30rpx;
">#19ad17;
}
.order-order{
margin-top: 20rpx;
text-align: center;
}
.order-order {
font-size: 26rpx;
color:#19ad17;
}
.order-order>text{
font-size: 32rpx;
}
.news-name{
font-size: 32rpx;
}
.news-name2{
width: 100%;
font-size: 24rpx;
line-height: 36rpx;
}
//wxml
<view class="appoint-container">
<!-- menue -->
<view class="aside flex">
<block wx:key="navList" wx:for="{{navList}}">
<view class="type-nav flexca" bindtap="selectNav" data-index="{{index}}">
<view class='flexda'>
<text class="{{navNum == index ? 'selected' : ''}}">{{item.name}}</text>
<view class="{{navNum == index ? 'selected' : ''}}"></view>
</view>
</view>
</block>
</view>
<!-- content -->
<view class="list">
<block wx:key="ishesList" wx:for="{{shopListN}}">
<view class="news-box flexa" data-goods="{{item.id}}">
<view class='new-left'>
<view class="news-img" bindtap='newsDetail' data-id="{{item.id}}">
<image src="{{item.image}}"></image>
</view>
</view>
<view class="news-title">
<view class="news-name">
教练：
<text>{{item.coach}}</text>
</view>
<view class="news-name2">
年龄限制：
<text>{{item.age}}</text>
</view>
<view class="news-name2">
时间：
<text>{{item.time}}</text>
</view>
<view class="news-name2">
地点：
<text>{{item.adress}}</text>
</view>
</view>
<view wx:if="{{navNum==0?true:''}}" class="new-titleright">
<button class='button' data-id="{{item.time}}" data-index='{{index}}' bindtap='orderDelete'>取消预约</button>
<view class="order-order">
已预约
<text>{{item.num}}</text>人
</view>
</view>
<view wx:if="{{navNum==1?true:''}}" class="new-titleright">
<view class="order-order">
<text>已消费</text>
</view>
</view>
<view wx:if="{{navNum==2?true:''}}" class="new-titleright">
<view class="order-order">
<text>已取消</text>
</view>
</view>
</view>
</block>
</view>
</view>