|
@@ -1,822 +0,0 @@
|
|
|
-<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> -->
|
|
|
- <!-- <NuxtLink :to="`/advertising/${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="../../static/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="../../static/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="../../static/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="../../static/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,onMounted } 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")
|
|
|
-onMounted(async () => {
|
|
|
- await getStauts()
|
|
|
-
|
|
|
- // 获取全部工单
|
|
|
- await getOrderList()
|
|
|
-})
|
|
|
-//全部标签下页码改变后触发的事件
|
|
|
-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 getDate = () => {
|
|
|
- axios.get(`/order/getOrderList?pageSize=${pageSize.value}&page=${page.value}`).then(response => {
|
|
|
- console.log(response.data.rows);
|
|
|
- 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()
|
|
|
-}
|
|
|
-
|
|
|
-//再次申请
|
|
|
-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
|
|
|
- // })
|
|
|
- emit('aa', 104);
|
|
|
-}
|
|
|
-// 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.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.waite
|
|
|
- } catch (error) {
|
|
|
- console.error(error);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-// //挂载成功钩子函数
|
|
|
-// onMounted(() => {
|
|
|
-
|
|
|
-// //获取广告状态
|
|
|
-// getStauts()
|
|
|
-
|
|
|
-// // 获取全部工单
|
|
|
-// getOrderList()
|
|
|
-
|
|
|
-
|
|
|
-// })
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-.orderList {
|
|
|
- width: 1200px;
|
|
|
- margin: 0 54px;
|
|
|
-
|
|
|
- .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>
|