用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

2016-11-26 21:23:22 天下雪原创达人 造轮子 人生巅峰 楼主 488281
点评:界面设计参考:本区demo仅供学习研究之用,版权归原作者所有,禁止商用;
1.png 2.png 3.png 4.png


代码展示:
[JavaScript] 纯文本查看 复制代码
Page({
  data: {
    currentIndex:1,
    startCity:'上海',
    endCity:'北京',
    hotelCity:'上海',
    adultNum: 1,
    childNum: 1,
    rotate: -180
  },
  onLoad: function(){
    console.log('页面加载成功');
  },
  onReady: function(){
    this.animation = wx.createAnimation({
      timingFunction: "ease",
      duration: 400
    })
  },

  minusAdultNum: function(){//减少成人的数量
    if(this.data.adultNum > 0){
      this.data.adultNum--;
      this.setData({
        adultNum: this.data.adultNum
      })
    }
  },
  plusAdultNum: function(){//增加成人的数量
    this.data.adultNum++
    this.setData({
      adultNum: this.data.adultNum
    })
  },

  minusChildNum: function(){//减少儿童的数量
    if(this.data.childNum > 0){
      this.data.childNum--;
      this.setData({
        childNum: this.data.childNum
      })
    }
  },
  plusChildNum: function(){//增加儿童的数量
    this.data.childNum++
    this.setData({
      childNum: this.data.childNum
    })
  },

  rotate_img: function() {//旋转飞机图片
    this.animation.rotateZ(this.data.rotate).step()
    this.setData({
      rotate: -1*this.data.rotate,
      startCity: this.data.endCity,
      endCity: this.data.startCity,
      animation: this.animation.export()
    })
  },
  changeBtn: function(ev) {//单程,往返切换
    this.setData({
      currentIndex: ev.target.dataset.index
    })
  },

  seatchProduct: function(){
    wx.navigateTo({
      url:'../productDetail/productDetail'
    })
  },



  selectCity:function(){//选择城市
    console.log('跳转城市选择页面');
    wx.navigateTo({
      url: '../selectcity/selectcity'
    })
  }

})

[JavaScript] 纯文本查看 复制代码
<!--ticketBooking.wxml-->
<view class="container">
<!--白色背景区域-->
  <view class="wrap">
  <!--按钮切换-->
    <view class="btn" bindtap="changeBtn">
      <view class="{{currentIndex==0?'active':''}}" data-index="0">单程</view>
  	  <view class="{{currentIndex==1?'active':''}}" data-index="1">往返</view>
    </view>

    <!--城市选择-->
    <view class="chooseCity pd-70">
  		<view class="citySelect">
  			<view class="startCity" bindtap="selectCity">{{startCity}}</view>
  			<view class="citySelect_img">
          <view bindtap="rotate_img" animation="{{animation}}">
            <image class="changeCity_bg" src="../../images/changeCity_bg.png"></image>
          </view>
  				<image class="samll_plane" src="../../images/samll_plane.png"></image>
  			</view>
  			<view class="endCity" bindtap="selectCity">{{endCity}}</view>
  		</view>

      <view class="chooseDate">
        <block>
          <picker mode="date">
            <view class="startDate">
              <text class="date">9月8日</text>
              <text class="week">周二出发</text>
            </view>
          </picker>
        </block>
        <block wx:if="{{currentIndex==1}}">
          <picker mode="date">
            <view class="endDate">
              <text class="date">9月11日</text>
              <text class="week">周五返回</text>
            </view>
          </picker>
        </block>
      </view>
    </view>

    <view class="title">酒店</view>

    <view class="chooseCity pd-70 pdt-0">
  		<view class="citySelect">
  			<view class="hotelCity" bindtap="selectCity">{{hotelCity}}</view>
  		</view>

      <view class="chooseDate">
        <block>
          <picker mode="date">
            <view class="startDate">
              <text class="date">9月8日</text>
              <text class="week">周二出发</text>
            </view>
          </picker>
        </block>
        <block>
          <picker mode="date">
            <view class="endDate">
              <text class="date">9月11日</text>
              <text class="week">周五返回</text>
            </view>
          </picker>
        </block>
      </view>
    </view>

    <view class="title">人数</view>

    <view class="person">
      <view class="personNum">
        <view class="text">成人</view>
        <view class="outer">
          <view class="minus" bindtap="minusAdultNum">—</view>
          <view class="num">{{adultNum}}</view>
          <view class="plus" bindtap="plusAdultNum">+</view>
        </view>
      </view>

      <view class="personNum ml-30">
        <view class="text">儿童</view>
        <view class="outer">
          <view class="minus" bindtap="minusChildNum">—</view>
          <view class="num">{{childNum}}</view>
          <view class="plus" bindtap="plusChildNum">+</view>
        </view>
      </view>
      <view class="tishi">
        <image src="../../images/tishi.png" class="tsimg"></image>
      </view>

    </view>

    <button class="sureBtn" bindtap="seatchProduct">确定</button>
  </view>
</view>

