logistics-company.vue 2.34 KB
<template>
    <div class="companylist-page">
        <div class="search-input">
            <input class="icon" type="text" placeholder="&#xe608; 搜索快递公司" v-model="inputname" @input="search">
        </div>
        <div class="company-data">
            <div class="company-item" v-for="item in showData">
                <h2>{{ $key }}</h2>
                <span v-for="val in item" track-by="id" @click="select(val.id, val.company_name)">{{val.company_name}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    const $ = require('yoho-jquery');

    module.exports = {
        data() {
            return {
                inputname: '',
                data: {},
                showData: {}
            };
        },
        methods: {
            search: function() {
                var inputname = this.inputname;
                if (!inputname) {
                    this.showData = this.data;
                    return;
                }

                var filter = {};
                for (var k in this.data) {
                    this.data[k].forEach(function(d){
                        if (d.company_name.indexOf(inputname) > -1) {
                            if (!filter[k]) filter[k] = [];
                            filter[k].push(d);
                        }
                    })
                }
                this.showData = filter;
            },
            select: function(company_id, company_name) {
                this.$dispatch('changeView', {
                    view: 'logistics',
                    company_id: company_id,
                    company_name: company_name
                });

                // 重置列表
                this.inputname = '';
                this.showData = this.data;
            }
        },
        activate: function(done) {
            let _this = this;
            $.ajax({
                url: '/home/refund/companylist'
            }).then(function(res) {
                if ($.type(res) !== 'object') {
                    res = {};
                }
                if (res.code === 200) {
                    _this.data = res.data;
                    _this.showData = res.data;
                }
                done();
            }).fail(function() {
                tip('网络错误');
                done();
            });
            
        }
    };
</script>