From d78820aaece8f678c03286985bc39d204240b5c4 Mon Sep 17 00:00:00 2001
From: wangsongsole <wangsongsole@126.com>
Date: Wed, 21 Sep 2022 18:35:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85tabbar=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .hintrc                        |   9 ++++-
 v1_5_0_C/couponCollection.css  |   8 ++++
 v1_5_0_C/couponCollection.html |  33 ++++-------------
 v1_5_0_C/exchange.html         |   1 +
 v1_5_0_C/img/checked_home.png  | Bin 1359 -> 1322 bytes
 v1_5_0_C/img/home.png          | Bin 1322 -> 1359 bytes
 v1_5_0_C/index.html            |   4 +-
 v1_5_0_C/myCoupon.html         |   7 +++-
 v1_5_0_C/myOrder.html          |   9 +++++
 v1_5_0_C/tabbar.css            |  30 +++++++++++++++
 v1_5_0_C/tabbar.js             |  66 ++++++++++++++++++++-------------
 11 files changed, 111 insertions(+), 56 deletions(-)
 create mode 100644 v1_5_0_C/tabbar.css

diff --git a/.hintrc b/.hintrc
index 5b02c11..7445e02 100644
--- a/.hintrc
+++ b/.hintrc
@@ -8,6 +8,13 @@
       {
         "label": "off"
       }
-    ]
+    ],
+    "axe/text-alternatives": [
+      "default",
+      {
+        "image-alt": "off"
+      }
+    ],
+    "no-inline-styles": "off"
   }
 }
\ No newline at end of file
diff --git a/v1_5_0_C/couponCollection.css b/v1_5_0_C/couponCollection.css
index 3f66c5d..6bf20f6 100644
--- 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;
diff --git a/v1_5_0_C/couponCollection.html b/v1_5_0_C/couponCollection.html
index 77d4afd..0bff8f7 100644
--- 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'));
diff --git a/v1_5_0_C/exchange.html b/v1_5_0_C/exchange.html
index 65c2930..c7c4fb3 100644
--- a/v1_5_0_C/exchange.html
+++ b/v1_5_0_C/exchange.html
@@ -235,6 +235,7 @@
         },
 
         components: {
+            tabComponent
             // payPop
         },
 
