fix(样式): 修复生产环境产物样式不生效的问题
This commit is contained in:
1
App.vue
1
App.vue
@@ -67,6 +67,7 @@
|
||||
// 主题风格
|
||||
if (uni.getStorageSync('themeStyle')) {
|
||||
this.$store.commit('setThemeStyle', configExternal.loadThemeSync(uni.getStorageSync('themeStyle')));
|
||||
this.$store.dispatch('themeColorSet');
|
||||
}
|
||||
|
||||
// 插件是否存在
|
||||
|
||||
@@ -111,6 +111,7 @@ class ConfigExternal {
|
||||
try {
|
||||
// 动态加载主题配置
|
||||
const themeData = require(`@/common/js/style_color.js`)['default'][theme];
|
||||
console.log('sync themeData => ', themeData);
|
||||
this.loadedConfigs[`theme_${theme}`] = themeData;
|
||||
return themeData;
|
||||
} catch (error) {
|
||||
@@ -136,7 +137,8 @@ class ConfigExternal {
|
||||
this.loadPromises[`theme_${theme}`] = new Promise((resolve, reject) => {
|
||||
try {
|
||||
// 动态加载主题配置
|
||||
const themeData = require(`@/common/js/style_color.js`)[theme];
|
||||
const themeData = require(`@/common/js/style_color.js`)['default'][theme];
|
||||
console.log('async themeData => ', themeData);
|
||||
this.loadedConfigs[`theme_${theme}`] = themeData;
|
||||
resolve(themeData);
|
||||
} catch (error) {
|
||||
|
||||
@@ -1,21 +1,8 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 页面样式,动态设置主色调
|
||||
themeColor: '' //''--base-color:#fa5d14;--base-help-color:#ff7e00;'
|
||||
}
|
||||
},
|
||||
onLoad() { },
|
||||
onShow() {
|
||||
// 刷新多语言
|
||||
this.$langConfig.refresh();
|
||||
let time = setInterval(() => {
|
||||
let theme = this.themeStyle;
|
||||
if (theme && theme.main_color) {
|
||||
this.themeColorSet();
|
||||
clearInterval(time);
|
||||
}
|
||||
}, 50);
|
||||
},
|
||||
computed: {
|
||||
// 是否是英文环境
|
||||
@@ -25,6 +12,9 @@ export default {
|
||||
themeStyle() {
|
||||
return this.$store.state.themeStyle;
|
||||
},
|
||||
themeColor() {
|
||||
return this.$store.state.themeColor;
|
||||
},
|
||||
// 插件是否存在
|
||||
addonIsExist() {
|
||||
return this.$store.state.addonIsExist;
|
||||
@@ -111,25 +101,7 @@ export default {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
themeColorSet() {
|
||||
let theme = this.themeStyle;
|
||||
this.themeColor = `--base-color:${theme.main_color};--base-help-color:${theme.aux_color};`;
|
||||
if (this.tabBarHeight != '56px') this.themeColor += `--tab-bar-height:${this.tabBarHeight};`
|
||||
Object.keys(theme).forEach(key => {
|
||||
let data = theme[key];
|
||||
if (typeof (data) == "object") {
|
||||
Object.keys(data).forEach(k => {
|
||||
this.themeColor += '--' + k.replace(/_/g, "-") + ':' + data[k] + ';';
|
||||
});
|
||||
} else if (typeof (key) == "string" && key) {
|
||||
this.themeColor += '--' + key.replace(/_/g, "-") + ':' + data + ';';
|
||||
}
|
||||
});
|
||||
for (let i = 9; i >= 5; i--) {
|
||||
let color = this.$util.colourBlend(theme.main_color, '#ffffff', (i / 10));
|
||||
this.themeColor += `--base-color-light-${i}:${color};`;
|
||||
}
|
||||
},
|
||||
|
||||
// 颜色变浅(>0)、变深函数(<0)
|
||||
lightenDarkenColor(color, amount) {
|
||||
|
||||
|
||||
@@ -72,7 +72,7 @@ export default {
|
||||
//当前页面语言包(同步加载)
|
||||
let route = _this.route;
|
||||
let langPath = processRoutePath(route);
|
||||
console.log(`当前页面语言包路径: ${langPath}`);
|
||||
// console.log(`当前页面语言包路径: ${langPath}`);
|
||||
|
||||
// 加载当前页面语言包
|
||||
let currentPageLang = loadLangPackSync(locale, langPath);
|
||||
@@ -113,7 +113,7 @@ export default {
|
||||
if (value == undefined || (value == 'title' && field == 'title')) value = ''; // field
|
||||
|
||||
// 多语言调试,注释后可以关闭控制台输出
|
||||
console.log(`字段: ${field}, 值: ${value}`)
|
||||
// console.log(`字段: ${field}, 值: ${value}`)
|
||||
return value;
|
||||
},
|
||||
/**
|
||||
|
||||
@@ -2,7 +2,7 @@ export const lang = {
|
||||
//title为每个页面的标题
|
||||
title: '',
|
||||
select: '选择',
|
||||
details:'商品详情',
|
||||
details:'资源详情',
|
||||
params: '参数',
|
||||
service: '商品服务',
|
||||
allGoods: '全部商品',
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
{
|
||||
"path": "detail",
|
||||
"style": {
|
||||
"navigationBarTitleText": "商品详情"
|
||||
"navigationBarTitleText": "资源详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view class="container">
|
||||
<scroll-view class="scroll-view" :scroll-y="true" :show-scrollbar="false" :refresher-enabled="true" :refresher-triggered="refresherTriggered" @refresherrefresh="onRefresh">
|
||||
<block v-if="hasData">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<block v-if="diyData">
|
||||
<block v-for="(item, index) in diyData.value" :key="index">
|
||||
<view v-if="item.componentName == 'GoodsCategory'">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<!-- #ifndef H5 -->
|
||||
<!-- <view class="page-header" v-if="goodsSkuDetail && goodsSkuDetail.config && goodsSkuDetail.config.nav_bar_switch == 0">
|
||||
<ns-navbar :data="navbarData" :isBack="true"></ns-navbar>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<loading-cover ref="loadingCover"></loading-cover>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<loading-cover ref="loadingCover"></loading-cover>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<common-payment :api="api" create-data-key="orderCreateData" ref="payment"></common-payment>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<mescroll-uni ref="mescroll" @getData="getData" top="0" class="member-point" :size="8" v-if="storeToken">
|
||||
<block slot="list">
|
||||
<view class="team-li" v-for="(item, index) in teamList" :key="index" v-if="teamList.length != 0" @click="toFenxiaoOrder(item)">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view class="withdraw-cate">
|
||||
<block v-for="(item, index) in category" :key="index">
|
||||
<view @click="selectCate(item.id)" class="cate-li" :class="{ 'active color-base-text color-base-bg-before': selectId == item.id }">{{ item.name }}</view>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view class="order-detail">
|
||||
<view class="order-detail-box">
|
||||
<view class="header">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<mescroll-uni ref="mescroll" @getData="getData" top="20" class="member-point" :size="8" v-if="storeToken">
|
||||
<view class="goods_list" slot="list">
|
||||
<view class="order-list">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view class="team-cate" v-if="storeToken && levelNum > 1">
|
||||
<block v-for="(item, index) in levelList" :key="index">
|
||||
<view class="cate-li" :class="{ 'active color-base-text color-base-border': currentLevel == item.level }" @click="selectLevel(item.level)">{{ item.name }}</view>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<mescroll-uni @getData="getData" class="member-point">
|
||||
<view slot="list">
|
||||
<block v-if="withdrawList.length">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view class="money-wrap">
|
||||
<text>-{{ detail.money }}</text>
|
||||
</view>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view class="category-page-wrap category-template-1" style="height: calc(-56px + 100vh);">
|
||||
|
||||
<!-- <view class="search-box" @click="$util.redirectTo('/pages_tool/goods/search')">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view scroll-y="true" class="goods-detail" :class="isIphoneX ? 'active' : ''">
|
||||
<view class="goods-container">
|
||||
<view class="goods-media">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<mescroll-uni @getData="getData" ref="mescroll">
|
||||
<block slot="list">
|
||||
<view class="article-wrap" v-if="list.length">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view class="about w100">
|
||||
<view class="bg border-top"></view>
|
||||
<view class="list_cotact padding-top">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view class="cf-container color-line-border">
|
||||
<view class="tab">
|
||||
<view @click="changeSort(1)"><text :class="sort == 1 ? 'color-base-text active color-base-border-bottom' : ''">全部</text></view>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view class="content">
|
||||
<view class="cate-search">
|
||||
<view class="search-box" @click="search()" @tap.stop="search()">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<mescroll-uni ref="mescroll" @getData="getData" v-if="storeToken">
|
||||
<block slot="list">
|
||||
<view class="nc-info-list-content">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<mescroll-uni ref="mescroll" @getData="getListData" v-if="storeToken">
|
||||
<block slot="list">
|
||||
<view class="address-list">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<!-- <scroll-view id="tab-bar" class="order-nav" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
|
||||
<view v-for="(statusItem, statusIndex) in statusList" :key="statusIndex" class="uni-tab-item" :id="statusItem.id" :data-current="statusIndex" @click="ontabtap">
|
||||
<text class="uni-tab-item-title" :class="statusIndex == orderStatus ? 'uni-tab-item-title-active' : ''">{{ statusItem.name }}</text>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<mescroll-uni ref="mescroll" @getData="getData" class="member-point" :size="8" @listenRefresh="listenRefresh" v-if="storeToken">
|
||||
<view class="goods_list" slot="list">
|
||||
<block v-if="collectionList.length > 0">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view v-if="indent == 'all' && memberInfo" class="info-wrap">
|
||||
<!-- 头像@click="headImage" -->
|
||||
<view class="info-list-cell info-item info-list-con" hover-class="cell-hover">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<template v-if="memberInfo">
|
||||
<!-- 修改用户名 -->
|
||||
<view v-if="indent == 'username'" class="edit-info">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view v-if="info" style="background-color: #fff;">
|
||||
|
||||
<view class="invite_adv">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<!-- <view class="tab color-bg">
|
||||
<view class="tab-left">
|
||||
<picker mode="date" :value="searchType.date" @change="bindDateChange" fields="month">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<mescroll-uni @getData="getData" class="member-point">
|
||||
<view slot="list">
|
||||
<block v-if="dataList.length">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view class="money-wrap">
|
||||
<text>-{{ detail.apply_money }}</text>
|
||||
</view>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<mescroll-uni @getData="getData" ref="mescroll">
|
||||
<block slot="list">
|
||||
<view class="notice-list" v-if="dataList.length">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<loading-cover ref="loadingCover"></loading-cover>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view>
|
||||
<view class="page">
|
||||
<block v-for="(item, index) in goodsList" :key="index">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<scroll-view class="order-nav" :scroll-x="true" :show-scrollbar="false">
|
||||
<view v-for="(packageItem, packageIndex) in packageList" :key="packageIndex" class="uni-tab-item" @click="ontabtap(packageIndex)">
|
||||
<text class="uni-tab-item-title" :class="packageIndex == currIndex ? 'uni-tab-item-title-active color-base-border color-base-text' : ''">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view>
|
||||
<scroll-view scroll-y="true" class="refund-container">
|
||||
<view class="goods-wrap">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view>
|
||||
<scroll-view scroll-y="true" class="refund-container">
|
||||
<view class="goods-wrap" v-for="(item,index) in refund_data.order_goods_info" :key="index">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<scroll-view scroll-y="true" class="detail-container" :class="{ 'safe-area': isIphoneX }" v-if="detail">
|
||||
<view v-show="action == ''">
|
||||
<view class="status-wrap">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view>
|
||||
<view class="refund-option">
|
||||
<view class="option-item" @click="selectRefundType(1)">
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view class="closeBox">
|
||||
<image :src="$util.img('public/uniapp/store/storeclose.png')" mode="widthFix"></image>
|
||||
<text class="close-title">{{ textVal }}</text>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view class="iconfont iconshang navigate-back" @click="navigateBack"></view>
|
||||
<web-view :src="src"></web-view>
|
||||
</view>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<page-meta :page-style="themeColor"></page-meta>
|
||||
<view>
|
||||
<view :style="themeColor">
|
||||
<view class="iconfont iconshang navigate-back" @click="navigateBack"></view>
|
||||
<web-view :src="src"></web-view>
|
||||
|
||||
|
||||
@@ -5,6 +5,7 @@ Vue.use(Vuex)
|
||||
import Http from '../common/js/http.js'
|
||||
import { themeConfig } from '../common/js/config-external.js'
|
||||
import configExternal from '../common/js/config-external.js'
|
||||
import util from '../common/js/util.js'
|
||||
|
||||
const store = new Vuex.Store({
|
||||
state: {
|
||||
@@ -14,6 +15,7 @@ const store = new Vuex.Store({
|
||||
tabBarList: '',
|
||||
siteState: 1,
|
||||
themeStyle: '',
|
||||
themeColor: '',
|
||||
addonIsExist: {
|
||||
bundling: 0,
|
||||
coupon: 0,
|
||||
@@ -236,6 +238,10 @@ const store = new Vuex.Store({
|
||||
// 设置AI未读消息数量
|
||||
setAiUnreadCount(state, value) {
|
||||
state.aiUnreadCount = value;
|
||||
},
|
||||
// 设置主题颜色
|
||||
setThemeColor(state, value) {
|
||||
state.themeColor = value;
|
||||
}
|
||||
},
|
||||
getters: {
|
||||
@@ -253,6 +259,7 @@ const store = new Vuex.Store({
|
||||
var data = res.data;
|
||||
if (data) {
|
||||
this.commit('setThemeStyle', configExternal.loadThemeSync(data.style_theme?.name));
|
||||
this.dispatch('themeColorSet');
|
||||
|
||||
// 底部导航
|
||||
this.commit('setTabBarList', data.diy_bottom_nav);
|
||||
@@ -401,6 +408,34 @@ const store = new Vuex.Store({
|
||||
|
||||
this.commit('setCartIds', ids);
|
||||
|
||||
},
|
||||
// 生成主题颜色CSS变量
|
||||
themeColorSet() {
|
||||
console.log('样式颜色设置...');
|
||||
let theme = this.state.themeStyle;
|
||||
if (!theme?.main_color || !theme?.aux_color) return;
|
||||
try {
|
||||
let themeColor = `--base-color:${theme.main_color};--base-help-color:${theme.aux_color};`;
|
||||
if (this.state.tabBarHeight != '56px') themeColor += `--tab-bar-height:${this.state.tabBarHeight};`
|
||||
Object.keys(theme).forEach(key => {
|
||||
let data = theme[key];
|
||||
if (typeof (data) == "object") {
|
||||
Object.keys(data).forEach(k => {
|
||||
themeColor += '--' + k.replace(/_/g, "-") + ':' + data[k] + ';';
|
||||
});
|
||||
} else if (typeof (key) == "string" && key) {
|
||||
themeColor += '--' + key.replace(/_/g, "-") + ':' + data + ';';
|
||||
}
|
||||
});
|
||||
for (let i = 9; i >= 5; i--) {
|
||||
let color = util.colourBlend(theme.main_color, '#ffffff', (i / 10));
|
||||
themeColor += `--base-color-light-${i}:${color};`;
|
||||
}
|
||||
this.commit('setThemeColor', themeColor);
|
||||
} catch (e) {
|
||||
console.error('设置主题颜色失败', e);
|
||||
}
|
||||
console.log('themeColor => ', this.state.themeColor);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user