完善物流信息

@@ -40,9 +40,11 @@ const refund = {
         }).catch(next);
     },
     saveLogistics(req, res, next) {
-        const company = req.body.company;
+        const company_id = req.body.company_id;
+        const company_name = req.body.company_name;
         const num = req.body.num;
 
+        // todo 调用保存物流信息接口
         res.json({
             code: 200
         });

 <div class="logistics-page" id="logistics">
-    <components :is="currentView" :company="company" keep-alive></components>
+    <components :is="currentView" :company_id="company_id" :company_name="company_name" keep-alive></components>
 </div>
\ No newline at end of file

@@ -8,7 +8,8 @@ Vue.use(infiniteScroll);
 new Vue({
     el: '#logistics',
     data: {
-        company: '',
+        company_id: '',
+        company_name: '',
         currentView: 'logistics',
     },
     components: {
@@ -18,7 +19,8 @@ new Vue({
     events: {
         changeView: function(obj) {
             this.currentView = obj.view;
-            this.company = obj.company;
+            this.company_id = obj.company_id;
+            this.company_name = obj.company_name;
         }
     }
 });
\ No newline at end of file

 .logistics-page {
     width: 100%;
-    background: #f0f0f0;
 
     .edit-logistics-page {
         width: 100%;
@@ -14,7 +13,6 @@
             background: #fff;
             font-size: 30px;
             line-height: 88px;
-            border-bottom: 1px solid #e0e0e0;
             
             label {
                 display: block;
@@ -50,6 +48,7 @@
                 -webkit-appearance: none;
             }
 
+
             .num {
                 width: 440px;
                 text-align: right;
@@ -80,26 +79,50 @@
 
         .search-input {
             position: relative;
-            padding: 14px 22px;
-            background: #f8f8f8;
-            
-            .icon {
-                position: absolute;
-                font-size: 24px;
-                top: 26px;
-                left: 36px;
-                color: #b2b2b2;
-            }
+            text-align: center;
+            padding: 16px 16px;
+            border-bottom: 1px solid #e6e6e6;
 
             input {
                 height: 56px;
-                width: 378px;
-                border-radius: 28px;
-                padding: 0 52px;
-                font-size: 24px;
-                background: #fff;
+                width: 100%;
+                padding-left: 15px;
+                border-radius: 20px;
+                font-size: 36px;
+                color: #b0b0b0;
+                background: #eee;
                 border: none;
             }
+
+            input::-webkit-input-placeholder { /* WebKit browsers */
+                text-align: center;
+            }
+            input:-ms-input-placeholder { /* Internet Explorer 10+ */
+                text-align: center;
+            }
+        }
+
+        .company-data {
+            color: #000;
+            margin-left: 30px;
+
+            .company-item {
+
+                h2 {
+                    height: 50px;
+                    line-height: 50px;
+                    font-size: 30px;
+                    border-bottom: 1px solid #f3f3f3;
+                }
+
+                span {
+                    display: block;
+                    height: 90px;
+                    line-height: 90px;
+                    font-size: 30px;
+                    border-bottom: 1px solid #f3f3f3;
+                }
+            }        
         }
     }
 }

 <template>
     <div class="companylist-page">
         <div class="search-input">
-            <input class="buriedpoint icon" type="text" placeholder="&#xe608;搜索快递公司">
+            <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>
-        <ul class="search-associate"></ul>
     </div>
 </template>
 
 <script>
+    const $ = require('yoho-jquery');
+
     module.exports = {
         data() {
             return {
-                companyData: {},
+                inputname: '',
+                data: {},
+                showData: {}
             };
         },
         methods: {
-            submit: function(){
-                console.log(this.num);
+            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: "aaaf啊啊啊"
+                    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) {
@@ -31,9 +63,9 @@
                     res = {};
                 }
                 if (res.code === 200) {
-
+                    _this.data = res.data;
+                    _this.showData = res.data;
                 }
-                
                 done();
             }).fail(function() {
                 tip('网络错误');

@@ -2,12 +2,12 @@
     <div class="edit-logistics-page">
         <form class="edit-logistics">
             <label @click="companylist">
-                选择快递公司<input class="company-val" type="text" name="company" value="{{company}}" readonly>
+                选择快递公司<input class="company-val" type="text" value="{{company_name}}" readonly>
                 <span class="icon icon-right"></span>
             </label>
             <label>
                 快递单号
-                <input class="num" type="number" name="num" v-model='num'>
+                <input class="num" type="number" v-model='num'>
             </label>
         </form>
         <div class="submit" @click="submit">确认</div>
@@ -19,7 +19,7 @@
     const tip = require('common/tip');
 
     module.exports = {
-        props: ['company'],
+        props: ['company_id', 'company_name'],
         data() {
             return {
                 num: '',
@@ -32,11 +32,11 @@
                 });
             },
             submit: function(){
-                if (!this.company) {
+                if (!this.company_name) {
                     tip("请选择快递公司");
                     return false;
                 }
-                if (!/^[0-9]*$/.test(this.num)) {
+                if (!this.num || !/^[0-9]*$/.test(this.num)) {
                     tip("请输入正确的快递单号");
                     return false;   
                 }
@@ -45,8 +45,9 @@
                     method: 'POST',
                     url: '/home/save-logistics',
                     data: {
-                        company: company,
-                        num: num
+                        company_id: this.company_id,
+                        company_name: this.company_name,
+                        num: this.num
                     }
                 }).then(function(res) {
                      if ($.type(res) !== 'object') {