卡包

project.config.json

@@ -136,7 +136,7 @@
                     "id": -1,
                     "name": "拼箱详情",
                     "pathName": "/pages/details",
-                    "scene": null
+                    "query":"id=217"
                 },
                 {
                     "id": -1,

src/App.vue

@@ -1,4 +1,5 @@
 <script>
+import ProductInfo from '@/components/ProductInfo';
 export default {
     onLaunch(options) {
         wx.login({

src/components/CardCase.vue

@@ -0,0 +1,614 @@
+<template>
+    <van-popup :show="show" round position="bottom" @close="show = false">
+        <div class="box">
+            <div class="top">
+                <span>选择卡包</span>
+                <div class="right">
+                    <div class="tool-item">
+                        可选
+                    </div>
+                    <div class="tool-item used">
+                        已售
+                    </div>
+                </div>
+            </div>
+
+            <div class="content">
+                <div class="card" v-for="(card, index) in cardList" :key="index">
+                    <div class="card-title">卡包{{ index }}</div>
+                    <div class="card-list">
+                        <div
+                            v-for="item in card"
+                            :key="item.id"
+                            class="card-item"
+                            :class="{ used: item.caseStatus !== 'WAIT', active: chooseIds.includes(item.id) }"
+                            @click="choose(item.id)"
+                        >
+                            {{ item.boxCode }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="bottom">
+                <span>已选{{ chooseIds.length }}包，共{{ money }}元，邮费10元</span>
+                <van-button type="primary">确认购买</van-button>
+            </div>
+        </div>
+    </van-popup>
+</template>
+
+<script>
+export default {
+    name: 'CardCase',
+    props: {
+        detailsList: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        cardCaseInfo: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        chooseIds: {
+            type: Array,
+            default: () => {
+                return [];
+            }
+        }
+    },
+    computed: {
+        cardList() {
+            let boxMap = { ...this.detailsList };
+            return Object.keys(boxMap).map(item => {
+                return boxMap[item];
+            });
+        },
+        allCards() {
+            return [...this.cardList].flat();
+        },
+        money() {
+            let list = [...this.allCards].filter(item => {
+                return [...this.chooseIds].includes(item.id);
+            });
+
+            return list.reduce((prev, cur) => {
+                return prev + cur.money;
+            }, 0);
+        }
+    },
+    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'
+                    }
+                ]
+            ]
+        };
+    },
+    mounted() {
+        setTimeout(() => {
+            console.log(this.detailsList);
+            console.log(this.cardList);
+        }, 2000);
+    },
+    methods: {
+        choose(id) {
+            console.log(id);
+            let list = [...this.chooseIds];
+            if (list.includes(id)) {
+                list.splice(list.indexOf(id), 1);
+            } else if (list.length < 6) {
+                list.push(id);
+            }
+
+            console.log(list);
+            this.$emit('update:chooseIds', list);
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+    max-height: 70vh;
+    min-height: 50vh;
+
+    padding: 0 20px 0;
+    .flex-col();
+}
+
+.content {
+    flex-grow: 1;
+    overflow: auto;
+}
+
+.top {
+    .flex();
+    justify-content: space-between;
+    padding: 20px 0;
+    flex-shrink: 0;
+
+    span {
+        font-size: 16px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 26px;
+    }
+
+    .right {
+        .flex();
+        .tool-item {
+            font-size: 14px;
+            color: #000000;
+            line-height: 24px;
+            .flex();
+            margin-left: 30px;
+
+            &::before {
+                content: '';
+                flex-shrink: 0;
+                width: 16px;
+                height: 16px;
+                background: #ffffff;
+                border-radius: 4px;
+                border: 1px solid #f5f7fa;
+                margin-right: 4px;
+            }
+
+            &.used {
+                &::before {
+                    background-color: #939599;
+                }
+            }
+        }
+    }
+}
+
+.card {
+    background-color: @bg;
+    .card-list {
+        .flex();
+
+        .card-item {
+            width: 42px;
+            height: 42px;
+            background: #ffffff;
+            border-radius: 8px;
+            font-size: 16px;
+            font-weight: bold;
+            text-align: center;
+            color: #000000;
+            line-height: 42px;
+
+            &.used {
+                background-color: #939599;
+                color: #ffffff;
+            }
+
+            &.active {
+                background-color: @prim;
+                color: #ffffff;
+            }
+
+            &:active {
+                opacity: 0.8;
+            }
+        }
+
+        .card-item + .card-item {
+            margin-left: 10px;
+        }
+    }
+}
+</style>

src/pages/details.vue

@@ -63,9 +63,9 @@
             3.拼箱商品支付成功后不支持退款退货，请谨慎、理智购买
         </div>
         <div class="box-footer">
-            <div class="box-cat">
+            <div class="box-cat" @click="$refs.cardCase.show = true">
                 <div>{{ selman ? selman : '请选择卡包' }}</div>
-                <div @click="selection">></div>
+                <div>></div>
             </div>
             <van-action-sheet :show="show" title="选择卡包">
                 <!-- <view>选择卡包</view> -->
@@ -101,16 +101,25 @@
                 </div>
             </div>
         </div>
+
+        <card-case
+            ref="cardCase"
+            :chooseIds.sync="chooseIds"
+            :detailsList="detailsList"
+            :cardCaseInfo="cardCaseInfo"
+        ></card-case>
     </div>
 </template>
 <script>
+import CardCase from '../components/CardCase';
 export default {
     data() {
         return {
             show: false,
             selman: '',
             list: [],
-            cardCaseInfo: {}
+            cardCaseInfo: {},
+            chooseIds: []
         };
     },
     methods: {
@@ -137,14 +146,17 @@ export default {
         details() {
             this.$http.get('/cardCase/showInfoMA?caseId=' + this.$mp.query.id).then(res => {
                 console.log(res);
-                this.detailsList = res;
+                this.detailsList = res.groupBoxMap;
                 this.cardCaseInfo = res.cardCaseInfo || {};
-                this.list = res.cardCaseInfo;
+                // this.list = res.cardCaseInfo;
             });
         }
     },
     created() {
         this.details();
+    },
+    components: {
+        CardCase
     }
 };
 </script>

src/pages/mineFollow.vue

@@ -8,14 +8,21 @@
         <van-empty image="/native/imgs/kong_png_wodeguanzhu.png" description="你还没有关注哦～">
             <van-button type="primary" block @click="goHome">去逛逛</van-button>
         </van-empty>
+        <div class="product">
+            <product-info></product-info>
+        </div>
     </div>
 </template>
 
 <script>
+import ProductInfo from '@/components/ProductInfo';
 export default {
     name: 'MineFollow',
     data() {
         return {};
+    },
+    components: {
+        ProductInfo
     }
 };
 </script>