许成详 6 年之前
父節點
當前提交
459710b8de

+ 131
- 29
src/pages/user/mainPage/coffeeIndex/index.vue 查看文件

@@ -3,64 +3,149 @@
3 3
     <div class="top">
4 4
       <topCaseInfo :data="topCaseInfoData" :userName="userInfo.customer != undefined ? userInfo.customer.CustomerName : ''" @selectCase="ShowSelect = true"></topCaseInfo>
5 5
     </div>
6
+    <nav class="flex-h" v-if="userInfo.customer.MapUser !== ''">
7
+      <a class="flex-item" v-for="(item,index) in cutNavList" :key="index" :class="{'active': navActive === index}" @click="cutNav(index)">{{item.value}}</a>
8
+    </nav>
6 9
     <div class="content flex-item">
7 10
       <div>
8
-        <div class="flex-h">
9
-          <div class="flex-item">
10
-            <ul class="areaList">
11
-              <li v-for="(item,index) in CaseTableList" :key="index">
12
-                <div class="title">
13
-                  <i class="iconfont icon-yinchenglogo"></i>
14
-                  <span>{{item.AreaName}}</span>
11
+        <ul>
12
+          <li :hidden="navActive !== 0 && userInfo.customer.MapUser !== ''" class="placeOrder">
13
+            <div class="topInfo flex-h" v-if="userInfo.customer.MapUser !== ''">
14
+              <div class="flex-item">
15
+                <div>
16
+                  <span>共计已使用:{{caseTotal.total}}杯</span>
15 17
                 </div>
16
-                <ul class="subAreaList flex-h">
17
-                  <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)}}">
18
-                    <caseTableItem :item="subItem" :index="subIndex"></caseTableItem>
19
-                  </router-link>
20
-                  <li class="flex-item noData" v-if="(item.Tables || []).length % 2 != 0"></li>
21
-                </ul>
22
-              </li>
23
-            </ul>
24
-          </div>
25
-        </div>
18
+              </div>
19
+              <div class="flex-item">
20
+                <div>
21
+                  <span>本月已用:{{caseTotal.monthtotal}}杯</span>
22
+                </div>
23
+              </div>
24
+              <a>点单记录</a>
25
+            </div>
26
+            <div class="areaListParent flex-h">
27
+              <div class="flex-item">
28
+                <div>
29
+                  <ul class="areaList">
30
+                    <li v-for="(item,index) in CaseTableList" :key="index">
31
+                      <div class="title">
32
+                        <i class="iconfont icon-yinchenglogo"></i>
33
+                        <span>{{item.AreaName}}</span>
34
+                      </div>
35
+                      <ul class="subAreaList flex-h">
36
+                        <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)}}">
37
+                          <caseTableItem :item="subItem" :index="subIndex"></caseTableItem>
38
+                        </router-link>
39
+                        <li class="flex-item noData" v-if="item.Tables.length % 2 != 0"></li>
40
+                      </ul>
41
+                    </li>
42
+                  </ul>
43
+                </div>
44
+              </div>
45
+            </div>
46
+          </li>
47
+          <li :hidden="navActive !== 1" class="my-card">
48
+            <div class="list-box">
49
+              <div class="cardAndCouponInfo flex-h">
50
+                <div class="flex-item">
51
+                  <div>
52
+                    <span>卡券货值总额:</span>
53
+                    <span>¥1000</span>
54
+                    <span>万</span>
55
+                  </div>
56
+                </div>
57
+                <router-link :to="{name: 'salesRecord',query: {}}">销售记录</router-link>
58
+              </div>
59
+              <myCard v-for="(item,index) in cardList" :key="index" :data='item' @share='share'></myCard>
60
+            </div>
61
+          </li>
62
+          <li :hidden="navActive !== 2" class="customer-card">
63
+            <div class="list-box">
64
+              <customerCard v-for="(item,index) in cardList" :key="index" :data='item' @share='share'></customerCard>
65
+            </div>
66
+          </li>
67
+        </ul>
26 68
       </div>
27 69
     </div>
