实验3 [小程序API应用]-仿12306

已于 2025-04-01 11:37:54 修改
阅读量1k 收藏 15
点赞数 9
文章标签： 小程序
于 2025-04-01 11:20:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61876486/article/details/146905594
版权
  • 实验目的
  1. 掌握小程序API的使用；
  2. 掌握小程序API开发，能够实现仿智行火车票12306；
  • 实验准备与环境
  1. PC
  2. Windows操作系统
  3. 微信开发者工具
  • 实验要求
  1. 学习如何应用小程序API知识开发仿智行火车票12306；
  • 实验步骤

功能要求：设计一款模拟“智行订票12306”的微信小程序，实现如下功能：

  1. 底部标签导航，包括火车票、飞机票、汽车票、个人中心标签页。
  2. 火车票有详情列表页。
  3. 个人中心有账号信息、订票信息。
  • 完整代码实现（包含代码和运行截图）
  • Traintickets.wxml
<!-- 轮播图 -->
<view>
  <!-- 定义轮播图的轮播时间为3秒，更换时间为1秒 -->
  <swiper class="banneritem" autoplay="true" interval="3000" duration="1000">
    <!-- 通过for循环获取ja中data的banneritem数组的bannerUrls属性，作为轮播图图片的路径 -->
    <swiper-item wx:for="{{bannerUrls}}" wx:key="url">
      <image src='{{item.url}}' mode="widthFix"></image>
    </swiper-item>
  </swiper>
</view>

<!-- 选择出发地和到达地 -->
<view class="content">
  <!-- 样式选择 -->
  <view class="navbg">
    <view id="0" class="{{currentTab == 0 ? 'select' : 'normal'}}" bindtap="switchNav">火车票</view>
    <view id="1" class="{{currentTab == 1 ? 'select' : 'normal'}}" bindtap="switchNavPlane">飞机票</view>
    <view id="2" class="{{currentTab == 2 ? 'select' : 'normal'}}" bindtap="switchNavBus">汽车票</view>
  </view>
  <view class="formbg">
    <form bindsubmit="formSubmit">
    <!-- 通过实现对data的startStation和endStation属性获取到初始的出发站和达到站 -->
      <view class="station">
        <view>
          <input name="startStation" value="{{startStation}}" />
        </view>
        <!-- 通过swapContent方法实现值得交换 -->
        <view bindtap="swapContent" data-start="{{startStation}}" data-end="{{endStation}}">
          <image src="/images/train/换站.jpg" style="width:44px;height:45px;"></image>
        </view>
        <view>
          <input name="endStation" value="{{endStation}}" />
        </view>
      </view>
      
      <view class="hr"></view>
      <!-- 获取到今天的日期并显示 -->
      <!-- <view class="station">
        <picker name="date" value="{{todayDate}}" start="2019-1-1" end="2020-12-31" bindchange="bindDateChange">
          <view>{{ todayDate}}</view>
        </picker>
        <view style="width:50%">></view>
        <view >
      <text style="color:#5495E6; margin-left: 20rpx; font-size: 10rpx;">
      今天
      </text></view>
    <view class="week-box">
            <input name="week" value="{{todayWeek}}" />
    </view>
      </view> -->
      <view class="station">
    <view>
      <!-- <picker name="date" value="{{todayDate}}" start="2019-1-1" end="2020-12-31" bindchange="bindDateChange">
          <view>{{ todayDate}}</view>
        </picker> -->
        <input name="date" value="{{todayDate}}" />
    </view>
    <view >
      <text style="color:#5495E6; margin-left: 20rpx; font-size: 10rpx;">
      今天
      </text></view>
    <view class="week-box">
            <input name="week" value="{{todayWeek}}" />
    </view>
</view>
      <!-- 查询车票 -->
 <button class="btn" form-type="submit">查询车票</button>
    </form>
    <view class="record" >
    <view wx:for="{{record}}"  wx:key="id">
      <text>{{item.lishi}}</text>
    </view>
    <!-- <text>南靖--福州</text>
    <text>漳州--厦门</text>
    <text>厦门--福州</text>
    <text>南靖--福州</text> -->
    <view bindtap="clearHistory"><text>清除历史</text> </view>
</view>
  </view>
</view>
<!-- 快捷功能 -->
  <view class="icon">
  <!-- <view wx:for="{{icon}}" wx:key="id">
    <view class="item">
      <view>
        <image src="{{item.iconurl}}" style="width:40px;height:40px;"></image>
      </view>
      <view class="menu">{{item.iconname}}</view>
    </view>
  
  </view> -->
  <!-- 第一行 -->
    <view class="item">
      <view>
        <image src="/images/快捷功能/电视大屏.png" style="width:40px;height:40px;"></image>
      </view>
      <view class="menu">车站大屏</view>
    </view>
    <view class="item">
      <view>
        <image src="/images/快捷功能/火车票.png" style="width:40px;height:40px;"></image>
      </view>
      <view class="menu">快捷火车票</view>
    </view>
    <view class="item">
      <view>
        <image src="/images/快捷功能/铁路一卡通.jpg" style="width:40px;height:40px;"></image>
      </view>
      <view class="menu">铁路e卡通</view>
    </view>
    <view class="item">
      <view>
        <image src="/images/快捷功能/时刻表.jpg" style="width:40px;height:40px;"></image>
      </view>
      <view class="menu">时刻表</view>
    </view>
    <view class="item">
      <view>
        <image src="/images/快捷功能/温馨服务.jpg" style="width:40px;height:40px;"></image>
      </view>
      <view class="menu">温馨服务</view>
    </view>
