晒图组件

src/api/index.js

@@ -27,6 +27,9 @@ console.log(process.env,'-----------------config------')
     },
     queryBuyingShowList(data){
         return requestPOST(`${process.env.OLSHOP_URL}/activityInfo/buyingShow/queryBuyingShowList`, data);
+    },
+    addBuyingShowPraise(data){
+        return requestPOST(`${process.env.OLSHOP_URL}/activityInfo/buyingShow/addBuyingShowPraise/${data.buyingShowId}`);
     }
  }
  
\ No newline at end of file

src/utils/index.js

@@ -47,9 +47,9 @@ export function getQueryVariable(query,variable) {
 
 //补全图片路径
 export function DFSImg(path, w, h,type=0) { //
-  // if (path == null || path == '') {
-  //   return require('~/static/images/noImg.png');
-  // }
+  if (path == null || path == '') {
+    return 'https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/product/8ezKQbm2x3.png';
+  }
   let baseImg = process.env.IMG_DOMAIN ;
   if (!Array.isArray(baseImg) && (baseImg.indexOf('aliyun') >= 0 || baseImg.indexOf('cdn') >= 0 )) {
     var style = '';

static/nativeComponents/SharePicture/index.js

@@ -21,6 +21,16 @@ Component({
     loaded : true,
     pageNum : 1,
     tabId : 1,
+    iconStyleList: [
+      {
+        name: "common-iconqinziAPPtubiao-",
+        value: 0,
+        toggle: "common-icondianzan"
+      },
+      { name: "common-iconaixin1", value: 1, toggle: "common-iconaixin" }
+    ],
+    praiseState : false,
+    getListFinish : false
   },
   ready(){
     this.queryBuyingShowList(0);
@@ -37,7 +47,8 @@ Component({
       if(this.data.tabIndex != index){
         this.setData({
           tabIndex: index,
-          tabId: item.id
+          tabId: item.id,
+          getListFinish :false
         })
         this.queryBuyingShowList(0)
       }
@@ -79,11 +90,31 @@ Component({
         })
         if(res.data.code == '200'){
           let data = res.data.data
-          let { waterfallLeftList, waterfallRightList} = this.data
+
+          if(res.data.pages <= res.data.current){
+            this.setData({
+              getListFinish : true
+            })
+          }
           if(type == 0){
+
+            this.setData({
+              waterfallLeftList : [],
+              waterfallRightList:[]
+            })
+
+            let { waterfallLeftList, waterfallRightList } = this.data
+
             data.forEach((item,index) => {
               item.customerHandImage = app.DFSImg(item.customerHandImage)
               item.checkMP4Status = this.checkMP4(item.urls)
+              item.custname = this.clientInfoName(item)
+              if (item.praiseFlag == 'false'){
+                item.nameIcon = this.data.iconStyleList[this.data.datas.componentData['iconStyle']].name
+              }else{
+                item.nameIcon = this.data.iconStyleList[this.data.datas.componentData['iconStyle']].toggle
+              }
+              
               if (this.getFileType(item.urls[0]) == 'video'){
                 item.coverImg = app.DFSImg(`${item.urls[0]}?x-oss-process=video/snapshot,t_1,m_fast`)
               }else{
@@ -104,6 +135,35 @@ Component({
 
             console.log(this.data.waterfallLeftList, this.data.waterfallRightList,' this.data.waterfallRightList')
           }else{
+            
+            let { waterfallLeftList, waterfallRightList } = this.data
+            data.forEach((item, index) => {
+              item.customerHandImage = app.DFSImg(item.customerHandImage)
+              item.checkMP4Status = this.checkMP4(item.urls)
+              item.custname = this.clientInfoName(item)
+              if (item.praiseFlag == 'false') {
+                item.nameIcon = this.data.iconStyleList[this.data.datas.componentData['iconStyle']].name
+              } else {
+                item.nameIcon = this.data.iconStyleList[this.data.datas.componentData['iconStyle']].toggle
+              }
+
+              if (this.getFileType(item.urls[0]) == 'video') {
+                item.coverImg = app.DFSImg(`${item.urls[0]}?x-oss-process=video/snapshot,t_1,m_fast`)
+              } else {
+                item.coverImg = app.DFSImg(item.urls[0], 400, null, 1)
+              }
+
+              if (index % 2 == 0) {
+                waterfallLeftList.push(item)
+              } else {
+                waterfallRightList.push(item)
+              }
+            })
+
+            this.setData({
+              waterfallLeftList,
+              waterfallRightList
+            })
 
           }
         }
@@ -152,5 +212,87 @@ Component({
         }
       }
     },
+    clientInfoName(item){
+      if (item.customerName.length > 0 || item.customerNickname.length > 0) {
+        if (this.data.datas.componentData["clientInfoEncryption"]) {
+          return this.noPassByName(item.customerName || item.customerNickname);
+        } else {
+          return item.customerName || item.customerNickname;
+        }
+      } else {
+        if (this.data.datas.componentData["clientInfoEncryption"]) {
+          return "****";
+        } else {
+          return "匿名用户";
+        }
+      }
+    },
+    noPassByName(str) {
+      if (null != str && str != undefined) {
+        if (str.length <= 3) {
+          return str.substring(0, 1) + "****";
+        } else {
+          return `${str.substr(0, 1)}****${str.charAt(str.length - 1)}`;
+        }
+      } else {
+        return "****";
+      }
+    },
+    addBuyingShowPraise(e){
+      let item = e.currentTarget.dataset.item
+      let index = e.currentTarget.dataset.index
+      let type = e.currentTarget.dataset.type
+
+      let list = type == 'left' ? 'waterfallLeftList' : 'waterfallRightList'
+      if (this.data.praiseState) return;
+      this.setData({
+        praiseState : true
+      })
+      let query = {
+        buyingShowId: item.id
+      };
+      indexApi.addBuyingShowPraise(query).then(res => {
+        this.setData({
+          praiseState : false
+        })
+        if(res.data.code == '200'){
+          if(res.data.data == 'true'){
+            let praiseFlag = `${list}[${index}].praiseFlag`
+            let praisePoints = `${list}[${index}].praisePoints`
+            this.setData({
+              [praiseFlag] : 'true',
+              [praisePoints]: Number(this.data[list][index].praisePoints )+ 1
+            })
+
+          }else if(res.data.data == 'false'){
+
+            let praiseFlag = `${list}[${index}].praiseFlag`
+            let praisePoints = `${list}[${index}].praisePoints`
+            this.setData({
+              [praiseFlag]: 'false',
+              [praisePoints]: Number(this.data[list][index].praisePoints) - 1
+            })
+
+          }
+        }
+      })
+      .catch(err => {
+        this.setData({
+          praiseState: false
+        })
+      })
+
+    },
+    buyingShowHandle(e){
+      let id = e.currentTarget.dataset.id
+      console.log(id)
+      app.$themeToLink({
+        type: 1,
+        link: '/buyerShow/showDetail?buyingShowId=' + id
+      })
+    },
+    viewMore(){
+      this.queryBuyingShowList(1);
+    }
   }
 })

static/nativeComponents/SharePicture/index.wxml

@@ -8,7 +8,7 @@
 
   <view class="waterfall-wrap">
     <view class="waterfall-l" style="padding-right:{{datas.componentData.proGap}}rpx">
-      <view class="item" wx:for="{{waterfallLeftList}}" wx:key="index" style="border-width:{{datas.componentData['borderColorShow'] ? '1px' : ''}};border-style:{{datas.componentData['borderColorShow'] ? 'solid' : ''}};border-color:{{datas.componentData['borderColorShow'] ? datas.componentData['borderColor'] : ''}}">
+      <view class="item" wx:for="{{waterfallLeftList}}" wx:key="index" style="border-width:{{datas.componentData['borderColorShow'] ? '1px' : ''}};border-style:{{datas.componentData['borderColorShow'] ? 'solid' : ''}};border-color:{{datas.componentData['borderColorShow'] ? datas.componentData['borderColor'] : ''}}" bindtap="buyingShowHandle" data-id="{{item.id}}">
         <view class="img-wrap">
           <image src="{{item.coverImg}}" mode="widthFix"></image>
           <i class="iconfont-common common-iconbofang2 icon{{datas.componentData['playBtnPosition']}}" wx:if="{{item.checkMP4Status}}"></i>
@@ -17,11 +17,22 @@
           <view class="title" wx:if="{{datas.componentData['textContentShow']}}" style="color:{{datas.componentData['textContentColor']}};font-weight:{{datas.componentData['textContentFontWeight']}};font-size:{{datas.componentData['textContentFontSize'] * 20}}rpx">
             {{item.commentContent}}
           </view>
+          <view class="bottom">
+              <view class="user">
+                <image src="{{item.customerHandImage}}" wx:if="{{datas.componentData['clientInfoShow']}}" class="icon"></image>
+                <text class="name" wx:if="{{datas.componentData['clientInfoShow']}}">{{item.custname}}</text>
+              </view>
+              <view class="like" catchtap="addBuyingShowPraise" data-item="{{item}}" data-index="{{index}}" data-type="left">
+                <i wx:if="{{item.praiseFlag=='false'}}" class="iconfont-common {{item.nameIcon}}"></i>
+                <i wx:else class="like-icon iconfont-common {{item.nameIcon}}"></i>
+                <text class="amount">{{item.praisePoints}}</text>
+              </view>
+          </view>
         </view>
       </view>
     </view>
     <view class="waterfall-r" style="padding-left:{{datas.componentData.proGap}}rpx">
-      <view class="item" wx:for="{{waterfallRightList}}" wx:key="index" style="border-width:{{datas.componentData['borderColorShow'] ? '1px' : ''}};border-style:{{datas.componentData['borderColorShow'] ? 'solid' : ''}};border-color:{{datas.componentData['borderColorShow'] ? datas.componentData['borderColor'] : ''}}">
+      <view class="item" wx:for="{{waterfallRightList}}" wx:key="index" style="border-width:{{datas.componentData['borderColorShow'] ? '1px' : ''}};border-style:{{datas.componentData['borderColorShow'] ? 'solid' : ''}};border-color:{{datas.componentData['borderColorShow'] ? datas.componentData['borderColor'] : ''}}" bindtap="buyingShowHandle" data-id="{{item.id}}">
         <view class="img-wrap">
           <image src="{{item.coverImg}}" mode="widthFix"></image>
           <i class="iconfont-common common-iconbofang2 icon{{datas.componentData['playBtnPosition']}}" wx:if="{{item.checkMP4Status}}"></i>
@@ -30,8 +41,25 @@
           <view class="title" wx:if="{{datas.componentData['textContentShow']}}" style="color:{{datas.componentData['textContentColor']}};font-weight:{{datas.componentData['textContentFontWeight']}};font-size:{{datas.componentData['textContentFontSize'] * 20}}rpx">
             {{item.commentContent}}
           </view>
+          <view class="bottom">
+              <view class="user">
+                <image src="{{item.customerHandImage}}" wx:if="{{datas.componentData['clientInfoShow']}}" class="icon"></image>
+                <text class="name" wx:if="{{datas.componentData['clientInfoShow']}}">{{item.custname}}</text>
+              </view>
+              <view class="like" catchtap="addBuyingShowPraise" data-item="{{item}}" data-index="{{index}}" data-type="right">
+                <i wx:if="{{item.praiseFlag=='false'}}" class="iconfont-common {{item.nameIcon}}"></i>
+                <i wx:else class="like-icon iconfont-common {{item.nameIcon}}"></i>
+                <text class="amount">{{item.praisePoints}}</text>
+              </view>
+          </view>
+
         </view>
       </view>
     </view>
   </view>
+
+
+  <view class="more" wx:if="{{datas.componentData['moreShow'] && !getListFinish}}">
+    <text bindtap="viewMore">{{loaded?'查看更多':'加载中'}}</text>
+  </view>
 </view>
\ No newline at end of file

static/nativeComponents/SharePicture/index.wxss

@@ -85,4 +85,61 @@
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
-    }
+    }
\ No newline at end of file
+
+    .bottom{
+      display: flex;
+      justify-content: space-between;
+      margin-top: 28rpx;
+      height: 52rpx;
+      color: rgba(153, 153, 153, 1);
+    }
+    .bottom .user{
+      display: flex;
+      align-items: center;
+      width: 70%;
+    }
+    .bottom .user .icon{
+      width: 52rpx;
+      height: 52rpx;
+      border-radius: 50%;
+      overflow: hidden;
+      object-fit: cover;
+    }
+    .bottom .user .name{
+      font-size: 24rpx;
+      margin-left: 10rpx;
+      width: 60%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .bottom .like{
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      width: 30%;
+    }
+    .bottom .like i{
+      font-size: 36rpx;
+    }
+    .bottom .like .like-icon{
+      color: var(--main-color);
+    }
+    .bottom .like .amount {
+      font-size: 24rpx;
+      margin-left: 10rpx;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      text-align: center;
+    }
+
+  .more {
+    text-align: center;
+     margin-top: 20rpx;
+  }
+  .more text{
+    font-size: 26rpx;
+   
+  }