Skip to content

M
mayi-mp-shop
Commit 9f433a9c by 程智春
Options

晒图

parent 548132d0
Showing with 297 additions and 1 deletions
src/api/index.js
......@@ -24,6 +24,9 @@ console.log(process.env,'-----------------config------')
},
getLiveCon(data){
return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getPageListByIds`, data);
},
queryBuyingShowList(data){
return requestPOST(`${process.env.OLSHOP_URL}/activityInfo/buyingShow/queryBuyingShowList`, data);
}
}
\ No newline at end of file
src/pages/home/index.vue
......@@ -72,6 +72,9 @@
<div v-if="item.componentCode == 'live-broadcast' && item.componentInfo.visible == 1">
<live-broadcast :datas="item"></live-broadcast>
</div>
<div v-if="item.componentCode == 'share-picture' && item.componentInfo.visible == 1">
<share-picture :datas="item"></share-picture>
</div>
</div>
<bottomCont></bottomCont>
......
src/pages/home/main.json
......@@ -15,7 +15,8 @@
"speedy-nav":"/static/nativeComponents/SpeedyNav/index",
"video-player":"/static/nativeComponents/VideoPlayer/index",
"photo-gallery":"/static/nativeComponents/PhotoGallery/index",
"live-broadcast":"/static/nativeComponents/LiveBroadcast/index"
"live-broadcast":"/static/nativeComponents/LiveBroadcast/index",
"share-picture":"/static/nativeComponents/SharePicture/index"
},
"enablePullDownRefresh":true,
"backgroundColor":"#f5f5f5"
......
static/nativeComponents/SharePicture/index.js 0 → 100644
// static/nativeComponents/SharePicture/index.js
const app = getApp()
const { indexApi } = app;
Component({
/**
* 组件的属性列表
*/
properties: {
datas: {
type: Object
}
},
/**
* 组件的初始数据
*/
data: {
tabIndex : 0,
waterfallLeftList:[],
waterfallRightList:[],
loaded : true,
pageNum : 1,
tabId : 1,
},
ready(){
this.queryBuyingShowList(0);
},
/**
* 组件的方法列表
*/
methods: {
tabHandle(e){
let index = e.currentTarget.dataset.index
let item = e.currentTarget.dataset.item
console.log(index, item, this.data.tabIndex)
if(this.data.tabIndex != index){
this.setData({
tabIndex: index,
tabId: item.id
})
this.queryBuyingShowList(0)
}
},
queryBuyingShowList(type){
if (this.data.datas.componentData["activityFlag"][0]["id"] == "" || !this.data.loaded){
return;
}
this.setData({
loaded : false
})
if(type == 0){
this.setData({
pageNum : 1
})
}else{
this.setData({
pageNum : this.data.pageNum + 1
})
}
let query = {
activityId: this.data.datas.componentData.activityFlag[0].id || 4,
sortType: this.data.tabId,
pageNum: this.data.pageNum,
startTime: Array.isArray(this.data.datas.componentData.publishTime)
? this.data.datas.componentData.publishTime[0]
: "",
endTime: Array.isArray(this.data.datas.componentData.publishTime)
? this.data.datas.componentData.publishTime[1]
: "",
pageSize: +this.data.datas.componentData["quantity"]
}
indexApi.queryBuyingShowList(query).then(res => {
this.setData({
loaded :true
})
if(res.data.code == '200'){
let data = res.data.data
let { waterfallLeftList, waterfallRightList} = this.data
if(type == 0){
data.forEach((item,index) => {
item.customerHandImage = app.DFSImg(item.customerHandImage)
item.checkMP4Status = this.checkMP4(item.urls)
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
})
console.log(this.data.waterfallLeftList, this.data.waterfallRightList,' this.data.waterfallRightList')
}else{
}
}
})
.catch(err => {
this.setData({
loaded: true
})
})
},
getFileType(name) {
if (!name) return false;
var imgType = ["gif", "jpeg", "jpg", "bmp", "png"];
var videoType = [
"avi",
"wmv",
"mkv",
"mp4",
"mov",
"rm",
"3gp",
"flv",
"mpg",
"rmvb"
];
if (
RegExp(".(" + imgType.join("|") + ")$", "i").test(name.toLowerCase())
) {
return "image";
} else if (
RegExp(".(" + videoType.join("|") + ")$", "i").test(name.toLowerCase())
) {
return "video";
} else {
return false;
}
},
checkMP4(data) {
for (let index = 0; index < data.length; index++) {
if (this.getFileType(data[index]) == "video") {
return true;
} else {
return false;
}
}
},
}
})
static/nativeComponents/SharePicture/index.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
static/nativeComponents/SharePicture/index.wxml 0 → 100644
<!--static/nativeComponents/SharePicture/index.wxml-->
<view class="waterfall-content" style="background-color:{{datas.componentData['backgroundColor']}};padding-top:{{datas.componentData.paddingList[0]['value'] * 2}}rpx;padding-bottom:{{datas.componentData.paddingList[1]['value'] * 2}}rpx;padding-left:{{datas.componentData.paddingList[2]['value'] * 2}}rpx;padding-right:{{datas.componentData.paddingList[3]['value'] * 2}}rpx">
<view class="tab-wrap">
<view class="tab-item {{tabIndex == index && 'checked'}}" wx:for="{{datas.componentData['list']}}" :key="index" wx:if="{{item.show}}" bindtap="tabHandle" data-index="{{index}}" data-item="{{item}}" z>
<text>{{item.name}}</text>
</view>
</view>
<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="img-wrap">
<image src="{{item.coverImg}}" mode="widthFix"></image>
<i class="iconfont-common common-iconbofang2 icon{{datas.componentData['playBtnPosition']}}" wx:if="{{item.checkMP4Status}}"></i>
</view>
<view class="content">
<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>
</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="img-wrap">
<image src="{{item.coverImg}}" mode="widthFix"></image>
<i class="iconfont-common common-iconbofang2 icon{{datas.componentData['playBtnPosition']}}" wx:if="{{item.checkMP4Status}}"></i>
</view>
<view class="content">
<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>
</view>
</view>
</view>
</view>
\ No newline at end of file
static/nativeComponents/SharePicture/index.wxss 0 → 100644
/* static/nativeComponents/SharePicture/index.wxss */
@import "/static/font/common_icon.wxss";
.waterfall-content {
font-size: 20rpx;
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
}
.waterfall-content .tab-wrap{
display: flex;
justify-content: space-around;
padding: 32rpx 0;
box-sizing: border-box
}
.waterfall-content .tab-wrap .tab-item{
transition: all 0.2s;
border-radius: 40rpx;
width: 96rpx;
height: 44rpx;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.waterfall-content .tab-wrap .tab-item text{
font-size: 26rpx;
}
.checked {
background-color: var(--main-color);
color: #ffffff;
}
.waterfall-wrap{
position: relative;
box-sizing: border-box;
overflow: hidden;
}
.waterfall-l,.waterfall-r{
width: 50%;
box-sizing: border-box;
float: left;
}
.waterfall-l .item, .waterfall-r .item{
border-radius: 12rpx;
margin-top: 20rpx;
overflow: hidden;
background-color: white;
}
.waterfall-l .item:first-child, .waterfall-r .item:first-child{
margin-top: 0
}
.waterfall-wrap .img-wrap{
position: relative;
}
.waterfall-wrap .img-wrap image{
display: block;
}
.waterfall-wrap .img-wrap .iconfont-common {
color: #fff;
position: absolute;
font-size: 60rpx;
}
.icon0 {
left: 4rpx;
bottom: 4rpx;
}
.icon1 {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.icon2 {
right: 4rpx;
top: 4rpx;
}
.content{
padding : 19rpx 17rpx 20rpx 17rpx;
}
.content .title{
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
\ No newline at end of file
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