客户欠款列表

ghsApp/src/admin/home/member.vue

@@ -12,7 +12,7 @@
     <view class="app-tabs">
       <app-tabs :tabs="tabs" :isFixed="false" :top="50" :currentTab="tabIndex" :height="100" @change="change" itemWidth="33%" :isAdd="false" />
      </view>
-     <div class="list-wrap">
+    <div class="list-wrap">
     <block v-if="!$util.isEmpty(list.data)">
       <block v-for="(item, index) in list.data" :key="index">
         <tui-list-cell :arrow="true" @click="pageTo({url: '/pagesClient/member/detail',query: {id: item.id}})">

hdApp/src/admin/home/member.vue

@@ -1,29 +1,51 @@
 <template>
   <view class="app-main app-content">
-    <block v-if="!$util.isEmpty(list.data)">
-      <block v-for="(item,index) in list.data" :key="index">
-        <tui-list-cell :arrow="true" @click="pageTo({ url: '/admin/member/detail', query: { id: item.id } })" >
-          <div class="tui-msg-box">
-            <img :src="item.avatar" class="tui-msg-pic" mode="widthFix" />
-            <div class="tui-msg-item">
-              <div class="tui-msg-name">
-                <div class="tui-user-name">{{item.name}}</div>
+
+    <view class="input-wrap_box">
+      <view>
+        <AppSearchModule placeholder="输拼音首字母也可以搜" @input="searchFn"/>
+      </view>
+      <view style="padding:0 10upx 0 20upx;" >
+				<button class="admin-button-com middle blue" @click="addCustom()">添加</button>
+			</view>
+    </view>
+    <view class="app-tabs">
+      <app-tabs :tabs="tabs" :isFixed="false" :top="50" :currentTab="tabIndex" :height="100" @change="change" itemWidth="33%" :isAdd="false" />
+    </view>
+
+    <view class="list-wrap">
+        <block v-if="!$util.isEmpty(list.data)">
+          <block v-for="(item,index) in list.data" :key="index">
+            <tui-list-cell :arrow="true" @click="pageTo({ url: '/admin/member/detail', query: { id: item.id } })" >
+              <div class="tui-msg-box">
+                <img :src="item.avatar" class="tui-msg-pic" mode="widthFix" />
+                <div class="tui-msg-item">
+                  <div class="tui-msg-name">
+                    <div class="tui-user-name">{{item.name}}</div>
+                  </div>
+                  <div class="tui-msg-content">
+                    <span>{{item.visitTime.substr(5,11)}}</span>
+                    <span>
+                      <span v-if="item.debtAmount>0" class="debt-amount">
+                        <span class="amount_num">-¥{{parseFloat(item.debtAmount)}}</span>
+                      </span>
+                    </span>
+                  </div>
+                </div>
               </div>
-              <div class="tui-msg-content">
-                <span>{{item.visitTime.substr(5,11)}}</span>
+              <div class="tui-msg-right">
+                <badge-module type="danger" :dot="item.level==3?true:false" v-if="item.messageNum>0" >{{item.messageNum}}</badge-module>
               </div>
-            </div>
-          </div>
-          <div class="tui-msg-right">
-            <badge-module type="danger" :dot="item.level==3?true:false" v-if="item.messageNum>0" >{{item.messageNum}}</badge-module>
-          </div>
-        </tui-list-cell>
-      </block>
-    </block>
-    <block v-else>
-      <app-wrapper-empty :is-empty="true" />
-    </block>
+            </tui-list-cell>
+          </block>
+        </block>
+        <block v-else>
+          <app-wrapper-empty :is-empty="true" />
+        </block>
+    </view>
+
     <NotLogin></NotLogin>
+
   </view>
 </template>
 <script>
@@ -33,11 +55,12 @@ import BadgeModule from "@/components/plugin/badge";
 import AppWrapperEmpty from "@/components/app-wrapper-empty";
 import appVipModule from "@/components/module/app-vip";
 import AppTag from '@/components/module/app-tag.vue'
+import AppSearchModule from "@/components/module/app-search";
 import { list } from "@/mixins";
 import { getList } from "@/api/member";
 import NotLogin from "@/components/not-login";
 export default {
-  name: "admin-memebr",
+  name: "memebr",
   components: {
     AppTabs,
     TuiListCell,
@@ -45,11 +68,27 @@ export default {
     AppWrapperEmpty,
     appVipModule,
     AppTag,
-    NotLogin
+    NotLogin,
+    AppSearchModule
   },
   mixins: [list],
   data() {
     return {
+      tabIndex: 0,
+      tabs: [
+        {
+          name: "全部",
+          value: 0
+        },
+        {
+          name: "消费排行",
+          value: 0
+        },
+        {
+          name: "欠款排行",
+          value: 0
+        },
+      ]
     };
   },
   onPullDownRefresh() {
@@ -70,27 +109,54 @@ export default {
   onLoad() {
   },
   methods: {
+    change(e) {
+      if (this.tabIndex == e.index) {
+        return false;
+      }
+      this.tabIndex = e.index;
+      this.resetList();
+      this.getOrderList();
+    },
+    addCustom(){
+      this.$msg('开发中')
+    },
     init() {
       this.getOrderList();      
     },
+    searchFn(e) {
+      this.resetList();
+      this.seekVal = e;
+      this._list();
+    },
     getOrderList() {
-      return getList({ search: "", page: this.list.page, ...this.form }).then(res => {
+      return getList({ search:"", page:this.list.page,type:this.tabIndex,name: this.seekVal }).then(res => {
         if(res.code == 1){
           this.completes(res)
         }
-      });
-    },
-    detail(item) {
-      this.$util.pageTo("/admin/member/detail");
+      })
     }
   }
 };
 </script>
 <style lang="scss" scoped>
 .app-content {
-  padding-top: 22upx;
-  padding-bottom: 30upx;
+  padding-top: 100upx;
+  padding-bottom: 20upx;
 }
+  .list-wrap {
+    padding-top: 100upx;
+    .list {
+      background-color: #fff;
+      margin-bottom: 20upx;
+    }
+  }
+.app-tabs {
+    position: fixed;
+    @media screen and (max-width: 1100px) {
+      width: 100%;
+    } 
+    z-index: 9;
+  }
 .tabs-wrap {
   position: fixed;
   .tabs-left {
@@ -102,6 +168,28 @@ export default {
     @include disFlex(center, center);
   }
 }
+  .input-wrap_box {
+    background-color: #fff;
+    position: fixed;
+    top: 0;
+    z-index: 10;
+    /* 手机mobile屏幕小于1000px */
+    @media screen and (max-width: 1100px) {
+      width: 100%;
+    }
+    /* 收银台cashier屏幕大于1000px */
+    @media screen and (min-width:1100px) {
+      width: 40%;
+    }   
+    height: 100upx;
+    display: flex;
+    align-items: center;
+    padding: 0 30upx;
+    & > view:nth-child(1) {
+      flex: 1;
+    }
+  }
+
 .tui-msg-box {
   display: flex;
   align-items: center;
@@ -187,6 +275,14 @@ export default {
     font-size: 24upx;
     line-height: 1;
     color: #9397a4;
+    .debt-amount{
+      margin-left:20upx;
+      .amount_num{
+        color:red;
+        margin-left:5upx;
+        font-weight:bold;
+      }
+    }
   }
 }