mobile-shop/src/views/Myorder.vue

<template>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-nav-bar title="订单列表" left-text="返回" left-arrow @click-left="$router.push('/me')" />
        <van-tabs v-model="active" @click="clickTabs">
            <van-tab title="待付款">
                <div @click="payNow(order)" v-for="(order, index) in orders.records" :key="index">
                    <div class="order-list">
                        <van-card v-for="( item, index ) in order.orderItemDtos" :num="item.prodCount" :price="item.price"
                            :desc="item.skuName" :title="item.prodName" :thumb="item.pic" :key="index" />
                    </div>
                    <van-cell center title="订单号" :value="order.orderNumber" :label="'￥' + order.actualTotal" />
                </div>
            </van-tab>
            <van-tab title="待发货">
                <div v-for="(order, index) in orders.records" :key="index">
                    <div class="order-list">
                        <van-card v-for="( item, index ) in order.orderItemDtos" :num="item.prodCount" :price="item.price"
                            :desc="item.skuName" :title="item.prodName" :thumb="item.pic" :key="index" />
                    </div>
                    <van-cell center title="订单号" :value="order.orderNumber" :label="'￥' + order.actualTotal" />
                </div>
            </van-tab>
            <van-tab title="待收货">
                <div v-for="(order, index) in orders.records" :key="index">
                    <div class="order-list">
                        <van-card v-for="( item, index ) in order.orderItemDtos" :num="item.prodCount" :price="item.price"
                            :desc="item.skuName" :title="item.prodName" :thumb="item.pic" :key="index" />
                    </div>
                    <van-cell center title="订单号" :value="order.orderNumber" :label="'￥' + order.actualTotal" />
                </div>
            </van-tab>
            <van-tab title="待评价">
                <div v-for="(order, index) in orders.records" :key="index">
                    <div class="order-list">
                        <van-card v-for="( item, index ) in order.orderItemDtos" :num="item.prodCount" :price="item.price"
                            :desc="item.skuName" :title="item.prodName" :thumb="item.pic" :key="index" />
                    </div>
                    <van-cell center title="订单号" :value="order.orderNumber" :label="'￥' + order.actualTotal" />
                </div>
            </van-tab>
        </van-tabs>
    </van-list>
</template>
<script>
import { myOrder } from '@/api/user';
import { payment } from '../api/pay'
import { Dialog } from 'vant';
export default {
    data() {
        return {
            loading: false,
            finished: false,
            active: 0,
            orders: {
                records: []
            },
            fatch: {
                current: 1,
                status: 1
            }
        }
    },
    async created() {
        this.loadData()
    },
    methods: {
        clickTabs(){
            this.fatch.current = 1
            this.finished = false
            this.orders.records = []
            this.loadData()
        },
        onLoad(){
            console.log("触发了加载")
            this.fatch.current = this.fatch.current + 1
            this.loadData()
        },
        async payNow(order) {
            const payRes = await payment({
                orderNumbers: order.orderNumber,
                payType: 1
            })
            Dialog.alert({
                title: '支付成功',
                message: '恭喜您支付已完成! ',
            }).then(() => {
                this.loadData()
            });
        },
        async loadData() {
            this.fatch.status = this.active + 1
            const result = await myOrder(this.fatch)
            if ( result.records.length > 0 ) {
                this.orders.records = [...result.records]
            }
            if ( result.current >= result.pages  ) {
                this.finished = true
            }
            this.loading = false
        }
    }
}
</script>
<style lang="less">
.order-list {
    padding: .5rem;
    background-color: #fafafa;
}
</style>