ydd_front/mer_uniapp/components/homeIndex/merchant.vue

<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>