side-nav添加交互

components/side-nav.vue

@@ -1,7 +1,12 @@
 <template>
   <div class="side-content">
     <ul class="side-nav">
-      <li class="side-item" v-for="(item, index) in sideiItem" :key="index">
+      <li 
+        class="side-item" 
+        v-for="(item, index) in sideiItem" 
+        :key="index"
+        @click="jump(item)"
+      >
         <div class="side-label">
           <img :src="item.icon" :alt="item.label" />
           <h4>{{ item.label }}</h4>
@@ -19,18 +24,28 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 
 export default {
   name: 'SideNav',
   data() {
     return {
-      sideiItem: [
+      
+    }
+  },
+  computed: {
+    ...mapState({
+      footerInfo: state => state.footerInfo
+    }),
+    sideiItem() {
+      return [
         {
           icon: require('../assets/image/icon/contact.png'),
           label: this.$t('common.Contact'),
-          desc: `<div>
+          url: `tel:${this.footerInfo.tel}`,
+          desc: `<div">
               <h6>${this.$t('contactUs.contactUs')}</h6>
-              <p>0086 182 5311 2969</p>
+              <p>${this.footerInfo.tel}</p>
             </div>`
         },
         {
@@ -40,15 +55,30 @@ export default {
         {
           icon: require('../assets/image/icon/whats.png'),
           label: this.$t('common.Whats'),
+          url: `https://wa.me/${this.footerInfo.whatsapp}`,
+          desc: `<div>
+            <h6>${this.$t('common.Whats')}</h6>
+            <p>${this.footerInfo.whatsapp}</p>
+          </div>`
         },
         {
           icon: require('../assets/image/icon/email1.png'),
           label: this.$t('common.E-mail'),
+          url: `mailto:${this.footerInfo.email}`,
+          desc: `<div>
+            <h6>${this.$t('common.E-mail')}</h6>
+            <p>${this.footerInfo.email}</p>
+          </div>`
         }
       ]
-    }
+    },
   },
   methods:{
+    jump(row) {
+      if (row.url) {
+        window.open(row.url)
+      }
+    },
     goTop() {
       window.scrollTo({ top: 0, behavior: 'smooth' });
     }

env.js

@@ -8,8 +8,8 @@ module.exports = {
   // 开发环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api
   dev: {
     MODE: 'dev',
-    // VUE_APP_API_URL: 'http://114.132.197.85:8099/',
+    VUE_APP_API_URL: 'http://1.92.99.15:8099/',
-    VUE_APP_API_URL: 'http://192.168.1.13:8099/',
+    // VUE_APP_API_URL: 'http://192.168.1.13:8099/',
     VUE_APP_WEBSOCKET: 'ws://192.168.1.13:8099/ws/asset/'
   },
   // 生产环境 接口请求地址 (http)或(https)://www.a.com(换成你的域名)/api 非独立部署默认为空