28
-    <div class="selectCase" :hidden="!ShowSelect"></div>
29
-    <van-picker :hidden="!ShowSelect"
70
+    <div class="selectCase" :hidden="!showSelect"></div>
71
+    <van-picker :hidden="!showSelect"
30 72
       show-toolbar
31 73
       title="选择案场"
32
-      :columns="CaseList"
33
-      @cancel="ShowSelect = false"
74
+      :columns="caseList"
75
+      @cancel="showSelect = false"
34 76
       @confirm="selectCase"
35
-      value-key="CaseName"
77
+      value-key="value"
36 78
     />
37 79
   </div>
38 80
 </template>
39 81
 
40 82
 <script>
83
+import caseTableItem from '../../../../components/caseTableItem/index'
84
+import topCaseInfo from '../../../../components/topCaseInfo/index'
85
+import myCard from '../../../../components/myCard/myCard'
86
+import customerCard from '../../../../components/customerCard/customerCard'
41 87
 import { mapState, createNamespacedHelpers } from 'vuex'
42 88
 const { mapActions: actions } = createNamespacedHelpers('app')
43 89
 const { mapActions: caseTableActions } = createNamespacedHelpers('placeOrderForCoffee')
44
-import caseTableItem from '../../../../components/caseTableItem/index'
45
-import topCaseInfo from '../../../../components/topCaseInfo/index'
90
+const { mapState: mapCaseState, mapActions: mapCaseActions } = createNamespacedHelpers('case')
46 91
 
47 92
 export default {
48 93
   name: '',
49 94
   data () {
50 95
     return {
96
+      navActive: 0,
97
+      cutNavList: [{
98
+        value: '城咖啡',
99
+        id: '1',
100
+      }, {
101
+        value: '我的卡券',
102
+        id: '2',
103
+      }, {
104
+        value: '我的客户',
105
+        id: '3',
106
+      }],
51 107
       topCaseInfoData: {
52
-        CaseName: '',
53
-        CaseId: '',
54
-        ShowSelect: true,
108
+        caseName: '',
109
+        caseId: '',
110
+        showSelect: true,
111
+        userName: ''
55 112
       },
56
-      ShowSelect: false,
113
+      caseInfo: {
114
+        value: '',
115
+        id: ''
116
+      },
117
+      showSelect: false,
118
+      caseList: [{
119
+        value: '案场一',
120
+        id: ''
121
+      }, {
122
+        value: '案场二',
123
+        id: ''
124
+      }, {
125
+        value: '案场三',
126
+        id: ''
127
+      }, {
128
+        value: '案场四',
129
+        id: ''
130
+      }],
57 131
       list: [{
58 132
         name: '案场名称1',
59 133
         list: [{}, {}, {}, {}, {}],
60 134
       }, {
61 135
         name: '案场名称2',
62 136
         list: [{}, {}, {}, {}, {}],
63
-      }]
137
+      }],
138
+      cardList: [
139
+        {
140
+          invalid: true
141
+        },
142
+        {
143
+          invalid: false
144
+        },
145
+        {
146
+          invalid: false
147
+        }
148
+      ]
64 149
     }
65 150
   },
66 151
   computed: {
@@ -68,11 +153,16 @@ export default {
68 153
       userInfo: x => x.userCenter.userInfo,
69 154
       CaseList: x => x.app.CaseList,
70 155
       CaseTableList: x => x.placeOrderForCoffee.CaseTableList,
156
+    }),
157
+    ...mapCaseState({
158
+      caseTotal: x => x.caseTotal,
71 159
     })
72 160
   },
73 161
   components: {
74 162
     topCaseInfo,
75 163
     caseTableItem,
164
+    myCard,
165
+    customerCard
76 166
   },
