sannongzixunwang_web/components/advertising/OrderList.vue

<template>
    <!-- 工单列表 -->
    <div class="orderList">
        <div class="inner">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane :label="'全部 (' + allOrderTotal + ')'" name="all">
                    <!-- 工单列表 -->
                    <div class="order" v-for="item in allOrder" :key="item.id">
                        <!-- 工单头部 -->
                        <div class="title">
                            <span v-show="item.status == 6" :class="item.status == 6 ? 'orangeStatus' : 'grayStatus'">{{
                                order[item.status] }}</span>
                            <span v-show="item.status == 1" :class="item.status == 1 ? 'greenStatus' : 'grayStatus'">{{
                                order[item.status] }}</span>
                            <span v-show="item.status != 6 && item.status != 1"
                                :class="item.status != 6 && item.status != 1 ? 'grayStatus' : ''">{{ order[item.status]
                                }}</span>
                            <span class="code">
                                工单编号:
                                <span>{{ item.order_num }}</span>
                            </span>
                            <span class="createTime right">{{ item.created_at }}</span>
                        </div>
                        <!-- 工单内容 -->
                        <div class="text">
                            <!-- 开始时间和结束时间 -->
                            <div class="time">
                                <p>
                                    开始时间:
                                    <span>{{ item.sttime }}</span>
                                </p>
                                <p>
                                    结束时间:
                                    <span>{{ item.edtime }}</span>
                                </p>
                            </div>

                            <!-- 广告的天数与个数 -->
                            <div class="num">
                                <p>
                                    天数:
                                    <span>{{ item.days }}天</span>
                                </p>
                                <p>
                                    广告个数:
                                    <span>{{ item.num }}个</span>
                                </p>
                            </div>

                            <!-- 广告状态及总价格 -->
                            <div class="state">
                                <p>
                                    广告状态:
                                    <span>{{ order_ad[item.ad_status] }}</span>
                                </p>
                                <p>
                                    <span class="price">{{ item.price }}</span>
                                    元
                                </p>
                            </div>

                            <!-- 按钮 -->
                            <div class="btn">
                                <button @click="goCancel(item)">{{ item.status == 1 ? '再次申请' : '取消工单' }}</button>
                                <button @click="goDetail(item)">查看详情</button>
                            </div>
                        </div>
                    </div>

                    <!-- 分页 -->
                    <div class="pagination">
                        <HomePagination @sendData="handleData" :total="allOrderTotal"></HomePagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="'已通过 (' + total1 + ')'" name="1">
                    <!-- 工单列表 -->
                    <div class="order1" v-for="item in orderList" :key="item.id">

                        <!-- 工单头部 -->
                        <div class="title">
                            <span class="statusClass">已通过</span>
                            <span class="code">
                                工单编号:
                                <span>{{ item.order_num }}</span>
                            </span>
                            <span class="createTime right">{{ item.created_at }}</span>
                        </div>

                        <!-- 工单内容 -->
                        <div class="text">

                            <!-- 开始时间和结束时间 -->
                            <div class="time">
                                <p>
                                    开始时间:
                                    <span>{{ item.sttime }}</span>
                                </p>
                                <p>
                                    结束时间:
                                    <span>{{ item.edtime }}</span>
                                </p>
                            </div>

                            <!-- 广告的天数与个数 -->
                            <div class="num">
                                <p>
                                    天数:
                                    <span>{{ item.days }}天</span>
                                </p>
                                <p>
                                    广告个数:
                                    <span>{{ item.num }}个</span>
                                </p>
                            </div>

                            <!-- 广告状态及总价格 -->
                            <div class="state">
                                <p>
                                    广告状态:
                                    <span>{{ order_ad[item.ad_status] }}</span>
                                </p>
                                <p>
                                    <span class="price">{{ item.price }}</span>
                                    元
                                </p>
                            </div>

                            <!-- 按钮 -->
                            <div class="btn">
                                <button @click="goCancel(item)">取消工单</button>
                                <button @click="goDetail(item)">查看详情</button>
                            </div>
                        </div>
                    </div>

                    <!-- 分页 -->
                    <div class="pagination">
                        <HomePagination @sendData="handleData1" :total="total1"></HomePagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="'已驳回 (' + total2 + ')'" name="2">
                    <!-- 工单列表 -->
                    <div class="order2" v-for="item in orderList" :key="item.id">

                        <!-- 工单头部 -->
                        <div class="title">
                            <span class="statusClass">已驳回</span>
                            <span class="code">
                                工单编号:
                                <span>{{ item.order_num }}</span>
                            </span>
                            <span class="createTime right">{{ item.created_at }}</span>
                        </div>

                        <!-- 工单内容 -->
                        <div class="text">

                            <!-- 开始时间和结束时间 -->
                            <div class="time">
                                <p>
                                    开始时间:
                                    <span>{{ item.sttime }}</span>
                                </p>
                                <p>
                                    结束时间:
                                    <span>{{ item.edtime }}</span>
                                </p>
                            </div>

                            <!-- 广告的天数与个数 -->
                            <div class="num">
                                <p>
                                    天数:
                                    <span>{{ item.days }}天</span>
                                </p>
                                <p>
                                    广告个数:
                                    <span>{{ item.num }}个</span>
                                </p>
                            </div>

                            <!-- 广告状态及总价格 -->
                            <div class="state">
                                <p>
                                    广告状态:
                                    <span>{{ order_ad[item.ad_status] }}</span>
                                </p>
                                <p>
                                    <span class="price">{{ item.price }}</span>
                                    元
                                </p>
                            </div>

                            <!-- 按钮 -->
                            <div class="btn">
                                <button @click="goCancel(item)">取消工单</button>
                                <button @click="goDetail(item)">查看详情</button>
                            </div>
                        </div>
                    </div>

                    <!-- 分页 -->
                    <div class="pagination">
                        <HomePagination @sendData="handleData2" :total="total2"></HomePagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="'待审核 (' + total6 + ')'" name="6">
                    <!-- 工单列表 -->
                    <div class="order6" v-for="item in orderList" :key="item.id">

                        <!-- 工单头部 -->
                        <div class="title">
                            <span class="statusClass">待审核</span>
                            <span class="code">
                                工单编号:
                                <span>{{ item.order_num }}</span>
                            </span>
                            <span class="createTime right">{{ item.created_at }}</span>
                        </div>

                        <!-- 工单内容 -->
                        <div class="text">

                            <!-- 开始时间和结束时间 -->
                            <div class="time">
                                <p>
                                    开始时间:
                                    <span>{{ item.sttime }}</span>
                                </p>
                                <p>
                                    结束时间:
                                    <span>{{ item.edtime }}</span>
                                </p>
                            </div>

                            <!-- 广告的天数与个数 -->
                            <div class="num">
                                <p>
                                    天数:
                                    <span>{{ item.days }}天</span>
                                </p>
                                <p>
                                    广告个数:
                                    <span>{{ item.num }}个</span>
                                </p>
                            </div>

                            <!-- 广告状态及总价格 -->
                            <div class="state">
                                <p>
                                    广告状态:
                                    <span>{{ order_ad[item.ad_status] }}</span>
                                </p>
                                <p>
                                    <span class="price">{{ item.price }}</span>
                                    元
                                </p>
                            </div>

                            <!-- 按钮 -->
                            <div class="btn">
                                <button @click="goCancel(item)">取消工单</button>
                                <button @click="goDetail(item)">查看详情</button>
                            </div>
                        </div>
                    </div>

                    <!-- 分页 -->
                    <div class="pagination">
                        <HomePagination @sendData="handleData3" :total="total6"></HomePagination>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>

    </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElTabs, ElTabPane, ElMessage } from 'element-plus'
