ox_zhiNengZhuShou/src/subpackage/income/pages/search/search.vue

<template>
    <view class="income-search">
        <view class="is-search-bar">
            <view class="isb-frame">
                <view class="if-search-icon" >
                    <image 
                        mode="aspectFit" 
                        src="/subpackage/income/static/images/search.png"
                    ></image>
                </view>
                <input 
                    confirm-type = "search"
                    v-model = "searchKey"
                    @focus = 'iptFocus'
                    @blur = 'iptBlur'
                    @confirm = 'searchConfirm'
                    hold-keyboard
                    placeholder = "请输入订单号/手机号码搜索"
                />
                <view class="if-close-icon" >
                    <image 
                        mode="aspectFit" 
                        src="/subpackage/income/static/images/close.png"
                        v-if="isFocus&&searchKey!=''"
                        @click="searchKey = ''"
                    ></image>
                </view>
            </view>
        </view>
        <view class="is-main">
            <view class="im-ls" v-if="incomeLs.length">
                <details-item v-for="(e, i) in incomeLs" :key = "i" :income-info = "e"></details-item>
            </view>

            <view class="im-null" v-else>
                <image mode="aspectFit" src="/subpackage/income/static/images/account_null.png"></image>
            </view>
        </view>
    </view>
</template>

<script>
import details_item from '../../components/details_item/details_item.vue';
import util from '../../../../utils/util';
import { INCOME_API } from '../../js/api';
import server from '../../js/server';
export default {
    components: {
        'details-item': details_item
    },
    data(){
        return {
            incomeLs: [],
            isFocus: false,
            searchKey: '',
            page: 1,

        }
    },
    onLoad(){
    },
    onReachBottom(){
        let { searchKey, page } = this;
        this.getRecordLs({
            page: ++page,
            key: searchKey,
        })
    },
    methods: {
        searchConfirm(e){
            console.warn(e);
            this.page = 1;
            this.incomeLs = [];
            this.getRecordLs({
                key: e.detail.value || ''
            })
        },
        iptFocus(){
            this.isFocus = true;
        },
        iptBlur(){
            this.isFocus = false;
        },
        getRecordLs({
            brand_id = '',
            stadium_id = '',    // 空字符全部  -1品牌收款  其他门店id
            time_str = '',      // 日期y-m-d
            scene = '',         // 场景  int
            type = '全部',      // 全部/退款
            income_type = '',   // 收款类型  online 线上收款  offline线下收款  joint联营
            page = 1,
            page_size = 20,
            key= '',
        }){
            util.showLoad();
            server.get({
                url: INCOME_API.consumeCountDetailList,
                data: {
                    brand_id,
                    stadium_id,
                    time_str,
                    page,
                    page_size,
                    scene,
                    type,
                    income_type,
                    key
                },
                failMsg: '加载失败！',
            })
            .then(res=>{
                util.hideLoad();
                let { list, ...data } = res;
                let _ls = list || [];
                if(page == 1)return this.incomeLs = _ls;
                if(!_ls || !_ls.length)return util.showNone('没有更多！');
                this.incomeLs = [ ...this.incomeLs, ..._ls ];
                this.page = page;
                
            })
        },
    },
}
</script>

<style lang="scss">
    @import '~style/public.scss';
    page{
        background-color: #fff;
    }
    .is-search-bar{
        padding: 30upx 24upx;
        .isb-frame{
            padding: 0 24upx;
            height: 72upx;
            border: 2upx solid $themeColor;
            border-radius: 36upx;
            @include centerFlex(space-between);
            >input{
                flex-grow: 1;
                height: 68upx;
                font-size: 28upx;
                color: #1a1a1a;
            }
            >view{
                flex-shrink: 0;
                width: 30upx;
                height: 30upx;
                font-size: 0;
                >image{
                    width: 100%;
                    height: 100%;
                }
            }
            .if-search-icon{
                margin-right: 24upx;
            }
            .if-close-icon{
                margin-left: 24upx;
            }
        }
    }
    .is-main{
        border-top: 24upx solid #f2f1f6;
        .im-null{
            padding-top: 106upx;    
            >image{
                margin: 0 auto;
                display: block;
                width: 370upx;
                height: 370upx;
            }
        }
        
        .im-ls{
            padding-bottom: 120upx;
            padding-bottom: calc( 120upx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
            padding-bottom: calc( 120upx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
            padding-left: 40upx;
            background-color: #fff;
        }
    }
</style>