封装tabbar组件

2022-09-21 18:35:54 +08:00 · 2022-09-21 18:35:54 +08:00 · d78820aaec
parent cc1398597a
commit d78820aaec
11 changed files with 111 additions and 56 deletions
--- a/.hintrc
+++ b/.hintrc
@ -8,6 +8,13 @@
      {
        "label": "off"
      }
-    ]
+    ],
+    "axe/text-alternatives": [
+      "default",
+      {
+        "image-alt": "off"
+      }
+    ],
+    "no-inline-styles": "off"
  }
 }
--- a/v1_5_0_C/couponCollection.css
+++ b/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;
--- a/v1_5_0_C/couponCollection.html
+++ b/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">
-            <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>
+        <tab-component :current="1"></tab-component>
    </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'));
--- a/v1_5_0_C/exchange.html
+++ b/v1_5_0_C/exchange.html
@ -235,6 +235,7 @@
        },

        components: {
+            tabComponent
            // payPop
        },

--- a/v1_5_0_C/img/checked_home.png
+++ b/v1_5_0_C/img/checked_home.png
--- a/v1_5_0_C/img/home.png
+++ b/v1_5_0_C/img/home.png
--- a/v1_5_0_C/index.html
+++ b/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);
--- a/v1_5_0_C/myCoupon.html
+++ b/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: {
--- a/v1_5_0_C/myOrder.html
+++ b/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) {
--- a/v1_5_0_C/tabbar.css
+++ b/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;
+}
--- a/v1_5_0_C/tabbar.js
+++ b/v1_5_0_C/tabbar.js
@ -1,29 +1,43 @@
-Vue.component("tabbar-component", {
+const tabComponent = {
  template: `
-        <div class="tabbar">
-          
-        </div>
-        `,
-  data: {
-    return: {
-      list: [
-        {
-          id: 1,
-          src: require("./img/home.png"),
-          link: ""
-        },
-        {
-          id: 2,
-          src: require("./img/order.png"),
-          link: ""
-        },
-        {
-          id: 3,
-          src: require("./img/coupon.png "),
-          link: ""
-        }
-      ],
-      active: {}
+        <ul class="tabList">
+          <li  v-for="item in tabComponent.list" :key="item.id"  @click='tabComponent.iconHandler(item)'>
+              <img :src="current===item.id?item.checkedSrc:item.src" alt="">
+              <p>{{item.text}}</p>
+          </li>
+        </ul>`,
+  props: {
+    current: {
+      type: Number,
+      default: 1
    }
+  },
+
+  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)
  }
-})
+}