ec.uniapp-master/pages/user/member/quanyi.vue

<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>