ytj

src/components/customerCard/customerCard.vue

@@ -9,13 +9,13 @@
         </div>
       </div>
       <div>
-        <div>领取记录</div>
-        <div>历史备注</div>
+        <div @click="record">领取记录</div>
+        <div @click="history">历史备注</div>
       </div>
     </div>
     <div class="card-bottom">
       <span>备注：老客户，人非常好。</span>
-      <span>+ 添加备注</span>
+      <span @click="remark">+ 添加备注</span>
     </div>
   </div>
 </template>
@@ -36,8 +36,14 @@ export default {
     }
   },
   methods: {
-    share () {
-      this.$emit('share', this.data)
+    remark () {
+      this.$emit('remark', this.data)
+    },
+    record () {
+      this.$emit('record', this.data)
+    },
+    history () {
+      this.$emit('history', this.data)
     }
   }
 }

src/pages/sales/coffeeIndex/index.vue

@@ -69,12 +69,12 @@
                     slot="icon"
                     slot-scope="props"
                     :src="props.checked ? icon.active : icon.normal"
-                    style="width:.25rem;height:.25rem"
+                    style="width:.2rem;height:.2rem;bottom: .02rem;position: relative;"
                   >
                 </van-checkbox>
                 <i class="iconfont icon-sousuo search-icon" @click="searchMask"></i>
               </div>
-              <customerCard v-for="(item,index) in cardList" :key="index" :data='item' @share='share'></customerCard>
+              <customerCard v-for="(item,index) in cardList" :key="index" :data='item' @remark='remark' @history='history' @record='record'></customerCard>
             </div>
           </li>
         </ul>
@@ -89,13 +89,18 @@
       @confirm="selectCase"
       value-key="value"
     />
-    <div v-if="!mask" class="search-mask">
-      <div class="mask-top">
-        <input type="text">
-        <i class="iconfont icon-sousuo search-icon" @click="searchMask"></i>
-      </div>
-      <div class="mask-bottom"></div>
-    </div>
+    <van-dialog
+      v-model="showDialog"
+      show-cancel-button
+      title='添加备注'
+      :before-close="beforeClose">
+      <van-field
+        v-model="message"
+        type="textarea"
+        placeholder="请输入备注"
+        rows="3"
+        autosize/>
+    </van-dialog>
   </div>
 </template>
 
@@ -119,9 +124,10 @@ export default {
         active: active,
         normal: normal
       },
-      mask: false,
       navActive: 2,
       checked: true,
+      showDialog: false,
+      message: '',
       cutNavList: [{
         value: '城咖啡',
         id: '1',
@@ -228,8 +234,27 @@ export default {
     share (item) {
       console.log(item)
     },
+    remark (item) {
+      console.log(item)
+      this.showDialog = true
+    },
+    history (item) {
+      console.log(item)
+      this.$router.push({ name: 'history' })
+    },
+    record (item) {
+      console.log(item)
+      this.$router.push({ name: 'getRecord' })
+    },
     searchMask () {
-      this.mask = true
+      this.$router.push({ name: 'customerSearch' })
+    },
+    beforeClose (action, done) {
+      if (action === 'confirm') {
+        setTimeout(done, 1000)
+      } else {
+        done()
+      }
     }
   }
 }

src/pages/sales/coffeeIndex/page.scss

@@ -191,32 +191,4 @@
     background: rgba(0, 0, 0, .3);
     z-index: 100;
   }
-  .search-mask{
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0;
-    left: 0;
-    background: #fff;
-    z-index: 999;
-    display: flex;
-    flex-flow: column nowrap;
-    .mask-bottom{
-      flex: 1
-    }
-    .mask-top{
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: .1rem .2rem;
-      input{
-        width: 100%;
-        height: .5rem;
-        background: #eee;
-      }
-      i{
-        font-size: .24rem;
-      }
-    }
-  }
 }

