<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(index)" v-for="(item,index) in btns" :key="index" :class="index == active ? 'active' : ''"> {{item}} </button> </div> </div> <div class="Content" > <div class="Title">日期范围</div> <div style="flex:1;display:flex;"> <div class="padding-left-15 dateTime" style="flex:1;justify-content:flex-end;align-items:center;display:flex;"> <datetime v-model="search.dBeginDate" format="YYYY-MM-DD" @on-change="searchData($event,1)"></datetime> <!-- <i class='iconfont icon-right'></i> --> </div> <div class="padding-right-15 dateTime" style="flex:1;justify-content:flex-end;align-items:center;display:flex;"> <datetime :start-date="search.dBeginDate" v-model="search.dEndDate" format="YYYY-MM-DD" @on-change="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:['本日','本周','本月','本年'], active:2, 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(index){ this.active = index; this.search.dEndDate = Util.dateFormat(new Date(),'yyyy-MM-dd'); this.search.dBeginDate = Util.getDate(this.btns[index]); }, changeSelect(e){ this.selectValue = this.status[e.target.selectedIndex].sStatus; this.search.sStatus = this.selectValue; this.global.$emit('searchData'); }, changeInput(e){ this.search.serachvalue = this.inputValue; this.global.$emit('searchData'); }, clearInputValue(e){ this.inputValue = ""; this.search.serachvalue = this.inputValue; this.global.$emit('searchData'); } }, mounted(){ window.d = 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; } } .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>