From 652a9a2f8c76676f2166cc280f4d8957de1cc194 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E5=B9=B3=E8=89=BA?= <52643018@qq.com>
Date: Thu, 9 Sep 2021 14:57:56 +0800
Subject: [PATCH] =?UTF-8?q?1.=E5=AE=8C=E6=88=90=E4=BC=9A=E5=91=98=E6=9D=83?=
 =?UTF-8?q?=E7=9B=8A=E9=A1=B5=E9=9D=A2UI=20=202.=E5=AE=8C=E6=88=90?=
 =?UTF-8?q?=E4=BC=9A=E5=91=98=E6=9D=83=E7=9B=8A=E8=AF=B4=E6=98=8E=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2UI=20=203.=E6=96=B0=E5=A2=9Eswiper=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/styles/iconfont.css         |  62 ++++-
 components/lf-swiper/lf-swiper.vue | 386 +++++++++++++++++++++++++++++
 pages.json                         |  14 ++
 pages/user/member/explain.vue      | 171 +++++++++++++
 pages/user/member/quanyi.vue       | 167 +++++++++++++
 5 files changed, 797 insertions(+), 3 deletions(-)
 create mode 100644 components/lf-swiper/lf-swiper.vue
 create mode 100644 pages/user/member/explain.vue
 create mode 100644 pages/user/member/quanyi.vue

