JP-ChargeTeam51/pages/user/company-vip.vue

<template>
	<view>
		<view class="header">
			<ujp-navbar title="企业会员"></ujp-navbar>
			
			
			<view class="user-card">
				<view class="head-img">
					<img v-if="info.headImg" style="border-radius: 50px;"
					:src="info.headImg" alt="">
					<img v-else src="../../assets/img/headPortrait.png" alt="">
					
				</view>
				<view class="user-name">
					<view class="name">
						{{info.realName?info.realName:info.nickName}}
					</view>
					<view class="sign">
						{{platformN}}
					</view>
				</view>
				
			</view>
			
		</view>
		<u-picker mode="time" v-model="popupShow" @confirm="changedate" :default-time="queryTime+'-1'"  :params="params"></u-picker>
		
		<view class="details">
			<!-- 可用余额 -->
			<view class="balance" v-if="enterpriseAccount"  >
				
				<view class="item2" >
					<view class="num " >
						{{enterpriseAccount.balance}}<span >元</span>
					</view>
					<view class="name">
						充值余额
					</view>
				</view>
				<view class="item3"></view>
				<view class="item2" >
					<view class="num " >
						{{enterpriseAccount.giftAmount?enterpriseAccount.giftAmount:0}}<span >元</span>
					</view>
					<view class="name" @click="ckIcon">
						赠送余额<u-icon name="info-circle"></u-icon>
					</view>
				</view>
				
			</view>
			
			  <view class="month-electric">
			  	  <view class="month"  @click="popupShow = true" >
					  {{showTime(queryTime)}}
					  <u-icon name="arrow-down" color="#b0b8c8" size="32" v-show="!popupShow"></u-icon>
					  	<u-icon name="arrow-up" color="#b0b8c8" size="32" v-show="popupShow"></u-icon>
					  
			  	  	<!-- 8月<text class="iconfont">&#xe62b;</text> -->
			  	  </view>
				  <view class="electric">
				  	本月累计充电 {{(electricQuantity).toFixed(1)}}度
				  </view>
			  </view>
			  
			  <view class="carNone"  v-show="!list.length">
			  	<img src="static/img/暂无数据-缺省页.png" alt="">
			  	<p>暂无充电记录</p>
			  </view>
			  
		<view class="item" v-for="(item,i) in list" :key="i"  >
			 <view class="infos">
				 <view class="station-name">
				 	{{item.stationName}}
				 </view>
				 <view class="time">
				 	{{item.endTime}}
				 </view>
			 	
			 </view>
			 <view class="electricity-consumption">
			 	{{(item.electricQuantity/10000).toFixed(1)}}度
			 </view>
		</view>
		
		
		<u-divider color="#a8a8a8" v-if="list.length"  half-width="200" border-color="#CFD2D5" fontSize="28">已经到底了</u-divider>
		</view>
		
	</view>
</template>

