ytj

src/components/customerCard/customerCard.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="card-content">
+    <div class="card-top flex-h">
+      <div class="flex-h">
+        <img :src="inv" alt="">
+        <div>
+          <span>姓名：王丽丽</span>
+          <span>手机号:17372957078</span>
+        </div>
+      </div>
+      <div>
+        <div>领取记录</div>
+        <div>历史备注</div>
+      </div>
+    </div>
+    <div class="card-bottom">
+      <span>备注：老客户，人非常好。</span>
+      <span>+ 添加备注</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import inv from '../../common/icon/inv.png'
+export default {
+  name: 'myCard',
+  data () {
+    return {
+      inv
+    }
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  methods: {
+    share () {
+      this.$emit('share', this.data)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.card-content {
+  box-shadow: 0px 2px 0.1rem 0px rgba(193, 204, 217, 0.5);
+  border-radius: 0.08rem;
+  overflow: hidden;
+  margin-bottom: 0.2rem;
+  .card-top {
+    padding: 0.3rem 0.1rem;
+    > div:nth-of-type(1) {
+      align-items: center;
+      img {
+        width: 0.5rem;
+        height: 0.5rem;
+        border-radius: 50%;
+        padding-right: 0.2rem;
+      }
+      div {
+        span {
+          display: block;
+          padding: .02rem 0;
+        }
+      }
+    }
+    > div:nth-of-type(2) {
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: center;
+      justify-content: center;
+      flex: 1;
+      padding-left: .15rem;
+      div{
+        color: #FC6243;
+        font-size: .12rem;
+        padding: 0.02rem .15rem;
+        border: 1px solid #FC6243;
+        border-radius: 20px;
+        margin: 0.05rem 0;
+      }
+    }
+  }
+  .card-bottom{
+    background: #F2F2F2;
+    display: flex;
+    padding: .15rem;
+    justify-content: space-between;
+    span:nth-of-type(1){
+      color: #323645;
+    }
+    span:nth-of-type(2){
+      color: #909090;
+    }
+  }
+}
+</style>

src/components/myCard/myCard.vue

@@ -38,8 +38,18 @@
 </template>
 
 <script>
+import logo from '../../common/icon/logo-t.png'
+import line from '../../common/icon/cicyle.png'
+import line3 from '../../common/icon/Line3.png'
 export default {
   name: 'myCard',
+  data () {
+    return {
+      logo,
+      line,
+      line3
+    }
+  },
   props: {
     data: {
       type: Object,

src/module/sales/coffeeIndex/index.vue

@@ -49,8 +49,10 @@
               <myCard v-for="(item,index) in cardList" :key="index" :data='item' @share='share'></myCard>
             </div>
           </li>
-          <li :hidden="navActive !== 2">
-            3
+          <li :hidden="navActive !== 2" class="customer-card">
+            <div class="list-box">
+              <customerCard v-for="(item,index) in cardList" :key="index" :data='item' @share='share'></customerCard>
+            </div>
           </li>
         </ul>
       </div>
@@ -71,18 +73,13 @@
 import caseTableItem from '../../../components/caseTableItem/index'
 import topCaseInfo from '../../../components/topCaseInfo/index'
 import myCard from '../../../components/myCard/myCard'
-import logo from '../../../common/icon/logo-t.png'
-import line from '../../../common/icon/cicyle.png'
-import line3 from '../../../common/icon/Line3.png'
+import customerCard from '../../../components/customerCard/customerCard'
 
 export default {
   name: '',
   data () {
     return {
-      logo,
-      line,
-      line3,
-      navActive: 1,
+      navActive: 2,
       cutNavList: [{
         value: '城咖啡',
         id: '1',
@@ -143,7 +140,8 @@ export default {
   components: {
     topCaseInfo,
     caseTableItem,
-    myCard
+    myCard,
+    customerCard
   },
   created () {
 

src/module/sales/coffeeIndex/page.scss

@@ -137,7 +137,7 @@
               }
             }
           }
-          &.my-card{
+          &.my-card, &.customer-card{
             .list-box{
               padding: .26rem .2rem;
             }