<!--
* @作者: developer
* @创建时间: 2026-01-19 16:16:24
* @修改时间: 2026-01-19 16:16:24
* @版本: [1.0]
* @版权: 国泰新点软件股份有限公司
* @描述: Component generated via CLI
-->
<template>
<div class="epoint-component" :style="[boxOptions, boxOptions.boxmodel, positionSetting]" @click="click">
<!-- 建议：优先使用 em-组件库 (如 em-button, em-field) 构建 UI -->
<!-- 标题区域 -->
<div v-if="baseConfig.showTitle" class="product-card__header" :style="titleStyle">
{{ baseConfig.title }}
</div>
<!-- 内容区域 -->
<div class="product-card__content">
<div
v-for="(item, index) in myData"
:key="item.id || index"
class="product-card__item"
@click.stop="handleItemClick(item, index)"
>
<div class="product-card__item-name">{{ item.name }}</div>
<div class="product-card__item-status">{{ item.status }}</div>
</div>
</div>
</div>
</template>
<script>
// 小屏低码组件相关配置
import '@boot';
import mockData from './mock/data';
import defaultConfig from './js/config';
import base from './js/base';
// 事件交互
import eventMixin from './plugin/eventgenerate';
export default {
name: base.module_name,
mixins: [eventMixin],
props: {
// mock中的data.js
data: {
type: Array,
default: () => {
return mockData.data;
}
},
// 配置项
config: {
type: Object
},
//获取父级组件数据
cdata: Object
},
data() {
return {
// 内部状态
};
},
watch: {
// 监听数据变化触发onChange事件
myData(val) {
this.eventGenerate('onChange', val);
}
},
computed: {
// 注意：使用el.style等操作DOM的方式在微信小程序不支持
boxOptions() {
const { boxOptions } = this.config.options;
const boxmodel = boxOptions.boxmodel;
//根据实际情况进行单位修改
Object.keys(boxmodel).forEach((key) => {
if (!isNaN(Number(boxmodel[key]))) {
//是纯数字才加单位
boxmodel[key] = boxmodel[key] + 'px';
}
});
return boxOptions;
},
// 基础配置（防御性编程，提供默认值）
baseConfig() {
const config = this.config?.options?.baseConfig || {};
return {
showTitle: config.showTitle !== false,
title: config.title || 'ProductCard'
};
},
// 样式配置
styleConfig() {
const config = this.config?.options?.styleConfig || {};
return {
backgroundColor: config.backgroundColor || '#ffffff',
titleColor: config.titleColor || '#333333',
titleSize: config.titleSize || '16px'
};
},
// 标题样式
titleStyle() {
return {
color: this.styleConfig.titleColor,
fontSize: this.styleConfig.titleSize
};
},
// 处理 Mock 数据和父级联动数据的优先级
myData() {
const pdata = this.cdata?.pdata;
if (pdata && Array.isArray(pdata) && pdata.length > 0) {
return pdata;
}
return this.data || mockData.data || [];
},
// 位置设置
positionSetting() {
let { positionSetting } = this.config.options;
if (positionSetting.isOpen) {
positionSetting.position = 'relative';
} else {
positionSetting.position = 'static';
}
return positionSetting;
},
/**
* 图片路径前缀处理
* 用于 uploadimage 类型配置项的图片地址拼接
*
* 使用示例：
* imgurl() {
* const { imgConfig } = this.config.options;
* if (Config && Config.envconfig && Config.envconfig.imgsrc) {
* return Config.envconfig.imgsrc + imgConfig.bgurl;
* }
* return this.prefix + imgConfig.bgurl;
* }
*/
prefix() {
const origin = location.origin;
let path = location.pathname;
if (path.indexOf('/') === 0) {
path = path.substring(1);
}
// 判断当前是否是测试环境
const basePath = '/' + path.split('/')[0];
if (!this.isTest()) {
// 正式地址
return origin + basePath + '/';
} else {
// 测试地址（请根据实际情况修改）
return 'http://218.4.136.120:8990/smallscreen-demo/';
}
}
},
mounted() {
this.eventGenerate('onMounted', '自定义参数');
},
methods: {
click(e) {
this.eventGenerate('onClick', e);
},
handleItemClick(item, index) {
this.eventGenerate('onChange', { item, index });
},
/**
* 判断是否为测试环境
* 用于 prefix 计算属性的环境判断
*/
isTest() {
let href = location.href;
if (href.includes('smallscreen-demo') && href.includes('218.4.136.120:8990')) {
return false; // 走正式地址 - 开发环境的外网映射
}
// 域名
if (href.startsWith('https:') || href.startsWith('http://app.epoint.com.cn')) {
return false; // https和公司域名走正式地址
}
if (
href.includes('smallscreen-demo') ||
href.startsWith('http://localhost')
) {
return true; // 走测试地址
}
return false;
}
},
// 所有组件必须设置_getConfig和_getMockData，用于低码平台获取组件配置信息
_getConfig: () => defaultConfig,
_getMockData: () => mockData
};
</script>
<style lang="scss" scoped>
@import './css/index.scss';
</style>
