JP-ChargeTeam51/pages/user/member/member.vue

<template>
	<view>
		<ujp-navbar title="我的会员">
			<view slot="right"  v-if="false"
			style="margin-right: 10px;" @click="gotoUrl('pages/user/member/index')">

				<view class="right-text">
					规则说明
				</view>
			</view>
		</ujp-navbar>

		<view class="cover">
			<!-- 圆点 -->
			<view class="dot dot-g dot1">

			</view>
			<view class="dot  dot2" :class="{
					'dot-g':personInfo.memberLevel>1,
				}">

			</view>
			<view class="dot  dot3" :class="{
					'dot-g':personInfo.memberLevel>2,
				}">

			</view>
			<view class="dot  dot4" :class="{
					'dot-g':personInfo.memberLevel>3,
				}">
			
			</view>
			<!-- 会员名称 -->
			<view class="member-text1">
				联盟
			</view>
			<view class="member-text2">
				白银
			</view>
			<view class="member-text3">
				黄金
			</view>
			<view class="member-text4">
				白金
			</view>
			<view class="blockOut">

				<view class="block rotate1" :class="{
					block1:personInfo.memberLevel==1||personInfo.memberLevel==null,
					block2:personInfo.memberLevel==2,
					block3:personInfo.memberLevel==3,
					block4:personInfo.memberLevel==4,
				}"></view>
				<!-- 会员信息 -->
				<view class="title" v-if="personInfo.memberLevel<4&&list[personInfo.memberLevel].num>carImg3span1" >
					累计充电量还差{{list[personInfo.memberLevel].num-carImg3span1}}度升级{{list[personInfo.memberLevel].name}}
				</view>
				<view class="title" v-else >
					等待月底结算会员等级
				</view>
				<view class="number">
					
					{{carImg3span1}}
				</view>
				<view class="text">
					本月累计充电度数
				</view>




			</view>
			<view class="swiper-box">
				<ujp-swiper  @change="changeCurrent"
				:current="uCurrent"
				bg-color="none" :autoplay="false" :effect3d="true" mode="none" height="240" >
					<swiper-item v-for="(item,i) in list"   :key="i">
						
					<view  class="vipMain" :style="{
							background:item.background,
							transform: uCurrent != i ? 'scaleY(0.9)' : 'scaleY(1)',
							margin: uCurrent != i ? '0 20rpx' : 0,
						}">
						<view class="vipText" >
							<view class="tag" v-if="personInfo.memberLevel==(i+1)">
								<img src="../../../assets/img/member/00.png" alt="">
							</view>
							<view class="vipText1" :style="'color:'+item.color1">{{item.name}}</view>
							<view class="vipText2"  :style="'color:'+item.color2">{{item.num==0?'注册成功，并完善个人信息':'上个月累计充电量达'+carImg3span3+'度'}}</view>
							<view class="vipText3"  :style="'color:'+item.color3">
							{{personInfo.memberLevel>=(i+1)?'会员有效期至：'+(item.num==0?'永久':startDate):'暂未达标'}}
							</view>
						</view>
						<view class="vipTextImg" >
							<img :src="item.image" alt="">
						</view>
					</view>
					
					</swiper-item>
					
				</ujp-swiper>
			</view>
		</view>

		<view class="grid-box">
			<u-grid :col="3" :border="false">
				<u-grid-item>

					<view class="img-box">
						<img src="../../../assets/img/riFill-percent-fill@3x.png" alt="">
					</view>
					<view class="grid-text">折扣卡</view>
					<view class="grid-text2">可购买权益</view>
				</u-grid-item>
				<u-grid-item>

					<view class="img-box">
						<img src="../../../assets/img/riFill-bank-card-fill@3x.png" alt="">
					</view>
					<view class="grid-text">月卡</view>
					<view class="grid-text2">可购买权益</view>
				</u-grid-item>
				<u-grid-item>

					<view class="img-box">
						<img src="../../../assets/img/riFill-home-heart-fill@3x.png" alt="">
					</view>
					<view class="grid-text">荆鹏软件园</view>
					<view class="grid-text2">共享职工之家</view>
				</u-grid-item>
			</u-grid>
			<u-grid :col="3" :border="false">
				<u-grid-item v-show="[1,2,3].indexOf(uCurrent)>-1">
				
					<view class="img-box">
						<img src="../../../assets/img/riFill-gift-2-fill@3x.png" alt="">
					</view>
					<view class="grid-text">小礼品</view>
					<view class="grid-text2">不定期赠送</view>
				</u-grid-item>
				<u-grid-item v-show="[1,2,3].indexOf(uCurrent)>-1">

					<view class="img-box">
						<img src="../../../assets/img/riFill-heart-2-fill@3x.png" alt="">
					</view>
					<view class="grid-text">工会福利</view>
					<view class="grid-text2">不定期赠送</view>
				</u-grid-item>
			
				<u-grid-item v-show="[2,3].indexOf(uCurrent)>-1">
				
					<view class="img-box">
						<img src="../../../assets/img/riFill-battery-charge-fill@3x.png" alt="">
					</view>
					<view class="grid-text">快捷充电</view>
					<view class="grid-text2">扫码即冲</view>
				</u-grid-item>
				
			</u-grid>
			<u-grid :col="3" :border="false">
				
				
				
				<u-grid-item v-show="[3].indexOf(uCurrent)>-1" >
				
					<view class="img-box">
						<img src="../../../assets/img/riFill-customer-service-2-fill@3x.png" alt="">
					</view>
					<view class="grid-text">生日问候</view>
					<view class="grid-text2">需完善信息</view>
				</u-grid-item>
				<u-grid-item v-show="[3].indexOf(uCurrent)>-1">
				
					<view class="img-box">
						<img src="../../../assets/img/riFill-timer-flash-fill@3x.png" alt="">
					</view>
					<view class="grid-text">预约充电</view>
					<view class="grid-text2">免费使用</view>
				</u-grid-item>

			</u-grid>
		</view>
		<view class="grid-box grid-box-index">
			<view class="textMain">
				<view class="p pMain">会员等级：</view>
				<view class="p">当您注册成为“{{projectName}}”汽车充电会员以后，可享受如下权益：</view>
				<view class="p">1、注册{{projectName}}平台用户并完善信息即成为联盟会员。</view>
				<view class="p">2、会员体系设置联盟会员、白银会员、黄金会员及白金会员四级；</view>
				<view class="p">3、每月累计充电量达到不同等级的要求，下个月即可升级。</view>
				<view class="p">a)联盟会员：完成注册</view>
					<view class="p">b)白银会员：248≤月充电量＜600度</view>
				<view class="p">c)黄金会员：600≤月充电量＜1000度</view>
				<view class="p">d)白金会员：月充电量≥1000度</view>
				<view class="p">4、不同会员等级，享有不同会员等级权益</view>
				<view class="p">5、联盟会员永久有效，白银会员、黄金会员、白金会员等级有效期为1个自然月。</view>
				<view class="p"> 6、每月1号凌晨4点根据上个月累计充电量情况评定当月会员级别。</view>
			
				<view class="p pMain">会员权益：</view>
				<view class="p">本次升级共上线8大会员权益：</view>
				<view class="p">1、折扣卡 联盟及以上会员可购买充电服务费6折卡</view>
				<view class="p">2、月卡 联盟及以上会员可购买充电服务费月卡</view>
				<view class="p">3、荆鹏软件园 充电站院内可供新能源车主使用的共享职工之家</view>
				<view class="p">4、小礼品 平台不定期为白银及以上会员赠送小礼品</view>
				<view class="p">5、工会福利 荆州市总工会不定期为白银及以上会员赠送福利</view>
				<view class="p">6、快捷充电 黄金及以上会员可在平台体验插枪扫码快捷充电服务</view>
				<view class="p">7、生日问候 平台将为白金会员提供生日问候服务（需在个人资料中填写出生信息）</view>
				<view class="p">8、充电预约 白金会员可在已开启预约功能的充电桩上预约充电服务</view>
				
			
			
			
			
			
			</view>
			
			<view class="table">
						
				<table>
						
					<tr class="th">
						
						
						<td></td>
						<td >联盟</td>
						<td >白银</td>
						<td>黄金</td>
						<td>白金</td>
					</tr>
						
					<tr>
						<td class="td1">评级标准及月充电量</td>
						<td>完成注册</td>
						<td>248~599</td>
						<td>600~999</td>
						<td>≥1000</td>
					</tr>
					<tr>
						<td class="td1">有效期</td>
						<td>永久</td>
						<td>1个月</td>
						<td>1个月</td>
						<td>1个月</td>
					</tr>
					<tr>
						<td class="td1">
							折扣卡
						</td>
						<td><span class="span1">●</span></td>
						<td><span class="span1">●</span></td>
						<td><span class="span1">●</span></td>
						<td><span class="span1">●</span></td>
					</tr>
					<tr>
						<td class="td1">
							月卡
						</td>
						<td><span class="span1">●</span></td>
						<td><span class="span1">●</span></td>
						<td><span class="span1">●</span></td>
						<td><span class="span1">●</span></td>
					</tr>
					<tr>
						<td class="td1">
							荆鹏软件园
						</td>
						<td><span class="span1">●</span></td>
						<td><span class="span1">●</span></td>
						<td><span class="span1">●</span></td>
						<td><span class="span1">●</span></td>
					</tr>
						
					<tr>
						<td class="td1">
							小礼品
						</td>
						<td><span class="span1">○</span></td>
						<td><span class="span1">●</span></td>
						<td><span class="span1">●</span></td>
						<td><span class="span1">●</span></td>
					</tr>
					<tr>
						<td class="td1">
							工会福利
						</td>
						<td><span class="span1">○</span></td>
						<td><span class="span1">●</span></td>
						<td><span class="span1">●</span></td>
						<td><span class="span1">●</span></td>
					</tr>
					<tr>
						<td class="td1">
							快捷充电
						</td>
						<td><span class="span1">○</span></td>
						<td><span class="span1">○</span></td>
						<td><span class="span1">●</span></td>
						<td><span class="span1">●</span></td>
					</tr>
					<tr>
						<td class="td1">
							生日问候
						</td>
						<td><span class="span1">○</span></td>
						<td><span class="span1">○</span></td>
						<td><span class="span1">○</span></td>
						<td><span class="span1">●</span></td>
					</tr>
					<tr>
						<td class="td1">
							充电预约
						</td>
						<td><span class="span1">○</span></td>
						<td><span class="span1">○</span></td>
						<td><span class="span1">○</span></td>
						<td><span class="span1">●</span></td>
					</tr>
					
					
				</table>
						
			</view>
			
			<view class="textMain">
				<view class="p pMain">政策变更说明：</view>
				<view class="p">1.{{projectName}}可以根据实际情况对权益规则和内容进行变动、调整或终止，具体以权益说明页面为准，公布即生效；</view>
				<view class="p">2.如有其他疑问可拨打客服热线：400-8899-619。</view>
							
				</view>
				
				</view>
	</view>
	</view>
