From fdc4456f080aa9efcf3dcc10f8c098ad24d68d29 Mon Sep 17 00:00:00 2001
From: gongfuxiang <fuxiang.gong@qq.com>
Date: Sat, 16 Sep 2023 13:22:12 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=84=E5=90=88=E6=90=AD=E9=85=8D=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=95=86=E5=93=81=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/binding-list/binding-list.vue | 92 ++++++++++++++++++++----
 pages/plugins/binding/index/index.vue    |  2 +-
 2 files changed, 80 insertions(+), 14 deletions(-)

diff --git a/components/binding-list/binding-list.vue b/components/binding-list/binding-list.vue
index 8453b6bc..063cd7c9 100644
--- a/components/binding-list/binding-list.vue
+++ b/components/binding-list/binding-list.vue
@@ -2,16 +2,38 @@
     <view>
         <view v-if="(data_list || null) != null && data_list.length > 0" class="plugins-binding-data-list oh">
             <block v-for="(item, index) in data_list" :key="index">
-                <view class="item border-radius-main bg-white padding-main oh spacing-mb" :data-value="item.url" @tap="url_event">
-                    <image :src="item.images" mode="aspectFit" class="images fl dis-block border-radius-main"></image>
-                    <view class="base-right fr bs-bb">
-                        <view class="fw-b text-size cr-base single-text">{{item.title}}</view>
-                        <view class="cr-grey margin-top-xs text-size-xs multi-text">{{item.describe}}</view>
-                        <view class="sales-price margin-top-sm single-text">{{propCurrencySymbol}}{{item.estimate_price}}</view>
-                        <view v-if="item.estimate_original_price != 0" class="original-price margin-top-xs single-text">{{propCurrencySymbol}}{{item.estimate_original_price}}</view>
-                        <view v-if="(item.estimate_discount_price || 0) != 0" class="margin-top-sm single-text">
-                            <text class="discount-icon cr-white text-size-xs">节省</text>
-                            <text class="cr-green">{{propCurrencySymbol}}{{item.estimate_discount_price}}</text>
+                <view class="item border-radius-main bg-white padding-main oh pr spacing-mb">
+                    <view class="oh" :data-value="item.url" @tap="url_event">
+                        <image :src="item.images" mode="aspectFit" class="images fl dis-block border-radius-main"></image>
+                        <view class="base-right fr bs-bb">
+                            <view class="fw-b text-size cr-base single-text">{{item.title}}</view>
+                            <view class="sales-price margin-top-lg single-text">{{propCurrencySymbol}}{{item.estimate_price}}</view>
+                            <view v-if="(item.estimate_discount_price || 0) != 0" class="margin-top-sm single-text">
+                                <text class="discount-icon cr-white text-size-xs">节省</text>
+                                <text class="cr-green">{{propCurrencySymbol}}{{item.estimate_discount_price}}</text>
+                            </view>
+                            <view class="tr margin-top-xl">
+                                <button type="default" size="mini" class="br-main bg-main cr-white round buy-submit">{{item.type_name}}购买</button>
+                            </view>
+                        </view>
+                    </view>
+                    <view :class="'binding-goods-list border-radius-main margin-top-lg '+((item.is_home_show_goods || 0) == 1 ? 'expand' : '')" :style="'--height: '+((Math.ceil(item.goods.length/2)*132)+20)+'rpx'">
+                        <view class="padding-horizontal-main padding-top-lg padding-bottom-sm oh">
+                            <block v-for="(gv, gi) in item.goods" :key="gi">
+                                <view class="goods-item oh margin-top-sm margin-bottom-lg" :data-value="gv.goods_url" @tap="url_event">
+                                    <image :src="gv.images" mode="aspectFit" class="goods-images fl dis-block radius"></image>
+                                    <view class="goods-right fr bs-bb">
+                                        <view class="single-text text-size-sm">{{gv.title}}</view>
+                                        <view class="single-text sales-price text-size-xs">{{propCurrencySymbol}}{{gv.price}}</view>
+                                        <view v-if="(gv.discount_price || null) != null" class="single-text cr-green text-size-xs">节省{{propCurrencySymbol}}{{gv.discount_price}}</view>
+                                    </view>
+                                </view>
+                            </block>
+                        </view>
+                    </view>
+                    <view :class="'bg-white padding-main wh-auto pa bs-bb bottom-elastic '+((item.is_home_show_goods || 0) != 1 ? 'br-t-dashed' : '')" :data-index="index" @tap="item_more_goods_event">
+                        <view class="arrow-bottom">
+                            <view class="cr-grey text-size-xs">{{(item.is_home_show_goods || 0) == 1 ? '收起' : '展开'}}{{item.type_name}}商品</view>
                         </view>
                     </view>
                 </view>
