微信小程序訂單頁面
阿新 • • 發佈:2019-04-24
borde lse log stat XML 選項 clam size ref
說明:頭部有一個三種預約狀態的切換
wxml頁面:
- <!-- 切換欄 -->
- <view class="swiper-tab">
- <block wx:for="{{swipertab}}" wx:key="sptab">
-
<view class="swiper-tab-list {{currtab == item.index ? ‘on‘ : ‘‘}}" data-current="{{item.index}}" bindtap="tabSwitch">{{item.name}}</view>
- </block>
- </view>
- <swiper current="{{currtab}}" class="swiper-box" duration="300" style="height:{{deviceH-31}}px" bindchange="tabChange">
- <!-- 完成 -->
- <swiper-item>
-
<scroll-view class="hot-box" scroll-y="true">
- <view class="orderDetails" wx:for="{{alreadyOrder}}" wx:key=" ">
- <view class="orderListTitle">
- <text class="userName">{{item.name}}</text>
- <text class="orderStatus">{{item.state}}</text>
- </view>
-
<view class="orderListDetails">
- <view class="productImg">
- <image src="{{item.url}}" background-size="cover"></image>
- </view>
- <view class="productInfo">
- <view class="productTitle">預定時間: {{item.time}}</view>
- <text class="productPrice">當前狀態:{{item.status}}</text>
- </view>
- </view>
- <view class="productCount">
- <view>
- <text>合計:¥{{item.money}}</text>
- </view>
- </view>
- </view>
- </scroll-view>
- </swiper-item>
- <!-- 待付款 -->
- <swiper-item>
- <scroll-view class="hot-box" scroll-y="true">
- <view class="orderDetails" wx:for="{{waitPayOrder}}" wx:key=" ">
- <view class="orderListTitle">
- <text class="userName">{{item.name}}</text>
- <text class="orderStatus">{{item.state}}</text>
- </view>
- <view class="orderListDetails">
- <view class="productImg">
- <image src="{{item.url}}" background-size="cover"></image>
- </view>
- <view class="productInfo">
- <view class="productTitle">預定時間: {{item.time}}</view>
- <text class="productPrice">當前狀態:{{item.status}}</text>
- </view>
- </view>
- <view class="productCount">
- <view>
- <text>合計:¥{{item.money}}</text>
- </view>
- </view>
- </view>
- </scroll-view>
- </swiper-item>
- <!-- 取消 -->
- <swiper-item>
- <scroll-view class="hot-box" scroll-y="true">
- <view class="orderDetails" wx:for="{{lostOrder}}" wx:key=" ">
- <view class="orderListTitle">
- <text class="userName">{{item.name}}</text>
- <text class="orderStatus">{{item.state}}</text>
- </view>
- <view class="orderListDetails">
- <view class="productImg">
- <image src="{{item.url}}" background-size="cover"></image>
- </view>
- <view class="productInfo">
- <view class="productTitle">預定時間: {{item.time}}</view>
- <text class="productPrice">當前狀態:{{item.status}}</text>
- </view>
- </view>
- <view class="productCount">
- <view>
- <text>合計:¥{{item.money}}</text>
- </view>
- </view>
- </view>
- </scroll-view>
- </swiper-item>
- </swiper>
wxss樣式:
- /*切換欄*/
- .swiper-tab {
- height: 40px;
- line-height: 40px;
- background: #3B3B3B;
- color:#fff ;
- display: flex;
- position: relative;
- z-index: 2;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- border-bottom:1px solid black;
- }
- .swiper-tab-list {
- margin: 0 30px;
- padding: 0 4px;
- font-size: 15px;
- }
- .on {
- border-bottom:2px solid #fff;
- color: #f5f5f5;
- }
- .navTopList {
- display: flex;
- width: 100%;
- height: 70rpx;
- background: #fff;
- border-bottom: 1rpx solid #BEBEBE ;
- margin-top:5px;
- }
- .navTopList .order-info {
- text-align: center;
- }
- .navTopList .order-info view {
- width: 56rpx;
- height: 56rpx;
- margin-left: 31rpx;
- }
- .navTopList .order-info text {
- font-size: 34rpx;
- }
- .navTopList .order-info text.active {
- color: #ff6662;
- }
- .navTopList .ywc,.navTopList .dfk,.navTopList .yqx {
- flex: 1;
- }
- /*訂單列表*/
- .orderDetails {
- background: #fff;
- border-bottom: 20rpx solid #f5f5f5;
- }
- .orderListTitle {
- height: 100rpx;
- line-height: 100rpx;
- border-bottom: 1rpx solid #BEBEBE;
- }
- .orderListTitle .userName {
- padding-right: 50rpx;
- margin-left:10px;
- }
- .orderListTitle .orderStatus {
- float: right;
- margin-right: 20rpx;
- color: #2f7b27;
- font-size: 34rpx;
- }
- .orderListDetails {
- display: flex;
- height: 200rpx;
- border-bottom: 1rpx solid #f3f3f3;
- }
- .orderListDetails .productImg {
- flex: 1;
- height:180rpx;
- width:120px;
- margin-top: 20rpx;
- margin-left: 20rpx;
- }
- .orderListDetails .productImg image {
- width: 100px;
- height: 90%;
- }
- .orderListDetails .productInfo {
- flex: 4;
- margin: 40rpx 10px 20px 30rpx;
- font-size:15px;
- }
- .orderListDetails .productInfo .productTitle {
- font-size:15px;
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- margin-bottom:10px;
- }
- .productCount {
- height: 80rpx;
- line-height: 80rpx;
- border-bottom: 1rpx solid #f3f3f3;
- }
- .productCount>view {
- float: right;
- margin-right: 30rpx;
- }
js:主要是在data中給切換欄配置參數,和默認顯示第幾個欄;
- // pages/order/order.js
- Page({
- /**
- * 頁面的初始數據
- */
- data: {
- currtab: 0,
- swipertab: [{ name: ‘已完成‘, index: 0 }, { name: ‘待付款‘, index: 1 }, { name: ‘已取消‘, index: 2 }],
- },
- /**
- * 生命周期函數--監聽頁面加載
- */
- onLoad: function (options) {
- },
- /**
- * 生命周期函數--監聽頁面初次渲染完成
- */
- onReady: function () {
- // 頁面渲染完成
- this.getDeviceInfo()
- this.orderShow()
- },
- getDeviceInfo: function () {
- let that = this
- wx.getSystemInfo({
- success: function (res) {
- that.setData({
- deviceW: res.windowWidth,
- deviceH: res.windowHeight
- })
- }
- })
- },
- /**
- * @Explain:選項卡點擊切換
- */
- tabSwitch: function (e) {
- var that = this
- if (this.data.currtab === e.target.dataset.current) {
- return false
- } else {
- that.setData({
- currtab: e.target.dataset.current
- })
- }
- },
- tabChange: function (e) {
- this.setData({ currtab: e.detail.current })
- this.orderShow()
- },
- orderShow: function () {
- let that = this
- switch (this.data.currtab) {
- case 0:
- that.alreadyShow()
- break
- case 1:
- that.waitPayShow()
- break
- case 2:
- that.lostShow()
- break
- }
- },
- alreadyShow: function(){
- this.setData({
- 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" }]
- })
- },
- waitPayShow:function(){
- this.setData({
- waitPayOrder: [{ name: "躍動體育運動俱樂部(圓明園店)", state: "待付款", time: "2018-10-14 14:00-16:00", status: "未開始", url: "../../images/bad1.jpg", money: "186" }],
- })
- },
- lostShow: function () {
- this.setData({
- lostOrder: [{ name: "躍動體育運動俱樂部(圓明園店)", state: "已取消", time: "2018-10-4 10:00-12:00", status: "未開始", url: "../../images/bad1.jpg", money: "122" }],
- })
- },
- /**
- * 生命周期函數--監聽頁面顯示
- */
- onShow: function () {
- },
- /**
- * 生命周期函數--監聽頁面隱藏
- */
- onHide: function () {
- },
- /**
- * 生命周期函數--監聽頁面卸載
- */
- onUnload: function () {
- },
- /**
- * 頁面相關事件處理函數--監聽用戶下拉動作
- */
- onPullDownRefresh: function () {
- },
- /**
- * 頁面上拉觸底事件的處理函數
- */
- onReachBottom: function () {
- },
- /**
- * 用戶點擊右上角分享
- */
- onShareAppMessage: function () {
- }
- })
微信小程序訂單頁面