工作244：根据页面的内容调用

1根据内容接口判断接口数据

2显示不同的内容

3状态管理

<!--首页管理-->
<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%;">状态:{{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%;">创建时间:{{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%;">账号:{{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%;">状态:{{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%;">创建时间:{{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%;">账号:{{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;">进行中</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;">待结算</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;">我的任务</h1><el-button  type="primary" @click="TaskClick" >任务列表</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;">进行中</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;">待结算</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>

工作244：根据页面的内容调用相关推荐

VUE使用lodop实现前端打印页面指定内容
最近做项目,遇到一个需要页面无需下载在线打印Word的功能,最初尝试直接打印页面,会导致将整个页面都打印出来,不符合要求.后期客户要求要使用lodop,这样打印与页面展示Word两个方面都是未知的东西 ...
wordpress内容调用_WordPress网站的基本内容
wordpress内容调用 Once you have created your WordPress website and installed your chosen theme, the next ...
WordPress获取页面文章内容的代码
为什么80%的码农都做不了架构师?>>> 下面是具体相关的页面内容调用代码: wordpess调用某页面内容的代码如下: <?php $article_id = 1; / ...
通过过滤器控制页面输出内容
在打开的页面中弹出一个对话框,可通过过滤器来控制页面输出的内容,进行实现在每个响应的页面中都弹出一个对话框的功能在完成过滤任务时,将请求的对象返回到自定义的应答对象中,通过自定义应答对象对请求的数据 ...
layui 父页面弹框中获取子页面的内容
layer弹层组件开发文档 - Layuihttps://www.layui.site/doc/modules/layer.html#layer.getChildFrame 需求及代码分析如上图,原 ...
分布式定时任务—xxl-job学习（四）——调度中心web页面端api调用源码分析
分布式定时任务-xxl-job学习(四)--调度中心web页面端api调用源码分析前言一.controller目录下非controller类 1.1 PermissionLimit自定义注解 1. ...
mipcms模板开发之block(块)内容调用方法
文章目录[隐藏] 块内容调用前言块内容调用图片描述块内容调用教程块内容调用前言最近几天在筹划资源网站,网站采用MIPCMS内容管理系统,前端采用 bootstrap4 写了一套模板. 在模板编 ...
php获取页面输出内容,PHP CURL获取页面内容输出例子
使用PHP curl获取页面内容或提交数据,有时候希望返回的内容作为变量储存,而不是直接输出.这个时候就必需设置curl的CURLOPT_RETURNTRANSFER选项为1或true. 1.curl ...
如何查看Chrome浏览器的页面缓存内容【详细教程】
如何查看浏览器页面缓存内容--代码&控制台知识调用前言引入控制台输入代码查看在控制台application查看知识调用文章可能需要用到的知识

工作244：根据页面的内容调用

工作244：根据页面的内容调用相关推荐

最新文章

热门文章