jjx-web/pages/user/order.vue

<template>
    <view>
        <top-bar></top-bar>
        <common-header></common-header>
        <category-bar></category-bar>
        <view class="flex justify-center items-start main-wrap">
            <view class="flex-col flex-col justify-center items-center bg-white text-40 left-wrap pointer">
                <view class="flex justify-center items-center" :class="[activeIndex === 0 ? 'active' : '' ]"
                      @click="changeActive(0)">
                    <text>询价管理</text>
                </view>
                <view class="flex justify-center items-center" :class="[activeIndex === 1 ? 'active' : '' ]"
                      @click="changeActive(1)">
                    <text>订单管理</text>
                </view>
                <view class="flex justify-center items-center" :class="[activeIndex === 2 ? 'active' : '' ]"
                      @click="changeActive(2)">
                    <text>合同管理</text>
                </view>
            </view>
            <view class="w-1200 m-a bg-white p-40">
                <el-table :data="tableData" style="width: 100%" border stripe>
                    <el-table-column prop="orderNo" label="订单号" width="200"/>
                    <el-table-column label="订单类型">
                        <template v-slot="{ row }">
                            <span>{{ row.type === 0 ? '普通订单' : '金久信自营订单' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品列表" width="250">
                        <template v-slot="{ row }">
                            <view class="flex flex-col justify-start items-start">
                                <view v-for="(item, index) in row.goods" :key="index"
                                      class="flex justify-start items-start">
                                    <image :src="item.goodsCover" class="goods-cover" v-if="row.type === 0"/>
                                    <view class="ml-20 flex flex-col justify-start items-start">
                                        <text class="text-main font-bold">{{ item.goodsName }}</text>
                                        <text class="mt-20">￥{{ item.goodsPrice }}</text>
                                        <text class="mt-20">x{{ item.num }}</text>
                                    </view>
                                </view>
                            </view>
                        </template>
                    </el-table-column>
                    <el-table-column prop="amount" label="订单金额"/>
                    <el-table-column prop="payAmount" label="支付金额"/>
                    <el-table-column label="订单状态">
                        <template v-slot="{ row }">
                            <span v-if="row.orderStatus === 0">待支付</span>
                            <span v-if="row.orderStatus === 1">已支付</span>
                            <span v-if="row.orderStatus === 2">待收货</span>
                            <span v-if="row.orderStatus === 3">已完成</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="_add_time_str" label="下单时间"/>
                    <el-table-column label="操作">
                        <template v-slot="{ row }">
                            <text v-if="row.orderStatus === 0" class="text-main pointer" @click="repay(row)">去支付</text>
                        </template>
                    </el-table-column>
                </el-table>
                <view class="text-center mt-20">
                    <el-pagination
                        :page-size="pageSize"
                        @current-change="getOrderList"
                        background
                        layout="prev, pager, next"
                        :total="total">
                    </el-pagination>
                </view>
            </view>
        </view>
        <gap height="50"/>
        <common-footer></common-footer>
        <right-bar></right-bar>
    </view>
</template>

<script>
import pay from "../index/shop/pay.vue";

export default {
    name: "order",
    computed: {
        pay() {
            return pay
        }
    },
    data() {
        return {
            tableData: [],
            activeIndex: 0,
            pageSize: 20,
            total: 0,
        }
    },
    methods: {
        changeActive(index) {
            this.list = []
            this.mode = 'list'
            if (index !== 2) this.activeIndex = index
            if (index === 0) {
            } else if (index === 1) this.getOrderList()
            else if (index === 2) {
                vk.navigateTo({
                    url: '/pages/contract/index'
                })
            }
        },
        async getOrderList(pageIndex = 1) {
            const {rows} = await vk.callFunction({
                url: 'client/order/kh/getList',
                data: {
                    pageIndex,
                    pageSize: this.pageSize,
                }
            })
            this.tableData = rows
            console.log(this.tableData)
        },
        async repay(row) {
            await vk.callFunction({
                url: 'client/order/kh/resetOrderNo',
                data: {
                    id: row._id,
                }
            })
            vk.navigateTo({
                url: `/pages/index/shop/pay?id=${row._id}`
            })
        }
    },
    onLoad(options) {
        if (options && options.tab) {
            this.changeActive(parseInt(options.tab))
        } else {
        }
    }
}
</script>

<style lang="scss" scoped>

.main-wrap {
    width: 1200px;
    margin: 20px auto;
    position: relative;

    .left-wrap {
        position: absolute;
        width: 220px;
        left: -240px;
        top: 0;

        view {
            padding: 20px;
        }

        .active {
            background-color: #a92924;
            color: white;
        }
    }
}

.goods-cover {
    width: 80px;
    height: 80px;
}
</style>