小程序 Tab 标签页 - 内容切换

2022-12-01 15:47:26

展示页面

wxml:

<view class="order">
    <van-tabs class="van-tab-fixed" line-width="20px" active="{{active}}"  color="#00c8be" bind:click="onTab">
        <van-tab title="全部"   name="a"></van-tab>
        <van-tab title="待付款" name="b"></van-tab>
        <van-tab title="待发货" name="c"></van-tab>
        <van-tab title="待收货" name="d"></van-tab>
        <van-tab title="待评价" name="e"></van-tab>
    </van-tabs>
    <!-- style -->
    <view class="order-all">
        <view class="order-detail" wx:for="{{orderList}}" wx:key="index">
            <view class="top">
                <view class="left">{{item.create_time}}</view>
                <view class="right">
                    <text class="status">{{item.status_name}}</text>
                    <view class="times" wx:if="{{item.status_name == '待付款'}}">
                        <van-count-down use-slot time="{{ time }}" bind:change="onChange">
                            <text class="item">{{ timeData.hours }}</text>:
                            <text class="item">{{ timeData.minutes }}</text>:
                            <text class="item">{{ timeData.seconds }}</text>
                        </van-count-down>
                    </view>

                </view>
            </view>
            <!-- style -->
            <navigator url="../logistics_detail/logistics_detail">
                <view class="order-shop">
                    <block wx:for="{{item.sku}}" wx:key="index" wx:for-item="img">
                        <view class="img" wx:if="{{index<=2}}">
                            <image mode="aspectFit" src="{{img.url}}" />
                        </view>
                    </block>
                    <view class="count">
                        <text>共{{item.item_num}}件</text>
                        <van-icon name="arrow" color="#999999" />
                    </view>
                </view>
            </navigator>
            <!-- endStyle -->
            <view class="order-detail-bottom">
                <view class="left">
                    <!-- <view class="count">共9件</view> -->
                    <view class="total">
                        <text>合计:</text>
                        <text class="price">￥{{item.amount}}</text>
                    </view>
                </view>
                <view class="right">
                    <view class="c-bg">立即支付</view>
                    <view bindtap="lookLogis">查看物流</view>
                    <view wx:if="{{item==2}}" class="disable">提现发货</view>
                    <view wx:if="{{item==1}}" bindtap="onCancel">取消订单</view>
                </view>
            </view>
        </view>
    </view>
    <!-- Style-end -->

    <!--页面加载提示--> 
    <load-tips list="{{orderList}}" isMore="{{isMore}}" />
    <!--页面加载提示-end-->

</view>

wxss:

page {
    background: #f7f7f7;
}
.van-tab-fixed {
    width: 100%;
    position: fixed;
    z-index: 1;
}
.order-all {
    padding: 100rpx 30rpx 30rpx 30rpx;
}
.order-all .order-detail {
    width: 100%;
    background: #fff;
    border-radius: 15rpx;
    margin-bottom: 20rpx;
}
.order-all .order-detail .top {
    padding:20rpx 30rpx;
    display: flex;
    justify-content: space-between;
}
.order-all .order-detail .top .left {
    font-size: 26rpx;
    color: #999;
}
.order-all .order-detail .top .right {
    display: flex;
}
.order-all .order-detail .top .right .status {
    color: #FA4616;
    font-size: 26rpx;
}
.order-all .order-detail .top .right .times {
    display: inline-block;
    margin-left: 20rpx;
    color: #00c8be;
}
.order-all .order-detail .top .right .times .item {
    display: inline-block;
    width: 22px;
    margin-right: 5px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #00c8be;
    border-radius: 2px;
}
.order-all .order-detail .order-shop {
    padding: 30rpx 30rpx;
    display: flex;
    justify-content: space-between;
}
.order-all .order-detail .order-shop .img {
    width: 150rpx;
    height: 150rpx;
    display: flex;
}
.order-all .order-detail .order-shop .img image {
    width: 150rpx;
    height: 150rpx;
}
.order-all .order-detail .order-shop .count {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: 26rpx;
    color: #999;
}
.order-all .order-detail .order-detail-bottom {
    padding: 20rpx;
    border-top: 1px solid #f1f1f1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.order-all .order-detail-bottom .left {
    display: flex;
    align-items: center;
}
.order-all .order-detail-bottom .left view {
    font-size: 28rpx;
    margin-right: 20rpx;
}
.order-all .order-detail-bottom .left .price {
    color: #FA4616;
    font-size: 32rpx;
    font-weight: 600;
}
.order-all .order-detail-bottom .right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.order-all .order-detail-bottom .right view {
    width: 120rpx;
    height: 54rpx;
    text-align: center;
    line-height: 54rpx;
    border-radius: 5rpx;
    border: 1px solid #999999;
    font-size: 24rpx;
    color: #999;
    margin-left: 20rpx;
}
.order-all .order-detail-bottom .right view.disable {
    background: #EFEFEF;
    border: 1px solid #EFEFEF;
    color: #D1D1D1;
}
.order-all .order-detail-bottom .right view.c-bg {
    color: #fff;
    border: 1px solid #00c8be;
}