77 167
   created () {
78 168
     this.getCaseList().then((res) => {
@@ -81,6 +171,9 @@ export default {
81 171
       this.getCaseTableList({
82 172
         caseid: this.topCaseInfoData.CaseId
83 173
       })
174
+      this.getCaseTotal({
175
+        caseid: this.topCaseInfoData.CaseId
176
+      })
84 177
     })
85 178
   },
86 179
   methods: {
@@ -90,6 +183,9 @@ export default {
90 183
     ...caseTableActions([
91 184
       'getCaseTableList',
92 185
     ]),
186
+    ...mapCaseActions([
187
+      'getCaseTotal',
188
+    ]),
93 189
     selectCase (val) { // 选择案场
94 190
       this.topCaseInfoData.CaseName = val.CaseName
95 191
       this.topCaseInfoData.CaseId = val.CaseId
@@ -98,6 +194,12 @@ export default {
98 194
       })
99 195
       this.ShowSelect = false
100 196
     },
197
+    cutNav (index) { // 切换nav
198
+      this.navActive = index
199
+    },
200
+    share (item) {
201
+      console.log(item)
202
+    }
101 203
   }
102 204
 }
103 205
 </script>

+ 147
- 38
src/pages/user/mainPage/coffeeIndex/page.scss 查看文件

@@ -3,6 +3,34 @@
3 3
     position: relative;
4 4
     overflow: hidden;
5 5
   }
