选择卡包

src/components/CardCase.vue

@@ -1,9 +1,15 @@
 <template>
     <div class="case">
-        <div class="bottom-show" @click="show = true">
-            <span v-if="chooseIds.length > 0">已选{{ chooseIds.length }}包，共{{ money }}元，邮费10元</span>
-            <span v-else>请选择卡包</span>
-        </div>
+        <van-cell :border="false" class="bottom-show" @click="init" is-link>
+            <div slot="title">
+                <div class="text1" v-if="chooseIds.length > 0">
+                    已选<span>{{ chooseIds.length }}</span
+                    >包，共<span>{{ money }}</span
+                    >元，邮费10元
+                </div>
+                <div v-else>请选择卡包</div>
+            </div>
+        </van-cell>
         <van-popup :show="show" round position="bottom" @close="show = false">
             <div class="box">
                 <div class="top">
@@ -20,24 +26,26 @@
 
                 <div class="content">
                     <div class="card" v-for="(card, index) in cardList" :key="index">
-                        <div class="card-title">卡包{{ index }}</div>
+                        <div class="card-title">卡包{{ getNumStr(index + 1) }}</div>
                         <div class="card-list">
                             <div
-                                v-for="item in card"
+                                v-for="(item, itemIndex) in card"
                                 :key="item.id"
                                 class="card-item"
-                                :class="{ used: item.caseStatus !== 'WAIT', active: chooseIds.includes(item.id) }"
+                                :class="{ used: item.caseStatus !== 'WAIT', active: nowChoose.includes(item.id) }"
                                 @click="choose(item.id)"
                             >
-                                {{ item.boxCode }}
+                                {{ getChart(itemIndex) }}
                             </div>
                         </div>
                     </div>
                 </div>
 
                 <div class="bottom">
-                    <span>已选{{ chooseIds.length }}包，共{{ money }}元，邮费10元</span>
-                    <van-button type="primary">确认购买</van-button>
+                    <span class="text">已选{{ nowChoose.length }}包，共{{ money }}元，邮费10元</span>
+                    <van-button size="medium" @click="submit" class="submit" :radius="0" type="primary"
+                        >确认购买</van-button
+                    >
                 </div>
             </div>
         </van-popup>