@@ -60,17 +82,28 @@
             // url事件
             url_event(e) {
                 app.globalData.url_event(e);
+            },
+
+            // 商品展开关闭
+            item_more_goods_event(e) {
+                var index = e.currentTarget.dataset.index;
+                var temp_data = this.data_list;
+                temp_data[index]['is_home_show_goods'] = (parseInt(temp_data[index]['is_home_show_goods'] || 0) == 1) ? 0 : 1;
+                this.setData({data_list: temp_data});
             }
         }
     };
 </script>
 <style>
+    .plugins-binding-data-list .item {
+        padding-bottom: 76rpx;
+    }
     .plugins-binding-data-list .item .images {
-        width: 265rpx;
-        height: 265rpx !important;
+        width: 232rpx;
+        height: 232rpx !important;
     }
     .plugins-binding-data-list .item .base-right {
-        width: calc(100% - 285rpx);
+        width: calc(100% - 252rpx);
     }
     .plugins-binding-data-list .item .base-right .discount-icon {
         border-top-right-radius: 30rpx;
@@ -80,6 +113,39 @@
         animation: gradient 5s ease infinite;
         padding: 0 16rpx;
     }
+    .plugins-binding-data-list .item .base-right .buy-submit {
+        padding: 0 20rpx;
+        line-height: 46rpx;
+    }
+    .plugins-binding-data-list .item .binding-goods-list {
+        background: #F8F8F8;
+        transition: height 0.25s ease-in-out;
+        height: 0;
+    }
+    .plugins-binding-data-list .item .binding-goods-list.expand {
+        height: var(--height);
+    }
+    .plugins-binding-data-list .item .binding-goods-list .goods-item {
+        width: calc(50% - 15rpx);
+        height: 102rpx;
+    }
+    .plugins-binding-data-list .item .binding-goods-list .goods-item:nth-child(odd) {
+        float: left;
+    }
+    .plugins-binding-data-list .item .binding-goods-list .goods-item:nth-child(even) {
+        float: right;
+    }
+    .plugins-binding-data-list .item .binding-goods-list .goods-item .goods-right {
+        width: calc(100% - 115rpx);
+    }
+    .plugins-binding-data-list .item .binding-goods-list .goods-item .goods-images {
+        width: 100rpx;
+        height: 100rpx !important;
+    }
+    .plugins-binding-data-list .item .bottom-elastic {
+        left: 0;
+        bottom: 0;
+    }
     @keyframes gradient {
         0% {
             background-position: 0% 50%;
diff --git a/pages/plugins/binding/index/index.vue b/pages/plugins/binding/index/index.vue
index 0241eb44..af9eb982 100644
--- a/pages/plugins/binding/index/index.vue
+++ b/pages/plugins/binding/index/index.vue
@@ -3,7 +3,7 @@
         <view v-if="(data_base || null) != null">
             <!-- 列表 -->
             <scroll-view :scroll-y="true" class="scroll-box" @scrolltolower="scroll_lower" lower-threshold="60">
-                <view :class="((shop || null) != null ? 'page' : '')">
+                <view :class="'padding-main '+((shop || null) != null ? 'page' : '')">
                     <block v-if="(data_list || null) != null && data_list.length > 0">
                         <!-- 组合搭配组件 -->
                         <component-binding-list :propConfig="data_base" :propDataList="data_list" :propCurrencySymbol="currency_symbol"></component-binding-list>