1根據(jù)內(nèi)容接口判斷接口數(shù)據(jù)

2顯示不同的內(nèi)容

3狀態(tài)管理

<!--首頁(yè)管理--> <template><div><!--market--><el-card v-if="task1.length!=0" style="width: 100%;height: 300px;"><el-carousel :interval="3000" indicator-position="outside"><el-carousel-item v-for="(item,index) in task1" :key="index"><div style="display: flex;justify-content: space-between;"><span style="float:left;margin-top: 40px;width: 86px;font-size: 16px;margin-left: 10%">等待處理</span><el-link type="primary" @click="ListClick" style="margin-right: 10%">查看更多>></el-link></div><div style="clear: both"><h1 style="margin-top:10px;float:left;margin-left:32px;width: 423px;height: 26px;;font-weight: bold;font-size: 20px;margin-left: 10%">訂單名稱:{{item.id}}</h1><p style="margin-top: 20px;font-size: 21px;margin-left:32px;font-size: 16px;float: right;margin-right: 10%;">狀態(tài):{{item.status_name}}</p></div><div style="clear: both"><p style="float:left;width: 275px;height: 21px;font-size: 14px;color: #707070;margin-left: 10%;">創(chuàng)建時(shí)間:{{item.created_at}}</p></div><div style="clear: both;display: flex;justify-content: space-between;"><p style="float:left;width: 275px;height: 21px;font-size: 16px;margin-left:10%;">賬號(hào):{{item.account.name}}</p><el-button type="primary" style="width: 98px;margin-right: 10%;" @click="ListClick" >去審核</el-button></div ></el-carousel-item></el-carousel></el-card><el-card v-if="order1.length!=0" style="width: 100%;height: 300px;"><el-carousel :interval="3000" indicator-position="outside"><el-carousel-item v-for="(item,index) in order1" :key="index"><div style="display: flex;justify-content: space-between;"><span style="float:left;margin-top: 40px;width: 86px;font-size: 16px;margin-left: 10%">等待處理</span><el-link type="primary" @click="ListClick" style="margin-right: 10%">查看更多>></el-link></div><div style="clear: both"><h1 style="margin-top:10px;float:left;margin-left:32px;width: 423px;height: 26px;;font-weight: bold;font-size: 20px;margin-left: 10%">訂單名稱:{{item.id}}</h1><p style="margin-top: 20px;font-size: 21px;margin-left:32px;font-size: 16px;float: right;margin-right: 10%;">狀態(tài):{{item.status_name}}</p></div><div style="clear: both"><p style="float:left;width: 275px;height: 21px;font-size: 14px;color: #707070;margin-left: 10%;">創(chuàng)建時(shí)間:{{item.created_at}}</p></div><div style="clear: both;display: flex;justify-content: space-between;"><p style="float:left;width: 275px;height: 21px;font-size: 16px;margin-left:10%;">賬號(hào):{{item.name}}</p><el-button type="primary" style="width: 98px;margin-right: 10%;" @click="ListClick" >去審核</el-button></div ></el-carousel-item></el-carousel></el-card><el-card v-if="task_status"><div style="display: flex;justify-content: space-between"><h1 style="float: left;margin-top: 34px;margin-left: 32px;">我的訂單</h1><el-button type="primary" @click="ListClick" >訂單列表</el-button></div><div style="width: 100%;clear: both;display: flex;justify-content: center"><ul style="float:left;width: 100%;"><li style="float:left;list-style: none;border-right:1px solid #000000;;width: 16%;text-align: center"><h1 style="font-size:30px;text-align: center">{{task_status.completed}}</h1><h1 style="font-size:20px;text-align: center;">待審核</h1></li><li style="float:left;list-style: none;border-right:1px solid #000000;width: 16%;text-align: center"><h1 style="font-size:30px;text-align: center">{{task_status.release}}</h1><h1 style="font-size:20px;text-align: center;">待修改</h1></h1></li><li style="float:left;list-style: none;border-right:1px solid #000000;width: 16%;text-align: center"><h1 style="font-size:30px;text-align: center">{{task_status.returned}}</h1><h1 style="font-size:20px;text-align: center;">進(jìn)行中</h1></h1></li><li style="float:left;list-style: none;border-right:1px solid #000000;width: 16%;text-align: center"><h1 style="font-size:30px;text-align: center">{{task_status.underway}}</h1><h1 style="font-size:20px;text-align: center;">待結(jié)算</h1></h1></li><li style="float:left;list-style: none;border-right:1px solid #000000;width: 16%;text-align: center"><h1 style="font-size:30px;text-align: center">{{task_status.wait_confirm}}</h1><h1 style="font-size:20px;text-align: center;">已完成</h1></li><li style="float:left;list-style: none;border-right:none;width: 16%;text-align: center"><h1 style="font-size:30px;text-align: center">{{task_status.wait_relevance}}</h1><h1 style="font-size:20px;text-align: center;">已取消</h1></li></ul></div></el-card><el-card v-if="order_status&&this.ModeEevent==0"><div style="display: flex;justify-content: space-between"><h1 style="float: left;margin-top: 34px;margin-left: 32px;">我的任務(wù)</h1><el-button type="primary" @click="TaskClick" >任務(wù)列表</el-button></div><div style="width: 100%;clear: both;display: flex;justify-content: center"><ul style="float:left;width: 100%;"><li style="float:left;list-style: none;width: 16%;border-right:1px solid #000000;text-align: center"><h1 style="font-size:30px;text-align: center">{{order_status.completed}}</h1><h1 style="font-size:20px;text-align: center;">已完成</h1></li><li style="float:left;list-style: none;width: 16%;border-right:1px solid #000000;text-align: center"><h1 style="font-size:30px;text-align: center">{{order_status.for_the}}</h1><h1 style="font-size:20px;text-align: center;">待修改</h1></li><li style="float:left;list-style: none;width: 16%;border-right:1px solid #000000;text-align: center"><h1 style="font-size:30px;text-align: center">{{order_status.modify}}</h1><h1 style="font-size:20px;text-align: center;">進(jìn)行中</h1></li><li style="float:left;list-style: none;width: 16%;border-right:1px solid #000000;text-align: center"><h1 style="font-size:30px;text-align: center">{{order_status.underway}}</h1><h1 style="font-size:20px;text-align: center;">待結(jié)算</h1></li><li style="float:left;list-style: none;width: 16%;border-right:1px solid #000000;text-align: center"><h1 style="font-size:30px;text-align: center">{{order_status.wait_confirm}}</h1><h1 style="font-size:20px;text-align: center;">已完成</h1></li><li style="float:left;list-style: none;width: 16%;border-right:none;;text-align: center"><h1 style="font-size:30px;text-align: center">{{order_status.underway}}</h1><h1 style="font-size:20px;text-align: center;">已取消</h1></li></ul></div></el-card></div> </template> <script> import 'swiper/swiper-bundle.css' // import style (<= Swiper 5.x) import 'swiper/swiper.scss' import {getAction} from "@/api"; import {SET_MODE} from "@/store/mutation-types"; import Vue from "vue"; export default {name: "Home",data(){return{task1:[],task_status:{},order_status:{},order1:[],ModeEeventCheck:-1,}},computed:{ModeEevent(){return this.$store.state.mode}},methods:{ListClick(){this.$router.push('/order')},TaskClick(){this.$router.push('/task')},},created() {console.log(this.ModeEevent)if(this.ModeEevent==0) {getAction("/home/market").then(res => {this.order1=res.data.orderthis.task_status=res.data.task_statusthis.order_status=res.data.order_statusthis.ModeEeventCheck=this.ModeEeventconsole.log(res.data.order)for(var item in this.order1){console.log(this.order1[item].id)}})}else{getAction("/home/business").then(res=>{/*console.log(res)*/this.task1=res.data.taskthis.task_status=res.data.task_statusthis.ModeEeventCheck=this.ModeEeventconsole.log(res.data.task)for(var item in this.task1){console.log(this.task1[item].id)}})}} }; </script> <style scoped> .el-carousel__item h3 {color: #475669;font-size: 18px;opacity: 0.75;line-height: 300px;margin: 0; } .el-button{height: 40px; } .el-carousel__item:nth-child(2n) {background-color: white; } .el-carousel__item:nth-child(2n+1) {background-color: white; } </style>

?

總結(jié)

以上是生活随笔為你收集整理的工作244：根据页面的内容调用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。