[CSS] 纯文本查看 复制代码
.container {
  height: 100vh;
}

.pd-70 {
  padding: 0 1.867rem;
}

.wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  font-size: 32rpx;
  justify-content: center;
  border-bottom: 2rpx solid #cececf;
}

.btn view {
  width: 40%;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  color: #000;
  font-weight: 500;
}

.btn view.active {
  color: #59A5F0;
  border-bottom: 7rpx solid #59A5F0;
}

.chooseCity {
  box-sizing: border-box;
  padding-top: 0.96rem;
  background-color: #fff;
  border-bottom: 2rpx solid #cececf;
  overflow: hidden;
}

.pdt-0 {
  padding-top: 0;
}

.chooseCity .citySelect {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 2.667rem;
  line-height: 2.667rem;
  font-size: 42rpx;
}

.chooseCity .citySelect .hotelCity {
  width: 100%;
  border-bottom: 1rpx solid #F0EFF5;
  color: #4A586A;
}

.chooseCity .citySelect .startCity {
  width: 6.187rem;
  border-bottom: 1rpx solid #F0EFF5;
  color: #4A586A;
}

.chooseCity .citySelect .citySelect_img {
  width: 2.693rem;
  height: 2.587rem;
  position: relative;
  margin-top: 0.533rem;
}

.chooseCity .citySelect .citySelect_img view {
  position: absolute;
  z-index: 99;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.chooseCity .citySelect .citySelect_img view .changeCity_bg {
  width: 2.693rem;
  height: 2.693rem;
}

.chooseCity .citySelect .citySelect_img .samll_plane {
  width: 1.653rem;
  height: 1.12rem;
  position: absolute;
  top: 54%;
  left: 54%;
  transform: translate(-50%, -50%);
}

.chooseCity .citySelect .endCity {
  width: 6.187rem;
  border-bottom: 1rpx solid #F0EFF5;
  text-align: right;
  color: #4A586A;
}

.chooseDate {
  display: flex;
  width: 100%;
  justify-content: space-between;
  height: 2.4rem;
  line-height: 2.4rem;
}

.date {
  font-size: 30rpx;
  margin-right: 1.067rem;
}

.week {
  color: #929fb1;
  font-size: 26rpx;
}

.title {
  color: #888;
  width: 100%;
  height: 2.13rem;
  line-height: 2.13rem;
  padding: 0 1rem;
  border-bottom: 2rpx solid #cececf;
  font-size: 30rpx;
}

.person {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  height: 1.813333rem;
  line-height: 1.813333rem;
  padding: 0.8rem 0.533333rem;
  border-bottom: 2rpx solid #cececf;
}

.outer {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  border: 3rpx solid #a9b1bb;
  border-radius: 8rpx;
}

.personNum {
  display: flex;
  flex: 1;
}

.person .ml-30 {
  margin-left: 0.8rem;
}

.outer .minus,
.outer .num,
.outer .plus {
  flex: 1;
  text-align: center;
}

.outer .num {
  border-left: 3rpx solid #a9b1bb;
  border-right: 3rpx solid #a9b1bb;
}

.text {
  font-size: 24rpx;
  color: #536277;
  margin-right: 0.266667rem;
}

.person .minus,
.person .plus {
  width: 25%;
  height: 1.813333rem;
  display: block;
  text-align: center;
}

.minus {
  font-size: 28rpx;
  line-height: 1.813333rem;
  font-weight: bold;
}

.plus {
  font-size: 48rpx;
  line-height: 1.6rem;
}

.tishi {
  width: 0.8rem;
  height: 1.813333rem;
  margin-left: 0.533333rem;
}

.tishi .tsimg {
  width: 0.8rem;
  height: 0.8rem;
  margin-top: 0.506667rem;
}

.sureBtn {
  color: #fff;
  background-color: #58a4ef;
  width: 90%;
  margin-top: 1.333333rem;
}


项目地址及下载:
https://github.com/GaoQ1/wxapp
wxapp-master.zip (358.29 KB, 下载次数: 1225)
有问题请在本站内搜索相应关键词,假如无法解决请在综合交流区内发帖咨询,发帖时请提供详细的问题描述、相关图片及代码。
怎么在自己的开发工具里跑起来
请问去哪儿下载源码
zzzzzzzzz
2016-11-27 15:30:43 turui 架构狮
地板
看起来不错噢
2016-11-27 20:17:46 coffee 架构狮
5#
2016-11-28 10:05:34 melamela 攻城狮
6#
收藏一下
下来看看
2016-11-28 10:20:08 gaaoge 攻城狮
8#
好东西
2016-11-28 10:22:20 织天使 诠释者
9#
好东西,这个要学习一下了。
2016-11-28 10:47:35 lh1245 架构狮
10#
不错,刚刚好
666666666666
666666666666
这个非常的棒啊
2016-11-28 20:17:39 Zero 架构狮
14#
学习学习!!
2016-11-29 08:28:15 luck76 架构狮
15#
good.....................
1234下一页
发新帖
您需要登录后才可以回帖 登录 | 立即注册