import { useStatusStore } from "@/store/status"

const StatusStore = useStatusStore()

// axios请求
const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;

const activeName = ref('first')
let orderList = useState("orderList", () => "")

let order = useState('order', () => "")
let orders = useState('orders', () => "")
let order_ad = useState('order_ad', () => [])
let allOrder = useState("allOrder", () => "")
let allOrderTotal = useState("allOrderTotal", () => "")
let total1 = useState("total1", () => "")
let total2 = useState("total2", () => "")
let total6 = useState("total6", () => "")

let page = useState("page", () => "1")
let pageSize = useState("pageSize", () => "10")

let page1 = useState("page1", () => "1")

//全部标签下页码改变后触发的事件
const handleData = (data) => {
    console.log(data.value)
    page.value = data.value
    console.log(page);

    //在全部下 页码发生变化时去请求对应的数据
    axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page.value}`).then(response => {
        // if (response.message) {
        //     ElMessage(response.message)
        // }
        console.log(response);
        console.log(response.data.rows);
        allOrder.value = response.data.rows
        console.log(orderList.value);
    }).catch(error => {
        console.log(error);
    })
}

//已通过标签 页码改变后触发的事件
const handleData1 = (data) => {
    console.log(data.value)
    page1.value = data.value
    console.log(page1);

    //在全部下 页码发生变化时去请求对应的数据
    axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page1.value}&status=${1}`).then(response => {
        console.log(response.data.rows);
        if (response.message) {
            ElMessage(response.message)
        }
        orderList.value = response.data.rows
        console.log(orderList.value);
    }).catch(error => {
        console.log(error);
    })

}

