feat: 动态引入绑定手机号js文件

.eslintrc.js

@@ -8,6 +8,9 @@ module.exports = {
     '@vue/standard',
     '@vue/typescript/recommended'
   ],
+  globals: {
+    $: true
+  },
   parserOptions: {
     ecmaVersion: 2020
   },

src/views/main/ReportDetail.vue

@@ -39,9 +39,10 @@
           <div class="m-html" v-html="detail.content"></div>
         </div>
       </div>
-      <div class="j-footer">
+      <div class="j-footer" ref="footer">
         <div class="j-button-group">
-            <button class="j-button-confirm" @click="goBuy(detail.id)">立即购买</button>
+          <!-- <button class="j-button-confirm" data-need-bind-phone @click="goBuy(detail.id)">立即购买</button> -->
+          <button class="j-button-confirm" data-need-bind-phone>立即购买</button>
         </div>
       </div>
     </div>
@@ -51,6 +52,8 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { mapMutations, mapActions } from 'vuex'
 import { Skeleton } from 'vant'
+declare const $: any
+
 @Component({
   name: 'detail',
   components: {
@@ -72,6 +75,15 @@ export default class Home extends Vue {
   protected saveReportInfo!: any
   protected clearBuyState!: any
 
+  injectBindPhoneScript = {
+    wx: [
+      '/js/check-bind-phone.js'
+    ],
+    app: [
+      '/jyapp/js/check-bind-phone.js'
+    ]
+  }
+
   skeletonShow = true
   // detail = {
   //   id: 12,
@@ -107,18 +119,31 @@ export default class Home extends Vue {
       if (res.error_code === 0 && res.data) {
         this.detail = res.data
         this.skeletonShow = false
+        this.$nextTick(() => this.loadScript(this.injectBindPhoneScript[this.$env.platform]))
       }
     })
+
+    $('.j-button-confirm').on('click', () => this.goBuy(this.detail.id))
   }
 
   goBuy (id) {
     this.saveReportInfo(this.detail)
     if (this.disWord) {
-      this.$router.push(`/buy/${id}?disWord=${this.disWord}`)
+      this.$router.push(`/buy/${id}?disWord=${this.disWord}&t=${+new Date()}`)
     } else {
-      this.$router.push(`/buy/${id}`)
+      this.$router.push(`/buy/${id}?t=${+new Date()}`)
     }
   }
+
+  loadScript (urls) {
+    if (!urls) return console.log('urls为空')
+    const dom: any = this.$refs.footer
+    urls.forEach(item => {
+      const script = document.createElement('script')
+      script.src = `${item}?v=${+new Date()}`
+      dom.parentNode.insertBefore(script, dom)
+    })
+  }
 }
 </script>
 <style lang="scss">

vue.config.js

@@ -34,6 +34,7 @@ const cdn = {
     '//cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
     '//cdn.jsdelivr.net/npm/js-cookie@2.2.1/src/js.cookie.min.js',
     '//cdn.jsdelivr.net/npm/moment@2.26.0/moment.min.js',
+    '//cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js',
     '//res.wx.qq.com/open/js/jweixin-1.6.0.js'
   ]
 }
@@ -77,10 +78,10 @@ module.exports = {
     }
   },
   css: {
-    extract: {
-      filename: 'css/[name].[contenthash:10].css?v=[contenthash:8]',
-      chunkFilename: 'css/[name].[contenthash:10].css?v=[contenthash:8]'
-    },
+    // extract: {
+    //   filename: 'css/[name].[contenthash:10].css?v=[contenthash:8]',
+    //   chunkFilename: 'css/[name].[contenthash:10].css?v=[contenthash:8]'
+    // },
     loaderOptions: {
       sass: {
         prependData: '@import "@/style/_mixin.scss";@import "@/style/_variables.scss";' // 全局引入
@@ -116,9 +117,9 @@ module.exports = {
     // eslint-disable-next-line no-unused-expressions
     // config.plugins.delete('named-chunks')
     if (process.env.NODE_ENV === 'production') {
-      config.output
-        .chunkFilename('js/[name].[contenthash:10].js?v=[contenthash:8]')
-        .filename('js/[name].[contenthash:10].js?v=[contenthash:8]')
+      // config.output
+      //   .chunkFilename('js/[name].[contenthash:10].js?v=[contenthash:8]')
+      //   .filename('js/[name].[contenthash:10].js?v=[contenthash:8]')
       // 打包时需要执行，开发环境运行不需要执行
       config.externals(externals)
 
@@ -138,7 +139,10 @@ module.exports = {
         // html中添加wxjsssk的cdn
         args[0].cdn = {
           js: [
-            cdn.js[cdn.js.length - 1]
+            // 倒数第1个 jweixin-1.6.0.js
+            cdn.js[cdn.js.length - 1],
+            // 倒数第2个 jquery.min.js
+            cdn.js[cdn.js.length - 2]
           ]
         }
         return args