|
@@ -40,6 +40,7 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+import { body, primary, primaryPale, success, white, wisdom, BrandColors } from '@/utils/brand-colors.js'
|
|
|
import { getFontScale } from '@/utils/fontScale.js'
|
|
import { getFontScale } from '@/utils/fontScale.js'
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
@@ -130,7 +131,7 @@ export default {
|
|
|
// 选中的管理端模板 id(未使用管理端模板时为 null)
|
|
// 选中的管理端模板 id(未使用管理端模板时为 null)
|
|
|
activeTemplateId: null,
|
|
activeTemplateId: null,
|
|
|
// 可选的背景色(渐变模板下展示)
|
|
// 可选的背景色(渐变模板下展示)
|
|
|
- bgColors: ['BrandColors.body', 'BrandColors.wisdom', BrandColors.wealth, 'BrandColors.success', BrandColors.mind, '#1E293B', 'BrandColors.white']
|
|
|
|
|
|
|
+ bgColors: [BrandColors.body, BrandColors.wisdom, BrandColors.wealth, BrandColors.success, BrandColors.mind, '#1E293B', BrandColors.white]
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
@@ -179,19 +180,19 @@ export default {
|
|
|
var tpl = this.getActiveTemplate()
|
|
var tpl = this.getActiveTemplate()
|
|
|
if (tpl) {
|
|
if (tpl) {
|
|
|
return {
|
|
return {
|
|
|
- main: tpl.mainColor || 'BrandColors.primary',
|
|
|
|
|
|
|
+ main: tpl.mainColor || BrandColors.primary,
|
|
|
dark: tpl.darkColor || BrandColors.orangeDeep,
|
|
dark: tpl.darkColor || BrandColors.orangeDeep,
|
|
|
- light: tpl.lightColor || 'BrandColors.primaryPale'
|
|
|
|
|
|
|
+ light: tpl.lightColor || BrandColors.primaryPale
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
var map = {
|
|
var map = {
|
|
|
- body: { main: 'BrandColors.body', dark: BrandColors.orangeDeep, light: 'BrandColors.primaryPale' },
|
|
|
|
|
|
|
+ body: { main: BrandColors.body, dark: BrandColors.orangeDeep, light: BrandColors.primaryPale },
|
|
|
mind: { main: BrandColors.mind, dark: '#DB2777', light: '#FDF2F8' },
|
|
mind: { main: BrandColors.mind, dark: '#DB2777', light: '#FDF2F8' },
|
|
|
- wisdom: { main: 'BrandColors.wisdom', dark: '#4F46E5', light: '#EEF2FF' },
|
|
|
|
|
- action: { main: 'BrandColors.success', dark: '#059669', light: '#ECFDF5' },
|
|
|
|
|
|
|
+ wisdom: { main: BrandColors.wisdom, dark: '#4F46E5', light: '#EEF2FF' },
|
|
|
|
|
+ action: { main: BrandColors.success, dark: '#059669', light: '#ECFDF5' },
|
|
|
wealth: { main: BrandColors.wealth, dark: '#D97706', light: '#FFFBEB' }
|
|
wealth: { main: BrandColors.wealth, dark: '#D97706', light: '#FFFBEB' }
|
|
|
}
|
|
}
|
|
|
- return map[this.dimensionCode] || { main: 'BrandColors.primary', dark: BrandColors.orangeDeep, light: 'BrandColors.primaryPale' }
|
|
|
|
|
|
|
+ return map[this.dimensionCode] || { main: BrandColors.primary, dark: BrandColors.orangeDeep, light: BrandColors.primaryPale }
|
|
|
},
|
|
},
|
|
|
// 海报模板配色
|
|
// 海报模板配色
|
|
|
getTemplateConfig() {
|
|
getTemplateConfig() {
|
|
@@ -209,7 +210,7 @@ export default {
|
|
|
return { template: 'minimal', bgColor: dark, main: colors.main, dark: colors.dark, light: colors.light }
|
|
return { template: 'minimal', bgColor: dark, main: colors.main, dark: colors.dark, light: colors.light }
|
|
|
}
|
|
}
|
|
|
// 卡片模板:浅色背景+彩色顶栏
|
|
// 卡片模板:浅色背景+彩色顶栏
|
|
|
- return { template: 'card', bgColor: bgColor || 'BrandColors.white', main: colors.main, dark: colors.dark, light: colors.light }
|
|
|
|
|
|
|
+ return { template: 'card', bgColor: bgColor || BrandColors.white, main: colors.main, dark: colors.dark, light: colors.light }
|
|
|
},
|
|
},
|
|
|
// 获取当前模板的背景样式
|
|
// 获取当前模板的背景样式
|
|
|
getBgStyle() {
|
|
getBgStyle() {
|
|
@@ -221,7 +222,7 @@ export default {
|
|
|
if (cfg.template === 'minimal') {
|
|
if (cfg.template === 'minimal') {
|
|
|
return 'linear-gradient(135deg, ' + cfg.bgColor + ', ' + cfg.dark + ')'
|
|
return 'linear-gradient(135deg, ' + cfg.bgColor + ', ' + cfg.dark + ')'
|
|
|
}
|
|
}
|
|
|
- return 'linear-gradient(135deg, ' + cfg.main + ', ' + (cfg.bgColor || 'BrandColors.white') + ')'
|
|
|
|
|
|
|
+ return 'linear-gradient(135deg, ' + cfg.main + ', ' + (cfg.bgColor || BrandColors.white) + ')'
|
|
|
},
|
|
},
|
|
|
drawPoster() {
|
|
drawPoster() {
|
|
|
var self = this
|
|
var self = this
|
|
@@ -267,7 +268,7 @@ export default {
|
|
|
}
|
|
}
|
|
|
// 【模板3 · card】白色背景
|
|
// 【模板3 · card】白色背景
|
|
|
else {
|
|
else {
|
|
|
- ctx.setFillStyle('BrandColors.white')
|
|
|
|
|
|
|
+ ctx.setFillStyle(BrandColors.white)
|
|
|
ctx.fillRect(0, 0, w, h)
|
|
ctx.fillRect(0, 0, w, h)
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -342,7 +343,7 @@ export default {
|
|
|
|
|
|
|
|
_drawTopDecoration(ctx, w, colors) {
|
|
_drawTopDecoration(ctx, w, colors) {
|
|
|
var centerX = w / 2
|
|
var centerX = w / 2
|
|
|
- var dotColors = ['BrandColors.body', 'BrandColors.wisdom', BrandColors.wealth, 'BrandColors.success', BrandColors.mind]
|
|
|
|
|
|
|
+ var dotColors = [BrandColors.body, BrandColors.wisdom, BrandColors.wealth, BrandColors.success, BrandColors.mind]
|
|
|
var dotY = 28
|
|
var dotY = 28
|
|
|
var dotR = 5
|
|
var dotR = 5
|
|
|
var dotSpacing = 26
|
|
var dotSpacing = 26
|
|
@@ -357,7 +358,7 @@ export default {
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- ctx.setFillStyle('BrandColors.white')
|
|
|
|
|
|
|
+ ctx.setFillStyle(BrandColors.white)
|
|
|
ctx.setFontSize(this._fs(20))
|
|
ctx.setFontSize(this._fs(20))
|
|
|
ctx.setTextAlign('center')
|
|
ctx.setTextAlign('center')
|
|
|
ctx.setTextBaseline('top')
|
|
ctx.setTextBaseline('top')
|
|
@@ -390,7 +391,7 @@ export default {
|
|
|
this._roundRect(ctx, x, y, w, h, 8)
|
|
this._roundRect(ctx, x, y, w, h, 8)
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
|
|
|
|
|
- ctx.setFillStyle('BrandColors.primary')
|
|
|
|
|
|
|
+ ctx.setFillStyle(BrandColors.primary)
|
|
|
ctx.setFontSize(this._fs(16))
|
|
ctx.setFontSize(this._fs(16))
|
|
|
ctx.setTextAlign('center')
|
|
ctx.setTextAlign('center')
|
|
|
ctx.setTextBaseline('middle')
|
|
ctx.setTextBaseline('middle')
|
|
@@ -402,7 +403,7 @@ export default {
|
|
|
var data = this.energyData || {}
|
|
var data = this.energyData || {}
|
|
|
var dims = data.dims || []
|
|
var dims = data.dims || []
|
|
|
|
|
|
|
|
- ctx.setFillStyle('BrandColors.white')
|
|
|
|
|
|
|
+ ctx.setFillStyle(BrandColors.white)
|
|
|
this._roundRect(ctx, x, y, w, h, 8)
|
|
this._roundRect(ctx, x, y, w, h, 8)
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
|
|
|
|
@@ -446,7 +447,7 @@ export default {
|
|
|
ctx.arc(cx, y + 94, 17, 0, 2 * Math.PI)
|
|
ctx.arc(cx, y + 94, 17, 0, 2 * Math.PI)
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
|
|
|
|
|
- ctx.setFillStyle('BrandColors.white')
|
|
|
|
|
|
|
+ ctx.setFillStyle(BrandColors.white)
|
|
|
ctx.setFontSize(this._fs(15))
|
|
ctx.setFontSize(this._fs(15))
|
|
|
ctx.setTextAlign('center')
|
|
ctx.setTextAlign('center')
|
|
|
ctx.setTextBaseline('middle')
|
|
ctx.setTextBaseline('middle')
|
|
@@ -487,7 +488,7 @@ export default {
|
|
|
this._roundRect(ctx, x, y, w, h, 8)
|
|
this._roundRect(ctx, x, y, w, h, 8)
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
|
|
|
|
|
- var dotColors = ['BrandColors.body', 'BrandColors.wisdom', BrandColors.wealth, 'BrandColors.success', BrandColors.mind]
|
|
|
|
|
|
|
+ var dotColors = [BrandColors.body, BrandColors.wisdom, BrandColors.wealth, BrandColors.success, BrandColors.mind]
|
|
|
var centerX = x + w / 2
|
|
var centerX = x + w / 2
|
|
|
for (var i = 0; i < 5; i++) {
|
|
for (var i = 0; i < 5; i++) {
|
|
|
ctx.setFillStyle(dotColors[i])
|
|
ctx.setFillStyle(dotColors[i])
|
|
@@ -496,7 +497,7 @@ export default {
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
- ctx.setFillStyle('BrandColors.white')
|
|
|
|
|
|
|
+ ctx.setFillStyle(BrandColors.white)
|
|
|
ctx.setFontSize(this._fs(24))
|
|
ctx.setFontSize(this._fs(24))
|
|
|
ctx.setTextAlign('center')
|
|
ctx.setTextAlign('center')
|
|
|
ctx.setTextBaseline('top')
|
|
ctx.setTextBaseline('top')
|
|
@@ -579,7 +580,7 @@ export default {
|
|
|
data: base64Data,
|
|
data: base64Data,
|
|
|
encoding: 'base64',
|
|
encoding: 'base64',
|
|
|
success: function() {
|
|
success: function() {
|
|
|
- ctx.setFillStyle('BrandColors.white')
|
|
|
|
|
|
|
+ ctx.setFillStyle(BrandColors.white)
|
|
|
self._roundRect(ctx, qrX - 10, qrY - 10, qrSize + 20, qrSize + 20, 8)
|
|
self._roundRect(ctx, qrX - 10, qrY - 10, qrSize + 20, qrSize + 20, 8)
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
|
|
|
|
@@ -637,7 +638,7 @@ export default {
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
_drawQrPlaceholder(ctx, x, y, size) {
|
|
_drawQrPlaceholder(ctx, x, y, size) {
|
|
|
- ctx.setFillStyle('BrandColors.white')
|
|
|
|
|
|
|
+ ctx.setFillStyle(BrandColors.white)
|
|
|
this._roundRect(ctx, x - 10, y - 10, size + 20, size + 20, 8)
|
|
this._roundRect(ctx, x - 10, y - 10, size + 20, size + 20, 8)
|
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
|
|
|
|
@@ -680,7 +681,7 @@ export default {
|
|
|
ctx.setTextBaseline('top')
|
|
ctx.setTextBaseline('top')
|
|
|
ctx.fillText(this.ctaText || '长按识别二维码 · 查看详情', centerX, bottomY)
|
|
ctx.fillText(this.ctaText || '长按识别二维码 · 查看详情', centerX, bottomY)
|
|
|
|
|
|
|
|
- var dotColors = ['BrandColors.body', 'BrandColors.wisdom', BrandColors.wealth, 'BrandColors.success', BrandColors.mind]
|
|
|
|
|
|
|
+ var dotColors = [BrandColors.body, BrandColors.wisdom, BrandColors.wealth, BrandColors.success, BrandColors.mind]
|
|
|
var dotY = h - 22
|
|
var dotY = h - 22
|
|
|
var dotR = 4
|
|
var dotR = 4
|
|
|
var dotSpacing = 20
|
|
var dotSpacing = 20
|
|
@@ -765,8 +766,6 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
-import { body, primary, primaryPale, success, white, wisdom, BrandColors } from '@/utils/brand-colors.js'
|
|
|
|
|
-
|
|
|
|
|
<style scoped lang="scss">
|
|
<style scoped lang="scss">
|
|
|
.poster-overlay {
|
|
.poster-overlay {
|
|
|
position: fixed;
|
|
position: fixed;
|