//已驳回标签 页码改变后触发的事件
const handleData2 = (data) => {
    console.log(data.value)
    page1.value = data.value
    console.log(page1);

    //在全部下 页码发生变化时去请求对应的数据
    axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page1.value}&status=${2}`).then(response => {
        if (response.message) {
            ElMessage(response.message)
        }
        console.log(response.data.rows);
        orderList.value = response.data.rows
        console.log(orderList.value);
    }).catch(error => {
        console.log(error);
    })

}

//待审核标签 页码改变后触发的事件
const handleData3 = (data) => {
    console.log(data.value)
    page1.value = data.value
    console.log(page1);

    //在全部下 页码发生变化时去请求对应的数据
    axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page1.value}&status=${6}`).then(response => {
        console.log(response.data.rows);
        // if (response.message) {
        //     ElMessage(response.message)
        // }
        orderList.value = response.data.rows
        console.log(orderList.value);
    }).catch(error => {
        console.log(error);
    })

}

//点击tab标题获取对应的数据
const handleClick = (tab, event) => {
    console.log(tab.props.name, event)

    if (tab.props.name = 'all') {
        // allOrder
        axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page.value}`).then(response => {
            console.log(response.data.rows);
            // if (response.message) {
            //     ElMessage(response.message)
            // }
            allOrder.value = response.data.rows
            console.log(orderList.value);
        }).catch(error => {
            console.log(error);
        })
    } else {
        axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page.value}&status=${tab.props.name}`).then(response => {
            console.log(response.data.rows);
            // if (response.message) {
            //     ElMessage(response.message)
            // }
            orderList.value = response.data.rows
            console.log(orderList.value);
        }).catch(error => {
            console.log(error);
        })
    }
}

// 取消工单
let goCancel = (item) => {
    console.log(item);
    
    if (item.status == 1) {
        // 再次申请

    } else {
        //删除订单
        // axios.get(`/order/delOrderAD&id=${item.id}`).then(response=>{
        //     console.log(response);
        // })
        // 撤销工单
        axios.get(`/order/cancelOrder&order_id=${item.id}`).then(response => {
            console.log(response.message);
            ElMessage(response.message)
        })
    }

}

// 查看详情
let goDetail = (item) => {
    console.log(item);

    const params = {
        id: item.id,
        days: item.days,
        status: item.status,
        ad_status: item.ad_status
    }
    navigateTo({
        path: "/advertising/adDetail",
        query: params
    })
}


// 获取广告状态
const getStauts = async () => {
    try {
        const response = await axios.get("/order/getStatus");
        console.log(response.data);
        order.value = response.data.order
        order_ad.value = response.data.order_ad

        StatusStore.setOrderStatus(order.value)
        StatusStore.setAdStatus(order_ad.value)

        //工单状态
        orders.value = JSON.parse(JSON.stringify(order.value))  //深拷贝
        // console.log(orders.value);
        delete orders.value[3]
        delete orders.value[4]
        delete orders.value[5]
        delete orders.value[7]

    } catch (error) {
        console.error(error);
    }
}

