提交一波

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,41 +1,45 @@
-const {axios, $glob} = window
+const init = () => new Promise(resolve => {
+  const {axios, $glob} = window
 
-let getAuthing = false
-const getToken = () => {
-  getAuthing = true
-  return axios.post("http://10.0.97.209/data-boot/na/sys/login", {
-    t: Date.now(),
-    userAcc: "kengee",
-    password: "kengee@123",
-    uuid: "",
-    captcha: ""
-  }).then(res => {
-    if (res?.data?.data) {
-      $glob.token = res.data.data.token
+  let getAuthing = false
+  const getToken = () => {
+    getAuthing = true
+    return axios.post("http://10.0.97.209/data-boot/na/sys/login", {
+      t: Date.now(),
+      userAcc: "kengee",
+      password: "kengee@123",
+      uuid: "",
+      captcha: ""
+    }).then(res => {
+      if (res?.data?.data) {
+        $glob.token = res.data.data.token
+      }
+    }).finally(() => getAuthing = false)
+  }
+  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 => {
+    while (getAuthing) {
+      await $wait()
     }
-  }).finally(() => getAuthing = false)
-}
-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 => {
-  while (getAuthing) {
-    await $wait()
-  }
-  if (!$glob.token && !getAuthing) {
-    await getToken()
-  }
-  return addToken(config)
+    if (!$glob.token && !getAuthing) {
+      await getToken()
+    }
+    return addToken(config)
+  })
+  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()
 })
-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
+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>