Bladeren bron

Merge branch 'master' of https://gitee.com/huangg/panda_beauty_makeup_small_program

* 'master' of https://gitee.com/huangg/panda_beauty_makeup_small_program:
  评论轮播
huanggang 7 jaren geleden
bovenliggende
commit
4d52070aae

+ 3 - 2
app.wxss

@@ -19,7 +19,6 @@ body {
   align-items: center;
   justify-content: center;
 }
-
 .abs_img {
   position: absolute;
   width: 100%;
@@ -42,7 +41,9 @@ body {
   padding-left: 30px;
   padding-right: 30px;
 }
-
+.f0 {
+  font-size: 0;
+}
 .f24 {
   font-size: 24rpx;
 }

+ 16 - 2
pages/comments/comments.js

@@ -10,7 +10,9 @@ Page({
     hasmore: '',
     curpage: 1,
     common_id: '',
-    addtimes: []
+    addtimes: [],
+    show_carousel: false,
+    carouselImgs: []
   },
 
   /**
@@ -30,7 +32,7 @@ Page({
     getReq({
       act: 'goods_common',
       op: 'comments',
-      goods_commonid: 3398,
+      goods_commonid: common_id,
       curpage,
       page: 10
     }, function (res) {
@@ -61,6 +63,18 @@ Page({
       addtimes: this.data.addtimes.concat(arr)
     })
   },
+  showCarousel(e) {
+    let carouselImgs = e.currentTarget.dataset.images
+    this.setData({
+      show_carousel: true,
+      carouselImgs
+    })
+  },
+  hideCarousel() {
+    this.setData({
+      show_carousel: false
+    })
+  },
   /**
    * 生命周期函数--监听页面初次渲染完成
    */

+ 5 - 1
pages/comments/comments.json

@@ -1 +1,5 @@
-{}
+{
+  "usingComponents": {
+    "commentsCarousel": "../components/blocks/commentsCarousel/commentsCarousel"
+  }
+}

+ 13 - 10
pages/comments/comments.wxml

@@ -1,23 +1,26 @@
 <!--pages/comments/comments.wxml-->
 <view>
+  <view wx:if="{{show_carousel}}" style="position:fixed;z-index:99;left: 0;right: 0;top: 0;">123456</view>
   <view class="comment comment-1px-b" wx:for="{{comments}}" wx:for-index="index" wx:key="index">
     <view class="user">
       <view class="member_avatar f_left">
-         <image src="{{item.member_avatar}}">
-        </image> 
+        <image src="{{item.member_avatar}}">
+        </image>
       </view>
       <view class="f28 f_left">{{item.nickname}}</view>
-       <view class="scores f_right">
-         <view class="flex-stars">
-          <image wx:for="{{item.scores}}" wx:for-index="idx" wx:key="idx" class="star" src="../../../../image/star.png"></image>
-        </view> 
-         <view class="comment_time">{{addtimes[index]}}</view> 
-      </view> 
+      <view class="scores f_right">
+        <view class="flex-stars">
+          <image wx:for="{{item.scores}}" wx:for-index="idx" wx:key="idx" class="star" src="../../image/star.png"></image>
+        </view>
+        <view class="comment_time">{{addtimes[index]}}</view>
+      </view>
     </view>
     <view class="spec">规格:{{item.goods_spec}}</view>
     <view class="content">{{item.content}}</view>
     <view wx:if="{{item.images.length}}">
-      <image class="content_img" mode="widthFix" src="{{item}}" wx:for="{{item.images}}" wx:for-index="imgIndex" wx:key="imgIndex"></image>
+      <image bindtap='showCarousel' data-images="{{item.images}}" 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>
+  <commentsCarousel wx:if="{{show_carousel}}" bind:hideCarousel="hideCarousel" carouselImgs="{{carouselImgs}}"> </commentsCarousel>
+</view>

+ 31 - 0
pages/components/blocks/commentsCarousel/commentsCarousel.js

@@ -0,0 +1,31 @@
+// pages/components/blocks/commentsCarousel/commentsCarousel.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    carouselImgs: {
+      type: Array
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    indicatorDots: false,
+    vertical: false,
+    autoplay: false,
+    interval: 2000,
+    duration: 500,
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    hideCarousel() {
+      this.triggerEvent('hideCarousel')
+    }
+  }
+})

+ 4 - 0
pages/components/blocks/commentsCarousel/commentsCarousel.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

+ 10 - 0
pages/components/blocks/commentsCarousel/commentsCarousel.wxml

