73 lines
2.1 KiB
JavaScript
73 lines
2.1 KiB
JavaScript
// components/chenghao-tag/chenghao-tag.js
|
||
const app = getApp();
|
||
|
||
Component({
|
||
properties: {
|
||
mingcheng: { type: String, value: '' },
|
||
texiaoJson: { type: Object, value: {} }
|
||
},
|
||
data: {
|
||
// 默认值：宽152，高52，六边形，无背景图，无动画，白色字
|
||
width: 152,
|
||
height: 52,
|
||
shapeClass: 'liubianxing', // 保证至少不是矩形
|
||
animationClass: '',
|
||
bgStyle: '',
|
||
textColor: '#FFFFFF',
|
||
textSize: 22,
|
||
imageUrl: ''
|
||
},
|
||
lifetimes: {
|
||
attached() {
|
||
const cfg = this.properties.texiaoJson || {};
|
||
|
||
// 1. 尺寸（稍大一些，一行能放3~4个）
|
||
const width = cfg.width || 152;
|
||
const height = cfg.height || 52;
|
||
|
||
// 2. 背景处理：优先背景图，否则用渐变/纯色
|
||
let bgStyle = '';
|
||
let imageUrl = '';
|
||
if (cfg.image_url) {
|
||
const ossImageUrl = app.globalData.ossImageUrl || '';
|
||
imageUrl = cfg.image_url.startsWith('http')
|
||
? cfg.image_url
|
||
: ossImageUrl + cfg.image_url;
|
||
} else if (cfg.bg_gradient) {
|
||
bgStyle = `background: ${cfg.bg_gradient};`;
|
||
} else if (cfg.bg_color) {
|
||
bgStyle = `background: ${cfg.bg_color};`;
|
||
} else {
|
||
// 默认金橙渐变
|
||
bgStyle = `background: linear-gradient(135deg, #FFD700, #FF8C00);`;
|
||
}
|
||
|
||
// 3. 形状（后端传入 shape 字段，默认 liubianxing）
|
||
const shapeClass = cfg.shape || 'liubianxing';
|
||
|
||
// 4. 动画
|
||
const animationClass = cfg.animation || '';
|
||
|
||
// 5. 文字
|
||
const textColor = cfg.text_color || '#FFFFFF';
|
||
const textSize = cfg.text_size || 22;
|
||
|
||
this.setData({
|
||
width, height,
|
||
bgStyle, imageUrl,
|
||
shapeClass, animationClass,
|
||
textColor, textSize
|
||
});
|
||
}
|
||
},
|
||
methods: {
|
||
// 背景图加载失败时回退为纯色背景
|
||
onImageError() {
|
||
this.setData({ imageUrl: '' });
|
||
// 如果 bgStyle 为空，给个默认背景
|
||
if (!this.data.bgStyle) {
|
||
this.setData({ bgStyle: 'background: linear-gradient(135deg, #FFD700, #FF8C00);' });
|
||
}
|
||
}
|
||
}
|
||
}); |