调整

pages/user/index.vue

@@ -44,7 +44,7 @@
 							  rightTextD:personInfo.memberLevel==4
 					 }" >
 						<view class="rightText1">{{personInfo.memberLevelStr}}</view>
-						<view class="rightText2"  v-if="false">查看详情</view>
+						<view class="rightText2"  @click="gotoUrl('pages/user/member/member')">查看详情</view>
 						
 					</view>
 					

pages/user/member/member.vue

@@ -1,347 +1,554 @@
-<template>
-	<view>
-		<ujp-navbar title="我的会员">
-			<view slot="right" style="margin-right: 10px;">
-
-				<view class="right-text">
-					规则说明
-				</view>
-			</view>
-		</ujp-navbar>
-
-		<view class="cover">
-			<!-- 圆点 -->
-			<view class="dot dot-g dot1">
-
-			</view>
-			<view class="dot dot-g dot2">
-
-			</view>
-			<view class="dot  dot3">
-
-			</view>
-			<!-- 会员名称 -->
-			<view class="member-text1">
-				联盟
-			</view>
-			<view class="member-text2">
-				黄金
-			</view>
-			<view class="member-text3">
-				铂金
-			</view>
-			<view class="blockOut">
-
-				<view class="block rotate1"></view>
-				<!-- 会员信息 -->
-				<view class="title">
-					累计充电量还差480度升级铂金会员
+<template>
+	<view>
+		<ujp-navbar title="我的会员">
+			<view slot="right" style="margin-right: 10px;">
+
+				<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="member-text1">
+				联盟
+			</view>
+			<view class="member-text2">
+				黄金
+			</view>
+			<view class="member-text3">
+				铂金
+			</view>
+			<view class="blockOut">
+
+				<view class="block rotate1" :class="{
+					block1:personInfo.memberLevel==1,
+					block2:personInfo.memberLevel==2,
+					block3:personInfo.memberLevel==3,
+				}"></view>
+				<!-- 会员信息 -->
+				<view class="title" v-if="personInfo.memberLevel<3&&list[personInfo.memberLevel].num>carImg3span1" >
+					累计充电量还差{{list[personInfo.memberLevel].num-carImg3span1}}度升级{{list[personInfo.memberLevel].name}}
 				</view>
+				<view class="title" v-else >
+					已满足等需求，等待下次结算
+				</view>
 				<view class="number">