//获取全部工单
const getOrderList = async () => {
    try {
        const response = await axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page.value}`);
        // console.log(response.data.rows);
        // if (response.message) {
        //     ElMessage(response.message)
        // }
        allOrder.value = response.data.rows
        allOrderTotal.value = response.data.count.all
        total1.value = response.data.count.pass
        total2.value = response.data.count.return
        total6.value = response.data.count.wait
    } catch (error) {
        console.error(error);
    }
}

//挂载成功钩子函数
onMounted(() => {

    //获取广告状态
    getStauts()

    // 获取全部工单
    getOrderList()


})
</script>

<style lang="less" scoped>
.orderList {
    width: 1200px;

    .inner {
        overflow: hidden;

        /deep/.el-tabs__header {
            width: 1100px;
            margin: 0 auto;
        }

        /deep/.el-tabs__item {
            padding: 0 100px 0 20px;
            font-size: 16px;
            height: 60px;
        }

        /deep/.el-tabs__item.is-active,
        /deep/.el-tabs__item:hover {
            color: #33b023;
        }

        /deep/.el-tabs__active-bar {
            background-color: #33b023;
            height: 0;
        }

        /deep/.el-tabs__nav {
            height: 60px;
        }

        .order1,
        .order2,
        .order6,
        .order {
            width: 1196px;
            height: 210px;
            border: 1px solid #e1e1e1;
            margin-top: 30px;

            .title {
                height: 60px;
                line-height: 30px;
                border-bottom: 1px solid #e1e1e1;
                padding: 15px 24px 15px 50px;
                box-sizing: border-box;
                background-color: #fafafa;



                >span {
                    display: inline-block;
                    text-align: center;
                    font-family: Microsoft YaHei, Microsoft YaHei;
                    vertical-align: middle;
                }

                .statusClass {
                    width: 70px;
                    height: 32px;
                    line-height: 32px;
                    margin-right: 50px;
                    background: #fbebd5;
                    color: #FFAA33;
                    font-weight: 400;
                    font-size: 16px;
                }

                .orangeStatus {
                    width: 70px;
                    height: 32px;
                    line-height: 32px;
                    margin-right: 50px;
                    background: #fbebd5;
                    color: #FFAA33;
                    font-weight: 400;
                    font-size: 16px;
                }

                .greenStatus {
                    width: 70px;
                    height: 32px;
                    line-height: 32px;
                    margin-right: 50px;
                    background: #d5ecd2;
                    color: #33B023;
                    font-weight: 400;
                    font-size: 16px;
                }

                .grayStatus {
                    width: 70px;
                    height: 32px;
                    line-height: 32px;
                    margin-right: 50px;
                    background: #e8e8e8;
                    color: #999999;
                    font-weight: 400;
                    font-size: 16px;
                }

                .code {
                    font-weight: 400;
                    font-size: 16px;
                    color: #333333;
                }

                .createTime {
                    font-weight: bold;
                    font-size: 16px;
                    color: #333333;
                }
            }

            .text {
                display: flex;
                padding: 35px 70px 35px 50px;
                justify-content: space-between;

                .state,
                .num,
                .time {
                    height: 80px;
                    padding: 2px 0;
                    font-weight: 400;
                    font-size: 16px;
                    color: #333333;

                    >p:first-child {
                        margin-bottom: 30px;
                    }
                }

                .state,
                .num {
                    span {
                        font-weight: 600;
                    }
                }

                .state {

                    >p:first-child {
                        margin-bottom: 22px;
                    }

                    .price {
                        font-weight: bold;
                        font-size: 24px;
                        color: #028E21;
                    }
                }

                .btn {
                    height: 85px;

                    button {
                        display: block;
                        width: 82px;
                        height: 34px;
                        border: none;
                        border-radius: 4px;
                    }

                    >button:first-child {
                        border: 1px solid #33b023;
                        color: #33b023;
                        background-color: #fff;
                        margin-bottom: 15px;
                    }

                    >button:last-child {
                        background-color: #33b023;
                        color: #fff;
                    }
                }

            }
        }



        .order6>.title>.statusClass {
            background: #fbebd5;
            color: #FFAA33;
        }

        .order1>.title>.statusClass {
            background: #d5ecd2;
            color: #33B023;
        }

        .order2>.title>.statusClass {
            background: #e8e8e8;
            color: #999999;
        }

        .pagination {
            margin-top: 60px;
            margin-bottom: 90px;
        }

    }

}
</style>