Skip to content

M
mayi-mp-shop
Commit b57df15a by 程智春
Options

晒图组件

parent cbe75d49
Showing with 239 additions and 7 deletions
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{
......@@ -105,6 +136,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
......@@ -86,3 +86,60 @@
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.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;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment