qimall/addons/ShortVideo/backend/views/components/index/com-search.php

<style>
    .com-search .tabs {
        margin-top: 20px;
    }

    .com-search .label {
        margin-right: 10px;
    }

    .com-search .item-box {
        margin-bottom: 10px;
        margin-right: 15px;
    }

    .com-search .clear-where {
        color: #419EFB;
        cursor: pointer;
    }
</style>

<template id="com-search">
    <div class="com-search">
        <div flex="wrap:wrap cross:center">
			<div class="item-box" flex="dir:left cross:center">
			    <div class="label">短视频ID</div>
			    <el-input v-model="input" placeholder="请输入内容"></el-input>
			</div>
			<div class="item-box" flex="dir:left cross:center">
			    <div class="label">会员ID</div>
			    <el-input v-model="input" placeholder="请输入内容"></el-input>
			</div>
			<div class="item-box" flex="dir:left cross:center">
			    <div class="label">呢称</div>
			    <el-input v-model="input" placeholder="请输入内容"></el-input>
			</div>
			<div class="item-box" flex="dir:left cross:center">
			    <div class="label">标题</div>
			    <el-input v-model="input" placeholder="请输入内容"></el-input>
			</div>
			
			
        </div>
		
		<div flex="wrap:wrap cross:center">
			
            <div style="height: 32px;">{{dateLabel}}：</div>
            <el-date-picker
                    class="item-box"
                    size="small"
                    @change="changeTime"
                    v-model="search.time"
                    type="datetimerange"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
            <div class="item-box" flex="dir:left cross:center">
                <div class="label">关联类型</div>
                <el-select style="width: 120px;" size="small" v-model="search.platform" @change='toSearch'>
                    <el-option key="all" label="全部平台" value=""></el-option>
                    <el-option key="wxapp" label="微信" value="wxapp"></el-option>
<!--                    <el-option key="aliapp" label="支付宝" value="aliapp"></el-option>-->
<!--                    <el-option key="ttapp" label="抖音/头条" value="ttapp"></el-option>-->
<!--                    <el-option key="bdapp" label="百度" value="bdapp"></el-option>-->
                </el-select>
            </div>
            <div class="item-box" flex="cross:center">
                <div v-if="isShowClear" @click="clearWhere" class="div-box clear-where">清空筛选条件</div>
            </div>
        </div>
		
		
		
    </div>
</template>

<script>
    Vue.component('com-search', {
        template: '#com-search',
        props: {
            selectList: {
                type: Array,
                default: function () {
                    return [
                        {value: '1', name: '订单号'},
                        {value: '9', name: '商户单号'},
                        {value: '2', name: '用户名'},
                        {value: '4', name: '用户ID'},
                        {value: '5', name: '商品名称'},
                        {value: '3', name: '收件人'},
                        {value: '6', name: '收件人电话'},
                        {value: '7', name: '门店名称'}
                    ]
                }
            },
            activeName: {
                type: String,
                default: '-1',
            },
            plugins: {
                type: Array,
                default: function () {
                    return [
                        {
                            name: '全部订单',
                            sign: 'all',
                        }
                    ];
                }
            },
            isShowOrderType: {
                type: Boolean,
                default: true
            },
            isShowOrderPlugin: {
                type: Boolean,
                default: false
            },
            newSearch: {
                type: Object,
                default: function () {
                    return {
                        time: null,
                        keyword: '',
                        keyword_1: '1',
                        date_start: '',
                        date_end: '',
                        platform: '',
                        status: '',
                        plugin: 'all',
                        send_type: -1,
                    }
                }
            },
            dateLabel: {
                type: String,
                default: '时间范围'
            }
        },
        data() {
            return {
                search: {},
                newActiveName: null,
                isShowClear: false,
            }
        },
        methods: {
            // 日期搜索
            changeTime() {
                if (this.search.time) {
                    this.search.date_start = this.search.time[0];
                    this.search.date_end = this.search.time[1];
                } else {
                    this.search.date_start = null;
                    this.search.date_end = null;
                }
                this.toSearch();
            },
            toSearch() {
                this.search.page = 1;
                this.$emit('search', this.search);
                this.checkSearch();
            },
            handleClick(res) {
				if(this.newActiveName==8){
					this.search.status = '1';
					this.search.active_status = 1;
					this.$set(this.search, `status`, '1')
					this.$set(this.search, `active_status`, 1)
				}else if(this.newActiveName==1){
					this.search.status = '1';
					this.search.active_status = 2;
					this.$set(this.search, `status`, '1')
					this.$set(this.search, `active_status`, 2)
				}else{
					this.search.status = this.newActiveName;
					this.$set(this.search, `status`, this.newActiveName)
					this.search.active_status?delete this.search.active_status:'';
				}
                this.toSearch();
            },
            clearWhere() {
                this.search.keyword = '';
                this.search.date_start = null;
                this.search.date_end = null;
                this.search.time = null;
                this.search.platform = '';
                this.search.send_type = -1;
                this.search.plugin = 'all';
                this.toSearch();
            },
            checkSearch() {
                if (this.search.keyword || (this.search.date_start && this.search.date_end)
                    || this.search.plugin != 'all' || this.search.send_type != -1
                    || this.search.platform) {
                    this.isShowClear = true;
                } else {
                    this.isShowClear = false;
                }
            }
        },
        created() {
            this.search = this.newSearch;
            this.newActiveName = this.activeName;
            this.checkSearch();
        }
    })
</script>