JP-ChargeTeam51/pages/cardBag/cardBag.vue

<template>
	<view>
		<ujp-navbar title="我的卡包"></ujp-navbar>
		<view class="tabs">
			<u-tabs bar-width="80" active-color="#333333" inactive-color="#999999" :list="list" :is-scroll="false"
				:current="current" @change="change"></u-tabs>
		</view>
		<view class="main">
			
			
			<view class="mcorporate-member" v-if="current==0"  v-for="(item,i) in  businessVipList"
			  @click="gotoUrl('pages/user/company-vip?id='+item.platform)"  :key="i"  >
			 
			  <view class="icon">
			  	<img src="../../assets/img/corporateMember.png" alt="">
			  </view>
			  <view class="infos">
			  	<view class="name">
			  		企业会员
			  	</view>
				<view class="company">
					{{item.platformN}}
				</view>
				<view class="balance" v-if="item.entAccountEnabled&&item.enterpriseAccount!=null">
					企业账户余额：{{item.enterpriseAccount.totalAmount?item.enterpriseAccount.totalAmount.toFixed(2):'0.00'}}元
					
				</view>
			  </view>
			</view>
			<template v-for="(item,i) in showList">
				<view class="monthly-payment"  @click="gotoUrl('pages/monthlyCardActivity/monthlyCardBuy')"
				
				:key="i" v-if="item.classify==1" >
				  <view class="icon">
				  	<img src="../../assets/img/monthlyPayment.png" alt="">
				  </view>
				  <view class="infos">
				  	<view class="name">
				  		服务费包月会员
				  	</view>
					<view class="date">
						{{item.endTime.substring(0,10)}}到期
					</view>
				  </view>
				</view>
				
				<view class="discount-card"    @click="gotocardDetails(item)"
				:key="i" v-if="item.classify==2">
					<view class="name">
						自营站充电服务费6折卡
					</view>
					<view class="progress">
						<view class="time">
							{{thisendTime(item.endTime)}}到期 剩余{{thisdaysDistance(item.endTime)}}天
						</view>
						<view class="electric-quantity">
							已用{{item.chargedDegree?item.chargedDegree.toFixed(0):0.00}}度 / 共{{item.chargeDegreeLimit}}度
						</view>
					</view>
					<ujp-line-progress active-color="#2979ff" :percent="thispercent(item)"></ujp-line-progress>
				</view>
			</template>
			
			
			<view class="carNone" v-if="current==0&&businessVipList.length==0&&!userCardBool">
				<img src="static/img/暂无数据-缺省页.png" alt="">
				<p class="oldTextjp2" oldstyle="font-size: 18px;">暂无数据</p>
			</view>
			<view class="carNone" v-if="current==1&&expireUserCardList.length==0">
				<img src="static/img/暂无数据-缺省页.png" alt="">
				<p class="oldTextjp2" oldstyle="font-size: 18px;">暂无数据</p>
			</view>
		</view>
	</view>
</template>

<script>
	import * as API from '@/apis/index.js'
	import {
		newDate,daysDistance
		
	} from '@/utils'
	export default {
		data() {
			return {
				list: [{
					name: '生效中'
				}, {
					name: '已过期'
				}],
				expireUserCardList:[],
				pageIndex: 1,
				recordsTotal: 0,
				current: 0,
				businessVipList:[],
				userCard:null,
			}
		},
		computed:{
			showList(){
				if(this.current==0&&this.userCardBool){
					
					return  [this.userCard]
				}
				if(this.current==1){
					
					return  this.expireUserCardList
				}
				return []
			},
			userCardBool(){
				if(this.userCard){
					var date=new Date().getTime()
					//var reg=new RegExp('-','gi')
					var str=this.userCard.endTime;
					//console.log(str.replace(reg,'/'))
					var date2=newDate(str).getTime();
					
					if(date<date2){
						
						return true;
					}
				}
				return false
			}
		},
		onReady() {
			this.userCard=this.carhelp.getPersonInfoPlus().userCard
			 

			this.businessVipList=this.carhelp.getPersonInfoPlus().businessVipList
			if(this.businessVipList.length){
			
					var b=false;
					for(var i in this.businessVipList){
						var item=this.businessVipList[i];
						if(item.entAccountEnabled){
							b=true
						}
					}
					if(b){
						this.personalCenter()
					}
			}
			
			this.getChargeList();
			
		},
		 
		methods: {
			gotocardDetails(item){
				this.carhelp.set("cardDetails-info",item)
				uni.navigateTo({
					url:'/pages/cardBag/cardDetails?id='+item.id
				})
			},
			 thisdaysDistance(endTime){
			
				 var date=new Date()
				 var date2=newDate(endTime);
				 return daysDistance(date,date2)
				 
			 },
			getChargeList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.personCardList({
				
				}).then((res) => {
					uni.hideLoading();
					
					this.expireUserCardList = res.data.expireUserCardList;
					//this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			thisendTime(endTime){
				if(endTime){
					var reg=new RegExp('-','gi')
					var str=endTime.substring(0,10).replace(reg,'.')
					return str
				}
				return ''
			},
			thispercent(userCard){
				var p=0
				
				if(userCard&&userCard.chargeDegreeLimit){
					p=userCard.chargedDegree/userCard.chargeDegreeLimit*100
				}
				if(p>100){
					p=100
				}
				return p.toFixed(0)
			},
			personalCenter(){
				API.personalCenter().then((res2) => {
					var entRegList=res2.data.entRegList;
					for(var i in this.businessVipList){
						var item1=this.businessVipList[i]
						for(var j in entRegList){
							var item2=entRegList[j].vipUser;
							
							if(item1.id==item2.id){
								item1.enterpriseAccount=entRegList[j].enterpriseAccount
							}
						}
					}
					this.$forceUpdate()
					
				}).catch(error => {
						uni.showToast({
							title: error
						})
					})
			},
			change(index) {
				this.current = index;
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.carNone{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		img{
			width: 100%;
			height: 100%;
		}
		p{
			margin-top: -60px;
		}
	}
	/deep/.u-tab-bar {
		background-color: #00B962 !important;
	}

	.main {
		padding: 0 32rpx;
		.monthly-payment,.mcorporate-member{
			height: 160rpx;
			border-radius: 8px;
			background-color: rgba(55, 59, 80, 1);
			padding-left: 24rpx;
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			.icon{
				width: 80rpx;
				height: 80rpx;
				img{
					width: 100%;
				}
			}
			.infos{
				margin-left: 16rpx;
				.name{
					color: rgba(225, 192, 130, 1);
					font-size: 32rpx;
				}
				.date{
					color: rgba(211, 185, 134, 1);
					font-size: 24rpx;
				}
				.company{
					color: rgba(204, 204, 204, 1);
					font-size: 24rpx;
				}
				.balance{
					color: rgba(219, 219, 219, 1);
					font-size: 24rpx;

				}
			}
		}
		.discount-card{
			
			border-radius: 8px;
			background-color: rgba(55, 59, 80, 1);
			padding: 24rpx;
			margin-top: 24rpx;
			
			.name{
				color: rgba(255, 255, 255, 1);
				font-size: 32rpx;
			}
			.progress{
				display: flex;
				justify-content: space-between;
				color: rgba(219, 219, 219, 1);
				font-size: 24rpx;
				margin-bottom: 16rpx;
			}
			/deep/.u-active{
				background: linear-gradient(84.49deg, rgba(59,182,254,1) 4.25%,rgba(0,185,98,1) 95.02%);
			}
		}
	}
</style>