xcx

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

@@ -3,64 +3,149 @@
     <div class="top">
       <topCaseInfo :data="topCaseInfoData" :userName="userInfo.customer != undefined ? userInfo.customer.CustomerName : ''" @selectCase="ShowSelect = true"></topCaseInfo>
     </div>
+    <nav class="flex-h" v-if="userInfo.customer.MapUser !== ''">
+      <a class="flex-item" v-for="(item,index) in cutNavList" :key="index" :class="{'active': navActive === index}" @click="cutNav(index)">{{item.value}}</a>
+    </nav>
     <div class="content flex-item">
       <div>
-        <div class="flex-h">
-          <div class="flex-item">
-            <ul class="areaList">
-              <li v-for="(item,index) in CaseTableList" :key="index">
-                <div class="title">
-                  <i class="iconfont icon-yinchenglogo"></i>
-                  <span>{{item.AreaName}}</span>
+        <ul>
+          <li :hidden="navActive !== 0 && userInfo.customer.MapUser !== ''" class="placeOrder">
+            <div class="topInfo flex-h" v-if="userInfo.customer.MapUser !== ''">
+              <div class="flex-item">
+                <div>
+                  <span>共计已使用：{{caseTotal.total}}杯</span>
                 </div>
-                <ul class="subAreaList flex-h">
-                  <router-link tag="li" class="flex-item flex-h" v-for="(subItem,subIndex) in item.Tables" :key="subIndex" :to="{name: 'placeOrder', query: { tableid: encodeURI(subItem.TableId), tableno: encodeURI(subItem.TableNo), caseid: encodeURI(subItem.CaseId), casename: encodeURI(topCaseInfoData.CaseName), areaid: encodeURI(subItem.AreaId), areaname: encodeURI(item.AreaName)}}">
-                    <caseTableItem :item="subItem" :index="subIndex"></caseTableItem>
-                  </router-link>
-                  <li class="flex-item noData" v-if="(item.Tables || []).length % 2 != 0"></li>
-                </ul>
-              </li>
-            </ul>
-          </div>
-        </div>
+              </div>
+              <div class="flex-item">
+                <div>
+                  <span>本月已用：{{caseTotal.monthtotal}}杯</span>
+                </div>
+              </div>
+              <a>点单记录</a>
+            </div>
+            <div class="areaListParent flex-h">
+              <div class="flex-item">
+                <div>
+                  <ul class="areaList">
+                    <li v-for="(item,index) in CaseTableList" :key="index">
+                      <div class="title">
+                        <i class="iconfont icon-yinchenglogo"></i>
+                        <span>{{item.AreaName}}</span>
+                      </div>
+                      <ul class="subAreaList flex-h">
+                        <router-link tag="li" class="flex-item flex-h" v-for="(subItem,subIndex) in item.Tables" :key="subIndex" :to="{name: 'placeOrder', query: { tableid: encodeURI(subItem.TableId), tableno: encodeURI(subItem.TableNo), caseid: encodeURI(subItem.CaseId), casename: encodeURI(topCaseInfoData.CaseName), areaid: encodeURI(subItem.AreaId), areaname: encodeURI(item.AreaName)}}">
+                          <caseTableItem :item="subItem" :index="subIndex"></caseTableItem>
+                        </router-link>
+                        <li class="flex-item noData" v-if="item.Tables.length % 2 != 0"></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </li>
+          <li :hidden="navActive !== 1" class="my-card">
+            <div class="list-box">
+              <div class="cardAndCouponInfo flex-h">
+                <div class="flex-item">
+                  <div>
+                    <span>卡券货值总额：</span>
+                    <span>￥1000</span>
+                    <span>万</span>
+                  </div>
+                </div>
+                <router-link :to="{name: 'salesRecord',query: {}}">销售记录</router-link>
+              </div>
+              <myCard v-for="(item,index) in cardList" :key="index" :data='item' @share='share'></myCard>
+            </div>
+          </li>
+          <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>
     </div>
-    <div class="selectCase" :hidden="!ShowSelect"></div>
-    <van-picker :hidden="!ShowSelect"
+    <div class="selectCase" :hidden="!showSelect"></div>
+    <van-picker :hidden="!showSelect"
       show-toolbar
       title="选择案场"
-      :columns="CaseList"
-      @cancel="ShowSelect = false"
+      :columns="caseList"
+      @cancel="showSelect = false"
       @confirm="selectCase"
-      value-key="CaseName"
+      value-key="value"
     />
   </div>
 </template>
 
 <script>