</template>

<script>
	import * as API_index from '@/apis/index.js'


	export default {
		data() {
			return {
				list: [{
						name:"联盟会员",
						num:0,
						// 激活
						image: require('@../../..//assets/img/member/00.svg'),
						background:"linear-gradient(157.61deg, rgba(242,254,248,1) -4.44%,rgba(201,255,224,1) 86.29%)",
						color1:"#00A155",
						color2:"#137B4A",
						color3:"#137B4A",
						// 未达标
					
					},
					{
							name:"白银会员",
							num:248,
							// 激活
							image: require('@../../..//assets/img/member/01.svg'),
							background:"linear-gradient(157.61deg, rgba(254,249,242,1) -4.44%,rgba(201,228,255,1) 86.29%)",
							color1:"rgba(20, 124, 255, 1)",
							color2:"rgba(36, 94, 167, 1)",
							color3:"rgba(36, 94, 167, 1)",
							// 未达标
							
						},
						
					{
						name:"黄金会员",
						num:600,
						// 未达标
					
						image: require('@../../..//assets/img/member/02.svg'),
						background:"linear-gradient(134.12deg, rgba(255,229,181,1) 5.01%,rgba(255,202,118,1) 48.56%,rgba(249,212,140,1) 95.74%)",
						
						color1:"rgba(153, 81, 0, 1)",
						color2:"rgba(107, 84, 78, 1)",
						color3:"rgba(138, 85, 26, 1)",
						
						// 激活
					
					},
					{
						name:"白金会员",
						num:1000,
						
						image: require('@../../..//assets/img/member/03.svg'),
						background:"linear-gradient(170.72deg, rgba(239,240,251,1) -3.66%,rgba(227,212,254,1) 51.22%,rgba(171,196,255,1) 108.49%)",
						color1:"rgba(7, 0, 140, 1)",
						color2:"rgba(62, 61, 82, 1)",
						color3:"rgba(62, 61, 82, 1)",

					}
				],
				personInfo: {
					memberLevel:4
				},
				carImg3span1: 0,
				carImg3span2: 0,
				carImg3span3: 0,
				carImg3span4: 0,
				startDate:'',
				uCurrent:0,
			}
		},
		onLoad(){
				if(this.branchParameterBl('ud')){
					this.list[0].image=require('@/assets/img/9-4/联盟会员ud.png')
				}
		},
		onReady() {
			this.personInfo = this.carhelp.getPersonInfo()
			this.uCurrent=this.personInfo.memberLevel-1
			//this.getChargeList()//本月
			
			var date = new Date();
			var monthN = date.getMonth() + 1;
			
			var year = date.getFullYear();
			
			if (monthN >= 1 && monthN <= 9) {
				monthN = "0" + monthN;
			}
			
			var startDate = year + '-' + monthN + '-' + '01';
			
			var monthN2 = date.getMonth() + 2;
			
			var year2 = date.getFullYear();
			if(monthN2==13){
				monthN2=1
				year2+=1;
			}
			if (monthN2 >= 1 && monthN2 <= 9) {
				monthN2 = "0" + monthN2;
			}
			if(this.personInfo.curMonthKwh){
				this.carImg3span1 =parseInt( this.personInfo.curMonthKwh)
			}
			if(this.personInfo.prevMonthKwh){
				this.carImg3span3 =parseInt( this.personInfo.prevMonthKwh)
			}
			//this.carImg3span3 =parseInt(this.personInfo.prevMonthKwh)
			this.startDate= year2 + '-' + monthN2 + '-01' 
			
		},
		methods: {
			changeCurrent(e){
				
				this.uCurrent=e;
			},
			getChargeList2(endDate) {
				//查上个月
				var date = new Date();
				var monthN = date.getMonth() ;
			
				var year = date.getFullYear();
				if (monthN==0) {
					monthN = 12 ;
					year=year-1
				}
				if (monthN >= 1 && monthN <= 9) {
					monthN = "0" + monthN;
				}
			
				var startDate = year + '-' + monthN + '-' + '01';
				
				
				
				
			
				API_index.chargingRecordData({
					pageIndex: 1,
					pageSize: 999,
					startDate: startDate,
					 endDate: endDate
				}).then((res) => {
			
			
					var chargeList = res.data.data;
					var num1 = 0;
					var num2 = 0;
					for (var i in chargeList) {
						var obj = chargeList[i]
						if (obj.status == 2 ) {
							num1 += obj.electricQuantity
							num2 += obj.totalServiceMoney
						}
					}
					this.carImg3span3 = parseInt(num1 / 10000);
					this.carImg3span4 = parseInt(num2);
			
					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getChargeList() {
				//查本月
				
				this.getChargeList2(startDate)//查上个月
				API_index.chargingRecordData({
					pageIndex: 1,
					pageSize: 999,
					startDate: startDate,
					// endDate: this.endDate
				}).then((res) => {


					var chargeList = res.data.data;
					var num1 = 0;
					var num2 = 0;
					for (var i in chargeList) {
						var obj = chargeList[i]
						if (obj.status == 2 ) {
							num1 += obj.electricQuantity
							num2 += obj.totalServiceMoney
						}
					}
					this.carImg3span1 = parseInt(num1 / 10000);
					this.carImg3span1 = parseInt(num2);

					
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style>
	page {
			background:  linear-gradient( rgba(59, 62, 67, 1), #f3f4f4);
		padding-bottom: 50px;
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-grid-item-box{
		//padding: 12rpx 0px !important;
	}
	.cover {
	
		padding: 6rpx 80rpx 16rpx 80rpx;
		text-align: center;
		position: relative;


	}

	.cover:after {
		// width: 102%;
		// height: 100rpx;
		// position: absolute;

		// left: -1%;
		// bottom: -100rpx;

		// content: '';
		// border-radius: 0 0 50% 50%;
		// background-color: rgba(59, 62, 67, 1);

	}

	.swiper-box {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0rpx;

		z-index: 90;
		::v-deep uni-swiper{
			//height: 120px !important;
		}
	}

	// 圆点
	.dot {
		width: 24rpx;
		height: 24rpx;
		border-radius: 999px;
		background-color: rgba(255, 255, 255, 1);
		border: 8rpx solid rgba(187, 187, 187, 1);
		z-index: 90;
		color: white;
	}

	.dot-g {
		border: 8rpx solid #00b962;
	}

	.dot1 {
		position: absolute;
		top: 78rpx;
		left: 74rpx;

	}

	.dot2 {
		position: absolute;
		top: 272rpx;
		left: 165rpx;
	}

	.dot3 {
		position: absolute;
		top: 272rpx;
		right: 170rpx;
	}
	.dot4 {
		position: absolute;
		top: 78rpx;
		right: 80rpx;
	}

	// 会员名称
	.member-text1 {

		color: rgba(204, 204, 204, 1);
		position: absolute;

		top: 28rpx;
		left: 56rpx;
	}

	.member-text2 {
		color: rgba(204, 204, 204, 1);
		position: absolute;
		left: 150rpx;
		top: 322rpx;
	}

	.member-text3 {
		color: rgba(204, 204, 204, 1);
		position: absolute;
		top: 322rpx;
		right: 150rpx;
	}
	.member-text4 {
		color: rgba(204, 204, 204, 1);
		position: absolute;
		top: 28rpx;
		right: 56rpx;
	}
	.block {
		width: 586rpx;
		height: 586rpx;
		border-left: 12rpx solid #00b962;
		border-top: 12rpx solid #00b962;
		border-right: 12rpx solid gray;
		border-bottom: 12rpx solid gray;
		border-radius: 50%;
		box-sizing: border-box;
		position: absolute;
		bottom: 50%;
		margin-top: 100px;
	}

	// .block1 {
	// 	border-left: 12rpx solid gray;
	// 	border-top: 12rpx solid gray;
	// 	border-right: 12rpx solid gray;
	// 	border-bottom: 12rpx solid gray;
	// }

	// .block2 {
	// 	border-left: 12rpx solid #00b962;
	// 	border-top: 12rpx solid #00b962;
	// 	border-right: 12rpx solid gray;
	// 	border-bottom: 12rpx solid gray;
	// }

	// .block3 {
	// 	border-left: 12rpx solid #00b962;
	// 	border-top: 12rpx solid #00b962;
	// 	border-right: 12rpx solid #00b962;
	// 	border-bottom: 12rpx solid #00b962;
	// }
	
	// .block4 {
	// 	border-left: 12rpx solid #00b962;
	// 	border-top: 12rpx solid #00b962;
	// 	border-right: 12rpx solid #00b962;
	// 	border-bottom: 12rpx solid #00b962;
	// }

	.blockOut {
		// padding-top: 16rpx;
		margin-top: 76rpx;
		width: 586rpx;
		height: 570rpx;

		position: relative;
		overflow: hidden;

		// 会员信息
		.title {
			color: rgba(204, 204, 204, 1);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

		}

		.number {
			color: rgba(255, 255, 255, 1);
			font-size: 96rpx;
		}

		.text {
			color: rgba(204, 204, 204, 1);
			font-size: 24rpx;
		}

	}
	.block.rotate1.block1 {
		transform: rotate(40deg);
	}
	.block.rotate1.block2 {
		transform: rotate(-0deg);
	}
	.block.rotate1.block3 {
		transform: rotate(-85deg);
	}
	.block.rotate1.block4 {
		transform: rotate(-130deg);
	}
	// 宫格
	.grid-box {
		 
		background-color: #fff;
		margin: 32rpx;
		border-radius: 16rpx;
		overflow: hidden;
		text-align: center;

		.img-box {
			width: 96rpx;
			height: 96rpx;
			background: linear-gradient(180deg, rgba(94, 136, 161, 1) 0%, rgba(56, 65, 84, 1) 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 999px;
			margin-bottom: 8rpx;

			img {
				width: 56rpx;
				height: 56rpx;
				vertical-align: middle;
			}
		}

		.grid-text1 {
			color: rgba(51, 51, 51, 1);
			font-size: 32rpx;
			width: 222rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.grid-text2 {
			color: rgba(149, 142, 136, 1);
			font-size: 28rpx;
			width: 222rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}
	
	
	.vipMain{
		background-size: 100% 100%;
		border-radius: 12px;
		display: flex;
		    justify-content: space-around;
			align-items: center;
			height: 240rpx;
		    text-align: left;
		.vipText1{
			font-size:48rpx;

		}
	 
		.vipText2{
			margin-top: 8rpx;
			font-size: 28rpx;

		
		}
		.vipText3{
			margin-top: 38rpx;
			font-size: 24rpx;
		
		}
		.vipTextImg{
			img{
				width: 160rpx;
				height: 160rpx;
			}
		}
		.tag {
			position: absolute;
			
			color: #ffffff;
			font-size: 24rpx;
			text-align: center;
			line-height: 40rpx;
			//padding: 0 12rpx;
			right: 0rpx;
			top: 0rpx;
			border-radius: 0 12px 0 12px;
		
		}
	}
	
	
	.textMain {
		margin: 40rpx;
		//padding-bottom: 80rpx;
	
		.p {
			margin: 8rpx 0;
		}
	
		.pMain {
			font-size: 32rpx;
			margin: 48rpx 0 16rpx 0;
			color: #000;
			font-weight: bold;
		}
	}
	
	.table {
		table {
			width: 100%;
			border-spacing:0;
			font-size: 28rpx;
			.th {
				background-color: rgba(72, 83, 104, 1);
				color: rgba(255, 255, 255, 1);
				td{
					border-right: 1px solid #fff;
				}
			}
			.span1{
				font-size: 40rpx;
			}
			.td1 {
				text-align: start;
				background-color:#e5e5e5;
				width: 200rpx;
				padding: 0 8rpx;;
				border-bottom: 1px solid #fff;
				
	
			}
	
			td {
				text-align: center;
				
				max-width: 160rpx;
			}
		}
	
	
	}
	
	.grid-box-index{
		    background-color: #fff;
		    margin: 24rpx;
			padding-bottom: 80rpx;
		    border-radius: 8px;
		    overflow: hidden;
		    text-align: unset;
	}
</style>