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" :class="{
			opacityClass:show
		}">

			<view class="discount-card" v-if="current==0" v-for="(item,i) in  businessVipList"
				@click="gotoUrl('pages/user/company-vip?id='+item.vipUser.platform)" :key="i">
				<view class="name">

					<img src="../../assets/img/corporateMember.png" alt="">

				</view>

				<view class="progress">
					<view class="time">
						{{item.vipUser.platformN}}
					</view>
					<view class="electric-quantity" v-if="item.vipUser.entAccountEnabled&&item.enterpriseAccount" >
						企业账户余额：{{item.enterpriseAccount.totalAmount?item.enterpriseAccount.totalAmount.toFixed(2):'0.00'}}元

					</view>

				</view>

			</view>


			<template v-for="(item,i) in showList">


				<view class="discount-card"  :class="{
					'card-type-4':item.cardName
				}"
				 @click="gotocardDetails(item)" :key="i+'b'">
					<view class="name" v-if="item.classify==1">

						<img src="@/assets/img/monthCard.png" alt="">

					</view>
					<view class="name" v-else-if="item.cardName">
					
						{{item.cardName}}
					
					</view>
					<view class="name" v-else-if="item.classify==2">

						<img v-if="item.serviceFeeDiscountRate==60" src="@/assets/img/0.6off.png" alt="">
						<img v-else-if="item.serviceFeeDiscountRate==50" src="@/assets/img/halfoff.png" alt="">
						<img v-else src="@/assets/img/monthCard.png" alt="">
					</view>
					<view class="progress">
						<template v-if="current==2">
							<view class="time">
								<span v-if="item.classify==1">服务费全免</span>
								<span
									v-if="item.classify==2">可用{{item.chargeDegreeLimit}}度</span>（有效期{{setValidity(item.periodOfValidity)}}）
							</view>
							<view class="electric-quantity">
								发卡日期：{{item.createTime.substring(0,10)}}
							</view>
						</template>
						<template v-else>

							<view class="time">
								{{thisendTime(item.endTime)}}到期 剩余{{thisdaysDistance(item.endTime)}}天
							</view>
							<view class="electric-quantity" v-if="item.classify==2">
								已用{{item.chargedDegree?item.chargedDegree.toFixed(0):0.00}}度 /
								共{{item.chargeDegreeLimit}}度
							</view>
						</template>

					</view>
					<ujp-line-progress v-if="current!=2" active-color="#2979ff" 
						:percent="thispercent(item)"></ujp-line-progress>
						
						
					<img class="corner-mark" v-if="current==2" src="@/assets/img/nonactivated.png" alt="">

				</view>

			</template>


			<view class="carNone" v-if="current==0&&businessVipList.length==0&&showList.length==0">
				<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 class="carNone" v-if="current==2&&notActiveCardList.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 {
				show:false,
				list: [{
					name: '生效中'
				}, {
					name: '已过期'
				}, {
					name: '未激活',
					count: 0
				}],
				expireUserCardList: [],
				cardList: [],
				pageIndex: 1,
				recordsTotal: 0,
				current: 0,
				businessVipList: [],
				userCard: null,
				notActiveCardList: [],
			}
		},
		computed: {
			showList() {
				if (this.current == 0) {

					return this.cardList
				}
				if (this.current == 1) {

					return this.expireUserCardList
				}
				if (this.current == 2) {
					return this.notActiveCardList
				}
				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() {


			

		},onShow() {
			this.getChargeList();
		},

		methods: {
			gotocardDetails(item) {

				this.carhelp.set("cardDetails-info", item)
				uni.navigateTo({
					url: '/pages/cardBag/cardDetail?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.cardList = res.data.cardList;
					this.notActiveCardList = res.data.notActiveCardList;
					this.list[2].count = this.notActiveCardList.length;
					this.expireUserCardList = res.data.expireUserCardList;
					//this.recordsTotal = res.data.recordsTotal;
					this.businessVipList = res.data.memberCardList;



				}).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) {
				if(userCard.classify==1){
					var k1=daysDistance(userCard.startTime, userCard.endTime)
					var k2=this.thisdaysDistance(userCard.endTime)
					var p=(k1-k2)/k2* 100
					if (p > 100) {
						p = 100
					}
					return p.toFixed(0)
				}else if(userCard.classify==2){
					var p = 0
					
					if (userCard && userCard.chargeDegreeLimit) {
						p = userCard.chargedDegree / userCard.chargeDegreeLimit * 100
					}
					if (p > 100) {
						p = 100
					}
					return p.toFixed(0)
				}else{
					return 0
				}
				
			},

			change(index) {
				this.current = index;

			}
		}
	}
</script>

<style scoped lang="scss">
	.opacityClass {
		opacity: 0.2;
	}

	.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 {
			position: relative;
			
			
			.corner-mark {
				width: 112rpx;
				height: 112rpx;
				position: absolute;
				top: 0;
				right: 0;
			}

			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;

				img {
					width: 262rpx;
					height: 56rpx;
				}
			}

			.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%);
			}
			
		}
		
		.discount-card.card-type-4{
			background-color: rgba(218, 36, 30, 1);
			.name{
				color: rgba(255, 214, 149, 1);
				font-size: 36rpx;
				  font-family: "SimSun", Arial, sans-serif;  
				font-weight: 600;
				  text-shadow: 2px 1px 0px #800400 ;  

			}
			.u-progress{
				    background-color: rgb(207, 76, 66) !important;
					color: #fff;
			}
			
		}
	}
</style>