详情页修改

config.js

@@ -1,6 +1,6 @@
 
-let api = "https://passport.lrlz.com/mobile/index.php";
-// let api = "http://a.lrlz.com/mobile/index.php";
+// let api = "https://passport.lrlz.com/mobile/index.php";
+let api = "http://a.lrlz.com/mobile/index.php";
 // let api = "http://121.43.114.153/mobile/index.php"
 // let api = "http://192.168.0.200/mobile/index.php";
 

pages/comments/comments.wxss

@@ -1,12 +1,6 @@
 /* pages/comments/comments.wxss */
 @import "../details/details.wxss";
-.content_img {
-  display: inline-block;
-  width: 116rpx;
-  margin-left: 24rpx;
-  margin-bottom: 24rpx;
-  vertical-align: middle
-}
+
 .scores {
   position: absolute;
   right: 0;

pages/details/details.js

@@ -19,6 +19,7 @@ Page({
     interval: 2000,
     duration: 500,
     animation_flag: false,
+    isExplain: false,
     sec_index: 0,
     goodsNumber: 1,
     cartOrBuy: '',
@@ -29,7 +30,9 @@ Page({
     activeStar: '../../image/star.png',
     halfStar: '../../image/half_star.png',
     starSrcs: [],
-    comments: []
+    comments: [],
+    current: 0,
+    carouselImgs: [],
   },
 
   /**
@@ -48,17 +51,17 @@ Page({
     }, 1000);
     
 
-    console.log(options.goods_id);
-    this.getDatas(options.goods_id)
+    // console.log(options.goods_id);
+    // this.getDatas(options.goods_id)
     // this.getDatas(7636)
-    // this.getDatas(4569) // a.lrlz.com 有多条评论
+    this.getDatas(4807) // a.lrlz.com 有多条评论
     var that = this;
     getReq({
       act: 'goods_common',
       op: 'detail',
-      goods_id: options.goods_id
+      // goods_id: options.goods_id
       // goods_id: 7636
-      // goods_id: 4569
+      goods_id: 4807
     }, function(res) {
       var str = res.split(/<[\/]?body>/gi)[1];
        WxParse.wxParse('article', 'html', str, that);
@@ -231,7 +234,14 @@ Page({
     let animation_flag = flag == 'true' ? true : false
     this.setData({
       animation_flag,
-      cartOrBuy
+      cartOrBuy,
+    })
+  },
+  isExplain_flag(e) {
+    let flag = e.currentTarget.dataset.flag
+    let isExplain = flag == 'true' ? true : false
+    this.setData({
+      isExplain
     })
   },
   getgift(sumarys, goods_id) {
@@ -287,7 +297,7 @@ Page({
       }
       return item
     })
-    console.log(comments);
+    // console.log(comments);
     this.setData({
       comments
     })
@@ -298,6 +308,20 @@ Page({
     });
     return;
   },
+  showCarousel(e) {
+    let carouselImgs = e.currentTarget.dataset.images
+    let current = e.currentTarget.dataset.current
+    this.setData({
+      show_carousel: true,
+      carouselImgs,
+      current
+    })
+  },
+  hideCarousel() {
+    this.setData({
+      show_carousel: false
+    })
+  },
 
   /**
    * 生命周期函数--监听页面初次渲染完成

pages/details/details.json

@@ -1,3 +1,6 @@
 {
-  "navigationBarTitleText": "商品详情"
+  "navigationBarTitleText": "商品详情",
+  "usingComponents": {
+    "commentsCarousel": "../components/blocks/commentsCarousel/commentsCarousel"
+  }
 }

pages/details/details.wxml

@@ -10,16 +10,8 @@
         </swiper-item>
       </block>
     </swiper>
-    <!-- <view class="comment_swiper" wx:if="{{datas.comment.content}}">
-      <navigator class="f0" url="/pages/comments/comments?common_id={{datas.comment.common_id}}">
-        <image src="{{datas.comment.member_avatar}}"></image>
-         <text class="comment_content one_line_hidden" decode="{{true}}">&nbsp;&nbsp;{{datas.comment.nickname}}:{{datas.comment.content}}</text> 
-      </navigator>
-    </view>
-    <view class="details_collection flex_center">已收藏人数 {{getOneSummary.goods_collect}}</view> -->
   </view>
   <view class="place-bacd9"></view>
-  <!-- <text decode="{{true}}">￥{{getOneSummary['act_type'] == 0?getOneSummary.bonus_price:getOneSummary['goods_promotion_price']}}&nbsp;&nbsp;</text> -->
   <view class="n_goods_content">
     <view class="n_price_content align_center">
       <!-- <text class="f24 col333" wx:if="{{getOneSummary['act_type'] == 0}}">红包价：</text> -->
@@ -35,7 +27,7 @@
 
   <view class="place-bacd9"></view>
 
-  <view class="ensure_desc">
+  <view class="ensure_desc" bindtap='isExplain_flag' data-flag="true">
     <view class="stamps_list">
       <view class="n_stamps_item" wx:if="{{getOneSummary.brand_country_logo}}">
         <image class="stamp_pic" src="{{getOneSummary.brand_country_logo}}"></image>
@@ -57,59 +49,10 @@
   </view>
   <view class="place-bac247"></view>
 
-  <!-- <view class="goods_content">
-    <view class="padLR30">
-      <view class="one_line_hidden goods_name_title">{{getOneSummary.goods_mobile_name}}</view>
-      <view class="one_line_hidden col333 f28">{{getOneSummary.goods_jingle}}</view>
-    </view>
-    <view class="bonus_price flex_center">
-      <text decode="{{true}}">￥{{getOneSummary['act_type'] == 0?getOneSummary.bonus_price:getOneSummary['goods_promotion_price']}}&nbsp;&nbsp;</text>
-      <text class="goods_price" decode="{{true}}">天猫价&nbsp;{{getOneSummary.goods_price}}</text>
-    </view>
-
-    <view class="goods_desc">
-      <text wx:if="{{getOneSummary['act_type'] == 0}}" decode="{{true}}">红包抵{{getOneSummary.differencePrice}}元&nbsp;/</text>
-      <text decode="{{true}}">已售{{getOneSummary.goods_salenum}}件&nbsp;/&nbsp;库存{{getOneSummary.goods_storage}}件</text>
-    </view>
-  </view> -->
-
-  <!-- <view wx:if="{{getOneSummary['act_type'] == 0}}" class="congratulation_text one_line_hidden">{{getOneSummary.gap_desc}}</view> -->
-  <!-- <navigator url="/pages/special/special?title=F码专区&special_id=905" wx:if="{{getOneSummary['is_fcode']}}">
-    <view class="congratulation_text one_line_hidden colef524d">F码购买
-      <view class="tospecial">去看看 ></view>
-    </view>
-  </navigator>
-  <view class="details_stamps">
-    <view class="stamps_item">
-      <image class="goods_logo" src="{{getOneSummary.brand_country_logo}}"></image>
-      {{getOneSummary.brand_country}}品牌
-    </view>
-    <view class="stamps_item">
-      <image class="goods_logo" src="../../image/small_logo.png"></image>
-      熊猫美妆自营
-    </view>
-    <view class="stamps_item">
-      <image class="goods_logo" src="../../image/authorize_icon.png"></image>
-      {{getOneSummary.brand_author_desc}}
-    </view>
-    <view class="stamps_item">
-      <image class="goods_logo" src="../../image/seven_icon.png"></image>
-      7天无理由退货
-    </view>
-  </view>
-
-  <view class="place-bac247"></view> -->
-  <!-- <view>{{countTime}}</view> -->
-  <!-- <navigator url="/pages/special/special?title=N元任选&special_id=869&is_special=true" wx:if="{{getOneSummary.is_opgoods}}">
-    <view class="congratulation_text one_line_hidden">{{getOneSummary.opgoods_desc}}
-      <view class="tospecial">去看看 ></view>
-    </view>
-  </navigator> -->
   <block wx:if="{{datas.comment}}">
     <view class="comments_box">
       <view class="comments_header">
         -商品评价-
-        <!-- <navigator url="/pages/comments/comments?common_id={{datas.comment.common_id}}"></navigator> -->
         <view class="all_comments" catchtap="allComments">
           查看全部
           <image class="all_comments_icon" src="../../image/back.png"></image>
@@ -137,7 +80,13 @@
             </view>
           </view>
           <view class="f24 col333 l_height34 mt20">{{item.content}}</view>
+          <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>
         </view>
         <view class="place-bacd9" wx:if="{{index < comments.length - 1}}"></view>
       </block>
@@ -150,10 +99,7 @@
     <template is="wxParse" data="{{wxParseData:article.nodes}}" />
   </view>
 
-
-  <!-- <view class="see_more_details" bindtap="toWebView">查看更多详情</view> -->
   <view class="place_details_tabbar"></view>
-
   <view class="details_tabbar">
     <navigator class="details_tabbar_item right_line" url="/pages/index/index" open-type="switchTab">
       <view class="tabbar_icon_wrap flex_center">
@@ -189,9 +135,9 @@
       <view class="flexbox_item">
         <view class="simple_goods_price">
           <text decode="{{true}}">￥{{getOneSummary['act_type'] !== 1?getOneSummary.bonus_price:datas['groupbuy'][0]['promotion_price']}}&nbsp;&nbsp;</text>
-          <text class="goods_original_price">{{getOneSummary.goods_price}}</text>
+          <text class="goods_original_price line-through">{{getOneSummary.goods_price}}</text>
         </view>
-        <view class="f24">已售{{getOneSummary.goods_salenum}}件/库存{{getOneSummary.goods_storage}}件</view>
+        <view class="f24">库存{{getOneSummary.goods_storage}}件</view>
         <block wx:if="{{getgift}}">
           <navigator url="/pages/details/details?goods_id={{item.gifts.gift_goods_id}}" wx:for="{{getgift}}" wx:index="giftindex" wx:key="giftindex">
             <view class="gifts_wrap one_line_hidden">
@@ -222,4 +168,16 @@
     <view class="close_btn" bindtap='animation_flag' data-flag="false"></view>
     <view class="simple_goods_buy" bindtap="checkSubmit">确定</view>
   </view>
+
+  <!-- 评论图片弹窗 -->
+  <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>
 </view>

pages/details/details.wxss

@@ -421,13 +421,12 @@
   flex: 3 1 0%;
 }
 
-.simple_shopcart {
+.simple_shopcart, .simple_explain {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 502;
-  height: 800rpx;
   font-size: 34rpx;
   background: #fff;
   -webkit-transition: all 0.3s;
@@ -435,6 +434,13 @@
   -webkit-transform: translateY(110%);
   transform: translateY(110%);
 }
+.simple_shopcart {
+  height: 800rpx;
+}
+.simple_explain {
+  height: 900rpx;
+  overflow: hidden;
+}
 
 .show_animation {
   -webkit-transform: translateY(0);
@@ -528,7 +534,7 @@
 }
 
 .sec_content_btn.sec_active {
-  background: #f74d49;
+  background: #2b2b2b;
   color: #fff;
   border: 1rpx solid #fff;
 }
@@ -553,7 +559,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  background: #eb4e4f;
+  background: #2b2b2b;
   color: #fff;
   border: none;
   text-align: center;
@@ -562,15 +568,20 @@
   font-size: 30rpx;
 }
 
-.close_btn {
+.close_btn,.close_explain {
   position: absolute;
   right: 0;
   top: 0;
   padding: 15rpx;
+}
+.close_btn {
   width: 40rpx;
   height: 40rpx;
 }
-
+.close_explain {
+  width: 100rpx;
+  height: 100rpx;
+}
 .close_btn::before, .close_btn::after {
   content: '';
   position: absolute;
@@ -578,7 +589,7 @@
   top: 50%;
   left: 15rpx;
   right: 15rpx;
-  background: #eb4e4f;
+  background: #2b2b2b;
 }
 
 .close_btn::before {
@@ -601,7 +612,7 @@
 }
 
 .gift_tag {
-  background: #eb4e4f;
+  background: #2b2b2b;
   border-radius: 4rpx;
   padding: 2rpx;
   color: #fff;
@@ -705,4 +716,10 @@
 .stamp_pic.zg {
   width: 35rpx;
 }
+.content_img {
+  display: inline-block;
+  width: 116rpx;
+  margin: 24rpx 24rpx 24rpx 0;
+  vertical-align: middle
+}
 

wxParse/wxParse.wxss

@@ -9,7 +9,9 @@
  * for: 微信小程序富文本解析
  * detail : http://weappdev.com/t/wxparse-alpha0-1-html-markdown/184
  */
-
+.wxParse-p {
+  overflow-x: hidden;
+}
 .wxParse{
     margin: 0 5px;
     font-family: Helvetica,sans-serif;
@@ -26,7 +28,7 @@ view{
     padding: 0;
 }
 /*//标题 */
-.wxParse-div{margin: 0;padding: 0;}
+.wxParse-div{margin: 0;padding: 0;overflow-x: hidden}
 .wxParse-h1{ font-size:2em; margin: .67em 0 }
 .wxParse-h2{ font-size:1.5em; margin: .75em 0 }
 .wxParse-h3{ font-size:1.17em; margin: .83em 0 }