src/pages/sales/customerSearch/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="mainPage flex-v">
+    <div class="content flex-item">
+      <div>
+        <ul>
+          <li class="customer-card">
+            <div class="list-box">
+              <customerCard v-for="(item,index) in cardList" :key="index" :data='item' @remark='remark' @record='record' @history='history'></customerCard>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div v-if="mask" class="search-mask">
+      <div class="mask-top">
+        <input type="text">
+        <i class="iconfont icon-sousuo search-icon"></i>
+        <span @click="searchMask">搜索</span>
+      </div>
+      <div class="mask-bottom"></div>
+    </div>
+    <van-dialog
+      v-model="showDialog"
+      show-cancel-button
+      title='添加备注'
+      :before-close="beforeClose">
+      <van-field
+        v-model="message"
+        type="textarea"
+        placeholder="请输入备注"
+        rows="3"
+        autosize/>
+    </van-dialog>
+  </div>
+</template>
+
+<script>
+import customerCard from '../../../components/customerCard/customerCard'
+import active from '../../../common/icon/check-box-checked.png'
+import normal from '../../../common/icon/check-box-empty.png'
+import { mapState, createNamespacedHelpers } from 'vuex'
+const { mapActions: actions } = createNamespacedHelpers('app')
+const { mapActions: caseTableActions } = createNamespacedHelpers('placeOrderForCoffee')
+const { mapState: mapCaseState, mapActions: mapCaseActions } = createNamespacedHelpers('case')
+
+export default {
+  name: '',
+  data () {
+    return {
+      icon: {
+        active: active,
+        normal: normal
+      },
+      showDialog: false,
+      mask: true,
+      checked: true,
+      cardList: [
+        {
+          invalid: true
+        },
+        {
+          invalid: false
+        },
+        {
+          invalid: false
+        }
+      ],
+      message: ''
+    }
+  },
+  computed: {
+    ...mapState({
+      userInfo: x => x.userCenter.userInfo,
+      CaseList: x => x.app.CaseList,
+      CaseTableList: x => x.placeOrderForCoffee.CaseTableList,
+    }),
+    ...mapCaseState({
+      caseTotal: x => x.caseTotal,
+    })
+  },
+  components: {
+    customerCard
+  },
+  created () { },
+  methods: {
+    ...actions([
+      'getCaseList',
+    ]),
+    ...caseTableActions([
+      'getCaseTableList',
+    ]),
+    ...mapCaseActions([
+      'getCaseTotal',
+    ]),
+    remark (item) {
+      console.log(item)
+      this.showDialog = true
+    },
+    history (item) {
+      console.log(item)
+      this.$router.push({ name: 'history' })
+    },
+    record (item) {
+      console.log(item)
+      this.$router.push({ name: 'getRecord' })
+    },
+    searchMask () {
+      this.mask = false
+    },
+    beforeClose (action, done) {
+      if (action === 'confirm') {
+        setTimeout(done, 1000)
+      } else {
+        done()
+      }
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/sales/customerSearch/page.scss

@@ -0,0 +1,109 @@
+.mainPage{
+  .content{
+    &>div{
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow: hidden;
+      &>ul{
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+        &>li{
+          width: 100%;
+          height: 100%;
+          position: relative;
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+          transform: translateZ(0);
+          -webkit-transform: translateZ(0);
+          &.customer-card{
+            .cardAndCouponInfo{
+              align-items: center;
+              margin: .1rem 0 .15rem;
+              div{
+                font-size: 0;
+                white-space: nowrap;
+                span{
+                  line-height: .3rem;
+                  font-size: .13rem;
+                  display: inline-block;
+                  margin-right: .05rem;
+                  &:nth-child(2){
+                    font-size: .16rem;
+                    color: #fc6243;
+                  }
+                }
+              }
+              a{
+                line-height: .24rem;
+                padding: 0 .1rem;
+                box-sizing: border-box;
+                border: .01rem solid #333;
+                color: #333;
+                border-radius: .04rem;
+                font-size: .12rem;
+              }
+            }
+            .list-box{
+              padding: .1rem .2rem .2rem;
+            }
+          }
+        }
+      }
+    }
+  }
+  .selectCase{
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, .3);
+    z-index: 100;
+  }
+  .search-mask{
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: #fff;
+    z-index: 999;
+    display: flex;
+    flex-flow: column nowrap;
+    .mask-bottom{
+      flex: 1
+    }
+    .mask-top{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: .1rem 0 .1rem .2rem;
+      position: relative;
+      input{
+        width: 100%;
+        height: .3rem;
+        background: #eee;
+        border-radius: .08rem;
+        padding-left: .2rem;
+        line-height: .3rem;
+      }
+      i{
+        font-size: .16rem;
+        position: absolute;
+        top: .16rem;
+        left: .23rem;
+        color: #aaa;
+      }
+      span{
+        width: .6rem;
+        text-align: center;
+        font-size: .14rem;
+      }
+    }
+  }
+}

src/pages/sales/getRecord/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="mainPage flex-v">
+    <div class="top">
+      <topCaseInfo :data="topCaseInfoData" @selectCase="showSelect = true"></topCaseInfo>
+    </div>
+    <div class="info">
+      <span><em>姓名</em>：顶顶顶</span>
+      <span><em>手机号</em>：13888888888</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>
+  </div>
+</template>
+
+<script>
+import topCaseInfo from '../../../components/topCaseInfo/index'
+
+export default {
+  name: '',
+  data () {
+    return {
+      list: [1,1,1,1,1],
+      topCaseInfoData: {
+        caseName: '',
+        caseId: '',
+        showSelect: false,
+        userName: 'xxx'
+      },
+    }
+  },
+  components: {
+    topCaseInfo,
+  },
+  created () {
+
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/sales/getRecord/page.scss

@@ -0,0 +1,44 @@
+.mainPage{
+  .info{
+    height: .5rem;
+    padding: 0 .2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    em{
+      font-weight: bold;
+    }
+  }
+  .list-title{
+    height: .4rem;
+    display: flex;
+    padding: 0 .2rem;
+    justify-content: space-around;
+    align-items: center;
+    background:rgba(242,242,242,1);
+    span{
+      display: block;
+      width: 33.33%;
+      overflow:hidden;
+      text-overflow:ellipsis;
+      white-space:nowrap;
+      text-align: center;
+    }
+  }
+  .list-detail{
+    height: .4rem;
+    display: flex;
+    padding: 0 .2rem;
+    justify-content: space-around;
+    align-items: center;
+    border-bottom: 1px solid #eee;
+    span{
+      display: block;
+      width: 33.33%;
+      overflow:hidden;
+      text-overflow:ellipsis;
+      white-space:nowrap;
+      text-align: center;
+    }
+  }
+}

src/pages/sales/history/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="mainPage">
+    <div class="top">
+      <topCaseInfo :data="topCaseInfoData" @selectCase="showSelect = true"></topCaseInfo>
+    </div>
+    <div class="info">
+      <span><em>姓名</em>：顶顶顶</span>
+      <span><em>手机号</em>：13888888888</span>
+    </div>
+    <div class="list-content">
+      <div class="list-year">2018年备注记录</div>
+      <div class="list-card" v-for="(item,index) in list" :key="index">
+        <div class="point-top"></div>
+        <div class="point-bottom"></div>
+        <div class="card-time">7.29</div>
+        <div class="card-content">更多备注信息更多备注信息，更多备注信息更多备注信息更多备注信息更多备注信息。更多备注信息更多备注信息。</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import topCaseInfo from '../../../components/topCaseInfo/index'
+
+export default {
+  name: '',
+  data () {
+    return {
+      list: [1,1,1,1,1],
+      topCaseInfoData: {
+        caseName: '',
+        caseId: '',
+        showSelect: false,
+        userName: 'xxx'
+      },
+    }
+  },
+  components: {
+    topCaseInfo,
+  },
+  created () {
+
+  },
+  methods: {
+    
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss" scoped>
+@import 'page.scss';
+</style>

src/pages/sales/history/page.scss

@@ -0,0 +1,65 @@
+.mainPage{
+  .info{
+    height: .5rem;
+    padding: 0 .2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background:rgba(242,242,242,1);
+    em{
+      font-weight: bold;
+    }
+  }
+  .list-content{
+    .list-year{
+      width: 1.1rem;
+      height: .24rem;
+      background:linear-gradient(54deg,rgba(255,105,0,1) 0%,rgba(255,136,0,0.76) 100%);
+      border-radius: 0 .15rem .15rem 0;
+      text-align: center;
+      line-height: .24rem;
+      color: #ffffff;
+      font-size: .12rem;
+      margin: .2rem 0 0 ;
+    }
+    .list-card{
+      margin: .35rem .2rem 0 .3rem;
+      padding: 0 0 .3rem .2rem;
+      border-left: 1px solid #C9C9C9;
+      position: relative;
+      .point-top{
+        position: absolute;
+        top: -.04rem;
+        left: -.04rem;
+        width: .08rem;
+        height: .08rem;
+        border-radius: 50%;
+        background: #C9C9C9;
+      }
+      .point-bottom{
+        position: absolute;
+        bottom: -.04rem;
+        left: -.04rem;
+        width: .08rem;
+        height: .08rem;
+        border-radius: 50%;
+        background: #C9C9C9;
+      }
+      .card-time{
+        position: absolute;
+        top: -.25rem;
+        left: 0rem;
+        transform: translateX(-50%);
+        font-size: .12rem;
+      }
+      .card-content{
+        box-shadow:0px 2px 10px 0px rgba(193,204,217,0.5);
+        border-radius:8px;
+        padding: .15rem;
+        width: 100%;
+        height: 100%;
+        box-sizing: border-box;
+      }
+    }
+  }
+}

src/pages/sales/router.js

@@ -7,6 +7,9 @@ import placeOrder from './placeOrder/index' // 城咖啡-点单
 import salesRecord from './salesRecord/index' // 销售记录
 import salesGiveOutDetail from './salesGiveOutDetail/index' // 销售发放详情
 import cardAndCouponNum from './cardAndCouponNum/index' // 卡券数量信息
+import customerSearch from './customerSearch/index' // 客户搜索
+import getRecord from './getRecord/index' // 发放详情
+import history from './history/index' // 备注历史记录
 
 Vue.use(Router)
 
@@ -41,6 +44,21 @@ const router = new Router({
     name: 'cardAndCouponNum',
     component: cardAndCouponNum,
     children: []
+  }, { // 客户搜索
+    path: '/customerSearch',
+    name: 'customerSearch',
+    component: customerSearch,
+    children: []
+  }, { // 发放详情
+    path: '/getRecord',
+    name: 'getRecord',
+    component: getRecord,
+    children: []
+  }, { // 备注历史记录
+    path: '/history',
+    name: 'history',
+    component: history,
+    children: []
   }],
 })
 

src/pages/user/App.vue

@@ -23,6 +23,7 @@ export default {
     })
   },
   created () {
+    console.log('creatde')
     if (location.search && this.toolClass.UrlSearch(location.search).code) {
       this.code = this.toolClass.UrlSearch(location.search).code
     } else {