6
+  >nav{
7
+    width: 100%;
8
+    position: relative;
9
+    z-index: 10;
10
+    background: #fff;
11
+    box-shadow: 0 0 .1rem .02rem rgba(0, 0, 0, .1);
12
+    a{
13
+      text-align: center;
14
+      line-height: .4rem;
15
+      font-size: .14rem;
16
+      color: #ccc;
17
+      position: relative;
18
+      &.active{
19
+        color: #333;
20
+        &::after{
21
+          content: '';
22
+          width: 50%;
23
+          height: .02rem;
24
+          background: #fc6243;
25
+          position: absolute;
26
+          bottom: 0;
27
+          left: 50%;
28
+          transform: translateX(-50%);
29
+          -webkit-transform: translateX(-50%);
30
+        }
31
+      }
32
+    }
33
+  }
6 34
   .content{
7 35
     &>div{
8 36
       width: 100%;
@@ -10,54 +38,135 @@
10 38
       left: 0;
11 39
       top: 0;
12 40
       bottom: 0;
13
-      overflow-y: scroll;
14
-      -webkit-overflow-scrolling: touch;
15
-      transform: translateZ(0);
16
-      -webkit-transform: translateZ(0);
17
-      &>div.flex-h{
18
-        &>div{
19
-          margin: 0 .2rem;
41
+      overflow: hidden;
42
+      &>ul{
43
+        width: 100%;
44
+        height: 100%;
45
+        position: relative;
46
+        overflow: hidden;
47
+        &>li{
48
+          width: 100%;
49
+          height: 100%;
20 50
           position: relative;
21
-          overflow: visible;
22
-          .areaList{
23
-            &:last-child{
24
-              margin-bottom: .2rem;
25
-            }
26
-            .title{
27
-              font-size: 0;
28
-              white-space: nowrap;
29
-              margin-top: .22rem;
30
-              *{
31
-                line-height: .26rem;
32
-                font-size: .14rem;
51
+          overflow-y: scroll;
52
+          -webkit-overflow-scrolling: touch;
53
+          transform: translateZ(0);
54
+          -webkit-transform: translateZ(0);
55
+          &.placeOrder{
56
+            .topInfo{
57
+              align-items: center;
58
+              margin: .1rem auto 0;
59
+              >div{
60
+                >div{
61
+                  width: 100%;
62
+                  position: relative;
63
+                  overflow: hidden;
64
+                  span{
65
+                    width: 100%;
66
+                    display: block;
67
+                    text-indent: .2rem;
68
+                    line-height: .3rem;
69
+                    font-size: .14rem;
70
+                    color: #666;
71
+                  }
72
+                }
33 73
               }
34
-              i{
35
-                color: red;
36
-                margin-right: .05rem;
74
+              a{
75
+                line-height: .22rem;
76
+                font-size: .12rem;
77
+                color: #fc6243;
78
+                border: .01rem solid #fc6243;
79
+                padding: 0 .15rem;
80
+                border-radius: .05rem;
81
+                margin-right: .2rem;
37 82
               }
38 83
             }
39
-            .subAreaList{
84
+            .areaListParent{
40 85
               position: relative;
41 86
               overflow: visible;
42
-              flex-wrap: wrap;
43
-              -webkit-flex-wrap: wrap;
44
-              &>li{
87
+              >div{
88
+                margin: 0 .2rem;
45 89
                 position: relative;
46
-                overflow: hidden;
47
-                border-radius: .06rem;
48
-                background: #fff;
49
-                padding: .15rem 0;
50
-                box-shadow: 0 0 .1rem .01rem rgba(0, 0, 0, .1);
51
-                min-width: 40%;
52
-                margin-top: .2rem;
53
-                &:nth-child(2n){
54
-                  margin-left: .2rem;
90
+                overflow: visible;
91
+                >div{
92
+                  width: 100%;
93
+                  position: relative;
94
+                  overflow: visible;
95
+                  .areaList{
96
+                    &:last-child{
97
+                      margin-bottom: .2rem;
98
+                    }
99
+                    .title{
100
+                      font-size: 0;
101
+                      white-space: nowrap;
102
+                      margin-top: .22rem;
103
+                      *{
104
+                        line-height: .26rem;
105
+                        font-size: .14rem;
106
+                      }
107
+                      i{
108
+                        color: red;
109
+                        margin-right: .05rem;
110
+                      }
111
+                    }
112
+                    .subAreaList{
113
+                      position: relative;
114
+                      overflow: visible;
115
+                      flex-wrap: wrap;
116
+                      -webkit-flex-wrap: wrap;
117
+                      &>li{
118
+                        position: relative;
119
+                        overflow: hidden;
120
+                        border-radius: .06rem;
121
+                        background: #fff;
122
+                        padding: .15rem 0;
123
+                        box-shadow: 0 0 .1rem .01rem rgba(0, 0, 0, .1);
124
+                        min-width: 40%;
125
+                        margin-top: .2rem;
126
+                        &:nth-child(2n){
127
+                          margin-left: .2rem;
128
+                        }
129
+                        &.noData{
130
+                          box-shadow: none;
131
+                          background: none;
132
+                        }
133
+                      }
134
+                    }
135
+                  }
55 136
                 }
56
-                &.noData{
57
-                  box-shadow: none;
58
-                  background: none;
137
+              }
138
+            }
139
+          }
140
+          &.my-card, &.customer-card{
141
+            .cardAndCouponInfo{
142
+              align-items: center;
143
+              margin: .1rem 0 .15rem;
144
+              div{
145
+                font-size: 0;
146
+                white-space: nowrap;
147
+                span{
148
+                  line-height: .3rem;
149
+                  font-size: .13rem;
150
+                  display: inline-block;
151
+                  margin-right: .05rem;
152
+                  &:nth-child(2){
153
+                    font-size: .16rem;
154
+                    color: #fc6243;
155
+                  }
59 156
                 }
60 157
               }
158
+              a{
159
+                line-height: .24rem;
160
+                padding: 0 .1rem;
161
+                box-sizing: border-box;
162
+                border: .01rem solid #333;
163
+                color: #333;
164
+                border-radius: .04rem;
165
+                font-size: .12rem;
166
+              }
167
+            }
168
+            .list-box{
169
+              padding: .1rem .2rem .2rem;
61 170
             }
62 171
           }
63 172
         }

+ 2
- 1
src/pages/user/placeOrder/index.vue 查看文件

@@ -64,7 +64,7 @@
64 64
           <span>共</span>
65 65
           <span>{{totalPrice}}</span>
66 66
           <span>元</span>
67
-          <i class="iconfont" :class="{'icon-jiantou-up': !showCalcMenu,'icon-jiantou-down': showCalcMenu}" @click="showCalcMenu = true"></i>
67
+          <!-- <i class="iconfont" :class="{'icon-jiantou-up': !showCalcMenu,'icon-jiantou-down': showCalcMenu}" @click="showCalcMenu = true"></i> -->
68 68
         </div>
69 69
       </div>
70 70
       <!-- <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 {
196 196
             spec: [],
197 197
             status: aArr[x].list[y].Status,
198 198
             price: aArr[x].list[y].Price,
199
+            num: 0,
199 200
           })
200 201
           if (aArr[x].list[y].Specs !== null) {
201 202
             for (var z = 0; z < aArr[x].list[y].Specs.length; z++) {