-					299
-				</view>
-				<view class="text">
-					本月累计充电度数
-				</view>
-
-
-
-
-			</view>
-<view class="swiper-box">
-			<u-swiper bg-color="none" :list="list" :autoplay="false" :effect3d="true" mode="none"></u-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>
-							
-							<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>
-							
-							<view class="img-box">
-								<img src="../../../assets/img/riFill-heart-2-fill@3x.png" alt="">
+					
+					{{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="grid-text">工会福利</view>
-							<view class="grid-text2">不定期赠送</view>
-						</u-grid-item>
-						<u-grid-item>
-							
-							<view class="img-box">
-								<img src="../../../assets/img/riFill-timer-flash-fill@3x.png" alt="">
+							<view class="vipText1" :style="'color:'+item.color1">{{item.name}}</view>
+							<view class="vipText2"  :style="'color:'+item.color2">{{item.num==0?'注册成功，并完善个人信息':'上个月累计充电量达'+item.num+'度'}}</view>
+							<view class="vipText3"  :style="'color:'+item.color3">
+							{{personInfo.memberLevel>=(i+1)?'会员有效期至：'+(item.num==0?'永久':startDate+'01'):'暂未达标'}}
 							</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>
-								
-								<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>
-								
-								<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>
-        </view>
-	</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				list: [{
+						</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].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="[1,2].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="[2].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>
+			<u-grid :col="3" :border="false">
+				
+				<u-grid-item v-show="[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="[2].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>
+		</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/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)",
+						// 未达标
+						// image:require('@../../..//assets/img/notQualifiedGold.png')
+					},
+					{
+						name:"黄金会员",
+						num:248,
+						// 未达标
+						//image: require('@../../..//assets/img/platinumMember.png'),
+						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%)",
 						
-						// 激活
-						image:require('@../../..//assets/img/currentGold.png')
-						// 未达标
-                        // image:require('@../../..//assets/img/notQualifiedGold.png')
-					},
-					 {
-						 // 未达标
-						image:require('@../../..//assets/img/platinumMember.png')
-						// 激活
-                            // image:require('@../../..//assets/img/currentPlatinum.png')
-					},
+						color1:"rgba(153, 81, 0, 1)",
+						color2:"rgba(107, 84, 78, 1)",
+						color3:"rgba(138, 85, 26, 1)",
+						
+						// 激活
+						// image:require('@../../..//assets/img/currentPlatinum.png')
+					},
 					{
-						image:require('@../../..//assets/img/allianceMember.png')
-
-					}
-				],
-			}
-		},
+						name:"铂金会员",
+						num:1000,
+						//image: require('@../../..//assets/img/allianceMember.png'),
+						image: require('@../../..//assets/img/member/02.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: 3
+				},
+				carImg3span1: 0,
+				carImg3span2: 0,
+				startDate:'',
+				uCurrent:0,
+			}
+		},
+		onReady() {
+			//this.personInfo = this.carhelp.getPersonInfo()
+			this.uCurrent=this.personInfo.memberLevel-1
+			this.getChargeList()
+		},
 		methods: {
-
-		}
-	}
-</script>
-
-<style>
-	page{
-		padding-bottom: 50px;
-	}
-</style>
-<style lang="scss" scoped>
-	.cover {
-		background-color: rgba(59, 62, 67, 1);
-		padding: 24rpx 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: -24rpx;
-		
-		z-index: 999;
-	}
-
-	// 圆点
-	.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: 999;
-		color: white;
-	}
-
-	.dot-g {
-		border: 8rpx solid #00b962;
-	}
-
-	.dot1 {
-		position: absolute;
-		top: 100rpx;
-		left: 74rpx;
-
-	}
-
-	.dot2 {
-		position: absolute;
-		top: 394rpx;
-		left: 48%;
-	}
-
-	.dot3 {
-		position: absolute;
-		top: 100rpx;
-		right: 82rpx;
-	}
-
-	// 会员名称
-	.member-text1 {
-
-		color: rgba(204, 204, 204, 1);
-		position: absolute;
-
-		top: 48rpx;
-		left: 56rpx;
-	}
-
-	.member-text2 {
-		color: rgba(204, 204, 204, 1);
-		position: absolute;
-		left: 45%;
-		top: 430rpx;
-	}
-
-	.member-text3 {
-		color: rgba(204, 204, 204, 1);
-		position: absolute;
-		top: 48rpx;
-		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;
+			changeCurrent(e){
+				
+				this.uCurrent=e;
+			},
+			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;
+				}
+				
+				this.startDate= year2 + '-' + monthN2 + '-' 
+
+				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.carImg3span2 = parseInt(num2);
+
+					
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				})
+			},
+		}
+	}
+</script>
+
+<style>
+	page {
+		padding-bottom: 50px;
+	}
+</style>
+<style lang="scss" scoped>
+	.cover {
+		background-color: rgba(59, 62, 67, 1);
+		padding: 24rpx 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: -24rpx;
+
+		z-index: 90;
+		/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: 100rpx;
+		left: 74rpx;
+
+	}
+
+	.dot2 {
+		position: absolute;
+		top: 394rpx;
+		left: 48%;
+	}
+
+	.dot3 {
+		position: absolute;
+		top: 100rpx;
+		right: 82rpx;
+	}
+
+	// 会员名称
+	.member-text1 {
+
+		color: rgba(204, 204, 204, 1);
+		position: absolute;
+
+		top: 48rpx;
+		left: 56rpx;
+	}
+
+	.member-text2 {
+		color: rgba(204, 204, 204, 1);
+		position: absolute;
+		left: 45%;
+		top: 430rpx;
+	}
+
+	.member-text3 {
+		color: rgba(204, 204, 204, 1);
+		position: absolute;
+		top: 48rpx;
+		right: 56rpx;
+	}
+
+	.block {
+		width: 586rpx;
+		height: 586rpx;
+		//border-left: 12rpx solid #00b962;
+		//border-top: 12rpx solid #00b962;
+
+		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;
+	}
+
+	.blockOut {
+		// padding-top: 16rpx;
+		margin-top: 96rpx;
+		width: 586rpx;
+		height: 586rpx;
+
+		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 {
+		transform: rotate(-45deg);
+	}
+
+	// 宫格
+	.grid-box {
+
+		background-color: #fff;
+		margin: 70px 40rpx;
+		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;
+		}
 	}
-
-	.blockOut {
-		// padding-top: 16rpx;
-		margin-top: 96rpx;
-		width: 586rpx;
-		height: 586rpx;
-
-		position: relative;
-		overflow: hidden;
-
-		// 会员信息
-		.title {
-			color: rgba(204, 204, 204, 1);
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
+	
+	
+	.vipMain{
+		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;
 
-		.number {
-			color: rgba(255, 255, 255, 1);
-			font-size: 96rpx;
+		
 		}
-
-		.text {
-			color: rgba(204, 204, 204, 1);
+		.vipText3{
+			margin-top: 38rpx;
 			font-size: 24rpx;
-		}
-
-	}
-
-	.block.rotate1 {
-		transform: rotate(-45deg);
-	}
-	
-	// 宫格
-	.grid-box{
 		
-		background-color: #fff;
-		margin:70px 40rpx;
-		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;
+		}
+		.vipTextImg{
 			img{
-				width: 56rpx;
-				height: 56rpx;
-				vertical-align: middle;
+				width: 160rpx;
+				height: 160rpx;
 			}
 		}
-		.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;
+		.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;
+		
 		}
-	}
+	}
 </style>