json:

{
    "navigationBarTitleText": "我的订单",
    "usingComponents": {
        "van-count-down": "@vant/weapp/count-down/index",
        "van-tab": "@vant/weapp/tab/index",
        "van-tabs": "@vant/weapp/tabs/index",
        "van-button": "@vant/weapp/button/index",
        "van-icon": "@vant/weapp/icon/index",
        "van-dialog": "@vant/weapp/dialog/index",
        "van-empty": "@vant/weapp/empty/index",
        "load-tips":"/components/load-tips/index"
    }
}

js:

const utils = require('../../../../utils/utils');
Page({

    /**
     * 页面的初始数据
     */
    data: {
        active: 'a',
        page: 1,
        time: 30 * 60 * 60 * 1000,
        timeData: {},
        orderList: [],
        isMore: true, //是否有更多
        isLoad: false, // 是否加载中
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onl oad: function (options) {
        this.orderAll()
    },

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

    },

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

    },

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

    },

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

    },

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

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (this.data.isMore) {
            this.setData({
                page: ++this.data.page
            })
            this.orderAll();
        }
    },

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

    },
    //tab切换
    onTab: function (e) {
        var active = e.detail.name;
        if (active == this.data.active) {
            return;
        }
        this.setData({
            active: active,
            page: 1,
            orderList: []
        })
        this.orderAll()
    },
    // 全部
    orderAll: function (e) {
        if (!this.data.isMore || this.data.isLoad) {
            return;
        }
        this.setData({
            isLoad: true
        })
        let _this = this;
        utils.c2s({
            url: 'http://shop.php?call=order.index',
            data: {
                active: this.data.active,
                page: this.data.page
            },
            success: function (res) {
                console.log(res.data, "全部");
                let orderList = res.data
                _this.setData({
                    orderList: orderList,
                    isMore: orderList.length>=5?true:false,
                    isLoad: false
                })
            }
        })
    },

    onChange(e) {
        this.setData({
            timeData: e.detail,
        });
    },
    // 查看物流
    lookLogis: function () {
        wx.navigateTo({
            url: '../logistics_list/logistics_list',
        })
    },
    // 取消订单弹层
    onCancel: function () {
        wx.showModal({
            content: '是否确认取消订单',
            success(res) {
                if (res.confirm) {
                    console.log('用户点击确定')
                } else if (res.cancel) {
                    console.log('用户点击取消')
                }
            }
        })
    },

})

components组件
wxml:

<!--components/load_tips.wxml-->
<view class="common_loading">
    <!--暂无数据-->
    <van-empty wx:if="{{!list.length && !isMore}}" 
        description="暂无数据" 
        image="https://img.yzcdn.cn/vant/custom-empty-image.png" />
    <!--加载中-->
    <van-loading  wx:if="{{isMore}}" size="24px">加载中...</van-loading>
    <!--底线提示-->
    <view wx:if="{{list.length && !isMore}}">—— 我是有底线的 ——</view>
</view>

json:

{
    "component": true,
    "usingComponents": {
        "van-loading": "@vant/weapp/loading/index",
        "van-empty": "@vant/weapp/empty/index"
    }
}

js:

// components/load-tips.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        list: {
            type: Array,
            value: []
        },
        isMore: {
            type: Boolean,
            value: true
        },
    },

    /**
     * 组件的初始数据
     */
    data: {
        
    },

    /**
     * 组件的方法列表
     */
    methods: {
        
    }
})

码农公寓

相关文章