You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
3.5 KiB
167 lines
3.5 KiB
<template>
|
|
<view>
|
|
<lf-nav title="会员权益" :showIcon="true" titleColor="#fff" bgColor="#15716E"></lf-nav>
|
|
<view class="head">
|
|
<image class="img"></image>
|
|
<view class="phone">182****5380</view>
|
|
</view>
|
|
<view>
|
|
<lf-swiper :list="card_list"
|
|
:height="350" :effect3d="true"
|
|
bg-color="#15716E" mode="none"
|
|
@clickDiy="swiperClickDiy">
|
|
</lf-swiper>
|
|
</view>
|
|
<view class="content">
|
|
<view class="item" :style="{width: 100 / 4 +'%'}"
|
|
v-for="(item, index) in quanyi_list" :key="index"
|
|
@click="$url('/pages/user/member/explain')">
|
|
<view class="icon">
|
|
<text class="lf-iconfont lf-color-primary lf-font-60" :class="item.icon"></text>
|
|
</view>
|
|
<view class="name">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import lfSwiper from '@/components/lf-swiper/lf-swiper.vue';
|
|
export default {
|
|
components: {
|
|
lfSwiper
|
|
},
|
|
data(){
|
|
return {
|
|
card_list: [{
|
|
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
|
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
|
},
|
|
{
|
|
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
|
|
title: '身无彩凤双飞翼，心有灵犀一点通'
|
|
},
|
|
{
|
|
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
|
|
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
|
}
|
|
],
|
|
quanyi_list: [{
|
|
icon: 'icon-huiyuan2',
|
|
name: '平日2倍积分'
|
|
},{
|
|
icon: 'icon-huiyuan2',
|
|
name: '生日5倍积分'
|
|
},{
|
|
icon: 'icon-huiyuan2',
|
|
name: '免费停车6小时/天'
|
|
},{
|
|
icon: 'icon-huiyuan2',
|
|
name: '最低8.5折'
|
|
},{
|
|
icon: 'icon-huiyuan2',
|
|
name: '专属沙龙'
|
|
},{
|
|
icon: 'icon-huiyuan2',
|
|
name: '会员日'
|
|
},{
|
|
icon: 'icon-huiyuan2',
|
|
name: '免费包装'
|
|
},{
|
|
icon: 'icon-huiyuan2',
|
|
name: '书籍租借'
|
|
},{
|
|
icon: 'icon-huiyuan2',
|
|
name: '免费雨伞租赁'
|
|
},{
|
|
icon: 'icon-huiyuan2',
|
|
name: '免费童车租赁'
|
|
},{
|
|
icon: 'icon-huiyuan2',
|
|
name: '免费轮椅租赁'
|
|
},{
|
|
icon: 'icon-huiyuan2',
|
|
name: '通惠卡'
|
|
},{
|
|
icon: 'icon-huiyuan2',
|
|
name: '多重生日礼遇'
|
|
},{
|
|
icon: 'icon-huiyuan2',
|
|
name: '每日尊享饮品'
|
|
}]
|
|
}
|
|
},
|
|
onLoad(){
|
|
|
|
},
|
|
methods: {
|
|
swiperClickDiy(event){
|
|
let item = this.card_list[event.index];
|
|
|
|
if(event.type == 'btn1'){
|
|
this.$msg('敬请期待');
|
|
}else if(event.type == 'btn2'){
|
|
this.$url('/pages/user/member/code');
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page{
|
|
background-color: #15716E;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped="scoped">
|
|
.head{
|
|
padding: 30rpx 32rpx;
|
|
width: 750rpx;
|
|
height: max-content;
|
|
display: flex;
|
|
align-items: center;
|
|
.img{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border: 2rpx solid #FFFFFF;
|
|
border-radius: 50%;
|
|
background-color: #000000;
|
|
}
|
|
.phone{
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
.content{
|
|
padding: 60rpx 32rpx 30rpx;
|
|
width: 750rpx;
|
|
height: max-content;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.item{
|
|
height: max-content;
|
|
padding: 0 12rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
.icon{
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #FFFFFF;
|
|
}
|
|
.name{
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|