132 lines
3.2 KiB
Vue
132 lines
3.2 KiB
Vue
<template>
|
||
<div>
|
||
<Row :gutter="30">
|
||
<Col span="6" v-for="(item,index) in linkList" :key="index" v-if="(item.title !== '拼团频道' && item.title !== '签到') || $route.name !== 'renovation'">
|
||
<div class="card" :class="{'active':selectedIndex == index}" @click="handleLink(item,index)">
|
||
<Icon size="24" :type="item.icon" />
|
||
<p>{{item.title}}</p>
|
||
</div>
|
||
</Col>
|
||
<!-- 外部链接，只有pc端跳转 -->
|
||
<Col span="6" v-if="$route.name === 'renovation'">
|
||
<div class="card" :class="{'active':selectedIndex == linkList.length}" @click="handleLink(linkItem,linkList.length)">
|
||
<Poptip v-model="linkVisible">
|
||
<Icon size="24" :type="linkItem.icon" />
|
||
<p>{{linkItem.title}}</p>
|
||
<div slot="title">链接地址</div>
|
||
<div slot="content">
|
||
<Input type="text" @keyup="handleLink(linkItem,linkList.length)" v-model="linkItem.url" placeholder="https://"></Input>
|
||
</div>
|
||
</Poptip>
|
||
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
linkList: [ // 链接列表
|
||
{
|
||
title: "首页",
|
||
icon: "md-home",
|
||
___type: "home",
|
||
},
|
||
{
|
||
title: "购物车",
|
||
icon: "md-cart",
|
||
___type: "cart",
|
||
},
|
||
{
|
||
title: "收藏商品",
|
||
icon: "md-heart",
|
||
___type: "collection",
|
||
},
|
||
{
|
||
title: "我的订单",
|
||
icon: "md-document",
|
||
___type: "order",
|
||
},
|
||
{
|
||
title: "个人中心",
|
||
icon: "md-person",
|
||
___type: "user",
|
||
},
|
||
{
|
||
title: "拼团频道",
|
||
icon: "md-flame",
|
||
___type: "group",
|
||
},
|
||
{
|
||
title: "秒杀频道",
|
||
icon: "md-flame",
|
||
___type: "seckill",
|
||
},
|
||
{
|
||
title: "领券中心",
|
||
icon: "md-pricetag",
|
||
___type: "coupon",
|
||
},
|
||
{
|
||
title: "签到",
|
||
icon: "md-happy",
|
||
___type: "sign",
|
||
},
|
||
{
|
||
title: "小程序直播",
|
||
icon: "ios-videocam",
|
||
___type: "live",
|
||
},
|
||
|
||
],
|
||
linkItem: {
|
||
title: "外部链接",
|
||
icon: "ios-link",
|
||
___type: "link",
|
||
url: ''
|
||
},
|
||
linkVisible: false, // 是否显示外部链接
|
||
selectedIndex: 9999999, // 已选index
|
||
};
|
||
},
|
||
methods: {
|
||
handleLink(val, index) {
|
||
val = {...val,___type:'other'}
|
||
this.selectedIndex = index;
|
||
if (index === this.linkList.length) {
|
||
this.linkVisible = true
|
||
} else {
|
||
this.linkVisible = false
|
||
}
|
||
this.$emit("selected",[val])
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import "../style.scss";
|
||
.card {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 20px 0;
|
||
margin: 10px 0;
|
||
text-align: center;
|
||
transition: 0.35s;
|
||
cursor: pointer;
|
||
/deep/ p {
|
||
margin: 10px 0;
|
||
}
|
||
border: 1px solid #ededed;
|
||
}
|
||
.card:hover{
|
||
background: #ededed;
|
||
}
|
||
.active {
|
||
background: #ededed;
|
||
}
|
||
</style>
|