football/pages/order/index/index.vue

<template>
    <app-layout>
        <view class="order-box">
            <view class="title-box">
                <app-switch-tab @tabEvent="clickTab" :isborderBottom="false" :bgColor="bgColor"
                                :currentIndex="currentIndex" :list="list"></app-switch-tab>
            </view>
            <view v-if="is_show" class='content-box'>
                <template v-if="orders.length">
                    <view v-for='(item, index) in orders' :key='item.id'
                          :style="{'margin-top': index == 0 ? '104rpx' : '0'}" class='order-item-box dir-top-wrap'>
                        <app-jump-button :url="getPageUrl(item.id, item.sign)">
                            <view class="dir-top-nowrap" style="width: 100%">
                                <view class='dir-left-nowrap view-1'>
                                    <view class='box-grow-1'>订单号：{{item.order_no}}</view>
                                    <template v-if='item.status == 0'>
                                        <text v-if='item.sign == "pintuan"'>{{item.is_pay == 1 ? '拼团中' : '待付款'}}</text>
                                    </template>
                                    <template v-else>
                                        <view>{{item.status_text}}</view>
                                    </template>
                                </view>
                                <view v-for='(dItem, dIndex) in item.detail' :key='dIndex' class='view-2'>
                                    <app-order-goods-info :goods='dItem.goods_info'></app-order-goods-info>
                                </view>
                            </view>
                        </app-jump-button>
                        <view class='dir-top-nowrap view-3'>
                            <template v-if='currentIndex == 5'>
                                <view v-if='item.type == 1' class='box-grow-1'>退货退款:
                                    <text class='price-color'>￥{{item.refund_price}}</text>
                                </view>
                                <view v-else class='box-grow-1'>换货</view>
                            </template>
                            <template v-else>
                                <view class='box-grow-1 main-right cross-center price-count-box'>
                                    <text class="price-label">合计:</text>
                                    <text class='price-color'>￥{{item.total_pay_price}}</text>
                                    <text v-if="item.express_price > 0" class="price-express">(含运费￥{{item.express_price}})</text>
                                </view>
                            </template>
                            <view class='box-grow-0 main-right action-button-box'>
                                <app-jump-button>
                                    <view class="main-right action-box-view">
                                        <!-- 售后订单 -->
                                        <template v-if='currentIndex == 5'>
                                            <text :class="{'success-color': item.is_confirm == 1 ? true : false}">
                                                {{item.status_text}}
                                            </text>
                                        </template>
                                        <!-- 其它订单 -->
                                        <template v-else>
                                            <!-- 货到付款订单操作 start -->
                                            <template v-if='item.pay_type == 2'>
                                                <!-- 进行中的订单 不能进行订单操作 -->
                                                <template v-if='item.status == 1'>
                                                    <!-- 待收货-->
                                                    <template v-if='item.is_confirm == 0'>
                                                        <block v-if='item.is_send == 1 && item.der_info.length == 1 && item.send_type == 0'>
                                                            <view v-if="item.der_info[0].orderExpress.send_type == 1"
                                                                  @click='logistics(item)' class='order-btn'>
                                                                物流
                                                            </view>
                                                        </block>
                                                        <view v-else-if='item.der_info.length == 0 && item.is_send == 1 && item.send_type == 0 && item.express_no && item.express'
                                                              @click='logistics(item)' class='order-btn'>物流
                                                        </view>
                                                        <view v-else-if='item.der_info.length >= 1'
                                                              @click='logistics(item)' class='order-btn'>物流
                                                        </view>
                                                        <view v-if="item.is_send == 1 && item.is_confirm == 0" @click='confirm(item)'
                                                              class='order-btn'>确认收货
                                                        </view>
                                                    </template>
                                                    <!-- 核销 -->
                                                    <!-- 到店自提订单 在核销前有收款操作 -->
                                                    <template
                                                            v-if='item.send_type ==1 && item.is_confirm == 0 && item.cancel_status == 0'>
                                                        <view @click='getClerkCode(item)' class='order-btn'>核销码</view>
                                                    </template>
                                                    <template
                                                            v-if='item.is_confirm == 1 && item.is_comment == 0 && item.is_sale == 0 && item.sale_status == 0'>
                                                        <view @click='appraise(item)' class='order-btn'>评价</view>
                                                    </template>
                                                </template>
                                            </template>
                                            <!-- 货到付款订单操作 end -->
                                            <!-- 已支付订单操作 start -->
                                            <template v-else>
                                                <!-- 待付款 -->
                                                <template v-if='item.is_pay == 0'>
                                                    <view @click="cancel(item)" class='order-btn'>取消</view>
                                                    <view @click='orderPay(item)' class='order-btn'>付款</view>
                                                </template>
                                                <template v-if='item.status == 1'>
                                                    <!-- 核销 -->
                                                    <!-- 到店自提订单 未支付不显示核销码 | 未支付 货到付款订单显示核销码 -->
                                                    <template
                                                            v-if='item.send_type ==1 && item.is_confirm == 0 && ((item.is_pay == 0 && item.pay_type == 2) || (item.is_pay == 1 && item.pay_type != 2))'>
                                                        <view @click='getClerkCode(item)' class='order-btn'>核销码</view>
                                                    </template>
                                                    <!-- 待收货-->
                                                    <template v-if='item.is_pay == 1 && item.is_confirm == 0'>
                                                        <block v-if='item.der_info.length == 1 && item.is_send == 1 && item.send_type == 0'>
                                                            <view v-if="item.der_info[0].orderExpress.send_type == 1"
                                                                  @click='logistics(item)' class='order-btn'>
                                                                物流
                                                            </view>
                                                        </block>
                                                        <view v-else-if='item.der_info.length == 0 && item.is_send == 1 && item.send_type == 0 && item.express_no && item.express'
                                                              @click='logistics(item)' class='order-btn'>物流
                                                        </view>
                                                        <view v-else-if='item.der_info.length >= 1'
                                                              @click='logistics(item)' class='order-btn'>物流
                                                        </view>
                                                        <view v-if="item.is_send == 1 && item.is_confirm == 0" @click='confirm(item)' class='order-btn'>确认收货</view>
                                                    </template>
                                                    <template
                                                            v-if='item.is_confirm == 1 && item.is_comment == 0 && item.is_sale == 0 && item.sale_status == 0'>
                                                        <view @click='appraise(item)' class='order-btn'>评价</view>
                                                    </template>
                                                </template>
                                            </template>
                                            <!-- 已支付订单操作 end -->
                                        </template>
                                    </view>
                                </app-jump-button>
                            </view>
                        </view>
                    </view>
                </template>
                <view class="no-list" v-else>
                    <app-no-goods background="#f7f7f7" title="暂无相关订单" :is_image="1"></app-no-goods>
                </view>
                <!-- 核销码展示 -->
                <view v-if='is_qrcode' class='qrcode-box'>
                    <view class='dir-top-wrap main-center cross-center item'>
                        <view>核销码</view>
                        <image class='img' :src='qr_code_url'></image>
                        <image @click='closeQrcode' src='/static/image/icon/icon-close.png' class='remove'></image>
                    </view>
                </view>
            </view>
            <app-load-text v-if="is_load_show"></app-load-text>
            <view class="return-index-btn" v-if="show_index">
                <app-jump-button open_type="redirect" url="/pages/index/index">
                    <image src="/static/image/icon/index.png" style="width: 50rpx;height: 50rpx"></image>
                </app-jump-button>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import appSwitchTab from '../../../components/basic-component/app-switch-tab/app-switch-tab.vue';
    import appNoGoods from '../../../components/page-component/app-no-goods/app-no-goods.vue';
    import appOrderGoodsInfo from '../../../components/page-component/app-order-goods-info/app-order-goods-info.vue';
    import {mapGetters} from 'vuex';

    export default {
        data() {
            return {
                list: [{name: '全部'}, {name: '待付款'}, {name: '待发货'}, {name: '待收货'}, {name: '待评价'}],
                page: 1,
                currentIndex: 0,
                orders: [],
                pagination: null,
                qr_code_url: '',
                is_qrcode: false,
                is_show: false,
                is_load_show: false,
                show_index: false,
                bgColor: '#f7f7f7',
                isRequest: true,//防止数据重复加载
                template_message: [],
            }
        },
        methods: {
            getList() {
                this.isRequest = false;
                this.$request({
                    url: this.$api.order.list,
                    data: {
                        status: this.currentIndex,
                        page: this.page,
                    }
                }).then(response => {
                    let {code, data, msg} = response;
                    this.$hideLoading();
                    this.is_load_show = false;
                    this.is_show = true;
                    if (code == 0) {
                        let {list, pagination} = data;
                        if (this.page != 1) {
                            this.orders = this.orders.concat(list)
                        } else {
                            this.orders = list;
                        }
                        this.page = list.length ? this.page + 1 : this.page;
                        this.pagination = pagination;
                        this.template_message = data.template_message;
                    } else {
                        uni.showModal({
                            title: '',
                            content: msg,
                            showCancel: false,
                        });
                    }
                    this.isRequest = true;
                }).catch(() => {
                    this.is_load_show = false;
                    this.$hideLoading();
                });
            },
            clickTab(params) {
                if (this.isRequest) {
                    this.page = 1;
                    this.currentIndex = params.currentIndex;
                    this.is_show = false;
                    this.$showLoading();
                    this.getList();
                }
            },
            getPageUrl: function (id, sign) {
                if (this.currentIndex == 5) {
                    return `/pages/order/refund-detail/refund-detail?id=${id}&sign=${sign}`
                } else {
                    return `/pages/order/order-detail/order-detail?id=${id}&sign=${sign}`
                }
            },
            // 确认收货
            confirm(item) {
                let self = this;
                uni.showModal({
                    title: '提示',
                    content: '是否确认收货?',
                    success: function (res) {
                        if (res.confirm) {
                            uni.showLoading({title: '确认收货中'});
                            self.$request({
                                url: self.$api.order.confirm,
                                data: {
                                    id: item.id
                                }
                            }).then(response => {
                                uni.hideLoading();
                                if (response.code === 0) {
                                    uni.redirectTo({
                                        url: '/pages/order/index/index?status=' + 4
                                    });
                                } else {
                                    uni.showModal({
                                        title: '',
                                        content: response.msg,
                                        showCancel: false,
                                    });
                                }
                            }).catch(() => {
                                uni.hideLoading()
                            });
                        }
                    }
                });
            },
            // 取消
            cancel(e) {
                let self = this;
                uni.showModal({
                    title: '提示',
                    content: '是否取消订单？',
                    success: function (res) {
                        if (res.confirm) {
                            uni.showLoading({title: '取消中'});
                            self.$request({
                                url: self.$api.order.cancel,
                                data: {
                                    id: e.id
                                }
                            }).then(response => {
                                uni.hideLoading();
                                if (response.code == 0) {
                                    uni.redirectTo({
                                        url: '/pages/order/index/index?status=' + self.currentIndex
                                    })
                                } else {
                                    uni.showModal({
                                        title: '',
                                        content: response.msg,
                                        showCancel: false,
                                    });
                                }
                            }).catch(() => {
                                uni.hideLoading();
                            });
                        }
                    }
                });
            },
            // 物流信息
            logistics(orderDetail) {
                if (orderDetail.is_send == 1 && orderDetail.detailExpress.length == 0) {
                    let [id, express, express_no, customer_name, cover_pic] = [orderDetail.id, orderDetail.express, orderDetail.express_no, orderDetail.customer_name, orderDetail.detail[0].goods_info.pic_url];
                    uni.navigateTo({
                        url: `/pages/order/express-detail/express-detail?id=${id}&express=${express}&express_no=${express_no}&customer_name=${customer_name}&cover_pic=${cover_pic}`
                    })
                } else if (orderDetail.is_send == 1 && orderDetail.detailExpress.length == 1) {
                    let express = orderDetail.detailExpress[0].express;
                    let express_no = orderDetail.detailExpress[0].express_no;
                    let customer_name = orderDetail.detailExpress[0].customer_name;
                    let cover_pic = orderDetail.detailExpress[0].expressRelation[0].orderDetail.goods_info.goods_attr.cover_pic;
                    uni.navigateTo({
                        url: `/pages/order/express-detail/express-detail?express=` + express + `&customer_name=` + customer_name + `&express_no=` + express_no + `&cover_pic=` + cover_pic
                    })
                } else if (orderDetail.detailExpress.length >= 1) {
                    uni.navigateTo({
                        url: '/pages/order/express-list/express-list?order_id=' + orderDetail.id
                    });
                }
            },
            // 订单支付
            orderPay(e) {
                let _this = this;
                _this.$showLoading();
                _this.$request({
                    url: _this.$api.order.list_pay_data,
                    data: {
                        id: e.id
                    }
                }).then(response => {
                    _this.$hideLoading();
                    if (response.code === 0) {
                        _this.$payment.pay(response.data.id).then(() => {
                            // 支付成功
                            uni.redirectTo({
                                url: '/pages/order/index/index?status=2'
                            })
                        }).catch(e => {
                            // 支付失败
                            uni.showModal({
                                title: '',
                                content: e.errMsg,
                                showCancel: false
                            })
                        })
                    }
                }).catch(() => {
                    _this.$hideLoading();
                });
            },
            // 订单评价
            appraise(e) {
                uni.navigateTo({
                    url: `/pages/order/appraise/appraise?id=${e.id}`
                })
            },
            getClerkCode(e) {
                let self = this;
                self.$showLoading();
                self.$request({
                    url: self.$api.order.clerk_qr_code,
                    data: {
                        id: e.id
                    }
                }).then(response => {
                    self.$hideLoading();
                    if (response.code === 0) {
                        self.qr_code_url = response.data.file_path;
                        self.is_qrcode = true;
                    } else {
                        uni.showModal({
                            title: '',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                }).catch(() => {
                    self.$hideLoading();
                });
            },
            closeQrcode() {
                this.is_qrcode = false;
            },
        },
        onLoad(options) {
            this.currentIndex = options.status ? options.status : this.currentIndex;
        },
        onReachBottom() {
            this.is_load_show = true;
            this.getList()
        },
        onShow() {
            let self = this;
            let interval = setInterval(function () {
                if (self.isRequest) {
                    self.page = 1;
                    self.$showLoading();
                    self.getList();
                    self.$store.dispatch('gConfig/setTabBarBoolean', self.tabBarNavs.navs);
                }
                let pages = getCurrentPages();
                if (pages.length < 2) {
                    self.show_index = true;
                }
                clearInterval(interval)
            }, 300);
        },
        computed: {
            ...mapGetters('mallConfig', {
                tabBarNavs: 'getNavBar'
            }),
        },
        components: {
            'app-switch-tab': appSwitchTab,
            'app-order-goods-info': appOrderGoodsInfo,
            'app-no-goods': appNoGoods,
        },
    }
</script>

<style scoped lang="scss">
    .order-box {
        width: 100%;
        height: 100%;
    }

    .title-box {
        height: 80#{rpx};
        width: 100%;
        position: fixed;
        border-bottom: 1#{rpx} solid $uni-weak-color-one;
        top: 0;
        background: #fff;
        z-index: 1;
    }

    .no-list {
        margin-top: #{150upx};
    }
    .content-box {
        margin-top: 80#{rpx};
    }

    .not-order-box {
        height: calc(100vh - 80#{rpx});
        color: $uni-general-color-two;
    }

    .order-item-box {
        background: #fff;
        padding: 0 24#{rpx};
        margin: 0 24#{rpx};
        margin-bottom: 24#{rpx};
        border-radius: 16#{rpx};
        font-size: $uni-font-size-general-two;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.06);
    }

    .order-item-box .view-1 {
        width: 100%;
        font-size: $uni-font-size-weak-one;
        color: $uni-important-color-black;
        margin: 32#{rpx} 0;
    }

    .order-item-box .view-2 {
    }

    .order-item-box .view-3 {
        font-size: $uni-font-size-import-two;
    }

    .order-item-box .view-3 .btn {
        margin-left: 15#{rpx};
    }

    .price-count-box {
        margin: 28#{rpx} 0;
    }

    .price-label {
        margin-right: 5#{rpx};
    }

    .price-color {
        color: $uni-important-color-black;
    }

    .price-express {
        font-size: $uni-font-size-weak-two;
        color: $uni-general-color-two;
    }

    .success-color {
        color: $uni-important-color-black;
    }

    .error-color {
        color: $uni-important-color-red;
    }

    .qrcode-box {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
    }

    .qrcode-box .item {
        position: absolute;
        top: 25%;
        width: 562#{rpx};
        height: 562#{rpx};
        background: #fff;
        left: 94#{rpx};
        z-index: 999;
        border-radius: 15#{rpx};
    }

    .qrcode-box .img {
        margin-top: 30#{rpx};
        width: 375#{rpx};
        height: 375#{rpx};
    }

    .qrcode-box .item .remove {
        position: absolute;
        top: 0;
        right: 0;
        width: 50#{rpx};
        height: 50#{rpx};
        margin: 15#{rpx};
        padding: #{7rpx}
    }

    .order-btn {
        display: inline-block;
        line-height: 2.3;
        font-size: 26#{rpx};
        padding: 0 30#{rpx};
        border: 1#{rpx} solid $uni-weak-color-one;
        border-radius: 30#{rpx};
        margin-left: 16#{rpx};
    }

    .action-button-box {
        margin-bottom: 24#{rpx};
    }

    .return-index-btn {
        position: fixed;
        right: 0;
        bottom: #{100rpx};
        display: inline-block;
        background: rgba(157, 157, 157, 0.5);
        padding: #{10rpx} #{20rpx};
        z-index: 1000;
        border-radius: #{10rpx} 0 0 #{10rpx};
    }

    .action-box-view {
        width: 100%;
    }

</style>