@@ -0,0 +1,10 @@
+<!--pages/components/blocks/commentsCarousel/commentsCarousel.wxml-->
+ <view class="carousel_container">
+  <swiper class="comments_swiper" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
+    <block wx:for="{{carouselImgs}}" wx:key="*this">
+      <swiper-item class="flex_center;">
+        <image bindtap="hideCarousel" src="{{item}}" class="slide-image" mode="widthFix" style="width: 100%;" />
+      </swiper-item>
+    </block>
+  </swiper>
+</view> 

+ 29 - 0
pages/components/blocks/commentsCarousel/commentsCarousel.wxss

@@ -0,0 +1,29 @@
+/* pages/components/blocks/commentsCarousel/commentsCarousel.wxss */
+
+.carousel_container {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 99;
+  background: #000;
+}
+
+.comments_swiper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.comments_swiper swiper-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.comments_swiper image {
+  max-width: 100%;
+  max-height: 100%;
+  display: block;
+}

+ 1 - 0
pages/details/details.js

@@ -27,6 +27,7 @@ Page({
       webViewUrl
     })
     this.getDatas(options.goods_id)
+    // this.getDatas(6143)
   },
   getDatas(goods_id) {
     var self = this

+ 11 - 11
pages/details/details.wxml

@@ -8,14 +8,14 @@
         </swiper-item>
       </block>
     </swiper>
-    <view class="comment_swiper">
-      <navigator>
-        <image src="{{datas.comment.member_avatar}}"></image>
-        <text class="nickname" decode="{{true}}">&nbsp;&nbsp;{{datas.comment.nickname}}:</text>
-        <text class="comment_content one_line_hidden">{{datas.comment.content}}</text>
-      </navigator>
+    <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="nickname" decode="{{true}}">&nbsp;&nbsp;{{datas.comment.nickname}}:</text>
+          <text class="comment_content one_line_hidden">{{datas.comment.content}}</text>
+        </navigator>
     </view>
-    <view class="details_collection">已收藏人数 {{getOneSummary.goods_collect}}</view>
+    <view class="details_collection flex_center">已收藏人数 {{getOneSummary.goods_collect}}</view>
   </view>
 
   <view class="goods_content">
@@ -29,7 +29,7 @@
     </view>
 
     <view class="goods_desc">
-      <text wx:if="{{getOneSummary['act_type'] == 0}}" decode="{{true}}">红包抵{{getOneSummary.goods_price - getOneSummary.bonus_price}}元&nbsp;/</text>
+      <text wx:if="{{getOneSummary['act_type'] == 0}}" decode="{{true}}">红包抵{{(getOneSummary.goods_price*100 - getOneSummary.bonus_price*100) / 100}}元&nbsp;/</text>
       <text decode="{{true}}">已售{{getOneSummary.goods_salenum}}件&nbsp;/&nbsp;库存{{getOneSummary.goods_storage}}件</text>
     </view>
   </view>
@@ -61,8 +61,8 @@
       <text class="colef524d">({{datas.common_info.comments}})</text>
     </view>
     <navigator url="/pages/comments/comments?common_id={{datas.comment.common_id}}">
-         <view class="f24">查看全部评论 > </view>
-      </navigator>
+      <view class="f24">查看全部评论 > </view>
+    </navigator>
   </view>
 
   <view class="comment">
@@ -73,7 +73,7 @@
       </view>
       <view class="f28 f_left">{{datas.comment.nickname}}</view>
       <view class="scores f_right">
-        <view>
+        <view class="flex-stars">
           <image class="star" src="../../image/star.png" wx:for="{{datas.comment.scores}}" wx:key="*this"></image>
         </view>
         <view class="comment_time">{{datas.comment.comment_time}}</view>

+ 8 - 3
pages/details/details.wxss

@@ -20,11 +20,17 @@
 
 .comment_content {
   max-width: 220rpx;
+  font-size: 24rpx;
+  height: 40rpx;
+  line-height:40rpx;
   display: inline-block;
   vertical-align: middle;
 }
 
 .nickname {
+  height: 40rpx;
+  line-height:40rpx;
+  font-size: 24rpx;
   display: inline-block;
   vertical-align: middle;
 }
@@ -98,7 +104,7 @@
   font-size: 24rpx;
 }
 
-.congratulation_text::after {
+ .congratulation_text::after {
   content: " ";
   position: absolute;
   left: 0;
@@ -111,7 +117,7 @@
   transform-origin: 0 100%;
   -webkit-transform: scaleY(0.5);
   transform: scaleY(0.5);
-}
+} 
 
 .details_stamps {
   /* height: 166rpx; */
@@ -162,7 +168,6 @@
   bottom: 0;
   right: 0;
   left: 0;
-  width: 726px;
   height: 1px;
   border-bottom: 1px solid #c7c7c7;
   color: #c7c7c7;