Client-Teapay/src/pagesB/orderingfood/orderlist.vue

<template>
    <div class="orders">
        <div class="tabs flex_r flex_jse">
            <div v-for="(i,s) in tabs" :key="s" :class="{active:activeKey==i.key}" @click="ontab(i.key)">{{i.text}}</div>
        </div>
        <template v-if="activeKey == 1">
            <div class="orderlist" v-if="orderList.length">
                <div class="o_item" v-for="(i,s) in orderList" :key="s" @click="entrance(i)">
                    <div class="p1 flex_r flex_jb">
                        <span class="name_tit ellipsis">{{ i.restaurant_name }}</span>
                        <span class="status">{{ typeto(i.status) }}</span>
                    </div>
                    <div class="p2 flex_r flex_jb" v-if="i.type == 0">
                        <div class="goods ellipsis">
                            <div class="imgs" v-for="(a,b) in i.orderGoods" :key="b">
                                <img :src="a.product_img" alt="" class="g_img">
                                <div class="na ellipsis">{{ a.product_name }}</div>
                            </div>
                        </div>
                        <div class="g_amount"><span class="amount dinB">{{ i.actually_paid || i.pay_amount }}</span></div>
                    </div>
                    <div class="p2 flex_r flex_jb" v-else-if="i.type == 1">
                        <div class="Movie flex_r flex_jb" v-for="(a,b) in i.orderGoods" :key="b">
                            <div class="info flex_c flex_jb">
                                <p class="pt">{{ a.product_name }}</p>
                                <p class="p">{{ a.number }}张</p>
                                <p class="p">实付 ￥{{ i.actually_paid || i.pay_amount }}</p>
                                <p class="p">{{ neaten1(i.product_detail,i.type) }}</p>
                            </div>
                            <image class="poster" mode="aspectFill" :src="a.product_img" />
                        </div>
                    </div>
                    <div class="p2 flex_r flex_jb" v-else-if="[2,3,6].includes(i.type)">
                        <div class="goods good2 ellipsis">
                            <div class="p" v-for="(a,b) in i.orderGoods" :key="b">{{ a.product_name }}</div>
                        </div>
                        <div class="g_amount"><span class="amount dinB">{{ i.actually_paid || i.pay_amount }}</span></div>
                    </div>
                    <div class="p2 flex_r flex_jb" v-else-if="i.type == 4">
                        <div class="Movie flex_r flex_jb" v-for="(a,b) in i.orderGoods" :key="b">
                            <div class="info flex_c flex_jb">
                                <p class="pt">{{ a.product_name }}</p>
                                <p class="p">{{ a.number }}间</p>
                                <p class="p">实付 ￥{{ i.actually_paid || i.pay_amount }}</p>
                                <p class="p" v-if="a.attachment">{{ neaten2(a.attachment,i.type) }}</p>
                            </div>
                            <image class="poster" mode="aspectFill" :src="a.product_img" />
                        </div>
                    </div>
                    <div class="p2 flex_r flex_jb" v-else-if="i.type == 5">
                        <div class="Movie flex_r flex_jb" v-for="(a,b) in i.orderGoods" :key="b">
                            <image class="poster" mode="aspectFill" :src="a.product_img" />
                            <div class="info flex_c flex_jb">
                                <p class="pt">{{ a.product_name }}</p>
                                <p class="p">{{ a.number }}张</p>
                                <p class="p">实付 ￥{{ i.actually_paid || i.pay_amount }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="p3">下单时间：{{ i.create_time }}</div>
                </div>
            </div>
            <div class="zanwu" v-else>
                <img src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/5a3c6b1e2d098aa6695394c927c38586545188b8png" alt="" class="zanwuimg">
                <view class="zanwutxt">暂无订单信息</view>
            </div>
        </template>
        <template v-if="activeKey == 2">
            <div class="orderlist" v-if="selfSupportList.length">
                <div class="o_item" v-for="(i,s) in selfSupportList" :key="s" @click="entrance(i)">
                    <div class="p1 flex_r flex_jb">
                        <span class="name_tit ellipsis">{{ i.name }}</span>
                    </div>
                    <div class="p2 flex_r flex_jb">
                        <div class="goods good2 ">金额</div>
                        <div class="g_amount"><span class="amount dinB">{{ i.order_amount }}</span></div>
                    </div>
                    <div class="p3">订单编号：{{ i.order_no }}</div>
                    <div class="p3 mt-10">下单时间：{{ i.create_time }}</div>
                </div>
            </div>
            <div class="zanwu" v-else>
                <img src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/5a3c6b1e2d098aa6695394c927c38586545188b8png" alt="" class="zanwuimg">
                <view class="zanwutxt">暂无订单信息</view>
            </div>
        </template>
    </div>
</template>
<script>
import { post } from "@/request/api.js";
export default {
    name: "orderlist",
    props: {},
    components: {},
    data() {
        return {
            orderList: [],
            tabs: [
                { key: 1, text: "我的订单" },
                { key: 2, text: "快捷买单" },
            ],
            activeKey: 1,
            Query: {
                page: 1,
                rows: 20,
            },
            pageData: {},
            selfSupportList: [],
        };
    },
    methods: {
        getorderList() {
            post("local/orderList").then(res => {
                if (res.code == 0) {
                    this.orderList = res.data
                }
            })
        },
        typeto(va) {
            switch (va) {
                case 0:
                    return "待支付";
                case 1:
                    return "已下单";
                case 2:
                    return "已完成";
                case 3:
                    return "下单失败";
                case 4:
                    return "失败";
                default:
                    return ""
            }
        },
        entrance(i) {
            if (i.type == 0) this.goto('/pagesB/orderingfood/detail', { trade_no: i.trade_no, brand_id: i.brand_id })
            else if (i.type == 1) this.goto('/pagesB/cinema/cinemaTicket', { tradeNo: i.trade_no })
            else if ([2, 3].includes(i.type)) this.goto('/pagesB/directCharge/orderDetail', { trade_no: i.trade_no })
            else if (i.type == 4) this.goto('/pagesB/hotel/orderDetail', { trade_no: i.trade_no })
            else if (i.type == 5) this.goto('/pagesB/scenicSpotTicket/orderDetail', { trade_no: i.trade_no })
            else if (i.type == 6) this.goto('/pagesB/prepaidRefill/orderDetail', { trade_no: i.trade_no })
        },
        neaten1(va, type) {
            if (va && type == 1) {
                let arr = JSON.parse(va)
                return arr.map(item => item.seatName).join("，")
            }
        },
        neaten2(va, type) {
            if (type == 4) {
                let da = JSON.parse(va)
                return `${da.windowType}，${da.breakfast}，${da.bedType}，${da.useableArea}`
            }
        },
        ontab(va) {
            // uni.showLoading({title: '加载中'})
            this.activeKey = va
        },
        getList(page) {
            if (page) {
                this.list = []
                this.Query.page = 1
            }
            post("v1/merchant/ordersList", this.Query).then(res => {
                if (res.code == 0) {
                    let da = res.data.data
                    delete res.data.data
                    this.pageData = res.data
                    this.selfSupportList = [...this.selfSupportList, ...da]
                    this.Query.page++
                    uni.hideLoading()
                }
            })
        },
    },
    onLoad(da) {
        this.getorderList()
        this.getList()
    },
    onShow() {},
    mounted() {},
    computed: {
        isShow1() {
            return this.orderList.length && this.activeKey == 1
        },
        isShow2() {
            return this.selfSupportList.length && this.activeKey == 2
        },
    },
    onReachBottom() {
        if (this.Query.page < this.pageData.last_page) this.getList();
    },
};
</script>
<style scoped lang='scss'>
.tabs {
    padding: 30rpx 0 0;
    font-size: 30rpx;
    font-weight: 600;
    margin-bottom: 18rpx;

    .active {
        position: relative;

        &::after {
            content: "";
            width: 88rpx;
            height: 6rpx;
            background-color: #2E57FD;
            border-radius: 5rpx;
            position: absolute;
            left: 2rpx;
            bottom: -8rpx;
        }
    }
}

.orderlist {
    padding: 28rpx 32rpx;
}

.o_item {
    background-color: #fff;
    padding: 25rpx 30rpx;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    // box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);

    &:last-child {
        margin-bottom: 0;
    }

    .p1 {
        .name_tit {
            font-size: 36rpx;
            margin-bottom: 16rpx;
            width: calc(100% - 110rpx);
        }

        .status {
            font-size: 26rpx;
            color: #666;
            width: 110rpx;
            text-align: right;
        }
    }

    .p2 {
        background-color: rgba($color: #000, $alpha: 0.06);
        border-radius: 10rpx;
        padding: 20rpx;
        margin-bottom: 16rpx;
    }

    .goods {
        width: calc(100% - 160rpx);

        .imgs {
            width: 150rpx;
            margin-right: 16rpx;
            display: inline-block;

            &:last-child {
                margin-right: 0;
            }

            .g_img {
                width: 150rpx;
                height: 100rpx;
                border-radius: 8rpx;
                object-fit: cover;
            }

            .g_img1 {
                height: 220rpx;
            }

            .na {
                font-size: 24rpx;
                text-align: center;
            }
        }
    }

    .good2 {
        .p {
            font-size: 28rpx;
        }
    }

    .Movie {
        // padding: 25rpx 28rpx;
        width: 100%;

        .info,
        .poster {
            vertical-align: text-top;
        }

        .info {
            width: calc(100% - 180rpx);
            min-height: 220rpx;

            p {
                font-size: 26rpx;
                color: #666;
                margin-bottom: 8rpx;
            }

            .pt {
                font-weight: bold;
                color: #000;
                font-size: 30rpx;
                margin-bottom: 8rpx;
            }

            .p {
                color: #000;
            }
        }

        .poster {
            width: 150rpx;
            height: 220rpx;
            border-radius: 12rpx;
        }
    }

    .g_amount {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .amount {
        font-size: 32rpx;
        width: 160rpx;
        text-align: right;

        &::before {
            content: "￥";
            font-size: 24rpx;
        }
    }

    .p3 {
        font-size: 24rpx;
        color: #999;
    }
}

.mt-10 {
    margin-top: 10rpx;
}
</style>