diff --git a/v1_5_0_C/img/checked_home.png b/v1_5_0_C/img/checked_home.png
index 829634c22615316762bd145f3c5784a66ce64dc6..bc8d7c17229383de0485b4c07c69a4d3e6cce35b 100644
GIT binary patch
literal 1322
zcmYL{2~bmK5XT=01WHY4Yyh=jBo%}da#{fq3};MLh><8NmOB@64MJPUl!#2Z1{`oe
zV5D*k)<miU7${c6mU1;ysHIgzE};VgQi=gXNW$y)0!(K%`+mFo-{Z|oJ~x<+wcKL~
zK@gU6EPw}|uE@^<4ZO>F1rt0>Qh97Y=-z<c9AF*yL}(yL!kZ?8U_R8zf?!|*Cd?<p
z3HxEb9Rkq@7BB2aLXa1`!7-n}0w;tM=&*>g66*>BlaN7XHJbiTM1>`;8Ua}o;{wOf
z;dr`6M1z6FQjlJO>za@T1B<7^0ynLYt`)e!Vg?*XgC#&l1)B9(icUn+3F*MY0xAF)
zFldobbwD6u=n)wW@e+n!U<47O(Tk~iF{lDSrU3wZ4Pu5t#4rc}&<!HGF$CTi0xtxN
z7}#Y%%qT{bpu_-T-6n%ZP}-V+^n&5WX+|*S^@wK}B#aGkfC$-+z~()G0f>P|GJpX9
zF@UY}wlkYEjk~}lh#rw`?%LKPUC4_7GtSux{~u*6A=T~S##52|H_aG|8O@gy)Zp{q
zxy%bb4Vj=&Xj4-&jQM*zusEC*ekXxoZDVV@Yxkay?DrCh#C`i5NFO^oIysZwC^Q<K
z>EY$W^7Z!*3}UlSa8L30XTr{fhhL0{jE)lsB?*biscBziNTpwAWo5~(<`fhb6_=FV
zsHnVIU02u8aQlv2ez!%bZ14Q3tGm0euYX|R=^sOX4v&nCj!jHVP5(VJGdnvsKR^Fw
zacTMOTlLE7JI$JQU8gr}>|7py1VJblPJnNyhpOYR*|S5DyLw)IN6sU}Tl+RPlX2nB
zxa3+7ZYV3@6xTE*DaGM<GDNET9vvFgbZ~BIaK)d;5tlxrjz^Tv`aJjKj6XVn&p+AU
zb>)h=V=0&70)2Mc&&C_OoZu!?pl;?1Lli9CNOn5QJ1WU4S4O#!clUh@`v)z$tE`BJ
zdB-w{|7KoOj#)$N-XoK9=C{+sUMzOXqLN})aOk6Ll`ns*mvtt$I<KH74pqHay(McR
z#qbYeq~RaNpUr}L3hPx<DU$|8`ysVG?c(7!N;PJjQb-xQFN-|)#!QvXx~2;Aj6l^|
zwy@<ECRCoVFmTXB`Kz=<5jxrbb6>?MCTF3sypytH^g<0*orE5~G~py$z~S+|eA$`Y
zPtzZu!twa_4={boml5sID>bQ%3~AFnh>()^`E}=+q9fnzw!iN@_^qm0#Y{Vb*2Hnt
z-8R@C*=r9OBN>mGQ_qr*`>T2Qk|6Ao**`(kUQc|m?(=2EOeY8FFCr^Btum^hVQ<B#
zc#UBu%b@qlJ6JV`Iq}yOXjX{AtQ<vTY38tE@j`GKTDn|dU4HVG(z?3h_u>swQ%~to
zzC*QVbgpAVk8SPaDne5)X&}bk3uEq;XqOh$k(hd^$$i6Wprz|8j1)H<o!f>IuBxY>
z3^fu|vEFFh>o2v0njF`9=%@{wl3MwL+>ja4|D2Gi7_AcO<*nGF^Mcn;6SW$>$yi8k
UeQOto3;yU3ConkRo?m44e?V4qF#rGn

literal 1359
zcmYLJc~BE)6kifVL{LF)5s-{jF<LFofD&85U_=qq2nt$^(&B;TYQQs^R1uGiOe;`B
z2?Cov=t@F%lOQmqMp`)r2P>rwqQKBPA|0?H;01*C+XbiJynWw0e!t&)e|)o7g>eEG
zCtoKBf?Q&@@kQX~(w`$6_?7#JP;l8vM1m+t+u=6^K`c*UY<x5*GUs1#<Z?Md5Wvgj
zcS}khfVj4{wx9sqL~$`uRz@Q9sRb#D8VI5e!}I_G!&(@wFD)f8U>Hf18wtXwR%`Gw
zva*uEaUJj|szFg>d3g;E46lJ<im4bXDr!))8b$S0RYstOAUa@JB?-Vd4!i+DGzbC$
zQmqC^us{ut=rJ`}h3HXOhoS(l#ndzrbWxbZ)D(sRaj*%+5GjnNQ#e8bA_y?G4nsf@
zV01GW000W0#TbdBjGCGr3SwH8o=eNl2;wx7)}+;d4xl3xQ)Fh*%Am+}!6wWsdIUz!
z7MboWkyZdLJ>w}1q^KTamY<CQoyL<)N)M&GvmUVMO=t?U-VBVMNCRlr%qH*C*~OUF
z42G6^FaCc3irc-R55cn_b3}2wAv-%e7Tex_j>Ft}^PF84ELiC3=I-I?>E-3+?d{{c
zWT}5ZKwx0tvY;T&^5wxRLRPO?yDl_5;^WPcTed`R6$oO5pNbOp>`6@eELnUoCH3%;
zwDgQDi6r;r8L9NVOeT|G%*(r`P+Twgw)m#9L{$dED2i46aQn92Xso|`@8|pXTU*=O
zIyxS8{?^sq^R&0W|IfdkJ%2tpIP~}M@W?--R_oaK_^a1%-oAS`F*#+kO|M$Jy#hS%
zkQjbse0Y0f*U<jhLw?Pp<p@9Zi(&rm$CvVjk15Yeitipp)jZz6Iw?3NHeYxQK0G;n
z`G6{P<L<!?p?!7zs<Ef$!G>F7T(hfB`GvD<%)P9uE00V;(~@;b<MDz!EfC92&UrL^
zFYwp8l+&C=yo2d)CggicuV_3hBL?b;j6HI~)%9$I<+!3J<26g0lm5+1mO~gZoFA}x
z?}<~&-Z@fnW`_CPoHJi-RjB+;`sN4P3CHn`*NgRDZ*@68CQtdlXjgE@Cgdj-%{}#*
zUspDfxdV$V&HhPPBb2Xb-j%rCnRmzMc2TftZ%S>ETYzQ#X@k;g?^sllDN2G)g>T@+
zN};@vgePJjR>rPQhtV)7?f1F+=VztDS6cISK(DgX{Pr%)I>3Jx?`S%dd)E)DEDS;;
zA*wpd6S^ll9bK(7cS4+vx9)uKIk&xglc0r@CBVeIWPHGo!JE%XZ@Bz&y^A?PtXvi(
zQV(cMnr+g>-PnL{W9MkKo#RMoPjaNUGW{Cr^tQgua>U9?NGT{3v-+&|nw=}&upVL|
zI<ACmSbCuB`v$9UiD_^-+(f-DtX11=J^GfFY1{%&=VRGdJibGmPAVH#-T1{<fw+s0
zzkG4@r+q57?5EEYv%{trb{LvU9HgvPV^h5;+ji~~%hB^UKAP{(j>zFj7Fi~XM%n$?
zC49q<E<fAk&Z{?Ve{{(<_384aCd<S{LtnPulsyb6wO36_7I$0dKVeLC9A6uC@WOxH
C?bb*D

diff --git a/v1_5_0_C/img/home.png b/v1_5_0_C/img/home.png
index bc8d7c17229383de0485b4c07c69a4d3e6cce35b..829634c22615316762bd145f3c5784a66ce64dc6 100644
GIT binary patch
literal 1359
zcmYLJc~BE)6kifVL{LF)5s-{jF<LFofD&85U_=qq2nt$^(&B;TYQQs^R1uGiOe;`B
z2?Cov=t@F%lOQmqMp`)r2P>rwqQKBPA|0?H;01*C+XbiJynWw0e!t&)e|)o7g>eEG
zCtoKBf?Q&@@kQX~(w`$6_?7#JP;l8vM1m+t+u=6^K`c*UY<x5*GUs1#<Z?Md5Wvgj
zcS}khfVj4{wx9sqL~$`uRz@Q9sRb#D8VI5e!}I_G!&(@wFD)f8U>Hf18wtXwR%`Gw
zva*uEaUJj|szFg>d3g;E46lJ<im4bXDr!))8b$S0RYstOAUa@JB?-Vd4!i+DGzbC$
zQmqC^us{ut=rJ`}h3HXOhoS(l#ndzrbWxbZ)D(sRaj*%+5GjnNQ#e8bA_y?G4nsf@
zV01GW000W0#TbdBjGCGr3SwH8o=eNl2;wx7)}+;d4xl3xQ)Fh*%Am+}!6wWsdIUz!
z7MboWkyZdLJ>w}1q^KTamY<CQoyL<)N)M&GvmUVMO=t?U-VBVMNCRlr%qH*C*~OUF
z42G6^FaCc3irc-R55cn_b3}2wAv-%e7Tex_j>Ft}^PF84ELiC3=I-I?>E-3+?d{{c
zWT}5ZKwx0tvY;T&^5wxRLRPO?yDl_5;^WPcTed`R6$oO5pNbOp>`6@eELnUoCH3%;
zwDgQDi6r;r8L9NVOeT|G%*(r`P+Twgw)m#9L{$dED2i46aQn92Xso|`@8|pXTU*=O
zIyxS8{?^sq^R&0W|IfdkJ%2tpIP~}M@W?--R_oaK_^a1%-oAS`F*#+kO|M$Jy#hS%
zkQjbse0Y0f*U<jhLw?Pp<p@9Zi(&rm$CvVjk15Yeitipp)jZz6Iw?3NHeYxQK0G;n
z`G6{P<L<!?p?!7zs<Ef$!G>F7T(hfB`GvD<%)P9uE00V;(~@;b<MDz!EfC92&UrL^
zFYwp8l+&C=yo2d)CggicuV_3hBL?b;j6HI~)%9$I<+!3J<26g0lm5+1mO~gZoFA}x
z?}<~&-Z@fnW`_CPoHJi-RjB+;`sN4P3CHn`*NgRDZ*@68CQtdlXjgE@Cgdj-%{}#*
zUspDfxdV$V&HhPPBb2Xb-j%rCnRmzMc2TftZ%S>ETYzQ#X@k;g?^sllDN2G)g>T@+
zN};@vgePJjR>rPQhtV)7?f1F+=VztDS6cISK(DgX{Pr%)I>3Jx?`S%dd)E)DEDS;;
zA*wpd6S^ll9bK(7cS4+vx9)uKIk&xglc0r@CBVeIWPHGo!JE%XZ@Bz&y^A?PtXvi(
zQV(cMnr+g>-PnL{W9MkKo#RMoPjaNUGW{Cr^tQgua>U9?NGT{3v-+&|nw=}&upVL|
zI<ACmSbCuB`v$9UiD_^-+(f-DtX11=J^GfFY1{%&=VRGdJibGmPAVH#-T1{<fw+s0
zzkG4@r+q57?5EEYv%{trb{LvU9HgvPV^h5;+ji~~%hB^UKAP{(j>zFj7Fi~XM%n$?
zC49q<E<fAk&Z{?Ve{{(<_384aCd<S{LtnPulsyb6wO36_7I$0dKVeLC9A6uC@WOxH
C?bb*D

literal 1322
zcmYL{2~bmK5XT=01WHY4Yyh=jBo%}da#{fq3};MLh><8NmOB@64MJPUl!#2Z1{`oe
zV5D*k)<miU7${c6mU1;ysHIgzE};VgQi=gXNW$y)0!(K%`+mFo-{Z|oJ~x<+wcKL~
zK@gU6EPw}|uE@^<4ZO>F1rt0>Qh97Y=-z<c9AF*yL}(yL!kZ?8U_R8zf?!|*Cd?<p
z3HxEb9Rkq@7BB2aLXa1`!7-n}0w;tM=&*>g66*>BlaN7XHJbiTM1>`;8Ua}o;{wOf
z;dr`6M1z6FQjlJO>za@T1B<7^0ynLYt`)e!Vg?*XgC#&l1)B9(icUn+3F*MY0xAF)
zFldobbwD6u=n)wW@e+n!U<47O(Tk~iF{lDSrU3wZ4Pu5t#4rc}&<!HGF$CTi0xtxN
z7}#Y%%qT{bpu_-T-6n%ZP}-V+^n&5WX+|*S^@wK}B#aGkfC$-+z~()G0f>P|GJpX9
zF@UY}wlkYEjk~}lh#rw`?%LKPUC4_7GtSux{~u*6A=T~S##52|H_aG|8O@gy)Zp{q
zxy%bb4Vj=&Xj4-&jQM*zusEC*ekXxoZDVV@Yxkay?DrCh#C`i5NFO^oIysZwC^Q<K
z>EY$W^7Z!*3}UlSa8L30XTr{fhhL0{jE)lsB?*biscBziNTpwAWo5~(<`fhb6_=FV
zsHnVIU02u8aQlv2ez!%bZ14Q3tGm0euYX|R=^sOX4v&nCj!jHVP5(VJGdnvsKR^Fw
zacTMOTlLE7JI$JQU8gr}>|7py1VJblPJnNyhpOYR*|S5DyLw)IN6sU}Tl+RPlX2nB
zxa3+7ZYV3@6xTE*DaGM<GDNET9vvFgbZ~BIaK)d;5tlxrjz^Tv`aJjKj6XVn&p+AU
zb>)h=V=0&70)2Mc&&C_OoZu!?pl;?1Lli9CNOn5QJ1WU4S4O#!clUh@`v)z$tE`BJ
zdB-w{|7KoOj#)$N-XoK9=C{+sUMzOXqLN})aOk6Ll`ns*mvtt$I<KH74pqHay(McR
z#qbYeq~RaNpUr}L3hPx<DU$|8`ysVG?c(7!N;PJjQb-xQFN-|)#!QvXx~2;Aj6l^|
zwy@<ECRCoVFmTXB`Kz=<5jxrbb6>?MCTF3sypytH^g<0*orE5~G~py$z~S+|eA$`Y
zPtzZu!twa_4={boml5sID>bQ%3~AFnh>()^`E}=+q9fnzw!iN@_^qm0#Y{Vb*2Hnt
z-8R@C*=r9OBN>mGQ_qr*`>T2Qk|6Ao**`(kUQc|m?(=2EOeY8FFCr^Btum^hVQ<B#
zc#UBu%b@qlJ6JV`Iq}yOXjX{AtQ<vTY38tE@j`GKTDn|dU4HVG(z?3h_u>swQ%~to
zzC*QVbgpAVk8SPaDne5)X&}bk3uEq;XqOh$k(hd^$$i6Wprz|8j1)H<o!f>IuBxY>
z3^fu|vEFFh>o2v0njF`9=%@{wl3MwL+>ja4|D2Gi7_AcO<*nGF^Mcn;6SW$>$yi8k
UeQOto3;yU3ConkRo?m44e?V4qF#rGn

diff --git a/v1_5_0_C/index.html b/v1_5_0_C/index.html
index d2366b7..2118dd0 100644
--- 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);
diff --git a/v1_5_0_C/myCoupon.html b/v1_5_0_C/myCoupon.html
index 1d1ba4d..b407d4f 100644
--- 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: {
diff --git a/v1_5_0_C/myOrder.html b/v1_5_0_C/myOrder.html
index ee2de30..73c35a8 100644
--- 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) {
diff --git a/v1_5_0_C/tabbar.css b/v1_5_0_C/tabbar.css
new file mode 100644
index 0000000..4b67390
--- /dev/null
+++ 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;
+}
\ No newline at end of file
diff --git a/v1_5_0_C/tabbar.js b/v1_5_0_C/tabbar.js
index 897227e..efec674 100644
--- 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)
   }
-})
+}