51 lines
1.5 KiB
JavaScript
51 lines
1.5 KiB
JavaScript
import { getActiveVars, loadAndApplyTheme } from '@/utils/theme'
|
||
|
||
/**
|
||
* 页面主题 mixin：把后端 css_vars 绑到页面可读的计算属性
|
||
* 小程序无法动态改全局 scss，必须在页面 :style 里消费这些值
|
||
*/
|
||
export default {
|
||
data() {
|
||
return {
|
||
themeVars: getActiveVars(),
|
||
}
|
||
},
|
||
computed: {
|
||
/** 页面根节点背景/文字 */
|
||
themePageStyle() {
|
||
const v = this.themeVars || {}
|
||
return {
|
||
backgroundColor: v['--color-bg'] || '#F7F8FA',
|
||
color: v['--color-text'] || '#1a1a1a',
|
||
}
|
||
},
|
||
themePrimary() {
|
||
return (this.themeVars && this.themeVars['--color-primary']) || '#B08D57'
|
||
},
|
||
themeSurface() {
|
||
return (this.themeVars && this.themeVars['--color-surface']) || '#ffffff'
|
||
},
|
||
themeText() {
|
||
return (this.themeVars && this.themeVars['--color-text']) || '#1a1a1a'
|
||
},
|
||
themeTextSoft() {
|
||
return (this.themeVars && this.themeVars['--color-text-soft']) || '#666666'
|
||
},
|
||
themeBorder() {
|
||
return (this.themeVars && this.themeVars['--color-border']) || '#eeeeee'
|
||
},
|
||
themeRadius() {
|
||
return (this.themeVars && this.themeVars['--radius-md']) || '16rpx'
|
||
},
|
||
},
|
||
async onShow() {
|
||
// 每次进页刷新：后台改默认模板后无需杀掉小程序
|
||
try {
|
||
const theme = await loadAndApplyTheme()
|
||
this.themeVars = (theme && theme.css_vars) || getActiveVars()
|
||
} catch (e) {
|
||
this.themeVars = getActiveVars()
|
||
}
|
||
},
|
||
}
|