@@ -78,8 +86,9 @@ export default {
             return [...this.cardList].flat();
         },
         money() {
+            let choose = this.show ? this.nowChoose : this.chooseIds;
             let list = [...this.allCards].filter(item => {
-                return [...this.chooseIds].includes(item.id);
+                return [...choose].includes(item.id);
             });
 
             return list.reduce((prev, cur) => {
@@ -89,417 +98,8 @@ export default {
     },
     data() {
         return {
-            show: true,
-            list: [
-                [
-                    {
-                        id: 236,
-                        del: false,
-                        boxCode: '1号',
-                        groupCode: '4组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:47'
-                    },
-                    {
-                        id: 237,
-                        del: false,
-                        boxCode: '2号',
-                        groupCode: '4组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:47'
-                    },
-                    {
-                        id: 238,
-                        del: false,
-                        boxCode: '3号',
-                        groupCode: '4组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:48'
-                    },
-                    {
-                        id: 239,
-                        del: false,
-                        boxCode: '4号',
-                        groupCode: '4组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:48'
-                    },
-                    {
-                        id: 240,
-                        del: false,
-                        boxCode: '5号',
-                        groupCode: '4组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:48'
-                    },
-                    {
-                        id: 241,
-                        del: false,
-                        boxCode: '6号',
-                        groupCode: '4组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:48'
-                    }
-                ],
-                [
-                    {
-                        id: 230,
-                        del: false,
-                        boxCode: '1号',
-                        groupCode: '3组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:46'
-                    },
-                    {
-                        id: 231,
-                        del: false,
-                        boxCode: '2号',
-                        groupCode: '3组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:46'
-                    },
-                    {
-                        id: 232,
-                        del: false,
-                        boxCode: '3号',
-                        groupCode: '3组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:46'
-                    },
-                    {
-                        id: 233,
-                        del: false,
-                        boxCode: '4号',
-                        groupCode: '3组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:47'
-                    },
-                    {
-                        id: 234,
-                        del: false,
-                        boxCode: '5号',
-                        groupCode: '3组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:47'
-                    },
-                    {
-                        id: 235,
-                        del: false,
-                        boxCode: '6号',
-                        groupCode: '3组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:47'
-                    }
-                ],
-                [
-                    {
-                        id: 224,
-                        del: false,
-                        boxCode: '1号',
-                        groupCode: '2组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:45'
-                    },
-                    {
-                        id: 225,
-                        del: false,
-                        boxCode: '2号',
-                        groupCode: '2组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:45'
-                    },
-                    {
-                        id: 226,
-                        del: false,
-                        boxCode: '3号',
-                        groupCode: '2组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:45'
-                    },
-                    {
-                        id: 227,
-                        del: false,
-                        boxCode: '4号',
-                        groupCode: '2组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:45'
-                    },
-                    {
-                        id: 228,
-                        del: false,
-                        boxCode: '5号',
-                        groupCode: '2组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:46'
-                    },
-                    {
-                        id: 229,
-                        del: false,
-                        boxCode: '6号',
-                        groupCode: '2组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:46'
-                    }
-                ],
-                [
-                    {
-                        id: 218,
-                        del: false,
-                        boxCode: '1号',
-                        groupCode: '1组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:43'
-                    },
-                    {
-                        id: 219,
-                        del: false,
-                        boxCode: '2号',
-                        groupCode: '1组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:44'
-                    },
-                    {
-                        id: 220,
-                        del: false,
-                        boxCode: '3号',
-                        groupCode: '1组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:44'
-                    },
-                    {
-                        id: 221,
-                        del: false,
-                        boxCode: '4号',
-                        groupCode: '1组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:44'
-                    },
-                    {
-                        id: 222,
-                        del: false,
-                        boxCode: '5号',
-                        groupCode: '1组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:44'
-                    },
-                    {
-                        id: 223,
-                        del: false,
-                        boxCode: '6号',
-                        groupCode: '1组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:45'
-                    }
-                ],
-                [
-                    {
-                        id: 248,
-                        del: false,
-                        boxCode: '1号',
-                        groupCode: '6组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:49'
-                    },
-                    {
-                        id: 249,
-                        del: false,
-                        boxCode: '2号',
-                        groupCode: '6组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:49'
-                    },
-                    {
-                        id: 250,
-                        del: false,
-                        boxCode: '3号',
-                        groupCode: '6组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:49'
-                    },
-                    {
-                        id: 251,
-                        del: false,
-                        boxCode: '4号',
-                        groupCode: '6组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:50'
-                    },
-                    {
-                        id: 252,
-                        del: false,
-                        boxCode: '5号',
-                        groupCode: '6组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:50'
-                    },
-                    {
-                        id: 253,
-                        del: false,
-                        boxCode: '6号',
-                        groupCode: '6组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:50'
-                    }
-                ],
-                [
-                    {
-                        id: 242,
-                        del: false,
-                        boxCode: '1号',
-                        groupCode: '5组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:48'
-                    },
-                    {
-                        id: 243,
-                        del: false,
-                        boxCode: '2号',
-                        groupCode: '5组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:48'
-                    },
-                    {
-                        id: 244,
-                        del: false,
-                        boxCode: '3号',
-                        groupCode: '5组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:49'
-                    },
-                    {
-                        id: 245,
-                        del: false,
-                        boxCode: '4号',
-                        groupCode: '5组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:49'
-                    },
-                    {
-                        id: 246,
-                        del: false,
-                        boxCode: '5号',
-                        groupCode: '5组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:49'
-                    },
-                    {
-                        id: 247,
-                        del: false,
-                        boxCode: '6号',
-                        groupCode: '5组',
-                        cardCaseId: 217,
-                        boxPrice: 320,
-                        caseStatus: 'WAIT',
-                        money: 320,
-                        createdAt: '2021-05-07 16:07:49'
-                    }
-                ]
-            ]
+            show: false,
+            nowChoose: []
         };
     },
     mounted() {
@@ -509,23 +109,54 @@ export default {
         }, 2000);
     },
     methods: {
+        init() {
+            this.nowChoose = [...this.chooseIds];
+            this.show = true;
+        },
         choose(id) {
             console.log(id);
-            let list = [...this.chooseIds];
+            let list = [...this.nowChoose];
             if (list.includes(id)) {
                 list.splice(list.indexOf(id), 1);
             } else if (list.length < 6) {
                 list.push(id);
+            } else {
+                wx.showToast({
+                    icon: 'none',
+                    title: '最多选择六张',
+                    mask: true
+                });
             }
-
-            console.log(list);
-            this.$emit('update:chooseIds', list);
+            this.nowChoose = list;
+        },
+        submit() {
+            this.$emit('update:chooseIds', this.nowChoose);
+            this.show = false;
+        },
+        getChart(index) {
+            const list = ['A', 'B', 'C', 'D', 'E', 'F'];
+            return list[index];
         }
     }
 };
 </script>
 
 <style lang="less" scoped>
+/deep/ .van-cell {
+    --cell-horizontal-padding: 0px;
+    --cell-vertical-padding: 22px;
+
+    .van-cell__title {
+        font-size: 16px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 28px;
+
+        span {
+            color: @prim;
+        }
+    }
+}
 .box {
     max-height: 70vh;
     min-height: 50vh;
@@ -537,6 +168,7 @@ export default {
 .content {
     flex-grow: 1;
     overflow: auto;
+    padding: 0 0 12px;
 }
 
 .top {
@@ -580,9 +212,22 @@ export default {
         }
     }
 }
+.card + .card {
+    margin-top: 12px;
+}
 
+.card-title {
+    font-size: 14px;
+    color: #939599;
+    line-height: 24px;
+}
+.card-list {
+    margin: 5px;
+}
 .card {
     background-color: @bg;
+    padding: 12px 16px;
+    border-radius: 8px;
     .card-list {
         .flex();
 
@@ -617,4 +262,31 @@ export default {
         }
     }
 }
+
+.bottom {
+    padding: 6px 0;
+    border-radius: 12px;
+    overflow: hidden;
+    .flex();
+    .text {
+        padding: 0 16px;
+        flex-grow: 1;
+        font-size: 13px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 48px;
+        height: 48px;
+        background-color: lighten(@prim, 10);
+    }
+}
+
+/deep/ .submit {
+    .van-button {
+        height: 48px;
+        border-radius: 0px;
+        min-width: 98px;
+        max-width: 98px;
+    }
+}
 </style>

src/mixins/common.js

@@ -65,6 +65,13 @@ export default {
             wx.switchTab({
                 url: '/pages/Home'
             });
+        },
+        getNumStr(num) {
+            if (num < 10) {
+                return '0' + num;
+            } else {
+                return num;
+            }
         }
     }
 };

src/pages/details.vue

@@ -147,7 +147,6 @@ export default {
         width: 210px;
         height: 48px;
         background: #ff6c00;
-        border-radius: 12px;
         font-size: 16px;
         font-weight: 400;
         color: #ffffff;
@@ -330,13 +329,16 @@ export default {
         border-radius: 12px;
     }
     .box-footer {
-        width: 100%;
-        height: 82px;
+        right: 0;
+        // height: 82px;
         background: #ffffff;
         position: fixed;
         bottom: 0;
         left: 0;
-        padding: 22px 20px;
+        padding: 0 20px;
+        box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.04);
+        border-radius: 20px 20px 0px 0px;
+        .bottom();
         .box-cat {
             display: flex;
             justify-content: space-between;
@@ -359,7 +361,7 @@ export default {
         }
         .box-footer-con {
             display: flex;
-            margin-top: 22px;
+            padding: 6px 0;
             .box-footer-left {
                 display: flex;
                 text-align: center;