卡包

src/components/CardCase.vue

@@ -1,41 +1,47 @@
 <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 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-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>
 
-            <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 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>
 
-            <div class="bottom">
-                <span>已选{{ chooseIds.length }}包，共{{ money }}元，邮费10元</span>
-                <van-button type="primary">确认购买</van-button>
+                <div class="bottom">
+                    <span>已选{{ chooseIds.length }}包，共{{ money }}元，邮费10元</span>
+                    <van-button type="primary">确认购买</van-button>
+                </div>
             </div>
-        </div>
-    </van-popup>
+        </van-popup>
+    </div>
 </template>
 
 <script>

src/pages/details.vue

@@ -63,28 +63,16 @@
             3.拼箱商品支付成功后不支持退款退货，请谨慎、理智购买
         </div>
         <div class="box-footer">
-            <div class="box-cat" @click="$refs.cardCase.show = true">
+            <!-- <div class="box-cat" @click="$refs.cardCase.show = true">
                 <div>{{ selman ? selman : '请选择卡包' }}</div>
                 <div>></div>
-            </div>
-            <van-action-sheet :show="show" title="选择卡包">
-                <!-- <view>选择卡包</view> -->
-                <div class="van-box" @click="alls(item)" v-for="(item, index) in list" :key="index">
-                    <p class="van-box-p">卡包 {{ item[0].boxCode }}</p>
-                    <div class="van-con">
-                        <!-- <div class="van-con-div">{{ item.cardCaseId }}</div>
-                        <div class="van-con-div">{{ item.groupCode }}</div>
-                        <div class="van-con-div">{{ item.cardCaseId }}</div>
-                        <div class="van-con-div">{{ item.cardCaseId }}</div>
-                        <div class="van-con-div">{{ item.cardCaseId }}</div>
-                        <div class="van-con-div">{{ item.cardCaseId }}</div> -->
-                    </div>
-                </div>
-                <div class="van-btn">
-                    <div class="van-cat">已选3包，共970元，邮费10元</div>
-                    <div class="van-buy" @click="buy">确认购买</div>
-                </div>
-            </van-action-sheet>
+            </div> -->
+            <card-case
+                ref="cardCase"
+                :chooseIds.sync="chooseIds"
+                :detailsList="detailsList"
+                :cardCaseInfo="cardCaseInfo"
+            ></card-case>
             <div class="box-footer-con">
                 <div class="box-footer-left">
                     <div>
@@ -101,13 +89,6 @@
                 </div>
             </div>
         </div>
-
-        <card-case
-            ref="cardCase"
-            :chooseIds.sync="chooseIds"
-            :detailsList="detailsList"
-            :cardCaseInfo="cardCaseInfo"
-        ></card-case>
     </div>
 </template>
 <script>