• 微信小程序订单页面

    说明：头部有一个三种预约状态的切换

    wxml页面：

    1. <!-- 切换栏 -->
    2. <view class="swiper-tab">
    3. <block wx:for="{{swipertab}}" wx:key="sptab">
    4. <view class="swiper-tab-list {{currtab == item.index ? 'on' : ''}}" data-current="{{item.index}}" bindtap="tabSwitch">{{item.name}}</view>
    5. </block>
    6. </view>
    7.  
    8. <swiper current="{{currtab}}" class="swiper-box" duration="300" style="height:{{deviceH-31}}px" bindchange="tabChange">
    9. <!-- 完成 -->
    10. <swiper-item>
    11. <scroll-view class="hot-box" scroll-y="true">
    12. <view class="orderDetails" wx:for="{{alreadyOrder}}" wx:key=" ">
    13. <view class="orderListTitle">
    14. <text class="userName">{{item.name}}</text>
    15. <text class="orderStatus">{{item.state}}</text>
    16. </view>
    17. <view class="orderListDetails">
    18. <view class="productImg">
    19. <image src="{{item.url}}" background-size="cover"></image>
    20. </view>
    21. <view class="productInfo">
    22. <view class="productTitle">预定时间: {{item.time}}</view>
    23. <text class="productPrice">当前状态：{{item.status}}</text>
    24. </view>
    25. </view>
    26. <view class="productCount">
    27. <view>
    28. <text>合计：￥{{item.money}}</text>
    29. </view>
    30. </view>
    31. </view>
    32. </scroll-view>
    33. </swiper-item>
    34. <!-- 待付款 -->
    35. <swiper-item>
    36. <scroll-view class="hot-box" scroll-y="true">
    37. <view class="orderDetails" wx:for="{{waitPayOrder}}" wx:key=" ">
    38. <view class="orderListTitle">
    39. <text class="userName">{{item.name}}</text>
    40. <text class="orderStatus">{{item.state}}</text>
    41. </view>
    42. <view class="orderListDetails">
    43. <view class="productImg">
    44. <image src="{{item.url}}" background-size="cover"></image>
    45. </view>
    46. <view class="productInfo">
    47. <view class="productTitle">预定时间: {{item.time}}</view>
    48. <text class="productPrice">当前状态：{{item.status}}</text>
    49. </view>
    50. </view>
    51. <view class="productCount">
    52. <view>
    53. <text>合计：￥{{item.money}}</text>
    54. </view>
    55. </view>
    56. </view>
    57. </scroll-view>
    58. </swiper-item>
    59. <!-- 取消 -->
    60. <swiper-item>
    61. <scroll-view class="hot-box" scroll-y="true">
    62. <view class="orderDetails" wx:for="{{lostOrder}}" wx:key=" ">
    63. <view class="orderListTitle">
    64. <text class="userName">{{item.name}}</text>
    65. <text class="orderStatus">{{item.state}}</text>
    66. </view>
    67. <view class="orderListDetails">
    68. <view class="productImg">
    69. <image src="{{item.url}}" background-size="cover"></image>
    70. </view>
    71. <view class="productInfo">
    72. <view class="productTitle">预定时间: {{item.time}}</view>
    73. <text class="productPrice">当前状态：{{item.status}}</text>
    74. </view>
    75. </view>
    76. <view class="productCount">
    77. <view>
    78. <text>合计：￥{{item.money}}</text>
    79. </view>
    80. </view>
    81. </view>
    82. </scroll-view>
    83. </swiper-item>
    84.  
    85. </swiper>

    wxss样式：

    1. /*切换栏*/
    2. .swiper-tab {
    3. height: 40px;
    4. line-height: 40px;
    5. background: #3B3B3B;
    6. color:#fff ;
    7. display: flex;
    8. position: relative;
    9. z-index: 2;
    10. flex-direction: row;
    11. justify-content: center;
    12. align-items: center;
    13. border-bottom:1px solid black;
    14. }
    15.  
    16. .swiper-tab-list {
    17. margin: 0 30px;
    18. padding: 0 4px;
    19. font-size: 15px;
    20. }
    21.  
    22. .on {
    23. border-bottom:2px solid #fff;
    24. color: #f5f5f5;
    25. }
    26.  
    27. .navTopList {
    28. display: flex;
    29. 100%;
    30. height: 70rpx;
    31. background: #fff;
    32. border-bottom: 1rpx solid #BEBEBE ;
    33. margin-top:5px;
    34. }
    35.  
    36. .navTopList .order-info {
    37. text-align: center;
    38. }
    39.  
    40. .navTopList .order-info view {
    41. 56rpx;
    42. height: 56rpx;
    43. margin-left: 31rpx;
    44. }
    45.  
    46. .navTopList .order-info text {
    47. font-size: 34rpx;
    48. }
    49.  
    50. .navTopList .order-info text.active {
    51. color: #ff6662;
    52. }
    53.  
    54. .navTopList .ywc,.navTopList .dfk,.navTopList .yqx {
    55. flex: 1;
    56. }
    57.  
    58.  
    59. /*订单列表*/
    60. .orderDetails {
    61. background: #fff;
    62. border-bottom: 20rpx solid #f5f5f5;
    63. }
    64.  
    65. .orderListTitle {
    66. height: 100rpx;
    67. line-height: 100rpx;
    68. border-bottom: 1rpx solid #BEBEBE;
    69. }
    70.  
    71. .orderListTitle .userName {
    72. padding-right: 50rpx;
    73. margin-left:10px;
    74. }
    75.  
    76. .orderListTitle .orderStatus {
    77. float: right;
    78. margin-right: 20rpx;
    79. color: #2f7b27;
    80. font-size: 34rpx;
    81. }
    82.  
    83. .orderListDetails {
    84. display: flex;
    85. height: 200rpx;
    86. border-bottom: 1rpx solid #f3f3f3;
    87. }
    88.  
    89. .orderListDetails .productImg {
    90. flex: 1;
    91. height:180rpx;
    92. 120px;
    93. margin-top: 20rpx;
    94. margin-left: 20rpx;
    95. }
    96.  
    97. .orderListDetails .productImg image {
    98. 100px;
    99. height: 90%;
    100. }
    101.  
    102. .orderListDetails .productInfo {
    103. flex: 4;
    104. margin: 40rpx 10px 20px 30rpx;
    105. font-size:15px;
    106.  
    107. }
    108.  
    109. .orderListDetails .productInfo .productTitle {
    110. font-size:15px;
    111. overflow: hidden;
    112. display: -webkit-box;
    113. -webkit-line-clamp: 2;
    114. -webkit-box-orient: vertical;
    115. margin-bottom:10px;
    116. }
    117.  
    118. .productCount {
    119. height: 80rpx;
    120. line-height: 80rpx;
    121. border-bottom: 1rpx solid #f3f3f3;
    122. }
    123.  
    124. .productCount>view {
    125. float: right;
    126. margin-right: 30rpx;
    127. }

    js：主要是在data中给切换栏配置参数，和默认显示第几个栏；

    1. // pages/order/order.js
    2. Page({
    3.  
    4. /**
    5. * 页面的初始数据
    6. */
    7. data: {
    8. currtab: 0,
    9. swipertab: [{ name: '已完成', index: 0 }, { name: '待付款', index: 1 }, { name: '已取消', index: 2 }],
    10. },
    11.  
    12. /**
    13. * 生命周期函数--监听页面加载
    14. */
    15. onLoad: function (options) {
    16.  
    17. },
    18. /**
    19. * 生命周期函数--监听页面初次渲染完成
    20. */
    21. onReady: function () {
    22. // 页面渲染完成
    23. this.getDeviceInfo()
    24. this.orderShow()
    25. },
    26.  
    27. getDeviceInfo: function () {
    28. let that = this
    29. wx.getSystemInfo({
    30. success: function (res) {
    31. that.setData({
    32. deviceW: res.windowWidth,
    33. deviceH: res.windowHeight
    34. })
    35. }
    36. })
    37. },
    38.  
    39. /**
    40. * @Explain：选项卡点击切换
    41. */
    42. tabSwitch: function (e) {
    43. var that = this
    44. if (this.data.currtab === e.target.dataset.current) {
    45. return false
    46. } else {
    47. that.setData({
    48. currtab: e.target.dataset.current
    49. })
    50. }
    51. },
    52.  
    53. tabChange: function (e) {
    54. this.setData({ currtab: e.detail.current })
    55. this.orderShow()
    56. },
    57.  
    58. orderShow: function () {
    59. let that = this
    60. switch (this.data.currtab) {
    61. case 0:
    62. that.alreadyShow()
    63. break
    64. case 1:
    65. that.waitPayShow()
    66. break
    67. case 2:
    68. that.lostShow()
    69. break
    70. }
    71. },
    72. alreadyShow: function(){
    73. this.setData({
    74. alreadyOrder: [{ name: "跃动体育运动俱乐部(圆明园店)", state: "交易成功", time: "2018-09-30 14:00-16:00", status: "已结束", url: "../../images/bad0.png", money: "132" }, { name: "跃动体育运动俱乐部(圆明园店)", state: "交易成功", time: "2018-10-12 18:00-20:00", status: "未开始", url: "../../images/bad3.jpg", money: "205" }]
    75. })
    76. },
    77.  
    78. waitPayShow:function(){
    79. this.setData({
    80. waitPayOrder: [{ name: "跃动体育运动俱乐部(圆明园店)", state: "待付款", time: "2018-10-14 14:00-16:00", status: "未开始", url: "../../images/bad1.jpg", money: "186" }],
    81. })
    82. },
    83.  
    84. lostShow: function () {
    85. this.setData({
    86. lostOrder: [{ name: "跃动体育运动俱乐部(圆明园店)", state: "已取消", time: "2018-10-4 10:00-12:00", status: "未开始", url: "../../images/bad1.jpg", money: "122" }],
    87. })
    88. },
    89.  
    90.  
    91. /**
    92. * 生命周期函数--监听页面显示
    93. */
    94. onShow: function () {
    95.  
    96. },
    97.  
    98. /**
    99. * 生命周期函数--监听页面隐藏
    100. */
    101. onHide: function () {
    102.  
    103. },
    104.  
    105. /**
    106. * 生命周期函数--监听页面卸载
    107. */
    108. onUnload: function () {
    109.  
    110. },
    111.  
    112. /**
    113. * 页面相关事件处理函数--监听用户下拉动作
    114. */
    115. onPullDownRefresh: function () {
    116.  
    117. },
    118.  
    119. /**
    120. * 页面上拉触底事件的处理函数
    121. */
    122. onReachBottom: function () {
    123.  
    124. },
    125.  
    126. /**
    127. * 用户点击右上角分享
    128. */
    129. onShareAppMessage: function () {
    130.  
    131. }
    132. })
  • 相关阅读:
    图床
    MarkDown认识与入门
    IIS Express
    HTML中的英文缩写标记、属性
    AI-->从新建文档开始说起，串联相关色彩知识
    微软相关软件、操作系统常用下载方法（附离线方式）
    SubLime3 Emmet插件终极教程
    sublime text 3 扩展插件SideBarEnhancements用法教程
    几款前端开发工具比较
    关于VUE项目中报Error: Avoided redundant navigation to current location: 的错
  • 原文地址：https://www.cnblogs.com/gxywb/p/10761607.html
Copyright © 2020-2023  润新知