<view class="movie">
  <view class="nav_bar">
    <scroll-view class="nav_bar_scroll" scroll-x="true">
      <block wx:for="{{types}}" wx:key="" wx:for-item="type">
        <block>
          <view bindtap="changeType" class="{{type.value == currentType ? 'current' : ''}} scroll_item" data-value="{{type.value}}">{{type.title}}</view>
        </block>
      </block>
    </scroll-view>
  </view>

  <!-- 活动列表 -->
  <view class="list">
    <view class="card" wx:for="{{vipList}}" wx:key="{{item.id}}" data-value="{{item.id}}" bindTap="buyVIP">
      <text class="type_text">VIP</text>
      <view class="info">
        <view class="f-name">
          <text class="info_item">{{item.itemName}}</text> 
        </view>
        <view class="info_item" style="display:flex;flex-direction:row;align-items:center">
          <text style="font-size:11pt;color:gray">{{item.describe}}</text>
        </view>
      </view>
      <text class="money">{{item.amount/100}}元</text>
    </view>
  </view>
</view>

.movie {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "微软雅黑"
}
.nav_bar{
    box-sizing:border-box;
    position: fixed;
    top: 0px;
    left:0px;
    width: 100%;
    border-bottom: 1px solid #D5D5D5;
    display: flex;
    background-color: #ffffff;
    z-index: 1000;
}
.nav_bar_scroll{
    flex:1;
    font-size:30rpx;
    width: 120rpx;
    height: 90rpx;
    box-sizing: border-box;
    white-space: nowrap;
}
.scroll_item{
    display: inline-block;
    padding: 0 20rpx;
    width:148rpx;
    text-align:center;
    line-height:90rpx;
}

.nav_bar_scroll .current{
    color:#479de6;
}

.f-name {
  display: flex;
  flex-direction: row;
  text-align: center;
  height: 23px;
  line-height: 20px;
}

.choose {
  color: red;
}

.card {
  display: flex;
  flex-direction: row;
  margin-bottom: 8px;
  background-color: #ffffff;
  padding: 7px 12px 7px 12px;
  line-height: 40px;
}

.type_text{
  font-size: 40rpx;
  line-height: 120rpx;
  height: 120rpx;
  width: 120rpx;
  text-align: center;
  color: white;
  border-radius: 60rpx;
  background:#479de6;
}

.info {
  display: flex;
  flex-direction: column;
  width: 450rpx;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
  padding-left: 10px;
  margin-top:5px;
}

.info_item {
  height: 55rpx;
  font-size:12pt;
  text-overflow: ellipsis;
}

.money {
  color: #fb5d5d;
  text-align: center;
  font-size: 30rpx;
  background: transparent;
  position: relative;
}

.body {
  display: flex;
  flex-direction: column;
  background-color: lightgrey;
}

.list {
  margin-top: 100rpx;
  width:100%;
}

var app = getApp();
var dialog = require("../../utils/dialog.js")
var Util = require("../../utils/util.js");
var api = require("../../utils/api.js");

Page({
    onLoad: function (options) {
        this.getList(1);
    },

    getList:function(type){
    	dialog.loading();
		var that = this;

	    api.getVIPInfo({
	      data: {
	        viplev: type
	      },
	      success: (res) => {
	      	dialog.hide();
	      	that.data.vipList = res.data.result;
	        that.setData(that.data);
	      },
	      fail: (res) => {
	      	dialog.toast("网络出错了~");
	      }
	    });
    },

    //点击某一个title条
  changeType:function(e){
    var type = e.currentTarget.dataset.value
    if(type == this.data.currentType){
      return;
    }
    this.setData({currentType:type})
    this.data.currentType = type;
    this.getList(type)
  },

  buyVIP:function(view){
	var vipId = e.currentTarget.dataset.value;
	wx.showModal({
	    title: '提示',
	    content: '小程序目前暂不支持在线支付，请到APP完成支付',
	    confirmColor: '#479de6',
	    success: function(res) {
	        
	    }
	})
  },

 onShareAppMessage: function() {
     return {
       title:'云车VIP',
       path:'pages/vip/vip'
     }
 },

  data: {
    vipList:[],
    types:[{
    	value:1,
    	title:"VIP(5座)"
    },
    {
    	value:2,
    	title:"VIP(7座)"
    },
    {
    	value:3,
    	title:"SVIP(5座)"
    },
    {
    	value:4,
    	title:"SVIP(7座)"
    }],
    currentType:1, 
  }
})