diancan_uni/pages/user/order/list/index.vue

<template>
    <!-- index.wxml -->
    <view class="wrap">
        <view class="cate_list">
            <van-tabs :active="type" line-width="59rpx" line-height="4rpx" title-active-color="#D54C43" title-inactive-color="#333333" @click="onChange">
                <!-- <van-tab title="当前订单" name="{{ 1 }}"></van-tab>
			<van-tab title="历史订单" name="{{ 2 }}"></van-tab> -->
                <van-tab title="全部" name="-1"></van-tab>
                <van-tab title="未支付" name="0"></van-tab>
                <van-tab title="待发货" name="1"></van-tab>
                <van-tab title="待自提" name="2"></van-tab>
                <van-tab title="已完成" name="3"></van-tab>
            </van-tabs>
        </view>
        <view class="order_list">
            <view class="order_item" @tap="goDetail" :data-id="item.id" v-for="(item, index) in dataList" :key="index">
                <view class="item_t">
                    <view class="item_t_l">
                        <view class="item_t_l_t">
                            <view class="item_tag">{{ item.fare_type ? '自取' : '外卖' }}</view>
                            <view class="shop_name">{{ item.store.title }}</view>
                        </view>
                        <view class="order_time">下单时间：{{ item.created_at }}</view>
                    </view>
                    <view class="item_t_r">
                        <text class="" v-if="item.fare_type == 1">
                            {{ item.order_status == 2 ? '已完成' : item.order_status == 0 ? '已关闭' : item.pay_status != 1 ? '待支付' : item.ship_status ? '已自提' : '待自提' }}
                        </text>
                        <text class="send_time" v-if="item.fare_type == 0 && item.order_status == 1 && item.ship_status == 1">{{ item.count_time }}</text>
                        <text class="" v-if="item.fare_type == 0">
                            {{ item.order_status == 2 ? '已完成' : item.order_status == 0 ? '已关闭' : item.pay_status != 1 ? '待支付' : item.ship_status ? '配送中' : '待配送' }}
                        </text>
                        <van-icon name="arrow" />
                    </view>
                </view>

                <view class="item_nr">
                    <view class="item_goods">
                        <image class="goods_tu" :src="imgUrl + img" v-for="(img, index1) in item.thumbArrCustom" :key="index1"></image>
                        <image class="goods_tu_more" v-if="item.thumbArrLength > 3" src="/static/statics/img/more_tu.png"></image>
                    </view>
                    <view class="item_total">
                        <view class="price">
                            <text class="unit">¥</text>
                            {{ item.pay_price }}
                        </view>
                        <view class="num">共{{ item.goodsNums }}件</view>
                    </view>
                </view>

                <view class="item_btns">
                    <view class="btn cancel" v-if="item.ship_status == 0 && item.order_status == 1" :data-id="item.id" :data-item="item" @tap.stop.prevent="cancleOrder">
                        取消订单
                    </view>
                    <view class="btn" v-if="item.order_status == 1 && item.pay_status != 1" :data-id="item.id" @tap.stop.prevent="goTopay">立即支付</view>
                    <view class="btn" v-if="item.pay_status == 1 && item.ship_status == 1 && item.order_status == 1" :data-id="item.id" @tap.stop.prevent="receiveOrder">收货</view>
                    <view class="btn" v-if="item.order_status == 2" @tap.stop.prevent="toGoods">再来一单</view>
                </view>
            </view>
        </view>
    </view>
    <!-- loading -->
    <!-- <van-overlay show="{{ loading }}" z-index="100">
	<van-loading custom-class="custom_loading" />
</van-overlay> -->
</template>

<script>
// index.js
let myPro = require('../../../../utils/wxRequest.js');

let util = require('../../../../utils/util.js');

