前端工作总结101-根据页面的内容调用

简介: 前端工作总结101-根据页面的内容调用
<!--首页管理-->
<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.order
          this.task_status=res.data.task_status
          this.order_status=res.data.order_status
          this.ModeEeventCheck=this.ModeEevent
          console.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.task
        this.task_status=res.data.task_status
        this.ModeEeventCheck=this.ModeEevent
        console.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>
相关文章
|
12天前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
6 1
.自定义认证前端页面
|
4月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
|
7天前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息,并通过阿里云计算巢完成了Appsmith的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith,非技术同学也能轻松搞定。
|
4月前
|
前端开发 JavaScript Java
基于Vue+ElementUI框架实现学生管理系统前端页面设计
基于Vue+ElementUI框架实现学生管理系统前端页面设计
|
30天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
37 18
|
2月前
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
85 2
前端JS读取文件内容并展示到页面上
|
1月前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
29 1
|
1月前
|
前端开发
搭建个人博客--1、前端页面
搭建个人博客--1、前端页面
20 1
|
3月前
|
开发框架 前端开发 Java
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01
68 3
【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01
|
2月前
|
前端开发 JavaScript
前端基础(一)_前端页面构成
本文介绍了前端页面的基本构成,包括HTML(负责页面的结构和语义)、CSS(负责页面的样式和表现)和JavaScript(负责页面的行为和动态效果)。文章通过示例代码展示了如何使用这三种技术来创建一个简单的网页,并解释了HTML文档的结构和语法。
34 0