邓平艺
4 years ago
5 changed files with 797 additions and 3 deletions
-
62common/styles/iconfont.css
-
386components/lf-swiper/lf-swiper.vue
-
14pages.json
-
171pages/user/member/explain.vue
-
167pages/user/member/quanyi.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> |
||||
@ -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> |
||||
@ -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> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue