pet-front-order/pages/personalCenter/member.vue

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