封装tabbar组件
This commit is contained in:
wangsongsole
parent
cc1398597a
commit
d78820aaec
9
.hintrc
9
.hintrc
|
|
@ -8,6 +8,13 @@
|
|||
{
|
||||
"label": "off"
|
||||
}
|
||||
]
|
||||
],
|
||||
"axe/text-alternatives": [
|
||||
"default",
|
||||
{
|
||||
"image-alt": "off"
|
||||
}
|
||||
],
|
||||
"no-inline-styles": "off"
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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'));
|
||||
|
|
|
|||
|
|
@ -235,6 +235,7 @@
|
|||
},
|
||||
|
||||
components: {
|
||||
tabComponent
|
||||
// payPop
|
||||
},
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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)'>
|
||||
<img :src="current===item.id?item.checkedSrc:item.src" alt="">
|
||||
<p>{{item.text}}</p>
|
||||
</li>
|
||||
</ul>`,
|
||||
props: {
|
||||
current: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
|
||||
</div>
|
||||
`,
|
||||
data: {
|
||||
return: {
|
||||
list: [
|
||||
{
|
||||
id: 1,
|
||||
src: require("./img/home.png"),
|
||||
link: ""
|
||||
src: "./img/home.png",
|
||||
checkedSrc: "./img/checked_home.png",
|
||||
link: "./couponCollection.html",
|
||||
text: "首页"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
src: require("./img/order.png"),
|
||||
link: ""
|
||||
src: "./img/order.png",
|
||||
checkedSrc: "./img/checked_order.png",
|
||||
link: "./myOrder.html",
|
||||
text: "订单"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
src: require("./img/coupon.png "),
|
||||
link: ""
|
||||
src: "./img/coupon.png",
|
||||
checkedSrc: "./img/checked_coupon.png",
|
||||
link: "./myCoupon.html",
|
||||
text: "我的券"
|
||||
}
|
||||
],
|
||||
active: {}
|
||||
|
||||
iconHandler(item) {
|
||||
window.location.replace(item.link)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue