shop4.3.57/pages/order/search/search.vue

<template>
    <app-layout>
        <view class="search-mode">
            <view class="search-input">
                <input type="text"confirm-type='search' v-model='keyword' placeholder-style='color:#999999;font-size:13px;' placeholder='请输入订单号/商品名称/收货人姓名/联系电话'>
                <image v-if="keyword.length > 0" @click="clearSearch" class="search-clear" src="/static/image/icon/clear.png"></image>
            </view>
            <view class="search-time dir-left-nowrap cross-center">
                <view class="search-time-label">下单时间</view>
                <view @click="dialog=true;type=1" class="search-time-item main-between cross-center" :class="{'placeholder': !start}">
                    <view>{{start != '' ? start : '请选择开始时间'}}</view>
                    <image v-if="start" @click.stop="clearTime(1)" class="time-clear" src="/static/image/icon/clear.png"></image>
                </view>
                <view class="search-time-line"></view>
                <view @click="dialog=true;type=2" class="search-time-item main-between cross-center" :class="{'placeholder': !end}">
                    <view>{{end != '' ? end : '请选择结束时间'}}</view>
                    <image v-if="end" @click.stop="clearTime(2)" class="time-clear" src="/static/image/icon/clear.png"></image>
                </view>
            </view>
            <view>
               <app-iphone-x>
                    <view class="search-menu main-center" slot="empty-area">
                        <view @click="reset" class="box-grow-1 search-menu-item">重置</view>
                        <view @click="toSearch" style="color: #fff" class="box-grow-1 search-menu-item" :class="getTheme + '-m-back ' + getTheme">搜索</view>
                    </view>
               </app-iphone-x>
           </view>
        </view>
        <view class="dialog" v-if="dialog" @click="dialog=!dialog">
            <view class="picker-list" @click.stop="">
                <view class="main-between picker-header">
                    <view @click="dialog=false">取消</view>
                    <view @click="submitTime">确定</view>
                </view>
                <picker-view :value="timeVal" :indicator-style="indicatorStyle" @change="timeChange">
                    <picker-view-column>
                        <view v-for="(item,idx) in years" :key="item"
                              :class="[`picker-view`,{
                                'sure-color': timeVal[0] === idx,
                                'cardinal-color': timeVal[0] === idx + 1 || timeVal[0] === idx - 1,
                                'even-color': timeVal[0] === idx + 2 || timeVal[0] === idx - 2,
                              }]"><text>{{item}}</text>年</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view v-for="(item,idx) in months" :key="item"
                              :class="[`picker-view`,{
                                'sure-color': timeVal[1] === idx,
                                'cardinal-color': timeVal[1] === idx + 1 || timeVal[1] === idx - 1,
                                'even-color': timeVal[1] === idx + 2 || timeVal[1] === idx - 2,
                              }]"><text>{{item}}</text>月</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view v-for="(item,idx) in days" :key="item"
                              :class="[`picker-view`,{
                                'sure-color': timeVal[2] === idx,
                                'cardinal-color': timeVal[2] === idx + 1 || timeVal[2] === idx - 1,
                                'even-color': timeVal[2] === idx + 2 || timeVal[2] === idx - 2,
                              }]"><text>{{item}}</text>日</view>
                    </picker-view-column>
                </picker-view>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import { mapState,mapGetters } from "vuex";
    import appIphoneX from '../../../components/basic-component/app-iphone-x/app-iphone-x.vue';
    const date = new Date()
    const years = []
    const months = []
    const bigDays = []
    const smallDays = []
    const secDays = []
    const otherDays = []

    for (let i = 2015; i <= date.getFullYear(); i++) {
        years.push(i)
    }

    for (let i = 1; i <= 12; i++) {
        months.push(i)
    }

    for (let i = 1; i <= 31; i++) {
        bigDays.push(i)
    }
    for (let i = 1; i <= 30; i++) {
        smallDays.push(i)
    }
    for (let i = 1; i <= 28; i++) {
        secDays.push(i)
    }
    for (let i = 1; i <= 29; i++) {
        otherDays.push(i)
    }
    
    export default {
        data() {
            return {
                keyword: '',
                timeVal: [],
                time: '',
                start: '',
                end: '',
                years: years,
                months: months,
                days: bigDays,
                bigDays: bigDays,
                smallDays: smallDays,
                secDays: secDays,
                otherDays: otherDays,
                today: '',
                type: 1,
                dialog: false
            }
        },
        components: {
            'app-iphone-x': appIphoneX,
        },
        computed: {
            ...mapGetters('mallConfig', {
                getTheme: 'getTheme',
            }),
        },
        methods: {
            clearSearch() {
                this.keyword = '';
            },
            clearTime(type) {
                if(type == 1) {
                    this.start = '';
                }else {
                    this.end = ''
                }
            },
            toSearch() {
                let search = {
                    keyword: this.keyword,
                    dateArr: []
                }
                if(this.start || this.end) {
                    search.dateArr = [this.start,this.end]
                }
                uni.setStorage({
                    key: "search",
                    data: search,
                    success(res) {
                        uni.hideLoading();
                        setTimeout(function() {
                            uni.navigateBack();
                        }, 500)
                    },
                    fail(res) {
                        uni.hideLoading();
                        uni.showToast({
                            title: res.errMsg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                })
            },
            reset() {
                this.keyword = '';
                this.start = '';
                this.end = '';
            },
            submitTime() {
                let start,end;
                let time = new Date(this.time).getTime();
                if(this.type == 1) {
                    if(this.end) {
                        end = new Date(this.end).getTime();
                        if(time > end) {
                            uni.showToast({
                                title: '时间区间选择有误，请确认选择的时间',
                                icon: 'none',
                                duration: 1000
                            });
                            return false
                        }
                    }
                    this.start = this.time;
                }else {
                    if(this.start) {
                        start = new Date(this.start).getTime();
                        if(time < start) {
                            uni.showToast({
                                title: '时间区间选择有误，请确认选择的时间',
                                icon: 'none',
                                duration: 1000
                            });
                            return false
                        }
                    }
                    this.end = this.time
                }
                this.dialog = false;
            },
            timeChange: function(e) {
                const val = e.detail.value;
                this.timeVal = e.detail.value;
                let years = this.years;
                let year = this.years[val[0]];
                let month = this.months[val[1]];
                if(month == 2) {
                    if(year%4 == 0 && year %400 != 0) {
                        this.days = this.otherDays
                    }else {
                        this.days = this.secDays
                    }
                }else if((month < 8 && month%2 == 1) || (month > 7 && month%2 == 0)) {
                    this.days = this.bigDays
                }else {
                    this.days = this.smallDays
                }
                let day = this.days[val[2]];
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (day >= 1 && day <= 9) {
                    day = "0" + day;
                }
                this.time = year + '-' + month + '-' + day;
            },
        },

        onLoad(options) {
            let that = this;
            that.indicatorStyle =  'height: 36px;color:'+ that.color + ';font-size:14px;';
            var myDate = new Date();
            // 今天
            let year = myDate.getFullYear();
            let month = myDate.getMonth() + 1;
            if (month >= 1 && month <= 9) {
                month = "0" + month;
            }
            let now = myDate.getDate();
            that.today = year + "-" + month + "-" + now;
            that.time = that.today;
            for(let i in that.years) {
                if (that.today.substring(0, 4) == that.years[i]) {
                    that.timeVal[0] = +i
                }
            }
            let chooseMonth = that.today.substring(5, 7);
            for(let i in that.months) {
                if (that.today.substring(5, 7) == that.months[i]) {
                    that.timeVal[1] = +i
                }
            }
            if(chooseMonth == 2) {
                if(year%4 == 0 && year %400 != 0) {
                    this.days = this.otherDays
                }else {
                    this.days = this.secDays
                }
            }else if((chooseMonth < 8 && chooseMonth%2 == 1) || (chooseMonth > 7 && chooseMonth%2 == 0)) {
                this.days = this.bigDays
            }else {
                this.days = this.smallDays
            }
            for(let i in that.days) {
                if (that.today.substring(8, 10) == that.days[i]) {
                    that.timeVal[2] = +i
                }
            }
            uni.getStorage({
                key: 'search',
                success(res) {
                    that.keyword = res.data.keyword;
                    if(res.data.dateArr[0]) {
                        that.start = res.data.dateArr[0];
                    }
                    if(res.data.dateArr[1]) {
                        that.end = res.data.dateArr[1];
                    }
                }
            });
        }
    }
</script>

<style scoped lang="scss">
    .search-mode {
        position: fixed;
        z-index: 233;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: #f7f7f7;
        .search-input {
            height: #{100rpx};
            background-color: #fff;
            padding: #{19rpx} #{18rpx};
            input {
                padding: 0 #{30rpx};
                background-color: #fff;
                border-radius: #{31rpx};
                height: #{62rpx};
                font-size: #{26rpx};
                color: #353535;
                width: 100%;
                background-color: #f7f7f7;
            }
            .search-clear {
                position: absolute;
                right: #{35rpx};
                top: #{35rpx};
                width: #{30rpx};
                height: #{30rpx};
                z-index: 235;
            }
        }
        .search-time {
            margin-top: #{20rpx};
            padding-left: #{24rpx};
            height: #{100rpx};
            background-color: #fff;
            .search-time-label {
                font-size: #{32rpx};
                color: #353535;
                margin-right: #{28rpx};
            }
            .search-time-item {
                height: #{48rpx};
                line-height: #{44rpx};
                width: #{250rpx};
                font-size: #{24rpx};
                color: #353535;
                border: #{2rpx} solid #e2e2e2;
                padding: 0 #{10rpx} 0 #{16rpx};
                border-radius: #{8rpx};
                &.placeholder {
                    color: #999999;
                }
                .time-clear {
                    width: #{30rpx};
                    height: #{30rpx};
                    margin-right: #{10rpx};
                }
            }
            .search-time-line {
                margin: 0 #{12rpx};
                width: #{24rpx};
                height: #{2rpx};
                background-color: #e2e2e2;
            }
        }
        .search-menu {
            height: #{110rpx};
            width: 100%;
            background-color: #fff;
            .search-menu-item {
                line-height: #{110rpx};
                text-align: center;
                font-size: #{32rpx};
                color: #353535;
            }
        }
    }
    .dialog {
        position: fixed;
        height: 100%;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 240;
        background-color: rgba(0, 0, 0, .3);
        .picker-list {
            background-color: #fff;
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 242;
            .picker-header {
                padding: 0 #{24rpx};
                color: #446dfd;
                font-size: #{32rpx};
                line-height: #{100rpx};
                height: #{96rpx};
                border-bottom: #{2rpx} solid #e2e2e2;
                &>view:first-of-type {
                    color: #353535;
                }
            }
            picker-view {
                width: 100%;
                height: #{440rpx};
                picker-view-column:first-of-type {
                    flex: 1.75
                }
            }
            .picker-view {
                line-height: #{72rpx};
                text-align:center;
                font-size: #{32rpx};
                &.sure-color {
                    font-size: #{36rpx};
                    color: #353535;
                    font-weight: 600;
                }
                &.cardinal-color {
                    color: #999999;
                }
                &.even-color {
                    color: #cdcdcd;
                }
            }
        }
    }
</style>