<!-- 第二行 -->
    <view class="item">
      <view>
        <image src="/images/快捷功能/空铁联运.jpg" style="width:40px;height:40px;"></image>
      </view>
      <view class="menu">空铁联运</view>
    </view>
    <view class="item">
      <view>
        <image src="/images/快捷功能/铁水联运.jpg" style="width:40px;height:40px;"></image>
      </view>
      <view class="menu">铁水联运</view>
    </view>
    <view class="item">
      <view>
        <image src="/images/快捷功能/酒店住宿.jpg" style="width:40px;height:40px;"></image>
      </view>
      <view class="menu">酒店住宿</view>
    </view>
    <view class="item">
      <view>
        <image src="/images/快捷功能/约车.jpg" style="width:40px;height:40px;"></image>
      </view>
      <view class="menu">约车</view>
    </view>
    <view class="item">
      <view>
        <image src="/images/快捷功能/铁路游.jpg" style="width:40px;height:40px;"></image>
      </view>
      <view class="menu">铁路游</view>
    </view>
<!-- 第三行 -->
    <view class="item">
      <view>
        <image src="/images/快捷功能/电视大屏.png" style="width:40px;height:40px;"></image>
      </view>
      <view class="menu">车站大屏</view>
    </view>
    <view class="item">
      <view>
        <image src="/images/快捷功能/火车票.png" style="width:40px;height:40px;"></image>
      </view>
      <view class="menu">快捷火车票</view>
    </view>
    <view class="item">
      <view>
        <image src="/images/快捷功能/铁路一卡通.jpg" style="width:40px;height:40px;"></image>
      </view>
      <view class="menu">铁路e卡通</view>
    </view>
    <view class="item">
      <view>
        <image src="/images/快捷功能/时刻表.jpg" style="width:40px;height:40px;"></image>
      </view>
      <view class="menu">时刻表</view>
    </view>
    <view class="item">
      <view>
        <image src="/images/快捷功能/温馨服务.jpg" style="width:40px;height:40px;"></image>
      </view>
      <view class="menu">温馨服务</view>
    </view>
  </view>
