sannongzixunwang_web/components/advertising/OrderList.vue

<template>
    <!-- 工单列表 -->
    <div class="orderList">
        <div class="inner">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChange">
                <el-tab-pane :label="`全部 ( ${allOrderTotal ? allOrderTotal : 0} )`" name="">
                    <!-- 工单列表 -->
                    <!-- <NuxtLink to="/advertising/adDetail"> -->
                    <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 == 7" :class="item.status == 7 ? 'greenStatus' : 'grayStatus'">{{
                                order[item.status] }}</span>
                            <span v-show="item.status != 6 && item.status != 1 && item.status != 7"
                                :class="item.status != 6 && item.status != 1 && item.status != 7 ? '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)" v-if="item.status == 6">取消工单</button>
                                <button @click="goAgain" v-else>再次申请</button>
                                <!-- <button @click="goCancel(item)">{{ item.status == 6 ? '取消工单' : '再次申请' }}</button> -->
                                <!-- &days=${item.days}&status=${item.status}&ad_status=${item.ad_status} -->
                                <NuxtLink :to="`/advertising/adDetail?id=${item.id}`">
                                    <el-button type="success">查看详情</el-button>
                                </NuxtLink>

                                <!-- <NuxtLink :to="{ path: '/advertising/adDetail', query: { id: item.id } }">
                                    <el-button type="success">查看详情</el-button>
                                </NuxtLink> -->

                                <!-- <button @click="goDetail(item)">查看详情</button> -->
                            </div>
                        </div>
                    </div>
                    <!-- </NuxtLink> -->

                    <div class="adEmpty" v-show="!allOrder">
                        <img src="../../public/topic/Task_empty.png" alt="">
                        <span>暂无提交的广告工单~</span>
                    </div>

                    <!-- 分页 -->
                    <div class="paginationBox" v-show="allOrder">
                        <HomePagination @sendData="handleData" :total="allOrderTotal"></HomePagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="`已通过 ( ${total1 ? total1 : 0} )`" 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="goAgain(item)">再次申请</button>
                                <NuxtLink :to="`/advertising/adDetail?id=${item.id}`">
                                    <el-button type="success">查看详情</el-button>
                                </NuxtLink>
                                <!-- <button @click="goDetail(item)">查看详情</button> -->
                            </div>
                        </div>
                    </div>

                    <div class="adEmpty" v-show="!total1">
                        <img src="../../public/topic/Task_empty.png" alt="">
                        <span>暂无提交的广告工单~</span>
                    </div>

                    <!-- 分页 -->
                    <div class="paginationBox" v-show="total1">
                        <HomePagination @sendData="handleData1" :total="total1"></HomePagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="`已驳回 ( ${total2 ? total2 : 0} )`" 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="goAgain(item)">再次申请</button>
                                <NuxtLink :to="`/advertising/adDetail?id=${item.id}`">
                                    <el-button type="success">查看详情</el-button>
                                </NuxtLink>
                                <!-- <button @click="goDetail(item)">查看详情</button> -->
                            </div>
                        </div>
                    </div>

                    <div class="adEmpty" v-show="!total2">
                        <img src="../../public/topic/Task_empty.png" alt="">
                        <span>暂无提交的广告工单~</span>
                    </div>

                    <!-- 分页 -->
                    <div class="paginationBox" v-show="total2">
                        <HomePagination @sendData="handleData2" :total="total2"></HomePagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="`待审核 ( ${total6 ? total6 : 0} )`" 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>
                                <NuxtLink :to="`/advertising/adDetail?id=${item.id}`">
                                    <el-button type="success">查看详情</el-button>
                                </NuxtLink>
                                <!-- <button @click="goDetail(item)">查看详情 </button> -->
                            </div>
                        </div>
                    </div>

                    <div class="adEmpty" v-show="!total6">
                        <img src="../../public/topic/Task_empty.png" alt="">
                        <span>暂无提交的广告工单~</span>
                    </div>

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

    </div>
</template>

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

const StatusStore = useStatusStore()

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

const activeName = ref('')
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);
    })

}
const getData = () => {
    axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page.value}`).then(response => {
        console.log('all', response);
        allOrder.value = response.data.rows
        console.log(orderList.value);
    }).catch(error => {
        console.log(error);
    })
}

//点击tab标题获取对应的数据
const handleChange = () => {
    if (!activeName.value) {
        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=${activeName.value}`).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);
    axios.get(`/order/cancelOrder?order_id=${item.id}`).then(response => {
        console.log(response.message);
        if (response.code == 0) {
            ElMessage.error(response.message)
        } else if (response.code == 200) {
            ElMessage.success("取消成功")
            getOrderList()
        }
    })
    getOrderList()
}

//再次申请
const emit = defineEmits(['childData']);
const ad = 1;
let goAgain = () => {
    console.log(123);
    emit('childData', 1);
}

// 查看详情
// 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 goDetail =  (item) => {
//     const data = {
//         id: item.id,
//     }
//     console.log(data)
//     // 使用 nextTick 确保 DOM 更新完成
//     // await nextTick();
//     // 这里的代码会在 DOM 更新完成后执行
//     // console.log(myDiv.value.textContent);
//     navigateTo({
//         path: "/advertising/adDetail",
//         query: data
//     })
// };


// 获取广告状态
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', response);
        // 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.waite
    } catch (error) {
        console.error(error);
    }
}

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

    //获取广告状态
    getStauts()

    // 获取全部工单
    getOrderList()




})
</script>

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

    .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;
                    }
                }

            }
        }

        .adEmpty {
            margin: 130px auto;
            text-align: center;

            img {
                width: 78px;
                height: 78px;
                vertical-align: -28px;
                margin-right: 10px;
            }

            span {
                font-family: Microsoft YaHei, Microsoft YaHei;
                font-weight: bold;
                font-size: 26px;
                color: #CCCCCC;
                line-height: 30px;
                text-align: center;
                font-style: normal;
                text-transform: none;
            }
        }


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

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

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

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

    }

}
</style>