@@ -1,73 +1,106 @@
|
||||
// components/chenghao-tag/chenghao-tag.js
|
||||
const app = getApp();
|
||||
|
||||
const PILL_SHAPES = ['pill', 'rectangle', 'rounded'];
|
||||
|
||||
Component({
|
||||
properties: {
|
||||
mingcheng: { type: String, value: '' },
|
||||
texiaoJson: { type: Object, value: {} }
|
||||
texiaoJson: { type: Object, value: {} },
|
||||
},
|
||||
data: {
|
||||
// 默认值:宽152,高52,六边形,无背景图,无动画,白色字
|
||||
width: 152,
|
||||
height: 52,
|
||||
shapeClass: 'liubianxing', // 保证至少不是矩形
|
||||
inlineStyle: '',
|
||||
shapeClass: 'tag-pill',
|
||||
animationClass: '',
|
||||
bgStyle: '',
|
||||
textColor: '#FFFFFF',
|
||||
textSize: 22,
|
||||
imageUrl: ''
|
||||
imageUrl: '',
|
||||
isPill: true,
|
||||
},
|
||||
observers: {
|
||||
'texiaoJson, mingcheng': function () {
|
||||
this._applyConfig(this.properties.texiaoJson);
|
||||
},
|
||||
},
|
||||
lifetimes: {
|
||||
attached() {
|
||||
const cfg = this.properties.texiaoJson || {};
|
||||
|
||||
// 1. 尺寸(稍大一些,一行能放3~4个)
|
||||
const width = cfg.width || 152;
|
||||
const height = cfg.height || 52;
|
||||
this._applyConfig(this.properties.texiaoJson);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
_applyConfig(raw) {
|
||||
const cfg = raw || {};
|
||||
const ossImageUrl = app.globalData.ossImageUrl || '';
|
||||
|
||||
// 2. 背景处理:优先背景图,否则用渐变/纯色
|
||||
// 无 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) {
|
||||
const ossImageUrl = app.globalData.ossImageUrl || '';
|
||||
imageUrl = cfg.image_url.startsWith('http')
|
||||
? 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);`;
|
||||
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
|
||||
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,
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 背景图加载失败时回退为纯色背景
|
||||
},
|
||||
|
||||
onImageError() {
|
||||
this.setData({ imageUrl: '' });
|
||||
// 如果 bgStyle 为空,给个默认背景
|
||||
if (!this.data.bgStyle) {
|
||||
this.setData({ bgStyle: 'background: linear-gradient(135deg, #FFD700, #FF8C00);' });
|
||||
if (!this.data.inlineStyle.includes('background')) {
|
||||
this.setData({
|
||||
inlineStyle: this.data.inlineStyle + ' background: linear-gradient(135deg, #FFD700, #FF8C00);',
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,20 +1,17 @@
|
||||
<!-- components/chenghao-tag/chenghao-tag.wxml -->
|
||||
<view
|
||||
class="tag-root {{shapeClass}} {{animationClass}}"
|
||||
style="width: {{width}}rpx; height: {{height}}rpx; {{bgStyle}}"
|
||||
<view
|
||||
class="tag-root {{shapeClass}} {{animationClass}}"
|
||||
style="{{inlineStyle}}"
|
||||
>
|
||||
<!-- 背景图(如果有) -->
|
||||
<image
|
||||
wx:if="{{imageUrl}}"
|
||||
class="tag-bg-image"
|
||||
src="{{imageUrl}}"
|
||||
<image
|
||||
wx:if="{{imageUrl && !isPill}}"
|
||||
class="tag-bg-image"
|
||||
src="{{imageUrl}}"
|
||||
mode="aspectFill"
|
||||
binderror="onImageError"
|
||||
></image>
|
||||
|
||||
<!-- 文字层 -->
|
||||
<text
|
||||
class="tag-text"
|
||||
/>
|
||||
<text
|
||||
class="tag-text"
|
||||
style="color: {{textColor}}; font-size: {{textSize}}rpx;"
|
||||
>{{mingcheng}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -12,6 +12,18 @@
|
||||
margin: 4rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 身份装饰 / 自定义色:圆角标 */
|
||||
.tag-root.tag-pill {
|
||||
border-radius: 20rpx;
|
||||
clip-path: none;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.tag-pill .tag-text {
|
||||
padding: 0;
|
||||
text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* ========== 背景图 ========== */
|
||||
.tag-bg-image {
|
||||
@@ -87,4 +99,19 @@
|
||||
@keyframes glow-anim {
|
||||
0%, 100% { box-shadow: 0 0 8rpx rgba(255, 215, 0, 0.4); }
|
||||
50% { box-shadow: 0 0 20rpx rgba(255, 215, 0, 0.8), 0 0 40rpx rgba(255, 215, 0, 0.4); }
|
||||
}
|
||||
|
||||
/* 身份标签闪光 */
|
||||
.tag-root.pill-flash::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 60%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
|
||||
transform: skewX(-20deg);
|
||||
animation: shine-anim 2.2s infinite;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
15
components/pindao-modal/pindao-modal.js
Normal file
15
components/pindao-modal/pindao-modal.js
Normal file
@@ -0,0 +1,15 @@
|
||||
Component({
|
||||
properties: {
|
||||
visible: { type: Boolean, value: false },
|
||||
title: { type: String, value: '频道' },
|
||||
channelNo: { type: String, value: '' },
|
||||
images: { type: Array, value: [] },
|
||||
},
|
||||
|
||||
methods: {
|
||||
preventMove() {},
|
||||
onClose() {
|
||||
this.triggerEvent('close');
|
||||
},
|
||||
},
|
||||
});
|
||||
4
components/pindao-modal/pindao-modal.json
Normal file
4
components/pindao-modal/pindao-modal.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
24
components/pindao-modal/pindao-modal.wxml
Normal file
24
components/pindao-modal/pindao-modal.wxml
Normal file
@@ -0,0 +1,24 @@
|
||||
<view class="pindao-mask" wx:if="{{visible}}" catchtouchmove="preventMove">
|
||||
<view class="pindao-panel" catchtap="preventMove">
|
||||
<view class="pindao-head flexb">
|
||||
<text class="pindao-title">{{title}}</text>
|
||||
<view class="pindao-close" bindtap="onClose">×</view>
|
||||
</view>
|
||||
<view class="pindao-channel" wx:if="{{channelNo}}">
|
||||
<text class="pindao-channel-label">频道号</text>
|
||||
<text class="pindao-channel-no">{{channelNo}}</text>
|
||||
</view>
|
||||
<scroll-view class="pindao-scroll" scroll-y enhanced show-scrollbar="{{false}}">
|
||||
<view wx:if="{{images.length === 0}}" class="pindao-empty">暂无频道内容</view>
|
||||
<image
|
||||
wx:for="{{images}}"
|
||||
wx:key="index"
|
||||
class="pindao-img"
|
||||
src="{{item}}"
|
||||
mode="widthFix"
|
||||
lazy-load="{{false}}"
|
||||
show-menu-by-longpress
|
||||
/>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
88
components/pindao-modal/pindao-modal.wxss
Normal file
88
components/pindao-modal/pindao-modal.wxss
Normal file
@@ -0,0 +1,88 @@
|
||||
.pindao-mask {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pindao-panel {
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pindao-head {
|
||||
padding: 28rpx 32rpx 16rpx;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pindao-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.pindao-close {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
line-height: 52rpx;
|
||||
text-align: center;
|
||||
font-size: 40rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.pindao-channel {
|
||||
padding: 0 32rpx 20rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pindao-channel-label {
|
||||
display: block;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.pindao-channel-no {
|
||||
font-size: 36rpx;
|
||||
font-weight: 700;
|
||||
color: #c9a962;
|
||||
}
|
||||
|
||||
.pindao-scroll {
|
||||
flex: 1;
|
||||
max-height: 60vh;
|
||||
padding: 0 24rpx 24rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pindao-img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 16rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.pindao-empty {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
padding: 48rpx 0;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.flexb {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
Reference in New Issue
Block a user