+import caseTableItem from '../../../../components/caseTableItem/index'
+import topCaseInfo from '../../../../components/topCaseInfo/index'
+import myCard from '../../../../components/myCard/myCard'
+import customerCard from '../../../../components/customerCard/customerCard'
 import { mapState, createNamespacedHelpers } from 'vuex'
 const { mapActions: actions } = createNamespacedHelpers('app')
 const { mapActions: caseTableActions } = createNamespacedHelpers('placeOrderForCoffee')
-import caseTableItem from '../../../../components/caseTableItem/index'
-import topCaseInfo from '../../../../components/topCaseInfo/index'
+const { mapState: mapCaseState, mapActions: mapCaseActions } = createNamespacedHelpers('case')
 
 export default {
   name: '',
   data () {
     return {
+      navActive: 0,
+      cutNavList: [{
+        value: '城咖啡',
+        id: '1',
+      }, {
+        value: '我的卡券',
+        id: '2',
+      }, {
+        value: '我的客户',
+        id: '3',
+      }],
       topCaseInfoData: {
-        CaseName: '',
-        CaseId: '',
-        ShowSelect: true,
+        caseName: '',
+        caseId: '',
+        showSelect: true,
+        userName: ''
       },
-      ShowSelect: false,
+      caseInfo: {
+        value: '',
+        id: ''
+      },
+      showSelect: false,
+      caseList: [{
+        value: '案场一',
+        id: ''
+      }, {
+        value: '案场二',
+        id: ''
+      }, {
+        value: '案场三',
+        id: ''
+      }, {
+        value: '案场四',
+        id: ''
+      }],
       list: [{
         name: '案场名称1',
         list: [{}, {}, {}, {}, {}],
       }, {
         name: '案场名称2',
         list: [{}, {}, {}, {}, {}],
-      }]
+      }],
+      cardList: [
+        {
+          invalid: true
+        },
+        {
+          invalid: false
+        },
+        {
+          invalid: false
+        }
+      ]
     }
   },
   computed: {
@@ -68,11 +153,16 @@ export default {
       userInfo: x => x.userCenter.userInfo,
       CaseList: x => x.app.CaseList,
       CaseTableList: x => x.placeOrderForCoffee.CaseTableList,
+    }),
+    ...mapCaseState({
+      caseTotal: x => x.caseTotal,
     })
   },
   components: {
     topCaseInfo,
     caseTableItem,
+    myCard,
+    customerCard
   },
   created () {
     this.getCaseList().then((res) => {
@@ -81,6 +171,9 @@ export default {
       this.getCaseTableList({
         caseid: this.topCaseInfoData.CaseId
       })
+      this.getCaseTotal({
+        caseid: this.topCaseInfoData.CaseId
+      })
     })
   },
   methods: {
@@ -90,6 +183,9 @@ export default {
     ...caseTableActions([
       'getCaseTableList',
     ]),
+    ...mapCaseActions([
+      'getCaseTotal',
+    ]),
     selectCase (val) { // 选择案场
       this.topCaseInfoData.CaseName = val.CaseName
       this.topCaseInfoData.CaseId = val.CaseId
@@ -98,6 +194,12 @@ export default {
       })
       this.ShowSelect = false
     },
+    cutNav (index) { // 切换nav
+      this.navActive = index
+    },
+    share (item) {
+      console.log(item)
+    }
   }
 }
 </script>

src/pages/user/mainPage/coffeeIndex/page.scss

@@ -3,6 +3,34 @@
     position: relative;
     overflow: hidden;
   }