export default {
    data() {
        return {
            imgUrl: getApp().globalData.imgUrl,
            type: '-1',

            // 订单状态 空全部(-1) 0未支付 1待发货 2待自提 3已完成
            page: 1,

            size: 10,
            dataList: [],
            finished: false,
            loading: false,

            // 配送计时器
            timer: null,

            img: ''
        };
    },
    onLoad: function (options) {
        // Do some initialize when page load.
        let that = this;

        if (options.type) {
            that.setData({
                type: options.type
            });
            console.log('type', that.type, typeof that.type);
        }
    },
    onShow: function () {
        // Do something when page show.
        let that = this; // 验证登录

        getApp().globalData.verifyLogin(function (loginStatus) {
            // console.log('登录状态',loginStatus)
            if (loginStatus) {
                that.setData({
                    page: 1,
                    dataList: [],
                    finished: false
                });
                that.getDataList();
            }
        });
    },
    onReady: function () {
        // Do something when page ready.
    },
    onHide: function () {
        // Do something when page hide.
    },
    onUnload: function () {
        // Do something when page close.
    },
    onPullDownRefresh: function () {
        // Do something when pull down.
        let that = this;
        that.setData({
            page: 1,
            dataList: [],
            finished: false
        });
        that.getDataList(); //停止当前页面下拉刷新

        uni.stopPullDownRefresh();
    },
    onReachBottom: function () {
        // Do something when page reach bottom.
        let that = this;

        if (!that.finished) {
            that.getDataList();
        }
    },
    onPageScroll: function () {
        // Do something when page scroll
    },
    onResize: function () {
        // Do something when page resize
    },
    methods: {
        // 订单列表
        getDataList() {
            let that = this;
            clearInterval(that.timer);
            let params = {
                page: that.page,
                size: that.size
            };

            if (that.type != -1) {
                params.status = that.type;
            }

            myPro
                .wxRequest('user/order/list', 'GET', params)
                .then((res) => {
                    let list = res.result; // 无数据

                    if (list.length == 0) {
                        uni.showToast({
                            title: '暂无更多数据',
                            icon: 'none'
                        });
                        that.setData({
                            finished: true
                        });
                    } else {
                        for (let i in list) {
                            list[i].goodsNums = 0; // 单笔订单的商品总数

                            list[i].thumbArr = []; // 单笔订单的商品图片

                            for (let j in list[i].order_good) {
                                let goods = list[i].order_good[j];
                                list[i].goodsNums += parseInt(goods.nums);
                                list[i].thumbArr.push(goods.good_thumb);
                            }

                            list[i].thumbArrLength = list[i].thumbArr.length; // 单笔订单的商品图片数量
                            // 多于三张截取

                            if (list[i].thumbArr.length > 3) {
                                list[i].thumbArrCustom = list[i].thumbArr.slice(0, 3);
                            } else {
                                list[i].thumbArrCustom = list[i].thumbArr;
                            }
                        }

                        if (that.page == 1) {
                            that.setData({
                                dataList: list
                            });
                        } else {
                            that.setData({
                                dataList: that.dataList.concat(list)
                            });
                        }

                        that.setData({
                            page: that.page + 1
                        }); // 开启定时

                        if (that.type == 1) {
                            that.newTimer();
                        }
                    }
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 切换tab
        onChange(event) {
            console.log(event.detail.name, typeof event.detail.name);
            let that = this;
            that.setData({
                type: event.detail.name,
                page: 1,
                dataList: [],
                finished: false
            });
            that.getDataList();
        },

        // 去详情
        goDetail(event) {
            let that = this;
            let id = event.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/user/order/detail/index?order_id=' + id
            });
        },

        // 取消订单
        cancleOrder(event) {
            let that = this;
            let item = event.currentTarget.dataset.item; // 未支付的订单可以取消

            if (item.order_status == 1 && item.pay_status != 1) {
                // 取消订单
                myPro
                    .wxRequest('user/v2/order/cancelorder', 'POST', {
                        order_id: item.id
                    })
                    .then((res) => {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                        that.setData({
                            page: 1,
                            dataList: [],
                            finished: false
                        });
                        that.getDataList();
                    })
                    .catch((err) => {
                        console.log('报错信息', err);
                        uni.showToast({
                            title: err,
                            icon: 'none'
                        });
                    });
            } else {
                // 已支付的订单要联系商家
                uni.showModal({
                    title: '可联系商家取消',
                    content: '商家电话' + item.store.phone,
                    showCancel: false,
                    confirmText: '我知道了',
                    confirmColor: '#000000'
                });
            }
        },

        // 收货
        receiveOrder(event) {
            let that = this;
            let order_id = event.currentTarget.dataset.id;
            let params = {
                order_id: order_id
            };
            myPro
                .wxRequest('user/order/commit', 'POST', params)
                .then((res) => {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    });
                    that.setData({
                        page: 1,
                        dataList: [],
                        finished: false
                    });
                    that.getDataList();
                })
                .catch((err) => {
                    console.log('报错信息', err);
                    uni.showToast({
                        title: err,
                        icon: 'none'
                    });
                });
        },

        // 再来一单
        toGoods() {
            let that = this;
            uni.reLaunch({
                url: '/pages/goods/index'
            });
        },

        // 去支付
        goTopay(event) {
            let that = this;
            let id = event.currentTarget.dataset.id;
            uni.navigateTo({
                url: '/pages/pay-order/index?order_id=' + id
            });
        },

        // 配送计时
        newTimer() {
            let that = this;
            let list = that.dataList;
            clearInterval(that.timer);
            that.timer = setInterval(function () {
                for (let i in list) {
                    // 当前订单为外卖单且正在配送,开启倒计时
                    if (list[i].fare_type == 0 && list[i].order_status == 1 && list[i].ship_status) {
                        let ship_at = list[i].ship_at;

                        if (!list[i].isend) {
                            let shijian = util.daojishi(ship_at, 30);
                            list[i].count_time = shijian['timeStr'];
                            list[i].isend = shijian['isend'];
                        }
                    }
                }

                that.setData({
                    dataList: list
                });
            }, 1000);
        }
    }
};
</script>
<style>
/**index.wxss**/
.wrap {
    min-height: 100vh;
    background: #f6f6f6;
}
.order_list {
    padding-top: 90rpx;
}
.order_item {
    margin-top: 20rpx;
    padding: 30rpx;
    background: #ffffff;
}
.order_item .item_t {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.order_item .item_t_l_t {
    display: flex;
    align-items: center;
}
.order_item .item_tag {
    font-size: 22rpx;
    color: #ffffff;
    padding: 4rpx 10rpx;
    background: #295c57;
    border-radius: 5rpx;
}
.order_item .shop_name {
    font-size: 30rpx;
    color: #080808;
    font-weight: bold;
    padding-left: 8rpx;
}
.order_item .order_time {
    padding-top: 16rpx;
    color: rgba(8, 8, 8, 0.54);
    font-size: 26rpx;
}
.order_item .item_t_r {
    font-size: 28rpx;
    color: rgba(8, 8, 8, 0.54);
    display: flex;
    align-items: center;
}
.order_item .item_nr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 34rpx;
}
.order_item .goods_tu {
    width: 138rpx;
    height: 138rpx;
    border-radius: 5rpx;
    margin-right: 20rpx;
}
.order_item .item_total .price {
    color: #080808;
    font-size: 34rpx;
}
.order_item .item_total .price .unit {
    font-size: 22rpx;
}
.order_item .item_total .num {
    padding-top: 10;
    font-size: 24rpx;
    color: rgba(8, 8, 8, 0.54);
}
.order_item .item_btns {
    display: flex;
    justify-content: flex-end;
    margin-top: 20rpx;
}
.order_item .item_btns .btn {
    width: 180rpx;
    height: 60rpx;
    background: rgba(41, 92, 86, 0.05);
    border: 1px solid #295c57;
    border-radius: 5rpx;
    font-size: 30rpx;
    color: #295c56;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 18rpx;
}
.order_item .item_btns .btn.cancel {
    border-color: #999999;
    color: #999999;
    background: transparent;
}
.order_item .send_time {
    padding-right: 16rpx;
    color: #ed8c17;
}
.order_item .item_goods {
    display: flex;
    align-items: center;
}
.order_item .goods_tu_more {
    width: 36rpx;
    height: 7rpx;
}
</style>