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


<template>
  <div>
 
    
    <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>

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>

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>