E-commerce/src/views/page3/index.vue

<template>
  <bgBox :tabChange="tabChange" class="bgBox" bgType="g-bg3">
    <div class="main">
      <div class="topBar">
        <div class="query">
          <img src="@/assets/img2/种植分析详情/编组 8.png" alt="" />
          <el-radio-group v-model="query.radio" class="radio-group">
            <el-radio class="date" :label="6">近一周</el-radio>
            <el-radio class="date" :label="30">近30天</el-radio>
            <el-radio class="date" :label="90">近90天</el-radio>
          </el-radio-group>
          <el-date-picker
            :pickerOptions="pickerOptions0"
            v-model="query.date[0]"
            type="date"
            placeholder="开始日期"
            class="mr-20px ml-20px date"
          >
          </el-date-picker>
          <el-date-picker
            class="date"
            :pickerOptions="pickerOptions1"
            v-model="query.date[1]"
            type="date"
            placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        <img
          @click="backFn"
          src="@/assets/img2/种植分析详情/编组 16备份.png"
          alt=""
        />
      </div>
      <leftBox class="lefBox" />
      <leftBox2 class="lefBox2" />
    </div>
  </bgBox>
</template>

<script>
import 'element-ui/lib/theme-chalk/index.css'

import bgBox from '@/components/bgBox/index.vue'
import leftBox from './leftBox.vue'
import leftBox2 from './leftBox2.vue'
import { Button, DatePicker, RadioGroup, Radio } from 'element-ui'
import Vue from 'vue'
import dayjs from 'dayjs'

// 获取近一周的日期范围
function getLastDay(day) {
  const end = dayjs() // 当前日期
  const start = end.subtract(day, `day`) // 前六天
  return { start: start.format(`YYYY-MM-DD`), end: end.format(`YYYY-MM-DD`) }
}

window.getLastDay = getLastDay
window.dayjs = dayjs

Vue.use(Button)
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(DatePicker)

export default {
  components: {
    leftBox,
    leftBox2,
    bgBox,
  },
  data() {
    const vm = this
    return {
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      pickerOptions1: {
        disabledDate(time) {
          if (vm.query.date[0]) {
            return (
              time.getTime() < vm.query.date[0] || time.getTime() > Date.now()
            )
          } else {
            return time.getTime() > Date.now()
          }
        },
      },
      query: {
        radio: 6,
        date: [],
      },
    }
  },
  computed: {},
  async created() {},
  watch: {
    'query.radio': {
      handler(val) {
        if (this.query.radio) {
          this.query.date = []
          const { start, end } = getLastDay(this.query.radio)
          this.getEchartData(start, end)
        }
      },
      immediate: true,
    },
    'query.date'([a, b] = []) {
      if (a && b) {
        this.query.radio = 0
        const start = dayjs(a || Date.now()).format(`YYYY-MM-DD`)
        const end = dayjs(b || Date.now()).format(`YYYY-MM-DD`)
        this.getEchartData(start, end)
      } else if (!a && !b && !this.query.radio) {
        this.query.radio = 6
      }
    },
  },
  mounted() {},
  methods: {
    getEchartData(start, end) {
      console.log(`start, end`, start, end)
    },
    backFn() {
      console.log(`backFn`)
    },
    tabChange(val) {
      console.log(`val`, val)
    },
  },
}
</script>

<style lang="less" scoped>
.bgBox {
  .main {
    padding: 50px;
    padding-top: 45px;
    .topBar {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .lefBox,
    .lefBox2 {
      position: absolute;
      z-index: 10;
      top: 120px;
    }
    .lefBox {
      left: 458px;
    }
    .lefBox2 {
      left: 47px;
    }
    .query {
      font-size: 14px;
      display: flex;
      align-items: center;
      .radio-group {
        margin-top: -1px;
        margin-left: 20px;
      }
      .date {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 10px;
      }
      ::v-deep {
        .el-radio__input.is-checked + .el-radio__label {
          color: rgba(255, 255, 255, 0.8);
        }
        .el-input__suffix {
          right: 0;
        }
        .el-radio {
          background: rgba(255, 255, 255, 0.2);
          box-sizing: border-box;
          height: 27px;
          padding: 0 10px;
          line-height: 27px;
          color: rgba(255, 255, 255, 0.8);
          margin-right: 5px;
        }
        .el-input--prefix .el-input__inner {
          padding: 0;
        }
        .el-input__prefix {
          display: none;
        }
        .el-date-editor.el-input {
          width: 120px;
        }
        .el-input__icon {
          line-height: 27px;
          height: 27px;
        }
        .el-input__inner {
          border-radius: 10px;
          width: 120px;
          height: 27px;
          box-sizing: border-box;
          line-height: 27px;
          color: rgba(255, 255, 255, 0.8);
          text-align: center;
          border-width: 0;
        }
        .el-input__inner,
        .el-radio__inner {
          background-color: transparent;
        }
      }
    }
  }
  ::v-deep {
    .top {
      display: none;
    }
    *[aria-hidden='true'] {
      display: none;
    }
  }
}
</style>