diff --git a/common/styles/iconfont.css b/common/styles/iconfont.css
index aa00b0e..22fd06c 100644
--- a/common/styles/iconfont.css
+++ b/common/styles/iconfont.css
@@ -1,8 +1,8 @@
 @font-face {
   font-family: "lf-iconfont"; /* Project id 2779107 */
-  src: url('//at.alicdn.com/t/font_2779107_qs77qtmfs2o.woff2?t=1630663119031') format('woff2'),
-       url('//at.alicdn.com/t/font_2779107_qs77qtmfs2o.woff?t=1630663119031') format('woff'),
-       url('//at.alicdn.com/t/font_2779107_qs77qtmfs2o.ttf?t=1630663119031') format('truetype');
+  src: url('//at.alicdn.com/t/font_2779107_uog0nj8djep.woff2?t=1631159318557') format('woff2'),
+       url('//at.alicdn.com/t/font_2779107_uog0nj8djep.woff?t=1631159318557') format('woff'),
+       url('//at.alicdn.com/t/font_2779107_uog0nj8djep.ttf?t=1631159318557') format('truetype');
 }
 
 .lf-iconfont {
@@ -13,6 +13,62 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-weixinzhifu:before {
+  content: "\e689";
+}
+
+.icon-fabujilu:before {
+  content: "\e601";
+}
+
+.icon-dianpu:before {
+  content: "\e6b6";
+}
+
+.icon-huiyuan2:before {
+  content: "\e640";
+}
+
+.icon-jilu2:before {
+  content: "\e65c";
+}
+
+.icon-shouye:before {
+  content: "\e636";
+}
+
+.icon-huiyuan3:before {
+  content: "\f0ae";
+}
+
+.icon-shouye1:before {
+  content: "\e60a";
+}
+
+.icon-xianxingicon-03:before {
+  content: "\e60d";
+}
+
+.icon-shouye2:before {
+  content: "\e677";
+}
+
+.icon-pinpai:before {
+  content: "\e664";
+}
+
+.icon-yuebao:before {
+  content: "\e624";
+}
+
+.icon-pinpailiebiao:before {
+  content: "\e630";
+}
+
+.icon-tubiaozhizuomobandefuben-:before {
+  content: "\e61e";
+}
+
 .icon-huiyuan:before {
   content: "\e65d";
 }
diff --git a/components/lf-swiper/lf-swiper.vue b/components/lf-swiper/lf-swiper.vue
new file mode 100644
index 0000000..fcd2fcf
--- /dev/null
+++ b/components/lf-swiper/lf-swiper.vue
@@ -0,0 +1,386 @@
+<template>
+	<view class="u-swiper-wrap" :style="{borderRadius: `${borderRadius}rpx`}">
+		<swiper :current="elCurrent" @change="change" 
+			@animationfinish="animationfinish" 
+			:interval="interval" :circular="circular" 
+			:duration="duration" :autoplay="autoplay"
+			:previous-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'" 
+			:next-margin="effect3d ? effect3dPreviousMargin + 'rpx' : '0'"
+			:style="{height: height + 'rpx',backgroundColor: bgColor}">
+			<swiper-item class="u-swiper-item" v-for="(item, index) in list" :key="index">
+				<view class="u-list-image-wrap" 
+					@tap.stop.prevent="listClick(index)" 
+					:class="[uCurrent != index ? 'u-list-scale' : '']" 
+					:style="{borderRadius: `${borderRadius}rpx`,
+						transform: effect3d && uCurrent != index ? 'scaleY(0.9)' : 'scaleY(1)',
+						margin: effect3d && uCurrent != index ? '0 20rpx' : 0
+					}">
+					<!-- 图片 -->
+					<image class="u-swiper-image" :src="item[name] || item" :mode="imgMode"></image>
+					<!-- 自己加的内容 -->
+					<view class="swiper-diy-left" @click.stop.prevent="$emit('clickDiy', {'index': index, 'type': 'btn1'})">
+						<text>查看会员权益和细则</text>
+					</view>
+					<view class="swiper-diy-right" @click.stop.prevent="$emit('clickDiy', {'index': index, 'type': 'btn2'})">
+						<text class="lf-iconfont icon-erweima lf-font-30"></text>
+					</view>
+					
+					<view v-if="title && item.title" class="u-swiper-title u-line-1" 
+						:style="[{'padding-bottom': titlePaddingBottom}, titleStyle]">
+						{{ item.title }}
+					</view>
+				</view>
+			</swiper-item>
+		</swiper>
+		
+		<view class="u-swiper-indicator" :style="{
+				top: indicatorPos == 'topLeft' || indicatorPos == 'topCenter' || indicatorPos == 'topRight' ? '12rpx' : 'auto',
+				bottom: indicatorPos == 'bottomLeft' || indicatorPos == 'bottomCenter' || indicatorPos == 'bottomRight' ? '12rpx' : 'auto',
+				justifyContent: justifyContent,
+				padding: `0 ${effect3d ? '74rpx' : '24rpx'}`
+			}">
+			<block v-if="mode == 'rect'">
+				<view class="u-indicator-item-rect" 
+					:class="{ 'u-indicator-item-rect-active': index == uCurrent }" 
+					v-for="(item, index) in list" :key="index">
+				</view>
+			</block>
+			<block v-if="mode == 'dot'">
+				<view class="u-indicator-item-dot" 
+					:class="{ 'u-indicator-item-dot-active': index == uCurrent }" 
+					v-for="(item, index) in list" :key="index">
+				</view>
+			</block>
+			<block v-if="mode == 'round'">
+				<view class="u-indicator-item-round" 
+					:class="{ 'u-indicator-item-round-active': index == uCurrent }" 
+					v-for="(item, index) in list" :key="index">
+				</view>
+			</block>
+			<block v-if="mode == 'number'">
+				<view class="u-indicator-item-number">{{ uCurrent + 1 }}/{{ list.length }}</view>
+			</block>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * swiper 轮播图
+	 * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用
+	 * @tutorial https://www.uviewui.com/components/swiper.html
+	 * @property {Array} list 轮播图数据，见官网"基本使用"说明
+	 * @property {Boolean} title 是否显示标题文字，需要配合list参数，见官网说明（默认false）
+	 * @property {String} mode 指示器模式，见官网说明（默认round）
+	 * @property {String Number} height 轮播图组件高度，单位rpx（默认250）
+	 * @property {String} indicator-pos 指示器的位置（默认bottomCenter）
+	 * @property {Boolean} effect3d 是否开启3D效果（默认false）
+	 * @property {Boolean} autoplay 是否自动播放（默认true）
+	 * @property {String Number} interval 自动轮播时间间隔，单位ms（默认2500）
+	 * @property {Boolean} circular 是否衔接播放，见官网说明（默认true）
+	 * @property {String} bg-color 背景颜色（默认#f3f4f6）
+	 * @property {String Number} border-radius 轮播图圆角值，单位rpx（默认8）
+	 * @property {Object} title-style 自定义标题样式
+	 * @property {String Number} effect3d-previous-margin mode = true模式的情况下，激活项与前后项之间的距离，单位rpx（默认50）
+	 * @property {String} img-mode 图片的裁剪模式，详见image组件裁剪模式（默认aspectFill）
+	 * @event {Function} click 点击轮播图时触发
+	 * @example <u-swiper :list="list" mode="dot" indicator-pos="bottomRight"></u-swiper>
+	 */
+	export default {
+		name: "u-swiper",
+		props: {
+			// 轮播图的数据,格式如：[{image: 'xxxx', title: 'xxxx'}，{image: 'yyyy', title: 'yyyy'}]，其中title字段可选
+			list: {
+				type: Array,
+				default () {
+					return [];
+				}
+			},
+			// 是否显示title标题
+			title: {
+				type: Boolean,
+				default: false
+			},
+			// 用户自定义的指示器的样式
+			indicator: {
+				type: Object,
+				default () {
+					return {};
+				}
+			},
+			// 圆角值
+			borderRadius: {
+				type: [Number, String],
+				default: 8
+			},
+			// 隔多久自动切换
+			interval: {
+				type: [String, Number],
+				default: 3000
+			},
+			// 指示器的模式，rect|dot|number|round
+			mode: {
+				type: String,
+				default: 'round'
+			},
+			// list的高度，单位rpx
+			height: {
+				type: [Number, String],
+				default: 250
+			},
+			// 指示器的位置，topLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight
+			indicatorPos: {
+				type: String,
+				default: 'bottomCenter'
+			},
+			// 是否开启缩放效果
+			effect3d: {
+				type: Boolean,
+				default: false
+			},
+			// 3D模式的情况下，激活item与前后item之间的距离，单位rpx
+			effect3dPreviousMargin: {
+				type: [Number, String],
+				default: 50
+			},
+			// 是否自动播放
+			autoplay: {
+				type: Boolean,
+				default: true
+			},
+			// 自动轮播时间间隔，单位ms
+			duration: {
+				type: [Number, String],
+				default: 500
+			},
+			// 是否衔接滑动，即到最后一张时接着滑动，是否自动切换到第一张
+			circular: {
+				type: Boolean,
+				default: true
+			},
+			// 图片的裁剪模式 
+			imgMode: {
+				type: String,
+				default: 'aspectFill'
+			},
+			// 从list数组中读取的图片的属性名
+			name: {
+				type: String,
+				default: 'image'
+			},
+			// 背景颜色
+			bgColor: {
+				type: String,
+				default: '#f3f4f6'
+			},
+			// 初始化时，默认显示第几项
+			current: {
+				type: [Number, String],
+				default: 0
+			},
+			// 标题的样式，对象形式
+			titleStyle: {
+				type: Object,
+				default() {
+					return {}
+				}
+			}
+		},
+		watch: {
+			// 如果外部的list发生变化，判断长度是否被修改，如果前后长度不一致，重置uCurrent值，避免溢出
+			list(nVal, oVal) {
+				if(nVal.length !== oVal.length) this.uCurrent = 0;
+			},
+			// 监听外部current的变化，实时修改内部依赖于此测uCurrent值，如果更新了current，而不是更新uCurrent，
+			// 就会错乱，因为指示器是依赖于uCurrent的
+			current(n) {
+				this.uCurrent = n;
+			}
+		},
+		data() {
+			return {
+				uCurrent: this.current // 当前活跃的swiper-item的index
+			};
+		},
+		computed: {
+			justifyContent() {
+				if (this.indicatorPos == 'topLeft' || this.indicatorPos == 'bottomLeft') return 'flex-start';
+				if (this.indicatorPos == 'topCenter' || this.indicatorPos == 'bottomCenter') return 'center';
+				if (this.indicatorPos == 'topRight' || this.indicatorPos == 'bottomRight') return 'flex-end';
+			},
+			titlePaddingBottom() {
+				let tmp = 0;
+				if (this.mode == 'none') return '12rpx';
+				if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode == 'number') {
+					tmp = '60rpx';
+				} else if (['bottomLeft', 'bottomCenter', 'bottomRight'].indexOf(this.indicatorPos) >= 0 && this.mode != 'number') {
+					tmp = '40rpx';
+				} else {
+					tmp = '12rpx';
+				}
+				return tmp;
+			},
+			// 因为uni的swiper组件的current参数只接受Number类型，这里做一个转换
+			elCurrent() {
+				return Number(this.current);
+			}
+		},
+		methods: {
+			listClick(index) {
+				this.$emit('click', index);
+			},
+			change(e) {
+				let current = e.detail.current;
+				this.uCurrent = current;
+				// 发出change事件，表示当前自动切换的index，从0开始
+				this.$emit('change', current);
+			},
+			// 头条小程序不支持animationfinish事件，改由change事件
+			// 暂不监听此事件，因为不再给swiper绑定uCurrent属性
+			animationfinish(e) {
+				// #ifndef MP-TOUTIAO
+				// this.uCurrent = e.detail.current;
+				// #endif
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	// @import "../../libs/css/style.components.scss";
+	
+	.u-swiper-wrap {
+		position: relative;
+		overflow: hidden;
+		transform: translateY(0);
+	}
+
+	.u-swiper-image {
+		width: 100%;
+		will-change: transform;
+		height: 100%;
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		/* #ifdef H5 */
+		pointer-events: none;
+		/* #endif */
+	}
+
+	.u-swiper-indicator {
+		padding: 0 24rpx;
+		position: absolute;
+		// @include vue-flex;
+		display: flex;
+		flex-direction: row;
+		
+		width: 100%;
+		z-index: 1;
+	}
+
+	.u-indicator-item-rect {
+		width: 26rpx;
+		height: 8rpx;
+		margin: 0 6rpx;
+		transition: all 0.5s;
+		background-color: rgba(0, 0, 0, 0.3);
+	}
+
+	.u-indicator-item-rect-active {
+		background-color: rgba(255, 255, 255, 0.8);
+	}
+
+	.u-indicator-item-dot {
+		width: 14rpx;
+		height: 14rpx;
+		margin: 0 6rpx;
+		border-radius: 20rpx;
+		transition: all 0.5s;
+		background-color: rgba(0, 0, 0, 0.3);
+	}
+
+	.u-indicator-item-dot-active {
+		background-color: rgba(255, 255, 255, 0.8);
+	}
+
+	.u-indicator-item-round {
+		width: 14rpx;
+		height: 14rpx;
+		margin: 0 6rpx;
+		border-radius: 20rpx;
+		transition: all 0.5s;
+		background-color: rgba(0, 0, 0, 0.3);
+	}
+
+	.u-indicator-item-round-active {
+		width: 34rpx;
+		background-color: rgba(255, 255, 255, 0.8);
+	}
+
+	.u-indicator-item-number {
+		padding: 6rpx 16rpx;
+		line-height: 1;
+		background-color: rgba(0, 0, 0, 0.3);
+		border-radius: 100rpx;
+		font-size: 26rpx;
+		color: rgba(255, 255, 255, 0.8);
+	}
+
+	.u-list-scale {
+		transform-origin: center center;
+	}
+
+	.u-list-image-wrap {
+		width: 100%;
+		height: 100%;
+		flex: 1;
+		transition: all 0.5s;
+		overflow: hidden;
+		box-sizing: content-box;
+		position: relative;
+	}
+
+	.u-swiper-title {
+		position: absolute;
+		background-color: rgba(0, 0, 0, 0.3);
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		font-size: 28rpx;
+		padding: 12rpx 24rpx;
+		color: rgba(255, 255, 255, 0.9);
+	}
+
+	.u-swiper-item {
+		// @include vue-flex;
+		overflow: hidden;
+		align-items: center;
+		
+		display: flex;
+		flex-direction: row;
+	}
+	
+	.swiper-diy-left, .swiper-diy-right{
+		position: absolute;
+		bottom: 40rpx;
+		color: #FFFFFF;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	.swiper-diy-left{
+		left: 40rpx;
+		width: 246rpx;
+		height: 49rpx;
+		border-radius: 24rpx;
+		border: 1rpx solid #FFFFFF;
+		font-size: 24rpx;
+	}
+	.swiper-diy-right{
+		right: 40rpx;
+		width: 60rpx;
+		height: 60rpx;
+		border-radius: 50%;
+		background-color: rgba(0,0,0,0.5);
+	}
+</style>
diff --git a/pages.json b/pages.json
index ad3cbee..51d90ab 100644
--- a/pages.json
+++ b/pages.json
@@ -908,6 +908,20 @@
 				"navigationBarTitleText": "搜索",
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			"path" : "pages/user/member/quanyi",
+			"style" : {
+				"navigationBarTitleText": "会员权益",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path" : "pages/user/member/explain",
+			"style" : {
+				"navigationBarTitleText": "会员权益",
+				"navigationStyle": "custom"
+			}
 		}
     ],
 	"globalStyle": {
diff --git a/pages/user/member/explain.vue b/pages/user/member/explain.vue
new file mode 100644
index 0000000..3ae33d5
--- /dev/null
+++ b/pages/user/member/explain.vue
@@ -0,0 +1,171 @@
+<template>
+	<view>
+		<lf-nav title="会员权益" :showIcon="true" :spreadOut="false" bgColor="transparent" titleColor="#fff"></lf-nav>
+		<view class="head">
+			<view class="bg-left"></view>
+			<view class="bg-right"></view>
+			<scroll-view class="scroll-view" :scroll-x="true" :scroll-into-view="oView">
+				<view class="head-content">
+					<view class="item" :id="'view-'+ index"
+						:style="{width: 100 / 4 +'%'}"
+						v-for="(item, index) in 5" :key="index"
+						@click="current = index">
+						<view class="icon">
+							<text class="lf-iconfont icon-huiyuan2 lf-color-primary lf-font-60"></text>
+						</view>
+						<view class="name">免费雨伞租赁</view>
+						<view class="active" v-if="current == index"></view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+		
+		<view class="content">
+			<view class="primary-title">平时2倍积分</view>
+			<view class="secondary-title">适用人群</view>
+			<view class="text">金卡</view>
+			<view class="secondary-title">特权内容</view>
+			<view class="text">
+				<view>1、平日购物，结账时出示“会员码”，尊享2倍积分；</view>
+				<view>2、平日购物，结账时出示“会员码”，尊享2倍积分；</view>
+				<view>3、平日购物，结账时出示“会员码”，尊享2倍积分；平日购物，结账时出示“会员码”，尊享2倍积分</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				current: null, // 当前选中的下标
+				oView: '' // scroll跳转到哪个view下
+			}
+		},
+		onLoad(options){
+			// TODO 待对接传入current
+			// setTimeout(() => {
+			// 	this.current = options.current;
+			// 	this.oView = `view-${options.current}`;
+			// }, 500);
+		},
+		methods: {
+			
+		}
+	}
+</script>
+
+<style>
+	page{
+		overflow-x: hidden;
+	}
+</style>
+<style lang="scss" scoped="scoped">
+	.head{
+		width: 750rpx;
+		height: 443rpx;
+		background: linear-gradient(90deg, #22A2A0 0%, #187B7A 100%);
+		position: relative;
+		overflow: hidden;
+		display: flex;
+		align-items: flex-end;
+		box-sizing: border-box;
+		color: #FFFFFF;
+		.bg-left{
+			position: absolute;
+			width: 196rpx;
+			height: 196rpx;
+			border-radius: 50%;
+			background-color: rgba(255,255,255,0.04);
+			left: -92rpx;
+			bottom: 60rpx;
+		}
+		.bg-right{
+			position: absolute;
+			width: 520rpx;
+			height: 520rpx;
+			border-radius: 50%;
+			background-color: rgba(255,255,255,0.04);
+			right: -168rpx;
+			top: -122rpx;
+		}
+		.scroll-view{
+			height: 236rpx;
+			width: 750rpx;
+			.head-content{
+				width: max-content;
+				height: 236rpx;
+				display: flex;
+				.item{
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					box-sizing: border-box;
+					padding: 0 20rpx;
+					position: relative;
+					.icon{
+						width: 100rpx;
+						height: 100rpx;
+						background: #FFFFFF;
+						border-radius: 50%;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						color: #FFFFFF;
+					}
+					.name{
+						width: 148rpx;
+						margin-top: 10rpx;
+						font-size: 24rpx;
+						color: #FFFFFF;
+						text-align: center;
+					}
+					.active{
+						position: absolute;
+						bottom: 0;
+						left: calc(50% - 25rpx);
+						width: 0rpx;
+						height: 0rpx;
+						border-left: 25rpx solid transparent;
+						border-right: 25rpx solid transparent;
+						border-bottom: 28rpx solid #FFFFFF;
+					}
+				}
+			}
+		}
+	}
+	
+	.content{
+		padding: 30rpx 32rpx;
+		.primary-title{
+			font-size: 32rpx;
+			color: #222222;
+			font-weight: bold;
+			position: relative;
+			width: max-content;
+			z-index: 2;
+			margin-bottom: 60rpx;
+			&::before{
+				position: absolute;
+				content: '';
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				height: 16rpx;
+				border-radius: 8rpx;
+				background-color: #8AB8B7;
+				z-index: -1;
+			}
+		}
+		.secondary-title{
+			font-size: 28rpx;
+			color: #777777;
+			margin-bottom: 10rpx;
+		}
+		.text{
+			font-size: 28rpx;
+			color: #222222;
+			margin-bottom: 40rpx;
+		}
+	}
+</style>
diff --git a/pages/user/member/quanyi.vue b/pages/user/member/quanyi.vue
new file mode 100644
index 0000000..79e069e
--- /dev/null
+++ b/pages/user/member/quanyi.vue
@@ -0,0 +1,167 @@
+<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>