Commit 45759e10 by 程默

Merge branch 'nativehome_tst' of http://code.mayi888.com/chengmo/mayi-mp-shop into nativehome_tst

parents 4e78c6cf c0fb97a0
......@@ -30,6 +30,9 @@ console.log(process.env,'-----------------config------')
},
addBuyingShowPraise(data){
return requestPOST(`${process.env.OLSHOP_URL}/activityInfo/buyingShow/addBuyingShowPraise/${data.buyingShowId}`);
},
get_multi_merchant_by_tags(data){
return requestPOST(`${process.env.OLSHOP_URL}/shop/get_multi_merchant_by_tags`,data)
}
}
\ No newline at end of file
......@@ -81,6 +81,9 @@
<div v-if="item.componentCode == 'share-picture' && item.componentInfo.visible == 1">
<share-picture :datas="item"></share-picture>
</div>
<div v-if="item.componentCode == 'merchants-list' && item.componentInfo.visible == 1">
<merchants-list class="goodsListItem" :datas="item"></merchants-list>
</div>
</div>
<bottomCont></bottomCont>
</div>
......
......@@ -18,7 +18,8 @@
"video-player":"/static/nativeComponents/VideoPlayer/index",
"photo-gallery":"/static/nativeComponents/PhotoGallery/index",
"live-broadcast":"/static/nativeComponents/LiveBroadcast/index",
"share-picture":"/static/nativeComponents/SharePicture/index"
"share-picture":"/static/nativeComponents/SharePicture/index",
"merchants-list":"/static/nativeComponents/MerchantsList/index"
},
"enablePullDownRefresh":true,
"backgroundColor":"#f5f5f5"
......
// static/nativeComponents/MerchantsList/index.js
let app = getApp()
const { indexApi } = app;
Component({
/**
* 组件的属性列表
*/
properties: {
datas: {
type: Object
}
},
/**
* 组件的初始数据
*/
data: {
showList : true,
toLoad : true,
query : {
pageNum: 0,
pageSize: 10,
shopTagIds: [],
mallFlag: 1,
},
WaterfallFlowList : [],
skeletonLoading: true,
loading: false,
finished: false,
clientHeight : 0,
WaterfallFlowListL : [],
WaterfallFlowListR : []
},
ready(){
let _this = this;
let { clientHeight } = this.data;
wx.getSystemInfo({
success: function (res) {
let clientHeight = parseInt(res.windowHeight);
_this.setData({ clientHeight });
}
});
this.init()
},
/**
* 组件的方法列表
*/
methods: {
init(){
this.loadHandle(1);
},
loadHandle(val){
if (this.data.toLoad == false) return;
this.setData({
toLoad: false
})
if(val == 1){
this.setData({
['query.pageNum'] : 1,
WaterfallFlowList : []
})
}else{
this.setData({
['query.pageNum']: this.data.query.pageNum + 1
})
}
this.setData({
['query.shopTagIds']: this.data.datas.componentData.selectMerchants == 0 ? [] : this.data.datas.componentData.selectLabelList,
})
indexApi.get_multi_merchant_by_tags(this.data.query).then(res => {
this.setData({
toLoad : true,
skeletonLoading : false,
loading : false
})
if(res.data.code == '200'){
let list = res.data.data
if(list == null || list.length == 0){
if(this.query.pageNum == 1){
this.setData({
showList: false
})
}
}else{
list.forEach((item,index) => {
item.logoUrl = item.logoUrl ? app.DFSImg(item.logoUrl,300,300,1) : app.DFSImg("");
})
if (val == 1){
if (this.data.datas.componentData.layoutType == 0){
this.setData({
WaterfallFlowListL: [],
WaterfallFlowListR: []
})
let WaterfallFlowListL = []
let WaterfallFlowListR = []
list.forEach((item, index) => {
if (index % 2 == 0) {
WaterfallFlowListL.push(item)
} else {
WaterfallFlowListR.push(item)
}
})
this.setData({
'WaterfallFlowListL[0]': WaterfallFlowListL,
'WaterfallFlowListR[0]': WaterfallFlowListR
})
}else{
this.setData({
'WaterfallFlowList[0]': list
})
}
}else{
if (this.data.datas.componentData.layoutType == 0) {
let WaterfallFlowListL = []
let WaterfallFlowListR = []
list.forEach((item,index) => {
if (index % 2 == 0) {
WaterfallFlowListL.push(item)
} else {
WaterfallFlowListR.push(item)
}
})
this.setData({
['WaterfallFlowListL[' + this.data.WaterfallFlowListL.length + ']']: WaterfallFlowListL,
['WaterfallFlowListR[' + this.data.WaterfallFlowListR.length + ']']: WaterfallFlowListR
})
} else {
this.setData({
['WaterfallFlowList[' + this.data.WaterfallFlowList.length + ']']: list
})
}
}
if (this.data.WaterfallFlowList.length <= 0) {
this.showList = false;
}
}
if (list == null || list.length < 10) {
this.setData({
finished : true
})
} else {
this.setData({
finished: false
})
}
console.log(this.data.WaterfallFlowList,'this.data.WaterfallFlowList')
}else{
this.setData({
finished : true,
showList : false
})
}
})
},
getScroll(el) {
let _this = this
this.createSelectorQuery().select("#ItemModule0").boundingClientRect(function(res){
if(res){
let scrollTop = parseInt(el.scrollTop);
let domHeight = parseInt(res.height);
if (
scrollTop + _this.data.clientHeight >= domHeight - 150 &&
_this.data.finished == false
) {
_this.loadHandle(2);
}
}
}).exec()
this.createSelectorQuery().select("#ItemModule1").boundingClientRect(function(res){
if (res) {
let scrollTop = parseInt(el.scrollTop);
let domHeight = parseInt(res.height);
// 窗口高度+滚动高度等于 = 元素整体高度 -(预留一段距离加载) 触发父组件查询接口
if (
scrollTop + _this.data.clientHeight >= domHeight - 150 &&
_this.data.finished == false
) {
_this.loadHandle(2);
}
}
}).exec()
},
scrolltolower(){
if(this.data.finished == false){
this.loadHandle(2)
}
},
itemClick(e){
let item = e.currentTarget.dataset.item
console.log(item)
app.$themeToLink({
type: 1,
link: `/merchantsDetail/${ item.boundOrgId }`
})
}
}
})
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
<!--static/nativeComponents/MerchantsList/index.wxml-->
<view class="merchants-list" wx:if="{{showList}}" style="border-radius:{{datas.componentData.moduleRadius * 2}}rpx;padding-top:{{datas.componentData.levelMargin * 2}}rpx;padding-bottom:{{datas.componentData.levelMargin * 2}}rpx;padding-left:{{datas.componentData.verticalMargin * 2}}rpx;padding-right:{{datas.componentData.verticalMargin * 2}}rpx;--modelBackgroundColor:{{datas.componentData.modelBackgroundColor}};--lineHeight:{{datas.componentData.lineHeight * 2}}rpx;--columnHeight:{{datas.componentData.columnHeight * 2}}rpx;--columnDistance:{{datas.componentData.columnHeight}}rpx;--pictureBackgroundColor:{{datas.componentData.pictureBackgroundColor}}">
<view wx:if="{{datas.componentData.layoutType == 0}}" id="ItemModule0">
<view class="layoutType0">
<view class="type-l">
<view wx:for="{{WaterfallFlowListL}}" :wx:key="index">
<view wx:for="{{item}}" wx:for-item="item1" wx:for-index="index1">
<view class="ItemModule ItemModule3" bindtap="itemClick" data-item="{{item1}}">
<view class="product-item">
<view class="product-img">
<image src="{{item1.logoUrl}}" mode="widthFix"></image>
</view>
<view class="product-info">
<text class="name">{{item1.shopName}}</text>
<view class="des">{{item1.remark}}</view>
<view class="label">
<view class="labelItem" wx:for="{{item1.tagInfoResponseDTOS}}" wx:for-index="idx" wx:for-item="itemName">{{itemName.tagName}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="type-r ">
<view wx:for="{{WaterfallFlowListR}}" wx:key="index">
<view wx:for="{{item}}" wx:for-item="item1" wx:for-index="index1">
<view class="ItemModule ItemModule3" bindtap="itemClick" data-item="{{item1}}">
<view class="product-item">
<view class="product-img">
<image src="{{item1.logoUrl}}" mode="widthFix"></image>
</view>
<view class="product-info">
<text class="name">{{item1.shopName}}</text>
<view class="des">{{item1.remark}}</view>
<view class="label">
<view class="labelItem" wx:for="{{item1.tagInfoResponseDTOS}}" wx:for-index="idx" wx:for-item="itemName">{{itemName.tagName}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="placeholderRect">{{ !finished ? "加载中" : "没有更多了" }}</view>
</view>
<view wx:elif="{{datas.componentData.layoutType == 1}}" id="ItemModule1">
<view wx:for="{{WaterfallFlowList}}" wx:key="index">
<view wx:for="{{item}}" wx:for-item="item1" wx:for-index="index1">
<view class="ItemModule ItemModule1" bindtap="itemClick" data-item="{{item1}}">
<view class="product-item item-row" >
<view class="product-img">
<image mode="aspectFill" src="{{item1.logoUrl}}"></image>
</view>
<view class="product-info">
<text class="name">{{item1.shopName}}</text>
<view class="des">{{item1.remark}}</view>
<view class="label">
<view class="labelItem" wx:for="{{item1.tagInfoResponseDTOS}}" wx:for-index="idx" wx:for-item="itemName">{{itemName.tagName}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="placeholderRect">{{ !finished ? "加载中" : "没有更多了" }}</view>
</view>
<view wx:elif="{{datas.componentData.layoutType == 2}}">
<view class="layoutType2">
<scroll-view scroll-x="true" bindscrolltolower="scrolltolower" class="HorizontalRoll">
<view style="display:flex;">
<view wx:for="{{WaterfallFlowList}}" wx:key="index" style="display:inline-block">
<view class="layoutType2-content" wx:for="{{item}}" wx:for-item="item1" wx:for-index="index1">
<view class="ItemModule ItemModule2" bindtap="itemClick" data-item="{{item1}}">
<view class="product-item">
<view class="product-img">
<image mode="aspectFill" src="{{item1.logoUrl}}"></image>
</view>
<view class="product-info">
<text class="name">{{item1.shopName}}</text>
<view class="des">{{item1.remark}}</view>
</view>
</view>
</view>
</view>
</view>
<view class="bottom" ref="bottomDom">
<view>{{ !finished ? "" : "没有更多了" }}</view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
/* static/nativeComponents/MerchantsList/index.wxss */
.merchants-list{
font-size: 32rpx;
overflow: hidden;
background: var(--modelBackgroundColor);
}
.placeholderRect {
color: #969799;
font-size: 28rpx;
line-height: 100rpx;
text-align: center;
}
.ItemModule{
margin-bottom: var(--lineHeight);
}
.ItemModule .label{
display: flex;
flex-wrap: wrap;
margin-top: 20rpx;
}
.ItemModule .product-img{
background: var(--pictureBackgroundColor);
}
.ItemModule .label .labelItem {
padding: 0px 8rpx;
height: 32rpx;
font-size: 24rpx;
color: #fff;
background: var(--main-color);
border-radius: 20rpx;
margin-right: 8rpx;
margin-bottom: 8rpx;
}
.ItemModule .product-item{
font-size: 32rpx;
background-color: #fff;
border-radius: 14rpx;
overflow: hidden;
}
.ItemModule1 .product-item .product-img{
position: relative;
width: 200rpx;
height: 200rpx;
flex-shrink: 0;
}
.ItemModule1 .product-item .product-img image{
width: 100%;
height: 100%;
opacity: 1;
}
.product-info{
font-size: 26rpx;
margin: 10rpx;
color: #888888;
flex: 1;
}
.product-item .product-info .name {
display: flex;
font-size: 26rpx;
justify-content: space-between;
width: 80%;
overflow: hidden;
text-overflow: ellipsis;
color: #262626;
margin-bottom: 4rpx;
}
.product-item .product-info .des {
line-height: 36rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.ItemModule1 .item-row{
display: flex;
}
.ItemModule2 .product-item{
font-size: 32rpx;
background-color: #fff;
border-radius: 8rpx;
overflow: hidden;
}
.ItemModule2 .product-img {
width: 300rpx;
height: 300rpx;
}
.ItemModule2 .product-img image{
width: 100%;
height: 100%;
}
.layoutType2 {
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
}
.layoutType2 .layoutType2-content {
display: inline-block;
vertical-align: top;
white-space: normal;
margin-right: var(--columnHeight);
width: 300rpx;
}
.layoutType2 .layoutType2-content .product-info .name {
width: 100%;
justify-content: center;
white-space: normal;
overflow: auto;
}
.layoutType2::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.HorizontalRoll {
display: flex;
align-items: center;
}
.HorizontalRoll .bottom{
writing-mode:vertical-lr;
font-size: 28rpx;
color: #666;
display: inline-block;
}
.HorizontalRoll .bottom view{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.layoutType0{
overflow: hidden;
}
.layoutType0 .type-l{
width: 50%;
float: left;
box-sizing: border-box;
padding-right: var(--columnDistance)
}
.layoutType0 .type-r{
width: 50%;
float: right;
box-sizing: border-box;
padding-left: var(--columnDistance)
}
\ 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