提交一波

src/main.js

@@ -10,7 +10,8 @@ window.axios = axios
 
 Vue.use(ElementUI);
 window.$glob = {}
-import('./utils/fetch.js').then(() => {
+
+import('./utils/inject.js').then(() => {
   new Vue({
     router,
     render: (h) => h(App)

src/utils/fetch.js

@@ -1,7 +1,8 @@
-const {axios, $glob} = window
+const init = () => new Promise(resolve => {
+  const {axios, $glob} = window
 
-let getAuthing = false
-const getToken = () => {
+  let getAuthing = false
+  const getToken = () => {
     getAuthing = true
     return axios.post("http://10.0.97.209/data-boot/na/sys/login", {
       t: Date.now(),
@@ -14,14 +15,14 @@ const getToken = () => {
         $glob.token = res.data.data.token
       }
     }).finally(() => getAuthing = false)
-}
-const http = axios.create({baseURL: '/'})
-const addToken = (config) => {
+  }
+  const http = axios.create({baseURL: '/'})
+  const addToken = (config) => {
     config.headers['h-token'] = $glob.token
     return config
-}
-window.$wait = (t = 500) => new Promise(resolve => setTimeout(resolve, t))
-http.interceptors.request.use(async config => {
+  }
+  window.$wait = (t = 500) => new Promise(resolve => setTimeout(resolve, t))
+  http.interceptors.request.use(async config => {
     while (getAuthing) {
       await $wait()
     }
@@ -29,13 +30,16 @@ http.interceptors.request.use(async config => {
       await getToken()
     }
     return addToken(config)
-})
-http.interceptors.response.use(res => {
+  })
+  http.interceptors.response.use(res => {
     if (res?.data) {
       return res.data
     } else if (res?.code == 401) {
       return getToken().then(() => http.request(res.config))
     }
     return res
+  })
+  window.$http = http
+  resolve()
 })
-window.$http = http
+await init()

src/utils/inject.js

@@ -0,0 +1,12 @@
+const KENGEE_CDN_BASE = "http://10.0.97.209/presource/datascreen/"
+const libs = [`${KENGEE_CDN_BASE}/js/pinyin.min.js`]
+
+Promise.all([
+  import("./fetch"),
+  ...libs.map(url => new Promise(resolve => {
+    const script = document.createElement("script")
+    script.src = url
+    document.head.appendChild(script)
+    script.onload = () => resolve()
+  })),
+])

src/views/AppStoresTable.vue

@@ -139,11 +139,11 @@ export default {
                 <hls-player :url="url"/>
               </el-carousel-item>
             </el-carousel>
-            <div class="subTiltle" v-text="'品类销售情况'"/>
+            <div class="subTitle" v-text="'品类销售情况'"/>
             <el-table :data="store.categorySale" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
               <el-table-column v-for="column in columns.品类销售情况" v-bind="column" :key="column.prop"/>
             </el-table>
-            <div class="subTiltle" v-text="'重点单品情况'"/>
+            <div class="subTitle" v-text="'重点单品情况'"/>
             <el-table :data="store.keyGoods" size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
               <el-table-column v-for="column in columns.重点单品情况" v-bind="column" :key="column.prop">
                 <template v-slot="{row}">
@@ -201,7 +201,7 @@ export default {
   background-size: 100% 100%;
 }
 
-.AppStoresTable .subTiltle {
+.AppStoresTable .subTitle {
   line-height: 20px;
   width: fit-content;
   margin: 24px auto 12px;

src/views/AppSubTitle.vue

@@ -0,0 +1,59 @@
+<script>
+export default {
+  name: "AppSubTitle",
+  label: "副标题",
+  data() {
+    return {
+      text: "副标题",
+      pinyinText: ""
+    }
+  },
+  methods: {
+    async getPinyin(text) {
+      const wait = (t = 500) => new Promise(resolve => setTimeout(resolve, t))
+      while (!window.pinyinPro) await wait()
+      const {pinyin} = window.pinyinPro
+      this.pinyinText = pinyin(text, {toneType: 'none'}).toUpperCase()
+
+    }
+  },
+  watch: {
+    text: {
+      immediate: true,
+      handler(v) {
+        v && this.getPinyin(v)
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="AppSubTitle">
+    {{ text }}
+    <span v-text="pinyinText"/>
+  </section>
+</template>
+
+<style scoped>
+.AppSubTitle {
+  height: 48px;
+  padding: 8px 0 8px 38px;
+  margin-bottom: 24px;
+  box-sizing: border-box;
+  line-height: 32px;
+  background-image: url("http://10.0.97.209/img/kengee/kengee4.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  color: #fff;
+  max-width: 400px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.AppSubTitle span {
+  font-size: 12px;
+  color: #215A8E;
+}
+</style>