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);',
|
|
});
|
|
}
|
|
},
|
|
},
|
|
});
|