xcx

src/pages/sales/customerSearch/index.vue

           <li class="customer-card">
             <div class="list-box">
               <customerCard v-for="(item,index) in cardList" :key="index" :data='item' @record='record'></customerCard>
+              <span class="noData" v-if="ajaxOff && !cardList.length">暂无数据</span>
             </div>
           </li>
         </ul>
     </div>
     <div v-if="mask" class="search-mask">
       <div class="mask-top">
-        <input type="text">
+        <input type="text" v-model="key">
         <i class="iconfont icon-sousuo search-icon"></i>
         <span @click="searchMask">搜索</span>
       </div>
         active: active,
         normal: normal
       },
+      ajaxOff: false,
+      key: '',
       mask: true,
       checked: true,
       cardList: [],
     ]),
     record (item) {
       // console.log(item)
-      this.$router.push({ name: 'getRecord' })
+      this.$router.push({ name: 'getRecord', query: {name: item.Name, phone: item.Phone, id: item.CustomerId} })
     },
     searchMask () {
       this.getCustomerList({
         page: 1,
         pagesize: 10000,
-        isrecommend: false
+        isrecommend: false,
+        key: this.key,
       }).then((res) => {
         // console.log(JSON.stringify(res))
+        res = res || []
         for (var n = 0; n < res.length; n++) {
           this.cardList.push({...res[n], invalid: false})
         }
         this.mask = false
+        this.ajaxOff = true
       })
     },
   }

src/pages/sales/customerSearch/page.scss

       }
     }
   }
+  .noData{
+    width: 100%;
+    display: block;
+    text-align: center;
+    color: #666;
+    line-height: .4rem;
+  }
 }

src/pages/sales/getRecord/index.vue

 <template>
   <div class="mainPage flex-v">
     <div class="top">
-      <topCaseInfo :data="topCaseInfoData" @selectCase="showSelect = true"></topCaseInfo>
+      <topCaseInfo :data="topCaseInfoData" :userName="userInfo.customer !== undefined ? userInfo.customer.CustomerName : ''" @selectCase="showSelect = true"></topCaseInfo>
     </div>
     <div class="info">
-      <span><em>姓名</em>：顶顶顶</span>
-      <span><em>手机号</em>：13888888888</span>
+      <span><em>姓名：</em>{{user.name}}</span>
+      <span><em>手机号：</em>{{user.phone}}</span>
     </div>
-    <div class="list-title">
-      <span>名称</span>
-      <span>领取时间</span>
-      <span>记录</span>
-    </div>
-    <div class="list-detail" v-for="(item,index) in list" :key="index">
-      <span>瑜伽体验卡lkjfklskd</span>
-      <span>06-27 12:20</span>
-      <span>已使用</span>
+    <div class="flex-item flex-v">
+      <ul class="flex-h">
+        <li class="flex-item" :class="{'active': activeIndex === 0}" @click="cutNav(0)">卡记录</li>
+        <li class="flex-item" :class="{'active': activeIndex === 1}" @click="cutNav(1)">券记录</li>
+      </ul>
+      <div class="flex-item flex-v">
+        <div class="list-title">
+          <span>名称</span>
+          <span>领取时间</span>
+          <span>记录</span>
+        </div>
+        <div class="flex-item">
+          <div class="scollBody">
+            <div v-if="activeIndex === 0">
+              <div class="list-detail" v-for="(item,index) in cardList" :key="index">
+                <span>{{item.CustomerCardName}}</span>
+                <span>{{toolClass.dateFormat(item.ReceiveDate)}}</span>
+                <span>已使用</span>
+              </div>
+              <span class="noData" v-if="cardAjaxOff && !cardList.length">暂无数据</span>
+            </div>
+            <div v-if="activeIndex === 1">
+              <div class="list-detail" v-for="(item,index) in couponList" :key="index">
+                <span>{{item.CustomerCouponName}}</span>
+                <span>{{toolClass.dateFormat(item.ReceiveDate)}}</span>
+                <span>已使用</span>
+              </div>
+              <span class="noData" v-if="couponAjaxOff && !couponList.length">暂无数据</span>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import topCaseInfo from '../../../components/topCaseInfo/index'
+import { mapState, createNamespacedHelpers } from 'vuex'
+const { mapActions: mapUserCenterActions } = createNamespacedHelpers('userCenter')
+const { mapActions: actions } = createNamespacedHelpers('app')
 
 export default {
   name: '',
   data () {
     return {
-      list: [1,1,1,1,1],
+      activeIndex: 0,
+      user: {
+        name: this.$route.query.name,
+        phone: this.$route.query.phone,
+        id: this.$route.query.id
+      },
+      cardAjaxOff: false,
+      couponAjaxOff: false,
+      cardList: [],
+      couponList: [],
       topCaseInfoData: {
-        caseName: '',
-        caseId: '',
+        CaseName: '',
+        CaseId: '',
         showSelect: false,
-        userName: 'xxx'
+        userName: ''
       },
     }
   },
+  computed: {
+    ...mapState({
+      userInfo: x => x.userCenter.userInfo,
+      CaseList: x => x.app.CaseList,
+    }),
+  },
   components: {
     topCaseInfo,
   },
   created () {
-
+    this.getCaseList().then((res) => {
+      this.topCaseInfoData.CaseName = res.cases[0].CaseName
+      this.topCaseInfoData.CaseId = res.cases[0].CaseId
+    })
+    this.getCustomerCardList({
+      id: this.user.id,
+      payload: {
+        page: 1,
+        pagesize: 10000,
+      }
+    }).then((res) => {
+      console.log(JSON.stringify(res))
+      res.list = res.list || []
+      for (var n = 0; n < res.list.length; n++) {
+        this.cardList.push(res.list[n])
+      }
+      this.cardAjaxOff = true
+    })
+    this.getCustomerCouponList({
+      id: this.user.id,
+      payload: {
+        page: 1,
+        pagesize: 10000,
+      }
+    }).then((res) => {
+      console.log(JSON.stringify(res))
+      res.list = res.list || []
+      for (var n = 0; n < res.list.length; n++) {
+        this.couponList.push(res.list[n])
+      }
+      this.couponAjaxOff = true
+    })
   },
   methods: {
-    
+    ...actions([
+      'getCaseList',
+    ]),
+    ...mapUserCenterActions([
+      'getCustomerCardList',
+      'getCustomerCouponList',
+    ]),
+    cutNav (index) {
+      this.activeIndex = index
+    },
   }
 }
 </script>

