详情页添加 套餐选择

app.wxss

@@ -19,6 +19,9 @@ page {
   align-items: center;
   justify-content: center;
 }
+.over_hidden {
+  overflow: hidden;
+}
 .abs_img {
   position: absolute;
   width: 100%;
@@ -30,7 +33,9 @@ page {
 .pos_rel {
   position: relative;
 }
-
+.text_center {
+  text-align: center;
+}
 .one_line_hidden {
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -51,6 +56,9 @@ page {
 .f0 {
   font-size: 0;
 }
+.f20 {
+  font-size: 20rpx;
+}
 .f24 {
   font-size: 24rpx;
 }

pages/confirmOrder/confirmOrder.js

@@ -32,8 +32,8 @@ Page({
       cart_id
     })
     // console.log(goods_id, iscart, num, cart_id);
-    // this.getDatas(goods_id, iscart, num, cart_id)
-    this.getDatas(4807, 0, 1, '')
+    this.getDatas(goods_id, iscart, num, cart_id)
+    // this.getDatas(4807, 0, 1, '')
   },
   getDatas(goods_id, ifcart, num, cart_id) {
     wx.showLoading({

pages/confirmOrder/confirmOrder.wxml

@@ -13,7 +13,7 @@
       <image class="see_ensure_desc" src="../../image/back.png"></image>
     </view>
     <view wx:else class="address_none">
-      <icon type="warn" size="23" />
+      <icon type="warn" size="23"  color="#333"/>
       <text decode="{{true}}">&nbsp;&nbsp;请填写收货人信息</text>
     </view>
   </navigator>
@@ -33,8 +33,8 @@
 
   <view class="bacfff" wx:for="{{goods_list}}" wx:for-index="idx" wx:key="idx">
     <view class="order_goods_content vux-1px-b">
-      <image class="order_content_img" mode="widthFix" src="{{item.goods_image_url}}"></image>
-      <view class="order_content_middle">
+      <image class="order_content_img" src="{{item.goods_image_url}}"></image>
+      <view class="order_content_middle over_hidden">
         <view class="l_height42 ft_bold one_line_hidden">{{item.goods_mobile_name}}</view>
         <view class="order_letter_pro one_line_hidden">{{item.goods_spec}}</view>
         <view>

pages/confirmOrder/confirmOrder.wxss

@@ -16,7 +16,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  color:#EB4E4F; 
+  color:#333; 
   padding: 50rpx 0;
   background: #fff; 
   font-size: 26rpx;
@@ -83,12 +83,13 @@
   /* flex: 0 0 33.3333%; */
   width: 160rpx;
   height: 160rpx;
-  border: 1px solid #D9D9D9;
+  flex-shrink: 0;
 }
 
 .order_content_middle {
-  -webkit-flex: 0 0 60%;
-  flex: 0 0 60%;
+  /* -webkit-flex: 0 0 60%;
+  flex: 0 0 60%; */
+  flex: 1;
   padding-left: 20rpx;
   font-size: 30rpx;
   color: #333;

pages/details/details.js

@@ -11,6 +11,8 @@ Page({
   data: {
     imgUrls: [],
     datas: {},
+    goodsIdMap: '',
+    bundleList: '', // 套餐
     getOneSummary: [],
     webViewUrl: '',
     indicatorDots: true,
@@ -34,7 +36,8 @@ Page({
     current: 0,
     carouselImgs: [],
     currentPrice: '', // 商品当前价格,
-    promotionDays: ''
+    promotionDays: '',
+    bundleIndex: -1
   },
 
   /**
@@ -42,16 +45,16 @@ Page({
    */
   onLoad: function (options) {
     // let webViewUrl = `https://passport.lrlz.com/mobile/index.php?act=goods_common&op=detail&goods_id=${options.goods_id}&client_type=ios`
-    // this.setData({
-    //   webViewUrl,
-    //   options_goods_id: options.goods_id
-    // })
+    this.setData({
+      // webViewUrl,
+      options_goods_id: options.goods_id
+    })
     setInterval(() => {
       this.setData({
         countTime: --this.data.countTime
       })
     }, 1000);
-    
+
 
     // console.log(options.goods_id);
     this.getDatas(options.goods_id)
@@ -67,9 +70,9 @@ Page({
       // goods_id: 7636
       // goods_id: 4807
       // goods_id: 2
-    }, function(res) {
+    }, function (res) {
       var str = res.split(/<[\/]?body>/gi)[1];
-       WxParse.wxParse('article', 'html', str, that);
+      WxParse.wxParse('article', 'html', str, that);
     });
 
   },
@@ -87,17 +90,36 @@ Page({
       if (res.code == 200) {
         console.log(res);
         self.createStars(res.datas.common_info.comments_rate)
-        if(res.datas.comments) {
+        if (res.datas.comments) {
           self.createComments(res.datas.comments)
         }
-        
+
+        let goodsIdMap
+        if (!self.data.goodsIdMap) {
+          goodsIdMap = new Map()
+          res.datas.summary.map(item => {
+            goodsIdMap.set(item['goods_id'], item)
+          });
+        }
+
+
         let oneSummary = self.getOneSummary(res.datas.summary, goods_id)
-        console.log('oneSummary:', oneSummary);
+        // console.log('oneSummary:', oneSummary);
+        let bundleList = ''
+        if (oneSummary['have_bundle']) {
+          let bundlingMap = new Map()
+          res.datas['bundling'].map(item => {
+            bundlingMap.set(item['bl_id'], item)
+          })
+          let goodsSumaryMap = goodsIdMap ? goodsIdMap : self.data.goodsIdMap
+          bundleList = self.createBundles(oneSummary['bundles'], bundlingMap, goodsSumaryMap)
+          console.log('bundleList:', bundleList);
+        }
         let getgift = self.getgift(res.datas.summary, goods_id)
         let differencePrice = (oneSummary.goods_price - oneSummary.bonus_price).toFixed(2)
         oneSummary = Object.assign({}, { differencePrice }, oneSummary)
         let promotionDays = ''
-        if(oneSummary['act_type'] == 2) {
+        if (oneSummary['act_type'] == 2) {
           promotionDays = self.getPromotionDays(oneSummary['act_id'], res.datas.limitime)
         }
         self.setData({
@@ -105,7 +127,9 @@ Page({
           getOneSummary: oneSummary,
           imgUrls: res.datas.common_info.images,
           getgift,
-          promotionDays
+          promotionDays,
+          goodsIdMap,
+          bundleList
         })
       }
       else {
@@ -147,6 +171,31 @@ Page({
       getgift
     })
   },
+  // self.createBundles(oneSummary['bundles'],bundlingMap,goodsIdMap)
+
+  createBundles(bundles, bundlingMap, goodsIdMap) {
+    let bundlesList = []
+    bundles.map(item => {
+      if (bundlingMap.get(item)) {
+        let bundlesSumary = []
+        let bundling = bundlingMap.get(item)
+        let goodsTotalPrice = 0
+        bundling['goods'].map(good => {
+          let resultGood = goodsIdMap.get(good['goods_id'])
+          resultGood['bl_goods_price'] = good['bl_goods_price']
+          goodsTotalPrice += parseFloat(resultGood['goods_price'])
+          bundlesSumary.push(resultGood)
+        })
+        let reduce_price = goodsTotalPrice - bundling['bl_price']
+        bundling['reduce_price'] = reduce_price
+        bundlesList.push({
+          bundling,
+          bundlesSumary
+        })
+      }
+    })
+    return bundlesList
+  },
   goodsNumHandle(e) {
     let type = e.currentTarget.dataset.type
     if (type == 'minus') {
@@ -290,17 +339,17 @@ Page({
   },
   createStars(rate) {
     let starSrcs = []
-    for(let i = 0; i < 5; i++) {
-      if(i < Math.floor(rate)) {
+    for (let i = 0; i < 5; i++) {
+      if (i < Math.floor(rate)) {
         starSrcs.push(this.data.activeStar)
         continue
       }
-      if(i < Math.round(rate)) {
+      if (i < Math.round(rate)) {
         starSrcs.push(this.data.halfStar)
         continue
       }
       starSrcs.push(this.data.basicStar)
-    } 
+    }
     this.setData({
       starSrcs
     })
@@ -319,7 +368,6 @@ Page({
       }
       return item
     })
-    // console.log(comments);
     this.setData({
       comments
     })
@@ -344,6 +392,50 @@ Page({
       show_carousel: false
     })
   },
+  // 套装切换展开样式
+  toggleBundle(e) {
+    let { index } = e.currentTarget.dataset
+    if (index == this.data.bundleIndex) {
+      index = -1
+    }
+    this.setData({
+      bundleIndex: index
+    })
+  },
+  bundleDetail(e) {
+    let { id } = e.currentTarget.dataset
+    if (id == this.data.options_goods_id) return;
+    wx.navigateTo({
+      url: `/pages/details/details?goods_id=${id}&title=商品详情`
+    })
+  },
+  addBundleCart(e) {
+    console.log(e);
+    let bl_id =  e.currentTarget.dataset.blid
+    getReq({
+      act: 'cart',
+      op: 'addex',
+      quantity: 1,
+      bl_id
+    }, function (res) {
+      console.log(res);
+      wx.hideLoading()
+      if (res.code == 200) {
+        wx.showToast({
+          icon: 'none',
+          title: '添加成功！',
+          duration: 1500
+        })
+      }
+      else {
+        wx.showToast({
+          icon: 'none',
+          title: res.message,
+          duration: 1500
+        })
+      }
+    })
+  },
 
   /**
    * 生命周期函数--监听页面初次渲染完成

pages/details/details.wxml

@@ -13,9 +13,11 @@
   </view>
   <view class="place-bacd9"></view>
   <view class="promotion_header align_center" wx:if="{{getOneSummary['act_type'] == 2}}">
-      <view class="promotion_single">限时特价</view> 
-      <view>还剩<text class="col333 ft_bold">{{promotionDays}}天</text>恢复<text class="col333 ft_bold">¥{{getOneSummary.goods_price}}</text>，不可同享其他优惠</view>
-    </view>
+    <view class="promotion_single">限时特价</view>
+    <view>还剩
+      <text class="col333 ft_bold">{{promotionDays}}天</text>恢复
+      <text class="col333 ft_bold">¥{{getOneSummary.goods_price}}</text>，不可同享其他优惠</view>
+  </view>
   <view class="n_goods_content">
     <view class="n_price_content align_center">
       <text class="f40 col2B2B2B ft_bold" wx:if="{{getOneSummary['act_type'] == 0}}">¥{{getOneSummary.bonus_price}}</text>
@@ -52,6 +54,67 @@
     </view>
   </view>
 
+  <block wx:if="{{bundleList}}">
+    <block wx:for="{{bundleList}}" wx:key="*this" wx:for-index="index">
+      <view class="place-bac247"></view>
+      <view class="comments_box">
+        <view class="comments_header">-套装推荐-</view>
+        <view class="comments_basic_info ">
+          <view class="f30 col333 ft_bold">{{item['bundling']['bl_name']}}</view>
+          <view class="transform_bundleList_wrapper align_center" catchtap="toggleBundle" data-index="{{index}}">
+            <image class="transform_bundleList {{ bundleIndex == index ? 'bundle_active' : ''}}" src="../../image/back.png"></image>
+          </view>
+        </view>
+
+        <view class="{{bundleIndex == index ? 'bundle_list_hide' : ''}}">
+          <view class="align_center mb20 mt20 ">
+            <scroll-view class="scroll-view_H" scroll-x="true" style="width: 100%">
+              <block wx:for="{{item['bundlesSumary']}}" wx:key="*this" wx:for-item="bundle" wx:for-index="bundleIndex">
+                <view class="scroll-view-item_H bundle_scroll_view" catchtap="bundleDetail" data-id="{{bundle['goods_id']}}">
+                  <image class="bundle_img" src="{{bundle['goods_image_url']}}"></image>
+                  <view class="bundle_desc">{{bundle['goods_mobile_name']}}</view>
+                </view>
+                <view class="scroll-view-item_H scroll_place" wx:if="{{bundleIndex < item['bundlesSumary'].length - 1}}">+</view>
+              </block>
+            </scroll-view>
+          </view>
+          <view class="f30 text_center col666 mb20">套装总价:
+            <text class="ft_bold col333">¥{{item['bundling']['bl_price']}}</text>
+          </view>
+        </view>
+
+        <!-- 展开后的样式  -->
+        <view class="{{bundleIndex == index ? '' : 'bundle_list_hide'}}">
+          <block wx:for="{{item['bundlesSumary']}}" wx:key="*this" wx:for-item="bundle" wx:for-index="bundleIndex">
+            <view class="order_goods_content vux-1px-b" style="padding-left: 0;" catchtap="bundleDetail" data-id="{{bundle['goods_id']}}">
+              <image class="bundle_img" src="{{bundle['goods_image_url']}}"></image>
+              <view class="order_content_middle default_place_flex over_hidden">
+                <view class="l_height42 ft_bold one_line_hidden">{{bundle['goods_mobile_name']}}</view>
+                <view>
+                  <text class="f30 col333 ft_bold mr10">
+                    <text class="f24 mr6">¥</text>{{bundle['bl_goods_price']}}</text>
+                  <text decode="{{true}}" class="col999 line-through f24">专柜价{{bundle['goods_price']}}</text>
+                </view>
+              </view>
+              <image class="see_ensure_desc" style="right: 0;" src="../../image/back.png"></image>
+            </view>
+          </block>
+          <view class="handle_bar align_center mt20 mb20">
+            <view>
+              <view class="f24 col666">套装价格:
+                <text class="ft_bold f28 ml10 col333">¥{{item['bundling']['bl_price']}}</text>
+              </view>
+              <view class="f24 col666">单价直降:
+                <text class="f28 ml10 col333">¥{{item['bundling']['reduce_price']}}</text>
+              </view>
+            </view>
+            <view class="add_bundle_cart" catchtap="addBundleCart" data-blid="{{item['bundling']['bl_id']}}">加入购物车</view>
+          </view>
+        </view>
+      </view>
+    </block>
+  </block>
+
   <block wx:if="{{datas.comment}}">
     <view class="place-bac247"></view>
     <view class="comments_box">
@@ -87,10 +150,10 @@
           <view class="f24 col333 l_height34 mt20">规格:{{item.goods_spec}}</view>
           <view class="f24 col999 l_height34 mt10" wx:if="{{item['transform_addtime']}}">{{item['transform_addtime']}}</view>
           <view wx:if="{{item.images.length}}">
-              <image bindtap='showCarousel' mode="widthFix" data-images="{{item.images}}" data-current="{{imgIndex}}" class="content_img"
-                src="{{imgItem}}" wx:for-item="imgItem" wx:for="{{item.images}}" wx:for-index="imgIndex" wx:key="imgIndex"></image>
-            </view>
-            <view class="content" wx:if="{{item.explain}}">{{item.explain}}</view>
+            <image bindtap='showCarousel' mode="widthFix" data-images="{{item.images}}" data-current="{{imgIndex}}" class="content_img"
+              src="{{imgItem}}" wx:for-item="imgItem" wx:for="{{item.images}}" wx:for-index="imgIndex" wx:key="imgIndex"></image>
+          </view>
+          <view class="content" wx:if="{{item.explain}}">{{item.explain}}</view>
         </view>
         <view class="place-bacd9" wx:if="{{index < comments.length - 1}}"></view>
       </block>
@@ -177,13 +240,13 @@
 
   <!-- 评论图片弹窗 -->
   <commentsCarousel wx:if="{{show_carousel}}" bind:hideCarousel="hideCarousel" current="{{current}}" carouselImgs="{{carouselImgs}}">
-    </commentsCarousel>
-
-    <!-- 商品说明弹窗 -->
-    <view class="animation_popup {{isExplain ? 'show_popup' : ''}}" bindtap='isExplain_flag' data-flag="false"></view>
-    <view class="simple_explain {{isExplain ? 'show_animation' : ''}}">
-      <!-- view -->
-      <view class="close_explain" bindtap='isExplain_flag' data-flag="false"></view>
-      <image src="../../image/goods_explain.png" style="width: 100%" mode="widthFix"></image>
-    </view>
+  </commentsCarousel>
+
+  <!-- 商品说明弹窗 -->
+  <view class="animation_popup {{isExplain ? 'show_popup' : ''}}" bindtap='isExplain_flag' data-flag="false"></view>
+  <view class="simple_explain {{isExplain ? 'show_animation' : ''}}">
+    <!-- view -->
+    <view class="close_explain" bindtap='isExplain_flag' data-flag="false"></view>
+    <image src="../../image/goods_explain.png" style="width: 100%" mode="widthFix"></image>
+  </view>
 </view>

pages/details/details.wxss

@@ -1,5 +1,6 @@
 /* pages/details/details.wxss */
 @import "../../wxParse/wxParse.wxss";
+@import "../confirmOrder/confirmOrder.wxss";
 .comment_swiper {
   position: absolute;
   bottom: 90rpx;
@@ -738,3 +739,63 @@
   vertical-align: middle
 }
 
+.scroll-view_H{
+  white-space: nowrap;
+}
+.scroll-view-item_H{
+  display: inline-block;
+  vertical-align: middle;
+}
+.bundle_scroll_view {
+  width: 160rpx;
+}
+.scroll_place {
+  margin: 0 10rpx;
+  height: 160rpx;
+  line-height: 160rpx;
+  vertical-align: top;
+}
+.bundle_img {
+  width: 160rpx;
+  height: 160rpx;
+  border: 1rpx solid #d9d9d9;
+}
+.bundle_desc {
+  white-space: normal;
+  font-size: 20rpx;
+  line-height: 30rpx;
+  height: 60rpx;
+  overflow: hidden;
+}
+.transform_bundleList_wrapper {
+  width: 60rpx;
+  height: 60rpx;
+}
+.transform_bundleList {
+  margin-left: 44rpx;
+  width: 16rpx;
+  height: 30rpx;
+  transform: rotate(90deg);
+}
+.transform_bundleList.bundle_active {
+  transform: rotate(-90deg);
+}
+/* .default_place_flex {
+  -webkit-flex:1;
+  flex:1;
+} */
+
+.add_bundle_cart {
+  padding: 12rpx 44rpx;
+  margin-left: 50rpx;
+  background: #2b2b2b;
+  color: #fff;
+  font-weight: bold;
+  font-size: 30rpx;
+  border-radius: 6rpx;
+}
+.bundle_list_hide {
+  display: none;
+}
+
+

pages/shopCart/shopCart.wxml

@@ -1,11 +1,11 @@
-<view class='cell_box' wx:if="{{free_info.length}}">
+<!-- <view class='cell_box' wx:if="{{free_info.length}}">
   <block wx:for="{{free_info}}" wx:key="{{index}}">
     <view class='cell_item'>
       <text class='cell_item_title'>{{item.title}}</text>
       <text class='cell_item_value'>{{item.value}}</text>
     </view>
   </block>
-</view>
+</view> -->
 <view style='background:#fff;' wx:if="{{summary.length <= 0}}">
   <view class='flex_center'>
     <image style='width:200rpx;' mode='widthFix' src='../../image/empty_cart.png'></image>
@@ -14,16 +14,16 @@
     <text style='font-size:26rpx;color:#a1a1a1;'>您的购物车没有商品哦!</text>
   </view>
   <view class='flex_center'>
-    <button size='mini' bindtap='skip_index'  style='margin:20rpx 0;' type='warn'>去逛逛</button>
+    <button size='mini' bindtap='skip_index'  style='margin:20rpx 0;background: #2b2b2b;' type='warn'>去逛逛</button>
   </view>
 </view>
 <view class='cart_list'>
   <block wx:for="{{summary}}" wx:key="{{index}}">
     <view class='cart_item'>
-      <icon class='cancal_btn' type="cancel" size="22" color="#ff4e4e" bindtap='cancal_cart' data-goodsid="{{cart_list[index]['goods_id']}}" data-cartid="{{cart_list[index]['cart_id']}}"></icon>
+      <icon class='cancal_btn' type="cancel" size="22" color="#333" bindtap='cancal_cart' data-goodsid="{{cart_list[index]['goods_id']}}" data-cartid="{{cart_list[index]['cart_id']}}"></icon>
       <view class='check_btn' data-goodsid="{{cart_list[index]['goods_id']}}" bindtap='goods_checked'>
         <block wx:if="{{cart_list[index]['checked']}}">
-          <icon type="success" size="18" color="#ff4e4e"></icon>
+          <icon type="success" size="21" color="#333"></icon>
         </block>
         <block wx:else>
           <view class="icon_empty"></view>
@@ -33,11 +33,11 @@
         <image mode='scaleToFill' src="{{item.goods_image_url}}"></image>
       </view>
       <view class='goods_content'>
-        <view class='goods_name'>{{item.goods_mobile_name}}</view>
-        <view class='goods_spec'>{{item.goods_spec}}</view>
+        <view class='goods_name one_line_hidden'>{{item.goods_mobile_name}}</view>
+        <view class='goods_spec one_line_hidden'>{{item.goods_spec}}</view>
         <view class='goods_price'>
           <text class="bonus_price">￥{{item.bonus_price}}</text>
-          <text class="original_price">天猫价{{item.goods_price}}</text>
+          <text class="original_price">专柜价{{item.goods_price}}</text>
         </view>
         <view class='num_handle'>
           <text class='handle_btn' bindtap='goods_num_handle' data-goodsid="{{cart_list[index]['goods_id']}}" data-cartid="{{cart_list[index]['cart_id']}}" data-function='minus' data-num="{{cart_list[index]['goods_num']}}">-</text>
@@ -55,7 +55,7 @@
 <view class="handle_fixed">
   <view class="all_check_btn" bindtap='all_checked'>
     <block wx:if="{{all_checked}}">
-      <icon type="success" size="15" color="#ff4e4e" style='margin-right:22rpx;position:relative;top:7rpx;'></icon>
+      <icon type="success" size="21" color="#333" style='margin-right:22rpx;position:relative;top:7rpx;'></icon>
     </block>
     <block wx:else>
       <view class="icon_empty" style='position:relative;bottom:5rpx;'></view>

pages/shopCart/shopCart.wxss

@@ -62,11 +62,14 @@
 .all_check_btn {
   margin-left: 23rpx;
 }
+.goods_content {
+  max-width: 400rpx;
+}
 .icon_empty {
   display: inline-block;
-  width: 25rpx;
-  height: 25rpx;
-  border: 2rpx solid #eaeaea;
+  width: 42rpx;
+  height: 42rpx;
+  border: 1rpx solid #eaeaea;
   border-radius: 50rpx;
   vertical-align: middle;
   margin-right: 22rpx;
@@ -75,7 +78,7 @@
   width: 146rpx;
   font-size: 30rpx;
   color: #ffffff;
-  background: #ff4e4e;
+  background: #2b2b2b;
   text-align: center;
 }
 .original_price {
@@ -93,10 +96,13 @@
   background: #929292;
 }
 .bonus_price {
-  font-size: 26rpx;
-  color: #ff4e4e;
+  font-weight: bold;
+  font-size: 30rpx;
+  color: #333;
 }
 .original_price {
+  font-size: 24rpx;
+  color:#999;
   margin:0 10rpx; 
 }
 .cart_item {
@@ -110,12 +116,12 @@
 .goods_image image {
   width: 160rpx;
   height: 160rpx;
-  border: 2rpx solid #c7c7c7;
+  border: 1rpx solid #D9D9D9;
   vertical-align: middle;
-  margin-right: 17rpx;
+  margin-right: 22rpx;
 }
 .check_btn {
-  width: 72rpx;
+  width: 90rpx;
   text-align: center;
   display: flex;
   justify-content: center;
@@ -125,20 +131,26 @@
   margin-right: 0;
 }
 .goods_name {
-  font-size: 24rpx;
+  font-size: 30rpx;
+  color: #333;
+  font-weight: bold;
+  line-height: 42rpx;
 }
 .goods_spec{
-  font-size: 22rpx;
-  color: #929292;
-  margin-bottom: 48rpx;
+  font-size: 24rpx;
+  color: #666;
+  line-height: 34rpx;
+  margin: 6rpx 0 30rpx 0;
 }
 .num_handle {
   position: absolute;
-  bottom: 13rpx;
+  bottom: 20rpx;
   right: 10rpx;
+  /* border: 1px solid #CFCFCF; */
+  /* border-radius: 6rpx; */
 }
 .handle_btn {
-    color: #ff4e4e;
+    color: #999;
     display: inline-block;
     width: 60rpx;
     text-align: center;
@@ -149,6 +161,7 @@
     display: inline-block;
     width: 40rpx;
     text-align: center;
+    color: #333;
 }
 .clear_fixed {
   height: 88rpx;