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.
217 lines
6.4 KiB
217 lines
6.4 KiB
<template>
|
|
<view class="personal-member">
|
|
<view class="personal-user">
|
|
<view style="width: 100%; margin-top: 10px;">
|
|
<view style="width: 100%;text-align: center;">
|
|
<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/avatar_1.png" style="width: 66px; height: 66px;" mode="widthFix"></img>
|
|
</view>
|
|
<!-- <view style="width: 100%;text-align: center;">
|
|
<img src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/cmdf_text.png"style="width:55px;height: 16px;" mode="widthFix"></img>
|
|
</view> -->
|
|
</view>
|
|
<!-- #ifndef APP-NVUE || MP-TOUTIAO -->
|
|
<view v-if="isShow" class="u-demo-block" style="margin-top: 20px;">
|
|
<u-swiper
|
|
:list="memberSwipers"
|
|
height="170"
|
|
previousMargin="30"
|
|
nextMargin="30"
|
|
:autoplay="false"
|
|
radius="5"
|
|
bg-color="rgba(255,255,255,0.0)"
|
|
:current="current"
|
|
@change="change"
|
|
></u-swiper>
|
|
<view class="personal-member-detail">
|
|
<view v-for="(item,index) in currentDetail" :key="index" class="personal-member-item">
|
|
<view class="personal-member-name">
|
|
{{item.name}}
|
|
</view>
|
|
<view v-for="(content,j) in item.content" :key="j">
|
|
<view class="personal-member-content">
|
|
{{content}}
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- #endif -->
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
current:0,
|
|
memberSwipers: [
|
|
'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/new_member.png',
|
|
'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/normal.png',
|
|
'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/silver.png',
|
|
'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/gold.png'
|
|
],
|
|
isShow:false,
|
|
currentDetail:[],
|
|
newMemberDetail:[
|
|
{
|
|
name:'[权益说明]',
|
|
content:['下单即可入会']
|
|
},
|
|
{
|
|
name:'[入会礼遇]',
|
|
content:['服务8.5折优惠券1张']
|
|
},
|
|
{
|
|
name:'[会员折扣]',
|
|
content:['下单享受9.5折']
|
|
},
|
|
{
|
|
name:'[积分福利]',
|
|
content:['消费金额 * 1.1 = 会员积分 * 1',
|
|
'a. 积分可抵扣现金，10积分抵扣1元（单笔订单最多可使用200分）',
|
|
'b. 积分可兑换优惠券']
|
|
},
|
|
{
|
|
name:'[集点福利]',
|
|
content:['累计下单10次服务，赠送单次服务兑换券1张']
|
|
}
|
|
],
|
|
normalMemberDetail:[
|
|
{
|
|
name:'[权益说明]',
|
|
content:['上一等级生效后有效期 (365天)内，个人累计消费 金额大于400元，升至普卡会员。普卡会员等级有效期 (365天)累计消费满400元维持当前等级，不满则退为“新晋家长”等级']
|
|
},
|
|
{
|
|
name:'[会员折扣]',
|
|
content:['下单享受9折']
|
|
},
|
|
{
|
|
name:'[积分福利]',
|
|
content:['消费金额 * 1.1 = 会员积分 * 1',
|
|
'a. 积分可抵扣现金，10积分抵扣1元（单笔订单最多可使用200分）',
|
|
'b. 积分可兑换优惠券']
|
|
},
|
|
{
|
|
name:'[集点福利]',
|
|
content:['累计下单10次服务，赠送单次服务兑换券1张']
|
|
},
|
|
{
|
|
name:'[生日福利]',
|
|
content:['爱宠生日当天获得“6折生日券”','(任选1次基础服务6折)']
|
|
}
|
|
],
|
|
silverMemberDetail:[
|
|
{
|
|
name:'[权益说明]',
|
|
content:['上一等级生效后有效期 (365天)内，个人累计消费金额大于650元，升至银卡会员。银卡会员等级有 效期 (365天)累计消费满550元维持当前等级，不满则退为“普卡会员”等级']
|
|
},
|
|
|
|
{
|
|
name:'[会员折扣]',
|
|
content:['下单享受8.8折']
|
|
},
|
|
{
|
|
name:'[积分福利]',
|
|
content:['消费金额 * 1.2 = 会员积分 * 1',
|
|
'a. 积分可抵扣现金，10积分抵扣1元（单笔订单最多可使用200分）',
|
|
'b. 积分可兑换优惠券']
|
|
},
|
|
{
|
|
name:'[集点福利]',
|
|
content:['累计下单10次服务，赠送单次服务兑换券1张']
|
|
},
|
|
{
|
|
name:'[生日福利]',
|
|
content:['爱宠生日当天获得“5折生日券”','(任选1次基础服务5折)']
|
|
}
|
|
],
|
|
glodMemberDetail:[
|
|
{
|
|
name:'[权益说明]',
|
|
content:['上一等级生效后有效期 (365天)内，个人累计消费金额大于1300元，升至金卡会员。金卡会员等级有效期 (365天)累计消费满1200元维持当前等级，不满则退为“银卡会员”等级']
|
|
},
|
|
{
|
|
name:'[会员折扣]',
|
|
content:['下单享受8.5折']
|
|
},
|
|
{
|
|
name:'[积分福利]',
|
|
content:['消费金额 * 1.5 = 会员积分 * 1',
|
|
'a. 积分可抵扣现金，10积分抵扣1元（单笔订单最多可使用200分）',
|
|
'b. 积分可兑换优惠券']
|
|
},
|
|
{
|
|
name:'[集点福利]',
|
|
content:['累计下单10次服务，赠送单次服务兑换券1张']
|
|
},
|
|
{
|
|
name:'[生日福利]',
|
|
content:['爱宠生日当天获得“免费生日券”','(任选1次基础服务，免费下单)']
|
|
}
|
|
],
|
|
}
|
|
},
|
|
mounted() {
|
|
this.current=0
|
|
this.currentDetail=this.newMemberDetail
|
|
this.isShow=true
|
|
},
|
|
methods:{
|
|
change(e){
|
|
console.log(e.current)
|
|
this.current=e.current
|
|
if(this.current==0){
|
|
this.currentDetail=this.newMemberDetail
|
|
}
|
|
if(this.current==1){
|
|
this.currentDetail=this.normalMemberDetail
|
|
}
|
|
if(this.current==2){
|
|
this.currentDetail=this.silverMemberDetail
|
|
}
|
|
if(this.current==3){
|
|
this.currentDetail=this.glodMemberDetail
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.personal-member{
|
|
.personal-user{
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
align-content:flex-start;
|
|
width: 100%;
|
|
height: 226px;
|
|
flex-shrink: 0;
|
|
background: linear-gradient(0deg, #F5F5F7 0%, #FFBF60 99.41%);
|
|
.personal-member-detail{
|
|
background-color: #fff;
|
|
margin: 14px 18px;
|
|
padding: 6px 20px;
|
|
border-radius: 5px;
|
|
.personal-member-item{
|
|
padding: 14px 0;
|
|
border-bottom: 1px solid #efefef;
|
|
.personal-member-name{
|
|
margin-bottom: 14px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
.personal-member-content{
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|