src/pages/sales/getRecord/page.scss

       text-align: center;
     }
   }
-}
+  ul{
+    width: 100%;
+    border-top: .01rem solid #eee;
+    li{
+      text-align: center;
+      line-height: .46rem;
+      position: relative;
+      &.active::after{
+        content: '';
+        width: 50%;
+        height: .02rem;
+        background: #fc6243;
+        position: absolute;
+        left: 50%;
+        bottom: 0;
+        transform: translateX(-50%);
+        -webkit-transform: translateX(-50%);
+      }
+    }
+  }
+  .scollBody{
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    overflow: hidden;
+    >div{
+      width: 100%;
+      height: 100%;
+      position: relative;
+      overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
+      transform: translateZ(0);
+      -webkit-transform: translateZ(0);
+      .noData{
+        width: 100%;
+        display: block;
+        text-align: center;
+        color: #666;
+        line-height: .4rem;
+      }
+    }
+  }
+} 

src/pages/user/mainPage/coffeeIndex/index.vue

     },
     record (item) {
       // console.log(item)
-      window.location.href = this.getUrl('getRecord') + '?' + item
+      window.location.href = this.getUrl('getRecord') + '?name=' + item.Name + '&phone=' + item.Phone + '&id=' + item.CustomerId
     },
     searchMask () {
       window.location.href = this.getUrl('customerSearch')

src/store/userCenter/userCenter.js

     }
   },
   actions: {
+    getCustomerCardList (context, { id, payload }) { // 获取我的用户领取卡信息
+      return new Promise((resolve) => {
+        Ajax(api.sales.getCustomerCardList.url, {
+          method: api.sales.getCustomerCardList.method,
+          queryData: {
+            ...payload
+          },
+          urlData: {
+            id,
+          },
+        }).then(res => {
+          resolve(res)
+        })
+      })
+    },
+    getCustomerCouponList (context, { id, payload }) { // 获取我的用户领取券信息
+      return new Promise((resolve) => {
+        Ajax(api.sales.getCustomerCouponList.url, {
+          method: api.sales.getCustomerCouponList.method,
+          queryData: {
+            ...payload
+          },
+          urlData: {
+            id,
+          },
+        }).then(res => {
+          resolve(res)
+        })
+      })
+    },
     getCustomerList (context, payload) { // 获取我的客户列表
       return new Promise((resolve) => {
         Ajax(api.sales.getCustomerList.url, {

src/util/api.js

       method: 'get',
       url: `${baseUrl}${wechat}/customer/user`
     },
+    getCustomerCardList: { // 获取我的用户领取卡信息
+      method: 'get',
+      url: `${baseUrl}${wechat}/customer/sales/card/:id`
+    },
+    getCustomerCouponList: { // 获取我的用户领取券信息
+      method: 'get',
+      url: `${baseUrl}${wechat}/customer/sales/coupon/:id`
+    },
   },
   login: { // 主管、销售端登陆
     login: {