120 lines
3.6 KiB
JavaScript
120 lines
3.6 KiB
JavaScript
// components/chenghao-tag/chenghao-tag.js
|
||
const app = getApp();
|
||
|
||
const PILL_SHAPES = ['pill', 'rectangle', 'rounded'];
|
||
|
||
Component({
|
||
properties: {
|
||
mingcheng: { type: String, value: '' },
|
||
texiaoJson: { type: null, value: null },
|
||
},
|
||
data: {
|
||
inlineStyle: '',
|
||
shapeClass: 'tag-pill',
|
||
animationClass: '',
|
||
textColor: '#FFFFFF',
|
||
textSize: 22,
|
||
imageUrl: '',
|
||
isPill: true,
|
||
},
|
||
observers: {
|
||
'texiaoJson, mingcheng': function () {
|
||
this._applyConfig(this.properties.texiaoJson);
|
||
},
|
||
},
|
||
lifetimes: {
|
||
attached() {
|
||
this._applyConfig(this.properties.texiaoJson);
|
||
},
|
||
},
|
||
methods: {
|
||
_applyConfig(raw) {
|
||
let cfg = raw || {};
|
||
if (typeof cfg === 'string') {
|
||
try {
|
||
cfg = JSON.parse(cfg);
|
||
} catch (e) {
|
||
cfg = {};
|
||
}
|
||
}
|
||
if (Array.isArray(cfg)) {
|
||
cfg = cfg[0] || {};
|
||
}
|
||
if (!cfg || typeof cfg !== 'object') {
|
||
cfg = {};
|
||
}
|
||
const ossImageUrl = app.globalData.ossImageUrl || '';
|
||
|
||
// 无 shape：身份装饰标签 / 自定义色圆角标；有 shape：考核称号等特殊形状
|
||
const isPill = !cfg.shape || PILL_SHAPES.includes(cfg.shape);
|
||
|
||
if (isPill) {
|
||
const height = Number(cfg.height) || 44;
|
||
const minWidth = Number(cfg.width) || 72;
|
||
const solidColor = cfg.bg_color || cfg.background || cfg.color;
|
||
let bgStyle = '';
|
||
if (cfg.bg_gradient) {
|
||
bgStyle = `background: ${cfg.bg_gradient};`;
|
||
} else if (solidColor) {
|
||
bgStyle = `background: ${solidColor};`;
|
||
} else {
|
||
bgStyle = 'background: linear-gradient(135deg, #FFD700, #FF8C00);';
|
||
}
|
||
const flash = cfg.flash || cfg.animation === 'shine' || cfg.animation === 'glow';
|
||
let animationClass = cfg.animation || '';
|
||
if (flash && !animationClass) {
|
||
animationClass = 'pill-flash';
|
||
}
|
||
const borderColor = cfg.borderColor || cfg.border_color;
|
||
const borderStyle = borderColor ? `border: 2rpx solid ${borderColor};` : '';
|
||
const textColor = cfg.text_color || cfg.textColor || '#FFFFFF';
|
||
this.setData({
|
||
isPill: true,
|
||
shapeClass: 'tag-pill',
|
||
animationClass,
|
||
inlineStyle: `min-width: ${minWidth}rpx; height: ${height}rpx; padding: 0 18rpx; ${bgStyle} ${borderStyle}`,
|
||
textColor,
|
||
textSize: cfg.text_size || 22,
|
||
imageUrl: '',
|
||
});
|
||
return;
|
||
}
|
||
|
||
const width = Number(cfg.width) || 152;
|
||
const height = Number(cfg.height) || 52;
|
||
let bgStyle = '';
|
||
let imageUrl = '';
|
||
if (cfg.image_url) {
|
||
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);';
|
||
}
|
||
|
||
this.setData({
|
||
isPill: false,
|
||
inlineStyle: `width: ${width}rpx; height: ${height}rpx; ${bgStyle}`,
|
||
shapeClass: cfg.shape || 'liubianxing',
|
||
animationClass: cfg.animation || '',
|
||
textColor: cfg.text_color || '#FFFFFF',
|
||
textSize: cfg.text_size || 22,
|
||
imageUrl,
|
||
});
|
||
},
|
||
|
||
onImageError() {
|
||
this.setData({ imageUrl: '' });
|
||
if (!this.data.inlineStyle.includes('background')) {
|
||
this.setData({
|
||
inlineStyle: this.data.inlineStyle + ' background: linear-gradient(135deg, #FFD700, #FF8C00);',
|
||
});
|
||
}
|
||
},
|
||
},
|
||
});
|