search.vue

<template>
  <div class="searchComponent">
      <!-- <group style="margin-top:0 !important;"> -->
          <div class="Content gradient" v-if="typeList.input || typeList.select">
            <div class="selector" v-if="typeList.select">
                <select :multiple="multiple" v-model="selectValue" @change="changeSelect($event)">
                    <option v-for="(item,index) in status" :key="index" :value="item.sStatus">{{item.sStatus || '全部'}}</option>
                </select>
            </div>
            <div class="_input" v-if="typeList.input">
                <input class="input" v-model="inputValue" :placeholder="placeholder" v-on:input="changeInput"/>
                <i class='iconfont icon-close' id="close" v-if="inputValue" @click='clearInputValue'></i>
            </div>
        </div>
        <div class="Content">
            <div class="Title">时间纬度</div>
            <div class="padding-left-15 btns">
                <button @click="changeDate(v)" v-for="(v,i) in btns" :key="i" :class="{active:v == selectDate}">
                    {{v}}
                </button>
            </div>
        </div>
        <div class="Content" >
            <div class="Title">日期范围</div>
            <div style="flex:1;display:flex;" class="DATE">
                <div class="padding-left-15 dateTime">
                    <datetime :end-date="search.dEndDate" v-model="search.dBeginDate" format="YYYY-MM-DD" @on-confirm="searchData($event,1)"></datetime>
                    <!-- <i class='iconfont icon-right'></i> -->
                </div>
                <span class="line"/>
                <div class="padding-right-15 dateTime">
                    <datetime :start-date="search.dBeginDate" v-model="search.dEndDate" format="YYYY-MM-DD" @on-confirm="searchData($event,2)"></datetime>
                    <!-- <i class='iconfont icon-right'></i> -->
                </div>
            </div>
        </div>
        
      <!-- </group> -->
  </div>
</template>

<script>
import { Flexbox, FlexboxItem ,Search,Selector,XButton,Datetime,Group, Cell,Scroller,XHeader} from 'vux';
import Util from '@/libs/util.js'

export default {
  name: 'searchComponent',
  data () {
    return {
        btns:['本日','本周','本月','本年'],
        selectDate:"本月",
        inputValue:'',
        selectValue:'全部'
    }
  },
  props:{
    search: {
        type: Object,
        default:function(){
            return {}
        }
    },
    status: {
        type: Array,
        default:function(){
            return []
        }
    },
    typeList:{
        type:Object,
        default:function(){
            return {
                input:false,
                select:false,
                btns:true,
                time:true
            }
        }
    },
    multiple:{
        type:Boolean,
        default:false
    },
    placeholder:{
        type:String,
        default:'请输入...'
    }
  },
  methods:{
      searchData(e,type){
          let dateList = this.btns.map(x=>Util.getDate(x));
          let endDate = Util.dateFormat(new Date(),'yyyy-MM-dd');
          if(type == 1){
              if(dateList.indexOf(e) != -1 && this.search.dEndDate == endDate){
                  this.active = dateList.indexOf(e);
              }else{
                  this.active = -1;
              }
          }else{
              if(endDate == e && dateList.indexOf(this.search.dBeginDate) != -1){
                  this.active = dateList.indexOf(e);
              }else{
                  this.active = -1;
              }
          }
          this.global.$emit('searchData');
      },
      changeDate(name){
        this.selectDate = name;
        this.search.dEndDate = Util.dateFormat(new Date(),'yyyy-MM-dd');
        this.search.dBeginDate = Util.getDate(name);
        this.global.$emit('searchData');
      },
      changeSelect(e){
        this.selectValue = this.status[e.target.selectedIndex].sStatus;
        this.search.sStatus = this.selectValue;
        this.global.$emit('searchData');
      },
      changeInput(e){
        this.search.searchvalue = this.inputValue;
        this.global.$emit('searchData');
      },
      clearInputValue(e){
        this.inputValue = "";
        this.search.searchvalue = this.inputValue;
        this.global.$emit('searchData');
      }
  },
  mounted(){
    window.DATA = this;
  },
  components: {
    Search,
    Selector,
    Flexbox,
    FlexboxItem,
    XButton,
    Datetime,
    XHeader,
    Group, 
    Cell,
    Scroller
  },
}
</script>

<style lang="less">
    .searchComponent{
        .Content{
            min-height:40px;padding:0 10px;background:white;
            display: flex;
            align-items: center;
            .Title{
                width:50px;text-align:center;font-size:12px;
            }
            >.DATE{
                justify-content: space-around;
                >.line{
                    width: 20px;
                    margin:0 -50px;
                    background: #03f315;
                    height: 4px;
                    align-self: center;
                    border-radius: 50px;
                }
            }
        }
        .gradient{
            background: linear-gradient(90deg,#8470FF, #2d8cf0, #00B2EE)
        }
        .btns{
            text-align: right;
            font-size:12px;
            flex:1;
            button{
                height: 20px;
                width: 50px;
                border: 1px solid grey;
                border-radius: 50px;
                margin-left:10px;
                box-sizing: border-box;
            }
            .active{
                color:#5E9AFE;
                border:1px solid #5E9AFE;
                box-sizing: border-box;
            }
        }
        .dateTime{
            a{
                display: flex;
                align-items: center;
            }
        }
        /deep/ .vux-cell-value{
            font-size:12px !important;
        }
        /deep/ .weui-cell__ft{
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .selector{
            select{
                width:100%;
            }
            border-radius: 0;
            font-size: 12px;
            padding: 5px 20px 5px 10px;
            width: 100px;
            // background: #ddd;
            background:rgba(255,255,525,0.3);
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            height:30px;
            position: relative;
            transition: all 0.3ms;
            display: flex;
            align-items: center;
            border-right:0.5px solid #8a8a8a;
        }
        .selector:after{
            content:'';
            position: absolute;
            top:12px;
            right:5px;
            width: 5px;
            height: 5px;
            border: 5px solid;
            border-color: #666 transparent transparent transparent;
            box-sizing: border-box;
        }
        ._input {
            flex: 1;
            // border: 1px solid #ccc;
            box-sizing: border-box;
            border-left: 0;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            padding: 0 25px 0 5px;
            height:30px;
            font-size:12px;
            position: relative;
            box-sizing: border-box;
            background:rgba(255,255,525,0.3);
            input{
                height:100%;
                width:100%;
            }
            input::-webkit-input-placeholder {
                /* placeholder颜色  */
                color: black;
            }
            .iconfont{
                position: absolute;
                right:0;
                width:25px;
                height:100%;
                top: 0;
                font-size: 15px;
                display: flex;
                justify-content: center;
                align-items: center;
                color:red;
            }
        }
    }
</style>