铸造选择

src/views/activity/ChooseProduct.vue

@@ -30,49 +30,109 @@
             />
 
             <div class="list">
-                <div
-                    class="product"
-                    :class="{ active: chooseIds.includes(item.id) }"
-                    v-for="item in collections"
-                    :key="item.id"
-                    @click="choose(item.id, item)"
-                >
-                    <img
-                        class="icon"
-                        :src="
-                            chooseIds.includes(item.id)
-                                ? require('../../assets/icon_gouxuan_pre.png')
-                                : require('../../assets/icon_gouxuan_huise.png')
-                        "
-                        alt=""
-                    />
-                    <div class="product-content">
-                        <van-image
-                            width="60"
-                            height="60"
-                            radius="6"
-                            :src="getImg(changeImgs(item.pic, 600))"
-                            fit="contain"
-                        />
-                        <div class="product-info">
-                            <div class="text1 van-ellipsis">{{ item.name }}</div>
-                            <div class="flex1"></div>
-                            <div class="text2" v-if="item.category">{{ item.category }}</div>
-                            <div class="text2" v-if="item.number">编号：{{ item.number }}</div>
+                <template v-for="item in collections" :key="item.id">
+                    <div class="product-list" v-if="item.collectionInfos">
+                        <div
+                            class="product"
+                            :class="{ active: chooseIds.includes(item.id) }"
+                            @click="item.showMore = !item.showMore"
+                        >
+                            <div class="product-content">
+                                <van-image
+                                    width="60"
+                                    height="60"
+                                    radius="6"
+                                    :src="getImg(changeImgs(item.pic, 600))"
+                                    fit="contain"
+                                />
+                                <div class="product-info">
+                                    <div class="text1 van-ellipsis">{{ item.name }}</div>
+                                    <div class="flex1"></div>
+                                    <div class="text2" v-if="item.category">{{ item.category }}</div>
+                                </div>
+                            </div>
+                            <div class="product-desc" v-if="getChooseNum(item.collectionInfos)">
+                                已选{{ getChooseNum(item.collectionInfos) }}个
+                            </div>
+                            <img class="more" :class="{ open: item.showMore }" src="@assets/icon_inter.png" alt="" />
                         </div>
+                        <template v-if="item.showMore">
+                            <div
+                                class="product product-small"
+                                v-for="(pro, proIndex) in item.collectionInfos"
+                                :key="proIndex"
+                                :class="{ active: chooseIds.includes(pro.id) }"
+                                @click="choose(pro.id, pro)"
+                            >
+                                <img
+                                    class="icon"
+                                    :src="
+                                        chooseIds.includes(pro.id)
+                                            ? require('../../assets/icon_gouxuan_pre.png')
+                                            : require('../../assets/icon_gouxuan_huise.png')
+                                    "
+                                    alt=""
+                                />
+                                <div class="product-content">
+                                    <van-image
+                                        width="45"
+                                        height="45"
+                                        radius="6"
+                                        :src="getImg(changeImgs(pro.pic, 600))"
+                                        fit="contain"
+                                    />
+                                    <div class="product-info">
+                                        <div class="text1 van-ellipsis">{{ pro.name }}</div>
+                                        <div class="flex1"></div>
+                                        <div class="text2" v-if="item.number">编号：{{ pro.number }}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
                     </div>
-                    <div class="num-right" @click.stop="" v-if="item.collections">
-                        <van-stepper
-                            v-model="item.num"
-                            :name="item.id"
-                            :min="0"
-                            :max="item.collections.length"
-                            @change="changeStepper"
-                            size="mini"
+                    <div
+                        class="product"
+                        :class="{ active: chooseIds.includes(item.id) }"
+                        @click="choose(item.id, item)"
+                        v-else
+                    >
+                        <img
+                            class="icon"
+                            :src="
+                                chooseIds.includes(item.id)
+                                    ? require('../../assets/icon_gouxuan_pre.png')
+                                    : require('../../assets/icon_gouxuan_huise.png')
+                            "
+                            alt=""
                         />