<script>
	import * as API_index from '@/apis/index.js'
	
	import * as API from '@/apis/user.js'
	import {
		daysDistance,
		beforeTimeStamp,
		currentTimeStamp,
		parseUnixTime
	} from '@/utils'
	export default {
		data() {
			return {
				enterpriseAccount:null,
				params: {
									year: true,
									month: true,
									day: false,
									hour: false,
									minute: false,
									second: false
				},
				popupShow:false,
				queryTime:"",
				info:{},
				platformN:'',
				platform:'',
				startDate:'',
				endTime:"",
				pageIndex:1,
				list: [],
				electricQuantity:0,
				recordsTotal: 0,
			}
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		
		onLoad(op) {
			this.platform=op.id;
			this.info=this.carhelp.getPersonInfo()
			var list=this.carhelp.getPersonInfoPlus().businessVipList;
			if(list){	
				for(var i in list){
					if(list[i].platform==this.platform){
						this.platformN=list[i].platformN
					}
				}
			}
			this.queryTime=parseUnixTime(currentTimeStamp(), '{y}-{m}'),
			this.endTime = parseUnixTime(currentTimeStamp(), '{y}-{m}-{d}')
			this.personalCenter()
			this.getList()
		},computed:{
		
		
			startTime(){
				return this.queryTime+'-1'
			},
			
		},
		methods: {
			ckIcon(){
				uni.showModal({
					title: '提示',
					content: '余额扣款顺序为先扣除充值余额,再扣除赠送余额.如申请退款,赠送余额不退换给用户.',
					showCancel:false,
					success: res=>{
						if (res.confirm) {
							
						} else if (res.cancel) {
							//('用户点击取消');
						}
					}
				});
			},
			personalCenter(){
				
				var list=this.carhelp.getPersonInfoPlus().businessVipList;
				if(list){	
					for(var i in list){
						if(list[i].platform==this.platform){
							this.platformN=list[i].platformN
						}
					}
				}
				
				API_index.personalCenter().then((res2) => {
					var entRegList=res2.data.entRegList;
					for(var i in list){
						var item1=list[i]
						if(list[i].platform==this.platform){
							for(var j in entRegList){
								var item2=entRegList[j].vipUser;
								
								if(item1.id==item2.id){
									this.enterpriseAccount=entRegList[j].enterpriseAccount
									console.log(this.enterpriseAccount)
								}
							}
						}
						
					}
					this.$forceUpdate()
					
				}).catch(error => {
						uni.showToast({
							title: error
						})
					})
			},
			okbtn() {
				this.popupShow = false;
				this.getList(true)
			},
			changedate(e) {
				console.log(e)
				this.queryTime=e.year+'-'+e.month;
				
				if(e.month=='12'){
					this.endTime=(e.year)+"/12/31"
				}else{
					var b=e.year+'/'+(parseInt(e.month)+1)+'/1';
					var a=beforeTimeStamp(1,b);
					this.endTime= parseUnixTime(a, '{y}-{m}-{d}')
				}
				
				this.okbtn()
			
			},
			showTime(name){
				if(!name){
					return ''
				}
				return name.replace('-','年')+'月';
			},
			myLoadmore() {
				this.pageIndex += 1;
				this.getList()
			},
			getList(bl){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.list = [];
					this.pageIndex = 1;
				}
				API.chargingRecordVipData({
					pageIndex: this.pageIndex,
					startDate: this.startTime,
					endDate: this.endTime,
					platform: this.platform,
					pageSize:20,
				}).then((res) => {
					uni.hideLoading();
					
					this.list = [
						...this.list,
						...res.data.data
					];
					
					this.electricQuantity = res.data.electricQuantity;
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 余额
	.balance {
		
		background-color: #f3f4f7;
	
		margin: 12rpx 0px 22rpx 0px;
		padding: 32rpx 60rpx;
		display: flex;
		// justify-content: space-between;
		justify-content: space-around;
		border-radius: 12px;
		.item3{
			    border-right: 1px solid #dad5d5;
			    height: 60rpx;
			    margin-top: 20rpx;
		}
		.item2 {
			text-align: center;
			 display: table-row;
			
			.num {
				line-height: 56rpx;
				color: rgba(51, 51, 51, 100);
				font-size: 48rpx;
				position: relative;
				 font-weight: bold;
	
			}
	
			.name {
				height: 32rpx;
				color: rgba(134, 134, 134, 100);
				font-size: 28rpx;
				margin-top: 2px;
				margin-botton: 4px;
				
			}
		}
	}
	page{
		background-color: #fff;
	}
	.header{
		background-color: #4C586B;
		color: #fff;
		.title{
			display: flex;
			line-height: 26px;
			padding: 9px 11px;
			
			
		}
		.iconfont{
			font-size: 24px
		}
		.content{
			flex: 1;
			text-align: center;
			font-size: 20px
		}
		
		.user-card{
		   padding: 19px 0 39px 20px;
			margin: 21px 20px 0 20px;
			background:url(@/assets/img/companyVIP.png) no-repeat right,linear-gradient(to right,#C6D4ED,#DCE6F0) no-repeat;
			box-shadow: 0px 0px 16px 0px rgba(14, 39, 84, 28);
			border: 2px solid rgba(236, 239, 245, 100);
			border-radius: 16px;
			display: flex;
			.head-img{
				width: 48px;
				height: 48px;
				img{
					width: 100%;
				}
			}
			.user-name{
				margin-left: 12px;
				.name{
					line-height: 24px;
					color: rgba(33, 41, 48, 100);
					font-size: 24px;
					font-weight: 550;
				}
				.sign{
					color: rgba(76, 89, 111, 100);
					font-size: 16px;
					line-height: 16px;
					margin-top: 8px;
				}
			}
		}
	}

.carNone{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img{
			width: 100%;
			height: 100%;
		}
		p{
			margin-top: -60px;
		}
	}
.details{
	height: 100%;
	
	box-shadow: 0px -6px 6px 0px #1A313C47;
	margin-top: -15px;
	border-radius: 16px 16px 0px 0px;
	background-color: #fff;
	padding: 10px 20px;
	
	.month-electric{
		display: flex;
		justify-content: space-between;
		line-height: 16px;
		margin-bottom: 25px;
		.month{
			
			color: #333333;
			.iconfont{
				color:#666666;
			}
		}
		.electric{
			color: rgba(102, 102, 102, 100);
			font-size: 16px;
		}
	}
	
	.item{
		display: flex;
		justify-content: space-between;
		margin-bottom: 22px;
		.infos{
			.station-name{
				color: rgba(51, 51, 51, 100);
				font-size: 16px;
				line-height: 16px;
			}
			.time{
				color: rgba(119, 119, 119, 100);
				line-height: 14px;
				margin-top: 8px;
			}
		}
		.electricity-consumption{
			
			margin: auto 0;
			font-size: 24px;
			color: #111111;
		}
		
	}
	/deep/.u-divider{
		margin-top: 27px !important;
		
	}
}
</style>