封装tabbar组件

.hintrc

@@ -8,6 +8,13 @@
       {
         "label": "off"
       }
-    ]
+    ],
+    "axe/text-alternatives": [
+      "default",
+      {
+        "image-alt": "off"
+      }
+    ],
+    "no-inline-styles": "off"
   }
 }

v1_5_0_C/couponCollection.css

@@ -1419,8 +1419,16 @@ ul {
 
 .tabList img {
     width: 0.22rem;
+    margin-bottom: 0.02rem;
 }
 
+.tabList li {
+    text-align: center;
+    color: #A7A6B3;
+    font-size: 0.11rem;
+}
+
+
 .search-backpresty {
     position: absolute;
     top: 0rem;

v1_5_0_C/couponCollection.html

@@ -18,6 +18,8 @@
     <link rel="stylesheet" href="./couponCollection.css">
     <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/loading.js"></script>
     <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/js/api1_4_0.js"></script>
+    <script src="./tabbar.js"></script>
+    <link rel="stylesheet" href="./tabbar.css">
 </head>
 <style scoped>
     * {
@@ -237,11 +239,7 @@
             src="http://lsxd-customcard-h5.oss-cn-hangzhou.aliyuncs.com/cardpwd/img/commimgs/close.png" alt=""
             @click="closeBtn()">
 
-        <ul class="tabList">
+        <tab-component :current="1"></tab-component>
-            <li @click="tabHandle(item.id)" v-for="item in list" :key="item.id">
-                <img :src="tabActive===item.id?item.checkedSrc:item.src" alt="">
-            </li>
-        </ul>
     </div>
 </body>
 <script>
@@ -272,29 +270,12 @@
                 showType: 0,
                 tiptext: '还没开始哟，兑换时间为2021-12-05 12:12:12至2021-01-01 12:12:12',
                 successTip: '兑换成功，请直接登录app使用！',
-                tabActive: 0,
-                list: [
-                    {
-                        id: 1,
-                        src: "./img/home.png",
-                        checkedSrc: "./img/checked_home.png",
-                        link: ""
-                    },
-                    {
-                        id: 2,
-                        src: "./img/order.png",
-                        checkedSrc: "./img/checked_order.png",
-                        link: ""
-                    },
-                    {
-                        id: 3,
-                        src: "./img/coupon.png",
-                        checkedSrc: "./img/checked_coupon.png",
-                        link: ""
-                    }
-                ],
             }
         },
+        components: {
+            tabComponent
+        },
+
         created () {
             this.getGoods();
             let productConfig = JSON.parse(sessionStorage.getItem('product_list'));

v1_5_0_C/exchange.html

@@ -235,6 +235,7 @@
         },
 
         components: {
+            tabComponent
             // payPop
         },
 

v1_5_0_C/index.html

@@ -155,7 +155,7 @@
                                 sessionStorage.setItem('haskey', keyCode);
                                 this.openDialog('正在加载商品...');
                                 sessionStorage.setItem('entryLink', window.location.href);//存储起始页链接
-                                window.location.replace("/homepage.html");
+                                window.location.replace("/couponCollection.html");
 
                             } else {
                                 self.openErrorDialog(res.message);
@@ -249,7 +249,7 @@
                             this.openDialog('正在加载商品...');
                             sessionStorage.setItem('entryLink', window.location.href);//存储起始页链接
                             setTimeout(() => {
-                                window.location.href = './homepage.html';
+                                window.location.href = './couponCollection.html';
                             }, 1000);
                         } else {
                             self.openErrorDialog(res.message);

v1_5_0_C/myCoupon.html

@@ -10,6 +10,8 @@
     <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=1367936144322" type="text/javascript"
         charset="utf-8"></script>
     <link rel="stylesheet" href="./myCoupon.css" />
+    <script src="./tabbar.js"></script>
+    <link rel="stylesheet" href="./tabbar.css">
 </head>
 
 <body>
@@ -49,7 +51,7 @@
                 </div>
                 <p class="text" v-html="item.text" />
             </div>
-
+            <tab-component :current="3"></tab-component>
         </div>
     </div>
     <script>
@@ -104,6 +106,9 @@
                     ]
                 }
             },
+            components: {
+                tabComponent
+            },
 
 
             computed: {

v1_5_0_C/myOrder.html

@@ -9,6 +9,8 @@
     <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/common/vue.min.js?v=1367936144322" type="text/javascript"
         charset="utf-8"></script>
     <link rel="stylesheet" href="./myOrder.css" />
+    <script src="./tabbar.js"></script>
+    <link rel="stylesheet" href="./tabbar.css">
 </head>
 
 <body>
@@ -35,6 +37,7 @@
                 <p class="button" v-show="statusColor(item.status)?.button">{{statusColor(item.status).button}}</p>
             </div>
         </div>
+        <tab-component :current="2"></tab-component>
     </div>
     <script>
         new Vue({
@@ -81,6 +84,12 @@
                     ]
                 }
             },
+
+            components: {
+                tabComponent
+                // payPop
+            },
+
             methods: {
                 moreHandle (id) {
                     if (id !== this.more) {

v1_5_0_C/tabbar.css

@@ -0,0 +1,30 @@
+@media screen and (min-width:900px) {
+    .tabList {
+        top: 5.46rem !important;
+    }
+}
+
+.tabList {
+    display: flex;
+    height: 0.53rem;
+    align-items: center;
+    border-top: 0.01rem solid #E6E6E6;
+    position: fixed;
+    z-index: 9999;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #fff;
+}
+
+.tabList img {
+    width: 0.22rem;
+    margin-bottom: 0.02rem;
+}
+
+.tabList li {
+    text-align: center;
+    color: #A7A6B3;
+    font-size: 0.11rem;
+    margin: 0 auto;
+}

v1_5_0_C/tabbar.js

@@ -1,29 +1,43 @@
-Vue.component("tabbar-component", {
+const tabComponent = {
   template: `
-        <div class="tabbar">
+        <ul class="tabList">
-          
+          <li  v-for="item in tabComponent.list" :key="item.id"  @click='tabComponent.iconHandler(item)'>
-        </div>
+              <img :src="current===item.id?item.checkedSrc:item.src" alt="">
-        `,
+              <p>{{item.text}}</p>
-  data: {
+          </li>
-    return: {
+        </ul>`,
-      list: [
+  props: {
-        {
+    current: {
-          id: 1,
+      type: Number,
-          src: require("./img/home.png"),
+      default: 1
-          link: ""
-        },
-        {
-          id: 2,
-          src: require("./img/order.png"),
-          link: ""
-        },
-        {
-          id: 3,
-          src: require("./img/coupon.png "),
-          link: ""
-        }
-      ],
-      active: {}
     }
+  },
+
+  list: [
+    {
+      id: 1,
+      src: "./img/home.png",
+      checkedSrc: "./img/checked_home.png",
+      link: "./couponCollection.html",
+      text: "首页"
+    },
+    {
+      id: 2,
+      src: "./img/order.png",
+      checkedSrc: "./img/checked_order.png",
+      link: "./myOrder.html",
+      text: "订单"
+    },
+    {
+      id: 3,
+      src: "./img/coupon.png",
+      checkedSrc: "./img/checked_coupon.png",
+      link: "./myCoupon.html",
+      text: "我的券"
+    }
+  ],
+
+  iconHandler(item) {
+    window.location.replace(item.link)
   }
-})
+}