+  >nav{
+    width: 100%;
+    position: relative;
+    z-index: 10;
+    background: #fff;
+    box-shadow: 0 0 .1rem .02rem rgba(0, 0, 0, .1);
+    a{
+      text-align: center;
+      line-height: .4rem;
+      font-size: .14rem;
+      color: #ccc;
+      position: relative;
+      &.active{
+        color: #333;
+        &::after{
+          content: '';
+          width: 50%;
+          height: .02rem;
+          background: #fc6243;
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          -webkit-transform: translateX(-50%);
+        }
+      }
+    }
+  }
   .content{
     &>div{
       width: 100%;
@@ -10,54 +38,135 @@
       left: 0;
       top: 0;
       bottom: 0;
-      overflow-y: scroll;
-      -webkit-overflow-scrolling: touch;
-      transform: translateZ(0);
-      -webkit-transform: translateZ(0);
-      &>div.flex-h{
-        &>div{
-          margin: 0 .2rem;
+      overflow: hidden;
+      &>ul{
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+        &>li{
+          width: 100%;
+          height: 100%;
           position: relative;
-          overflow: visible;
-          .areaList{
-            &:last-child{
-              margin-bottom: .2rem;
-            }
-            .title{
-              font-size: 0;
-              white-space: nowrap;
-              margin-top: .22rem;
-              *{
-                line-height: .26rem;
-                font-size: .14rem;
+          overflow-y: scroll;
+          -webkit-overflow-scrolling: touch;
+          transform: translateZ(0);
+          -webkit-transform: translateZ(0);
+          &.placeOrder{
+            .topInfo{
+              align-items: center;
+              margin: .1rem auto 0;
+              >div{
+                >div{
+                  width: 100%;
+                  position: relative;
+                  overflow: hidden;
+                  span{
+                    width: 100%;
+                    display: block;
+                    text-indent: .2rem;
+                    line-height: .3rem;
+                    font-size: .14rem;
+                    color: #666;
+                  }
+                }
               }
-              i{
-                color: red;
-                margin-right: .05rem;
+              a{
+                line-height: .22rem;
+                font-size: .12rem;
+                color: #fc6243;
+                border: .01rem solid #fc6243;
+                padding: 0 .15rem;
+                border-radius: .05rem;
+                margin-right: .2rem;
               }
             }
-            .subAreaList{
+            .areaListParent{
               position: relative;
               overflow: visible;
-              flex-wrap: wrap;
-              -webkit-flex-wrap: wrap;
-              &>li{
+              >div{
+                margin: 0 .2rem;
                 position: relative;
-                overflow: hidden;
-                border-radius: .06rem;
-                background: #fff;
-                padding: .15rem 0;
-                box-shadow: 0 0 .1rem .01rem rgba(0, 0, 0, .1);
-                min-width: 40%;
-                margin-top: .2rem;
-                &:nth-child(2n){
-                  margin-left: .2rem;
+                overflow: visible;
+                >div{
+                  width: 100%;
+                  position: relative;
+                  overflow: visible;
+                  .areaList{
+                    &:last-child{
+                      margin-bottom: .2rem;
+                    }
+                    .title{
+                      font-size: 0;
+                      white-space: nowrap;
+                      margin-top: .22rem;
+                      *{
+                        line-height: .26rem;
+                        font-size: .14rem;
+                      }
+                      i{
+                        color: red;
+                        margin-right: .05rem;
+                      }
+                    }
+                    .subAreaList{
+                      position: relative;
+                      overflow: visible;
+                      flex-wrap: wrap;
+                      -webkit-flex-wrap: wrap;
+                      &>li{
+                        position: relative;
+                        overflow: hidden;
+                        border-radius: .06rem;
+                        background: #fff;
+                        padding: .15rem 0;
+                        box-shadow: 0 0 .1rem .01rem rgba(0, 0, 0, .1);
+                        min-width: 40%;
+                        margin-top: .2rem;
+                        &:nth-child(2n){
+                          margin-left: .2rem;
+                        }
+                        &.noData{
+                          box-shadow: none;
+                          background: none;
+                        }
+                      }
+                    }
+                  }
                 }
-                &.noData{
-                  box-shadow: none;
-                  background: none;
+              }
+            }
+          }
+          &.my-card, &.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;
             }
           }
         }

src/pages/user/placeOrder/index.vue

@@ -64,7 +64,7 @@
           <span>共</span>
           <span>{{totalPrice}}</span>
           <span>元</span>
-          <i class="iconfont" :class="{'icon-jiantou-up': !showCalcMenu,'icon-jiantou-down': showCalcMenu}" @click="showCalcMenu = true"></i>
+          <!-- <i class="iconfont" :class="{'icon-jiantou-up': !showCalcMenu,'icon-jiantou-down': showCalcMenu}" @click="showCalcMenu = true"></i> -->
         </div>
       </div>
       <!-- <router-link :to="{name: 'placeOrderDetail', query: {info: JSON.stringify(settlementList), caseid: encodeURI(caseId), areaid: encodeURI(areaId), areaname: encodeURI(areaName), areaid: encodeURI(areaId), tableid: encodeURI(tableId), tableno: encodeURI(tableNo)}}">下单</router-link> -->
@@ -196,6 +196,7 @@ export default {
             spec: [],
             status: aArr[x].list[y].Status,
             price: aArr[x].list[y].Price,
+            num: 0,
           })
           if (aArr[x].list[y].Specs !== null) {
             for (var z = 0; z < aArr[x].list[y].Specs.length; z++) {