<template>
<!-- 店铺街 -->
<view>
<view class='indexList tui-skeleton' :style="[boxStyle]" v-if="merList.length>0">
<view class='title acea-row row-between-wrapper'>
<view class='text line1 tui-skeleton-rect acea-row'>
<image :src="logoUrl"></image>
<text class='label' :style="[titleColor]">{{dataConfig.titleConfig.val}}</text>
</view>
<view class='more tui-skeleton-rect fs-12' :style="[moreColor]" hover-class="none" @click="more()">
更多
<text class="iconfont icon-jiantou fs-12"></text>
</view>
</view>
<view class='tips mb20'>Good brand store</view>
<view class='merList' :style="[gridGap]" v-if="listStyle == 0">
<view class='item' v-for="(item,index) in merList" :key='index'>
<navigator :url="`/pages/merchant/home/index?merId=${item.id}`" hover-class="none">
<view class='pic tui-skeleton-rect'>
<easy-loadimage :image-src="item.coverImage"
:radius="dataConfig.contentStyle.val"></easy-loadimage>
</view>
<image class="lines left" :src="urlDomain+'crmebimage/presets/lianjie.png'"></image>
<view v-show="logoShow" class='logo tui-skeleton-rect'>
<image :src='item.rectangleLogo'></image>
</view>
<image class="lines right" :src="urlDomain+'crmebimage/presets/lianjie.png'"></image>
<view class='merName tui-skeleton-rect'>
<view class='neme line1 line-heightOne' v-show="nameShow" :style="[nameColor]">{{item.name}}</view>
<view v-show="typeShow"><text class='label'
:style="[labelColor]">{{item.typeId | merchantTypeFilter}}</text></view>
</view>
</navigator>
</view>
</view>
<view v-if="listStyle == 1">
<mer-card :merchantList="merList" :merchantStyle="merchantStyle" :isShowHome="isShowHome" :isStreet="true" :isHome="true"></mer-card>
</view>
</view>
</view>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {
getDiyMerListApi,
getMerListbyidsApi
} from '@/api/merchant.js';
import merCard from '@/components/merchantList/index.vue'
import easyLoadimage from '@/components/base/easy-loadimage.vue';
let app = getApp()
export default {
name: 'merchantList',
props: {
dataConfig: {
type: Object,
default: () => {}
},
},
data() {
return {
urlDomain: this.$Cache.get("imgHost"),
merList: [],
isShowHome: {} ,//首页中展示字段判断
merchantStyle: null ,//样式二中的样式集合
themeColor:this.$options.filters.filterTheme(app.globalData.theme)
}
},
components: {
merCard,
easyLoadimage
},
computed: {
//店铺数据类型，0默认，1自定义
listConfig(){
return this.dataConfig.listConfig.tabVal
},
//店铺数据自定义，选中商户的id集合
activeValueMer(){
return this.dataConfig.activeValueMer.activeValue
},
//样式类型，0，1
listStyle() {
return this.dataConfig.tabConfig.tabVal
},
//最外层盒子的样式
boxStyle() {
return {
borderRadius: this.dataConfig.bgStyle.val * 2 + 'rpx',
background: `linear-gradient(${this.dataConfig.bgColor.color[0].item}, ${this.dataConfig.bgColor.color[1].item})`,
margin: this.dataConfig.mbConfig.val * 2 + 'rpx' + ' ' + '20rpx' + ' ' + 0,
padding: this.dataConfig.upConfig.val * 2 + 'rpx' + ' ' + '10px' + ' ' + this.dataConfig.downConfig
.val * 2 + 'rpx'
}
},
//图片样式
contentStyle() {
return {
'border-radius': this.dataConfig.contentStyle.val + 'px',
}
},
//内容间距
gridGap() {
return {
'grid-gap': this.dataConfig.contentConfig.val + 'px'
}
},
//标题颜色
titleColor() {
return {
'color': this.dataConfig.titleColor.color[0].item
}
},
//名称颜色
nameColor() {
return {
'color': this.dataConfig.nameColor.color[0].item
}
},
//更多颜色
moreColor() {
return {
'color': this.dataConfig.moreColor.color[0].item
}
},
// 价格颜色
priceColor(){
return {
'color': this.dataConfig.themeStyleConfig.tabVal?this.dataConfig.priceColor.color[0].item:this.themeColor
}
},
//标题图片
logoUrl() {
return this.dataConfig.logoConfig.url
},
//标签
labelColor() {
return {
'backgroundColor': this.dataConfig.themeStyleConfig.tabVal?this.dataConfig.labelColor.color[0].item:this.themeColor,
'color': this.dataConfig.labelFontColor.color[0].item
}
},
//店铺名称
nameShow() {
if (this.dataConfig.typeConfig.activeValue.indexOf(0) !== -1) {
return true;
} else {
return false;
}
},
//店铺logo
logoShow() {
if (this.dataConfig.typeConfig.activeValue.indexOf(1) !== -1) {
return true;
} else {
return false;
}
},
//店铺类型
typeShow() {
if (this.dataConfig.typeConfig.activeValue.indexOf(2) !== -1) {
return true;
} else {
return false;
}
},
//店铺数量
numConfig(){
return this.dataConfig.numConfig.val
}
},
mounted() {
this.merchantStyle = {
contentStyle: this.contentStyle,
nameColor: this.nameColor,
labelColor: this.labelColor,
priceColor: this.priceColor
}
this.$store.dispatch('MerCategoryList');
this.$store.dispatch('MerTypeList');
if(this.listConfig === 0){
this.getMerList();
}else{
this.getMerListbyids();
}
this.isShowHome = {
typeShow: this.typeShow,
nameShow: this.nameShow,
logoShow: this.logoShow
}
},
methods: {
more() {
this.$util.navigateTo(this.dataConfig.linkConfig.val)
},
//默认店铺数据
getMerList() {
getDiyMerListApi(this.numConfig).then((res) => {
this.merList = res.data.list;
});
},
//自定义店铺数据
getMerListbyids(){
getMerListbyidsApi(this.activeValueMer.join(',')).then((res) => {
this.merList = res.data;
});
}
}
}
</script>
<style lang="scss" scoped>
.indexList {}
.merList {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
width: 100%;
.item {
position: relative;
.lines {
width: 8rpx;
height: 34rpx;
position: absolute;
z-index: 1;
}
.left {
left: 14rpx;
top: 204rpx;
}
.right {
right: 14rpx;
top: 204rpx;
}
.pic {
width: 100%;
height: 220rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.logo {
width: 150rpx;
height: 44rpx;
background: #FFFFFF;
box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.1000);
border-radius: 33rpx;
opacity: 1;
margin: auto;
position: absolute;
z-index: 1;
left: 16%;
top: 59%;
image {
margin: auto;
width: 130rpx;
height: 44rpx;
display: block;
}
}
.merName {
width: 100%;
height: 110rpx;
background: #FFFFFF;
border-radius: 14rpx;
opacity: 1;
padding: 30rpx 0 14rpx 0;
display: flex;
flex-direction: column;
align-items: center;
.neme {
font-weight: bold;
color: #333333;
font-size: 22rpx;
text-align: center;
margin-bottom: 4rpx;
width: 210rpx;
}
.label {
height: 28rpx;
line-height: 28rpx;
border-radius: 14rpx;
opacity: 1;
text-align: center;
font-size: 18rpx;
padding: 0 12rpx;
}
}
}
}
.fs-12{
font-size: 24rpx !important;
}
</style>