Traintickets.wxss
/* 轮播图 */
.banneritem{
  width: 100%;
  height: 200rpx;

}
.banneritem image{
  width: 100%;
  height: 80rpx;
  overflow: hidden;
}
/* 选择框 */
.today1{
  margin-left: 20rpx; 
  font-size: 5rpx;
}
.content{
  height: 500px;
  background-color: #f4f4f4;
}
/**
导航样式设置 
*/
.navbg{
  width: 92%;
  background-color: #898989;
  height: 40px;
  margin: 0 auto;
  margin-top: -25rpx;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  flex-direction: row;
  z-index: 9999;
  position:relative;
}
.normal{
  width: 40%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #ffffff;
  font-size: 15px;
  margin: 0 auto;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.select{
  width: 40%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #000000;
  font-size: 15px;
  margin: 0 auto;
  background-color: #ffffff;
}
.formbg{
  width: 92%;
  background-color: #ffffff;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 10px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.station{
  display: flex;
  flex-direction: row;
  width: 90%;
  margin: 0 auto;
  text-align: center;
}

.station view{
  height: 45px;
  line-height: 45px;
  font-size: 20px;
  width: 33%;
}
.station picker{
  height: 45px;
  line-height: 45px;
  font-size: 20px;
  width: 33%;
}
.datapicker{
  height: 45px;
  line-height: 45px;
}
.station input{
  height: 45px;
  line-height: 45px;
}
.hr{
  height: 1px;
  background-color: #cccccc;
  opacity: 0.2;
  margin-top: 5px;
  margin-bottom: 5px;
}
.btn{
  width: 100%;
  height: 45px;
  line-height: 45px;
  color: #ffffff;
  text-align: center;
  font-size: 20px;
  background-color: #5495E6;
  margin: 0 auto;
  margin-top: 10px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  
}
.record{
  text-align: center;
  margin-top: 10px;
  font-size: 10px;
  color: #999999;
  display: flex; 
  flex-wrap: nowrap;
  white-space: nowrap; 
  overflow-x: auto;
}
.record text{
  margin-right: 20px;
  white-space: nowrap;
  overflow-x: auto;
}
.week-box{
  color:#5495E6;
  font-size: large;
}
/*查询下面四个快捷查询按钮*/
.icon {
  display: flex;
  /* flex-direction: row; */
  flex-wrap: wrap; /* 添加这一行 */
  margin-top: -550rpx;
  height: 200px;
  background-color: #ffffff;
  padding: 10rpx;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  width: 92%;
  margin-bottom: 10px; /* 调整上下间距，可以根据需要调整具体数值 */
}
.item {
  width: 20%;
  text-align: center;
  margin: 0 auto;
}
.menu {
  width: 20%;
  font-size: 11px;
  width: 100px;
  margin-left: -40rpx;
}

Traintickets.js
// pages/Traintickets/Traintickets.js
const app = getApp();
var page = 1;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //轮播图的图片路径和点击路径
    bannerUrls: [{
        url: '/images/Header/五一出行1.jpg',
        linkUrl: '五一出行'
      },
      {
        url: '/images/Header/旅途佳肴.jpg',
        linkUrl: '旅途佳肴'
      }
    ],
    icon:[
      {
        id:1,
        iconurl:'/images/快捷功能/电视大屏.png',
        iconname:"车站大屏"
      },
      {
        id:2,
        iconurl:'/images/快捷功能/火车票.png',
        iconname:"火车票"
      },      {
        id:3,
        iconurl:'/images/快捷功能/铁路一卡通.jpg',
        iconname:"铁路e卡通"
      },      {
        id:4,
        iconurl:'/images/快捷功能/时刻表.jpg',
        iconname:"时刻表"
      },      {
        id:5,
        iconurl:'/images/快捷功能/温馨服务.jpg',
        iconname:"温馨服务"
      },      {
        id:6,
        iconurl:'/images/快捷功能/空铁联运.jpg',
        iconname:"温馨服务"
      },      {
        id:7,
        iconurl:'/images/快捷功能/铁水联运.jpg',
        iconname:"温馨服务"
      },      {
        id:8,
        iconurl:'/images/快捷功能/酒店住宿.jpg',
        iconname:"温馨服务"
      },      {
        id:9,
        iconurl:'/images/快捷功能/约车.jpg',
        iconname:"温馨服务"
      },      {
        id:10,
        iconurl:'/images/快捷功能/铁路游.jpg',
        iconname:"温馨服务"
      },      {
        id:11,
        iconurl:'/images/快捷功能/电视大屏.png',
        iconname:"温馨服务"
      },      {
        id:12,
        iconurl:'/images/快捷功能/电视大屏.png',
        iconname:"温馨服务"
      },      {
        id:13,
        iconurl:'/images/快捷功能/电视大屏.png',
        iconname:"温馨服务"
      },      {
        id:14,
        iconurl:'/images/快捷功能/电视大屏.png',
        iconname:"温馨服务"
      },      {
        id:15,
        iconurl:'/images/快捷功能/电视大屏.png',
        iconname:"温馨服务"
      },
    ],
    // 导航栏样式切换
    currentTab: 0,
    trainList: [ ],
    imgheights: '0',
    startStation: "福州",
    endStation: "漳州",
    todayDate: "",
    todayWeek: "",
    record: [{
        id: 1,
        lishi: "南靖--厦门"
      },
      {
        id:2,
        lishi: "漳州--厦门"
      },
      {
        id:3,
        lishi: "厦门--福州"
      },
      {
        id:4,
        lishi: "南靖--福州"
      }

    ]
  },
  // 清除历史记录
  clearHistory: function () {
    this.setData({
      record: []
    });
  },
  // 导航栏样式切换
  // 获取到页面的id
  switchNav: function (e) {
    var id = e.currentTarget.id;
    this.setData({
      currentTab: id
    });
  },
  // 点击跳转到飞机票订购页面
  switchNavPlane: function () {
    this.setData({
      currentTab: 1
    });
    wx.navigateTo({
      url: '/pages/planeticket/planeticket',
    });
  },
  // 点击跳转到汽车票订购页面
  switchNavBus: function () {
    this.setData({
      currentTab: 2
    });
    wx.navigateTo({
      url: '/pages/busticket/busticket',
    });
  },
  // 点击交换按钮，实现出发地点与目的地的值
  swapContent: function (e) {
    const start = e.currentTarget.dataset.start;
    const end = e.currentTarget.dataset.end;
    this.setData({
      startStation: end,
      endStation: start
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    const date = new Date();
    const month = date.getMonth() + 1; // 月份从0开始，需要加1
    const day = date.getDate();
    const formattedDate = month + "月" + day + "日";
    const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    const formattedWeek = weekDays[date.getDay()];
    this.setData({
      todayDate: formattedDate,
      todayWeek: formattedWeek
    });
  },
  formSubmit: function (e) {
    console.log(e);
    var startStation = e.detail.value.startStation; //始发站
    var endStation = e.detail.value.endStation; //终点站
    var date = e.detail.value.date; //日期2月2日
    var week = e.detail.value.week; //星期：周四
    wx.navigateTo({
      url: '../train/train?startStation=' + startStation + "&endStation=" + endStation + "&date=" + date + "&week" + week
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})



  • train.wxml

<!--pages/trainList/trainList.wxml-->
<!--日期的设计-->
<view class="date">
  <view>前一天</view>
  <view> {{date}} </view>
  <view>后一天</view>
</view>
<view class="content" style="height:{{winHeight}}px">
  <block wx:for="{{trainList}}" wx:key="id">
    <!--动态渲染，将trainList,winHeight动态绑定到界面-->
    <view class="bg">
      <view class="item">
        <!--始发站，终点站-->
        <view class="wrApper left">
          <view class="normal">{{item.start_station}}</view>
          <view class="bule">{{item.start_time}}</view>
        </view>
        <!--车次，日期-->
        <view class="wrApper center">
          <view class="normal">{{item.train_no}}</view>
          <view class="line"></view>
          <view class="small">{{item.run_time}}</view>
        </view>
        <!--时间-->
        <view class="wrApper right">
          <view class="normal">{{item.end_station}}</view>
          <view class="normal">{{item.end_time}}</view>
        </view>
        <!--票价-->
        <view class="wrApper right">
          <view class="blue">￥{{item.price_list[1].price}}起</view>
        </view>
      </view>
      <!--分割线-->
      <view class="hr"></view>
      <!--剩余座位信息-->
      <view class="seat">
    <view wx:for="{{item.price_list}}" wx:key="id">
        <view>{{item.type}}:<text style="color: rgb(14, 216, 14);">{{item.num}}</text>-----</view>
    </view>
      </view>

    </view>
  </block>
<view class="bottomNav">
  <view class="bottomNav-icon">
    <image src="{{currentTab==0?'/images/火车票页面/筛选1.png':'/images/火车票页面/筛选.png'}}"></image>
    <view id="0" class="{{currentTab==0?'selected':'common'}}" bindtap="switchNav">筛选</view>
  </view>

  <view class="bottomNav-icon">
        <image src="{{currentTab==1?'/images/火车票页面/耗时最短 1.png':'/images/火车票页面/耗时最短.png'}}" ></image>
        <view id="1" class="{{currentTab==1?'selected':'common'}}" bindtap="switchNav">耗时最短</view>
    </view>

    <view class="bottomNav-icon">
        <image src="{{currentTab==2?'/images/火车票页面/tab-发时最早1.png':'/images/火车票页面/tab-发时最早.png'}}" ></image>
        <view id="2" class="{{currentTab==2?'selected':'common'}}" bindtap="switchNav">发时最早</view>
    </view>

    <view class="bottomNav-icon">
        <image src="{{currentTab==3?'/images/火车票页面/回流区价格1.png':'/images/火车票页面/回流区价格.png'}}"></image>
        <view id="3" class="{{currentTab==3?'selected':'common'}}" bindtap="switchNav">价格最低</view>
    </view>

    <view class="bottomNav-icon">
        <image src="{{currentTab==4?'/images/火车票页面/购物车1.png':'/images/火车票页面/购物车.png'}}"></image>
        <view class="bottomNav-text" id="4" class="{{currentTab==4?'selected':'common'}}" bindtap="switchNav">侯补下单</view>
    </view>
</view>
</view>

train.js
var trainData = require('../data/data.js');

Page({
    data: {
        date: '',
        trainList: [],
        winHeight: 600,
        currentTab: '1',
    },

    onLoad: function (e) {
        var startStation = e.startStation;
        var endStation = e.endStation;
        var date = e.date;
        var trainList = trainData.trainList;
        for (var i = 0; i < trainList.length; i++) {
          trainList[i].start_station = startStation;
          trainList[i].end_station = endStation;
      }
        console.log("startStation=" + startStation + "---endStation=" + endStation + "---date=" + date);
        console.log(trainList)
        wx.setNavigationBarTitle({
            title: startStation + '→' + endStation
        });
        this.setData({ date: date });
         // 从data.js文件中获取火车票列表信息
        var size = trainList.length;
        var winHeight = size * 100 + 30;
        this.setData({ trainList: trainList, winHeight: winHeight });
    },

    switchNav: function (e) {
        var id = e.currentTarget.id;
        console.log(id);
        this.setData({ currentTab: id });
    },
});

train.wxss
/* pages/trainList/trainList.wxss */
/*日期样式设置*/
.date{
  height: 40px;
  background-color: #5495e6;
  display: flex;
  flex-direction: row;
}
.date view{
  margin: 0 auto;
  color: #fff;
  padding-top: 10px;
}
.content{
  height: 600px;
  background-color: #f4f4f4;
  padding-top: 10px;
}
.bg{
  width: 95%;
  height: 90px;
  border: 1px #999 solid;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 5px;
  margin-bottom: 10px;
}
.item{
  /*弹性布局*/
  display: flex;
  flex-direction: row;
  padding: 10px;
}
.wrApper{
  width: 25%;
}
.left{
  text-align: left;
}
.center{
  text-align: center;
}
.right{
  text-align: right;
}
.blue{
  color: #5495e6;
  font-weight: bold;
  font-size: 14px;
}
.normal{
  color: #000;
  font-weight: bold;
  font-size: 14px;
}
.small{
  font-size: 13px;
  color: #666;
}
.line{
  height: 1px;
  background-color: #ccc;
  opacity: 0.2;
  width: 80%;
  margin: 3px auto;
}
.buy{
  background-color: red;
  width: 42px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  float: right;
  border-radius: 20px;
  margin-right: 5px;
}
.hr{
  height: 1px;
  background-color: #ccc;
  opacity: 0.2;
}
.seat{
  font-size: 13px;
  display: flex;
  flex-direction: row;
  margin-top: 5px;
  margin-left: 10px;
}
.seat text{
  color: red;
}
.yes{
  margin-right: 10px;
}
.no{
  color: #999;
  margin-right: 10px;
}

/*火车票列表底部导航样式*/
.bottomNav{
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  height: 45px;
  line-height: 45px;
  position: fixed;
  bottom: 0px;
  width: 100%;
  /* height: 120rpx; */
}
.bottomNav view{
  margin: 0 auto;
}
.selected{
  font-size: 13px;
  color: #5495e6;
}
.common{
  font-size: 13px;
  color: rgb(0, 0, 0);
}

.bottomNav-icon{
  display: flex; 
  flex-direction: column;
  align-items: center;
  margin-bottom: -10rpx;

}
.bottomNav image{
  width:10px;
  height:10px; 
  margin-bottom: -10px;
}
    Home.wxml
<!--pages/mycenter/mycenter.wxml-->
<!--账号信息设计-->
<view class="amountBg">
  <!--头像-->
  <view class="img">
    <image src="/images/home/头像.jpg" style="width:49px;height:47px;"></image>
  </view>
  <view class="account">
    <view>李泉城</view>
    <view class="heyanbox">
      <view class="heyan">手机核验成功<image class="heyanimage" src="/images/home/核验成功.png"></image>
      </view>
      <view class="heyan">已实名认证<image class="heyanimage" src="/images/home/核验成功.png"></image>
      </view>
    </view>
  </view>
  <view class="nav">></view>
</view>


<!--订单导航设计-->
<view class="content">
  <view class="order">
    <view class="desc">
      <view>
        <image src="/images/home/乘车人.jpg" style="width:22px;height:25px"></image>
      </view>
      <view>乘车人</view>
    </view>

    <view class="desc" bindtap="grabTicket">
      <view>
        <image src="/images/home/订单.jpg" style="width:22px;height:25px" ></image>
      </view>
      <view>我的订单</view>
    </view>

    <view class="desc">
      <view>
        <image src="/images/home/优惠卷.jpg" style="width:22px;height:25px"></image>
      </view>
      <view>优惠券</view>
    </view>
  </view>


  <!--列表导航设计-->
  <view class="clear"></view>
  <view>
    <image class="student" src="/images/home/学生票.jpg"></image>
  </view>
  <view class="line"></view>

  <view class="cxdx">
    <view class="cxdx-title">
      <h2>出行导向</h2>
    </view>
    <view class="hr"></view>
    <view class="cxdx1">
      <view class="cxdxicon">

        <view>
          <image src="/images/home/车站大屏.jpg" style="width:22px;height:25px"></image>
        </view>
        <view>车站大屏</view>
      </view>

      <view class="cxdxicon">
        <view>
          <image src="/images/home/时刻表.jpg" style="width:22px;height:25px"></image>
        </view>
        <view>时刻表</view>
      </view>

      <view class="cxdxicon">
        <view>
          <image src="/images/home/起售时间.jpg" style="width:22px;height:25px"></image>
        </view>
        <view>起售时间</view>
      </view>
      <view class="cxdxicon">
        <view>
          <image src="/images/home/正晚点查询.jpg" style="width:22px;height:25px"></image>
        </view>
        <view>正晚点查询</view>
      </view>
      <view class="cxdxicon">
        <view>
          <image src="/images/home/票价查询.jpg" style="width:22px;height:25px"></image>
        </view>
        <view>票价查询</view>
      </view>

      <view class="cxdxicon">
        <view>
          <image src="/images/home/换成时间.jpg" style="width:22px;height:25px"></image>
        </view>
        <view>换乘时间</view>
      </view>

      <view class="cxdxicon">
        <view>
          <image src="/images/home/代售点查询.jpg" style="width:22px;height:25px"></image>
        </view>
        <view>代售点查询</view>
      </view>
      <view class="cxdxicon">
        <view>
          <image src="/images/home/更多.jpg" style="width:22px;height:25px"></image>
        </view>
        <view>更多</view>
      </view>
    </view>

  </view>

  <!-- 常用功能 -->
  
  <view class="cygn">
    <view class="cxdx-title">
      <h2>常用功能</h2>
    </view>
    <view class="hr"></view>
    <view class="cxdx1">
      <view class="cxdxicon">

        <view>
          <image src="/images/home/人脸核验.jpg" style="width:22px;height:25px"></image>
        </view>
        <view>人脸核验</view>
      </view>

      <view class="cxdxicon">
        <view>
          <image src="/images/home/指纹登录.jpg" style="width:22px;height:25px"></image>
        </view>
        <view>指纹登录</view>
      </view>

      <view class="cxdxicon">
        <view>
          <image src="/images/home/修改密码.jpg" style="width:22px;height:25px"></image>
        </view>
        <view>修改密码</view>
      </view>
      <view class="cxdxicon">
        <view>
          <image src="/images/home/修改手机号.jpg" style="width:22px;height:25px"></image>
        </view>
        <view>修改手机号</view>
      </view>
      <view class="cxdxicon">
        <view>
          <image src="/images/home/通知设置.jpg "style="width:22px;height:25px"></image>
        </view>
        <view>通知设置</view>
      </view>

      <view class="cxdxicon">
        <view>
          <image src="/images/home/敬老版.jpg" style="width:22px;height:25px"></image>
        </view>
        <view>敬老版</view>
      </view>

      <view class="cxdxicon">
        <view>
          <image src="/images/home/快捷退票.jpg" style="width:22px;height:25px"></image>
        </view>
        <view>快捷退票</view>
      </view>
      <view class="cxdxicon">
        <view>
          <image src="/images/home/学生资质核验.jpg" style="width:22px;height:25px"></image>
        </view>
        <view>学生资质核验</view>
      </view>
    </view>

  </view>

</view>

Home.js
// pages/mycenter/mycenter.js

/**
 * 动态获取昵称，使用App.getUserInfo接口来获取个人信息
 */
var App=getApp()

Page({
  /**
   * 页面的初始数据
   */
  data: {
    userInfo:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // var that=this
    // //以调用应用实例的方法获取全局时间
    // App.getUserInfo(function(userInfo){
    //   console.log(userInfo);
    //   //更新数据
    //   this.setData({
    //     userInfo:userInfo
    //   })
    // })
  },
  /**
   * 通过列表导航进入二级界面，实现方式和进入抢票界面一样
   * 绑定跳转事件，配置相应的跳转路径
   */
  grabTicket:function(){
    wx.navigateTo({
      url:'../Ticket/Ticket'
    })
  },
  onTapStationScreen() {  
    wx.showToast({  
      title: '查看车站大屏幕',  
      icon: 'none',  
      duration: 2000  
    });  
    // 在这里可以添加实际查看车站大屏幕的逻辑  
  },  
  onTapTimetable() {  
    wx.showToast({  
      title: '查看时刻表',  
      icon: 'none',  
      duration: 2000  
    });  
    // 在这里可以添加实际查看时刻表的逻辑  
  },  
  onTapSaleTime() {  
    wx.showToast({  
      title: '查看起售时间',  
      icon: 'none',  
      duration: 2000  
    });  
    // 在这里可以添加实际查看起售时间的逻辑  
  },  
  onTapDelayQuery() {  
    wx.showToast({  
      title: '正晚点查询',  
      icon: 'none',  
      duration: 2000  
    });  
    // 在这里可以添加实际正晚点查询的逻辑  
  },  

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})
Home.wxss
/* pages/mycenter/mycenter.wxss */
/*账号信息样式*/
/* 顶部头像与账号信息样式 */
.amountBg{
  height: 100px;
  background-color: #5495e6;
  display: flex;
  flex-direction: row;
  align-items: center;
}
/* 核验部分样式 */
.heyanbox{
  display: flex;
  flex-direction: row;
}
.heyan{
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 10px;
  padding: 5px;
  margin: 5px;
  height: 30rpx;
  font-size: 20rpx;
  color: black;
  width: 150rpx;
}
.heyanimage {
  width: 20rpx;
  height: 20rpx;
  margin-right: 5px;
}
/* 头像图片样式 */
.img{
  margin-left: 20px;
}

.account{
  width: 70%;
  color: #fff;
  margin-left: 10px;
}
.nav{
  width: 15px;
  color: #fff;
}

/*订单区域样式*/
.content{
  background-color: #f4f4f4;
  height: 500px;
}
.order{
  width: 94%;
  height: 70px;
  display: flex;
  flex-direction: row;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
  align-items: center;
  position: absolute;
  top:90px;
  margin-left: 3%;
}
.desc{
  width: 33%;
  font-size: 13px;
}
/*列表导航设计*/
.student{
  width: 94%;
  height: 70px;
  display: flex;
  flex-direction: row;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
  align-items: center;
  position: absolute;
  margin-left: 3%;
  margin-bottom: 10rpx;
}

.clear{
  padding-top: 70px;
}

.hr{
  height: 1px;
  background-color: #ccc;
  opacity: 0.2;
  margin-bottom: 20rpx;
}
.cxdx{
  width: 94%;
  height: 150px;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
  align-items: center;
  position: absolute;
  margin-left: 3%;
  margin-bottom: 10rpx;
  margin-top: 190rpx;
}

.cxdx1{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.cxdxicon{
  width: 25%;
  font-size: 13px;
  margin-bottom: 20rpx;
}

.cxdx-title {  
  display: flex;  
  justify-content: flex-start; /* 标题靠左对齐 */  
  align-items: center;  
  padding: 10rpx 20rpx; /* 添加内边距 */  
}  

.cygn{
  width: 94%;
  height: 150px;
  background-color: #fff;
  border-radius: 5px;
  text-align: center;
  align-items: center;
  position: absolute;
  margin-left: 3%;
  margin-bottom: 10rpx;
  margin-top: 570rpx;
}

  • Ticket.wxml
<!--pages/trainList/trainList.wxml-->
<!--日期的设计-->

<view class="content" style="height:{{winHeight}}px">
  <block wx:for="{{trainList}}" wx:key="id">
    <!--动态渲染，将trainList,winHeight动态绑定到界面-->
    <view class="cxdx-title">
     乘车日期{{item.ccdata}}
    </view>
    <view class="bg">
<!-- <p>订单号：{{item.dindanID}}</p> -->
<view class="dindantext"><p>订单号：{{item.dindanID}}</p></view>
<view class="hr"></view>
      <view class="item">
        <!--始发站，终点站-->
        <view class="wrApper left">
          <view class="normal">{{item.st}}</view>
          <!-- <view class="normal">漳州</view> -->
          <view class="bule">{{item.start_time}}</view>
        </view>
        <!--车次，日期-->
        <view class="wrApper center">
          <view class="normal">{{item.trainNumber}}</view>
          <view class="line"></view>
          <view class="small">{{item.departureTime}}</view>
        </view>
        <!--时间-->
        <view class="wrApper right">
          <view class="normal">{{item.end_station}}</view>
          <view class="normal">{{item.end_time}}</view>
        </view>
        <!--票价-->
        <view class="wrApper right">
          <view class="blue">￥{{item.price_list[1].price}}</view>
        </view>
      </view>
      <!--分割线-->
      <view class="hr"></view>
      <!--剩余座位信息-->
      <view class="seat">
    <!-- <view wx:for="{{item.price_list}}" wx:key="id">
        <view>{{item.type}}:<text style="color: rgb(14, 216, 14);">{{item.num}}</text>-----</view>
    </view> -->
    <view >
    <view>{{item.zhuangtai}}</view>
    <view>{{item.seatType}}</view>
    </view>
      </view>

    </view>
  </block>

</view>

Ticket.js
var trainData = require('../data/data.js');

Page({
    data: {
        date: '',
        trainList: [],
        winHeight: 600,
        currentTab: '1',
    },

    onLoad: function (e) {
        var trainList = trainData.trainList;
        // wx.setNavigationBarTitle({
        //     title: startStation + '→' + endStation
        // });
        this.setData({ date: trainData });
         // 从data.js文件中获取火车票列表信息
        var size = trainList.length;
        var winHeight = size * 100 + 30;
        this.setData({ trainList: trainList, winHeight: winHeight });
    },

    switchNav: function (e) {
        var id = e.currentTarget.id;
        this.setData({ currentTab: id });
    },
});

Ticket.wxss
/* pages/trainList/trainList.wxss */
/*日期样式设置*/

.content{
  height: 650px;
  background-color: #f4f4f4;
  padding-top: 10px;
  /* padding: 5rpx; */
}
.bg{
  width: 95%;
  height: 120px;
  border: 1px #999 solid;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 5rpx;
}
.item{
  /*弹性布局*/
  display: flex;
  flex-direction: row;
  padding: 10px;
}
.wrApper{
  width: 25%;
}
.left{
  text-align: left;
}
.center{
  text-align: center;
}
.right{
  text-align: right;
}
.blue{
  color: #5495e6;
  font-weight: bold;
  font-size: 14px;
  margin-top: 100rpx;
}
.normal{
  color: #000;
  font-weight: bold;
  font-size: 14px;
}
.small{
  font-size: 13px;
  color: #666;
}
.line{
  height: 1px;
  background-color: #ccc;
  opacity: 0.2;
  width: 80%;
  margin: 3px auto;
}
.buy{
  background-color: red;
  width: 42px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  float: right;
  border-radius: 20px;
  margin-right: 5px;
}
.hr{
  height: 1px;
  background-color: #ccc;
  opacity: 0.2;
  margin-top: -10rpx;
}
.seat{
  font-size: 13px;
  display: flex;
  flex-direction: row;
  /* margin-top: -10rpx; */
  margin-left: 10px;
  margin-top: -20rpx;
}
.seat text{
  color: red;
}
.yes{
  margin-right: 10px;
}
.no{
  color: #999;
  margin-right: 10px;
}

.cxdx-title {  
  display: flex;  
  justify-content: flex-start; /* 标题靠左对齐 */  
  align-items: center;  
  padding: 10rpx 20rpx; /* 添加内边距 */  
  font-size: 30rpx;
  display: flex;
  align-items: center;
  background-color: rgb(172, 165, 165);
  border-radius: 10px;
  padding: 5px;
  margin: 5px;
  height: 20rpx;
  font-size: 20rpx;
  color: black;
  width: 270rpx;
}  

.dindantext{
  font-size: 20rpx;
  margin-left: 30rpx;
  margin-bottom: 20rpx;
}

过客921
关注
微信小程序实战-第6章 API应用案例（下）
andyyah晓波的博客
07-16 1673
本章讲解了canvas绘图、animation动画、文件上传与下载、录音与播放，以及通过WebSocket实现在线聊天系统。通过本章学习，读者应掌握这些技术的使用，能够利用canvas来绘制各种图形；能够使用animation动画实现移动、旋转、移动、缩放等效果；能够根据实际需求开发文件上传、下载、录音、在线聊天等功能。
天气查询-小程序网络API
m0_46965984的博客
03-19 1730
1.服务器域名配置 每一个小程序在与指定域名地址进行网络通信前都必须将该域名地址添加到管理员后台白名单中 需对域名地址https://devapi.qweather.com进行服务器配置 小程序开发者登录mp.weixin.qq.com进入管理员后台,单击“设置”按钮,切换至“开发设置”面板,在“服务器域名”栏中可以添加或修改需要进行网络通信的服务器域名地址 将当前需要使用的接口添加到“request合法域名”中,配置完成后再登录小程序开发工具就允许小程序与指定的服务器域名地址...
仿智行火车票12306微信小程序火车票查询界面设计的实现
m0_73941339的博客
12-26 729
仿智行火车票12306微信小程序火车票 页签切换效果设计和火车票查询区域设计的实现
仿智行火车票12306微信小程序底部标签导航实现
m0_73941339的博客
12-26 591
底部标签导航，放置4个标签：火车票、飞机票、汽车票、个人中心。选中效果图片呈现为蓝色，字体颜色设置蓝色
微信小程序开发仿智行火车票12306.zip
08-08
微信小程序开发仿智行火车票12306，含后台和数据库 采用ssm+mysql设计，能查询到火车票信息
综合案例：仿智行火车票12306微信小程序
10-25
综合案例：仿智行火车票12306微信小程序
python实现12306购票下单
weixin_42496578的博客
05-15 2525
2：进入购票页面获取到提交参数的SubmitToken，同时提交订单时候有一个加密参数，通过分析页面的js代码，发现在页面加载时候就触发的方法挂载了全局的window.json_ua.toString(),我们使用浏览迷模拟这个js执行结果获取加密参数encryptedData，最终通过调用https://kyfw.12306.cn/passport/web/auth/uamtk获取票据，然后根据票据换取全局cookie的tk。废话不多说，先人工走一遍流程，打开查询高铁的页面发现查询接口。
微信小程序实验报告-----学生家教小程序
yh1009的博客
06-19 4292
现今家长望子成龙望女成凤的现象逐渐普遍，并且课堂学习已不满足中国式教育，家长们就愿意花费高昂的费用为自己的孩子请家教，家教市场需求量很大，但家教老师跟这个群体数量又十分短缺，而家教网站又不为大众所熟知，所以一个好的网站辅助宣传工具尤其重要。微信开发者工具是小程序开发的必备工具之一，您可以在其中实时查看小程序的效果，并且可以快速调试和修改代码。在微信小程序开发框架下使用微信开发者工具编写学生家教小程序，在传统家教小程序的基础上作出一定的改变，使得家教小程序的界面更加简洁和美观，使用户能更加快捷的操作。
微信小程序开发之——个人中心-API(2)
我的博客
09-24 3066
一 概述 页面跳转方法：wx.switchTab/wx.navigateTo/wx.redirectTo/wx.reLaunch 从本地相册或照相机拍照：wx.chooseImage 选择用户地址：wx.chooseAddress 拨打电话：wx.makePhoneCall 显示加载及隐藏加载：wx.showLoading、wx.hideLoading 提示信息：wx.showToast 二 页面跳转方法 2.1 页面跳转方法比较 方法 说明 wx.switchTab 只跳转tabBa
【微信小程序开发】一文带你详解小程序组件和 API 的使用
热门推荐
陈橘又青的博客
08-19 1万+
小程序的组件和API是构建小程序的基础，它们提供了丰富的功能和接口，可以帮助我们实现各种操作。通过学习和使用小程序的组件和API，我们可以构建出更加丰富和实用的小程序应用。
实验3：云开发之垃圾分类小程序
m0_73768807的博客
08-26 1491
【问题总结】1、无法进行图像识别，data 返回数据中无 result分析：返回数据 data 中仅有error_code、error_msg 等内容，但 res 返回状态码为 200，即接口调用未出现问题，可以知道是后端接口问题；解决：登录百度云平台，查找监控报表部分，得知返回错误状态码18对应API调用超出QPS限制，领取首月免费资源后重新创建应用，配置API Key和Secret Key后成功展示。【实验体会】通过逐步学习微信云开发，了解了基本的云开发流程，以及相关云数据库云函数。
微信小程序开发项目实例-实验室使用申请小程序(源码).zip
05-21
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的应用服务。在这个“微信小程序开发项目实例-实验室使用申请小程序(源码).zip”中，我们可以深入...
云开发实现——智行微信小程序
Log.e的博客
04-24 2718
1.小程序中主要实现了智行火车票、机票信息的搜索功能 （1）小程序中实现了顶部轮播图 （2）火车票与飞机票的切换效果 （3）出发城市与到达城市的切换 （4）根据时间选择器进行票务筛选功能 最终实现的UI效果： 2.轮播图部分的实现： <view class="content"> <view class="header" style="height:80px...
管理100个小程序-很难吗
jijunjian的专栏
04-23 3010
苦难重业都是让我们更强大
基于开源AI智能名片链动2+1模式S2B2C商城小程序的私域电商与微商融合创新研究
最新发布
专注MarTech应用研究与实施方案
04-30 883
本文聚焦私域电商与微商的差异化与共性特征，剖析传统商业形态变革下两者的演进路径。引入“开源AI智能名片链动2+1模式S2B2C商城小程序”（以下简称“链动小程序”）作为技术载体，揭示其在重构私域商业生态中的关键作用。研究通过构建“人格域-代理链-流量池”三维分析模型，论证链动小程序如何通过AI智能匹配、链动裂变机制与S2B2C资源整合，实现私域电商的人格化运营与微商代理体系的数字化升级。实证表明，该模式可使私域流量转化率提升41%，代理留存周期延长58%，品牌人格化指数增长33%。
为什么选择有版权的答题pk小程序
suncentwl的博客
04-28 341
有版权的答题PK小程序开发团队通常会遵循相关的安全规范和标准，采取加密存储、访问控制等措施来保护用户的个人信息和答题数据，防止数据泄露和被恶意利用，保障用户的隐私安全。源码可追溯与维护：有版权的小程序通常有明确的开发者和源码来源，遇到技术问题或需要进行二次开发时，能够找到专业的团队提供支持和维护，保障小程序的正常运行和功能升级。有版权的答题PK小程序通常会注重题库内容的质量和准确性，确保题目来源合法、内容严谨，避免出现错误或误导性的信息，为用户提供有价值的知识学习和竞赛体验。四、树立良好的品牌形象。
【app逆向】某动app端逆向&小程序端逆向实现接口购票
weixin_45650728的博客
04-28 1402
【app逆向】秀动app端逆向&小程序端逆向实现接口购票
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值