-                        <div class="num-text">共{{ item.collections.length }}个</div>
+                        <div class="product-content">
+                            <van-image
+                                width="60"
+                                height="60"
+                                radius="6"
+                                :src="getImg(changeImgs(item.pic, 600))"
+                                fit="contain"
+                            />
+                            <div class="product-info">
+                                <div class="text1 van-ellipsis">{{ item.name }}</div>
+                                <div class="flex1"></div>
+                                <div class="text2" v-if="item.category">{{ item.category }}</div>
+                                <div class="text2" v-if="item.number">编号：{{ item.number }}</div>
+                            </div>
+                        </div>
+                        <div class="num-right" @click.stop="" v-if="item.collections">
+                            <van-stepper
+                                v-model="item.num"
+                                :name="item.id"
+                                :min="0"
+                                :max="item.collections.length"
+                                @change="changeStepper"
+                                size="mini"
+                            />
+                            <div class="num-text">共{{ item.collections.length }}个</div>
+                        </div>
                     </div>
-                </div>
+                </template>
             </div>
         </van-pull-refresh>
 
@@ -107,12 +167,35 @@ export default {
     watch: {
         showList() {
             let list = [...this.showList];
-            this.collections = list.map(item => {
-                return {
-                    ...item,
-                    num: 0
-                };
-            });
+            const getSort = info => {
+                if (info.collections) {
+                    return 2;
+                } else if (info.collectionInfos) {
+                    return 1;
+                } else {
+                    return 0;
+                }
+            };
+            this.collections = list
+                .map(item => {
+                    if (item.collectionInfos && item.collectionInfos.length > 1) {
+                        return {
+                            ...item,
+                            num: 0,
+                            showMore: false
+                        };
+                    } else {
+                        let info = { ...item };
+                        delete info.collectionInfos;
+                        return {
+                            ...info,
+                            num: 0
+                        };
+                    }
+                })
+                .sort((a, b) => {
+                    return getSort(b) - getSort(a);
+                });
         }
     },
     computed: {
@@ -141,14 +224,21 @@ export default {
                         flag = false;
                     }
                 });
-                if (flag) {
-                    _map.set(item.id, item);
-                } else {
-                    let name= item.name.split("#")[0];
-                    if (_map.has(name)) {
-                        let info = _map.get(name);
+                let name = item.name.split('#')[0];
+                if (_map.has(name)) {
+                    let info = _map.get(name);
+                    if (flag) {
+                        info.collectionInfos.push(item);
+                    } else {
                         info.collections.push(item.id);
-                        _map.set(name, info);
+                    }
+                    _map.set(name, info);
+                } else {
+                    if (flag) {
+                        _map.set(name, {
+                            ...item,
+                            collectionInfos: [item]
+                        });
                     } else {
                         _map.set(name, {
                             ...item,
@@ -201,6 +291,13 @@ export default {
         }
     },
     methods: {
+        getChooseNum(collectionInfos) {
+            let chooseIds = [...this.chooseIds];
+            let collects = collectionInfos.filter(item => {
+                return chooseIds.includes(item.id);
+            });
+            return collects.length;
+        },
         changeStepper(value, detail) {
             console.log(value);
             let collectIndex = [...this.collections].findIndex(item => {
@@ -453,4 +550,27 @@ export default {
         margin-top: 6px;
     }
 }
+.product-list {
+    background-color: #fff;
+    overflow: hidden;
+    margin: 10px 10px;
+    border-radius: 12px;
+    transition: height ease-in-out 0.3s;
+    .product {
+        margin: 0 0;
+    }
+
+    .product-desc {
+        font-size: 12px;
+        color: @prim;
+    }
+    .more {
+        width: 24px;
+        height: 24px;
+        transition: transform ease-in-out 0.3s;
+        &.open {
+            transform: rotate(90deg);
+        }
+    }
+}
 </style>