JP-ChargeTeam51/pages/cardBag/cardDetails.vue

<template>
	<view>
		<ujp-navbar title="会员卡详情">
			<view slot="right" style="margin-right: 10px;">

				<view @click="openModalBl=true" class="iconfont qr-code">
					&#xe60d;
				</view>
			</view>
		</ujp-navbar>

		<view class="header" v-if="item.id" >
			<view class="discount-card">
				<view class="name">
					{{item.cardName}}
				</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>
		</view>
		<!-- 卡片信息 -->
		<view class="card-infos" v-if="item.id">
			<view class="item">
				<view class="title">
					卡类型
				</view>
				<view class="value">
					服务费折扣卡
				</view>
			</view>
			<view class="item" v-if="false">
				<view class="title">
					折扣率
				</view>
				<view class="value">
					6折
				</view>
			</view>
			<view class="item">
				<view class="title">
					规格
				</view>
				<view class="value">
					可用{{item.chargeDegreeLimit}}度（有效期{{thisdaysDistance2()}}天）
				</view>
			</view>
			<view class="item">
				<view class="title">
					有效期
				</view>
				<view class="value">
					{{thisendTime(item.startTime)}}-{{thisendTime(item.endTime)}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					剩余度数
				</view>
				<view class="value">
					{{item.chargedDegree>item.chargeDegreeLimit?0:(item.chargeDegreeLimit-item.chargedDegree).toFixed(0)}}度
				</view>
			</view>
			<view class="item" v-if="false">
				<view class="title">
					绑定账号
				</view>
				<view class="value">
					15500001111
				</view>
			</view>
			<view class="item">
				<view class="title">
					卡号
				</view>
				<view class="value">
					{{item.cardNo}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					购买时间
				</view>
				<view class="value">
					{{item.createTime}}
				</view>
			</view>
			<view class="item">
				<view class="title">
					使用规则
				</view>
				<view class="value highlight" @click="gotoUrl('pages/article/details?code=FWF6ZK')">
					点击查看活动详情
				</view>
			</view>
		</view>

		<u-modal v-model="openModalBl" @confirm="confirmPhone" confirm-text="拨打电话" confirm-color="#606266"
			:show-cancel-button="true" ref="uModal" :asyncClose="true" title="客服电话" :content="content"
			:content-style="{fontSize: '24px',color: '#101010'}"></u-modal>
	</view>

	</view>
</template>

<script>
	import * as API from '@/apis/index.js'
	import {
		newDate,
		daysDistance

	} from '@/utils'
	export default {
		data() {
			return {
				id: "",
				item: {},
				content: "400-8899-619",
				openModalBl: false,
				expireUserCardList: [],
				//userCard: {},
			}
		},
		onLoad(op) {
			this.id = op.id
			this.getChargeList();
		},
		onReady() {

			var consumerPhone = "400-8899-619"
			// img="https://yktwechat.xiaoxinda.com/config/xxd2021.jpg"		
			if (consumerPhone) {
				this.content = consumerPhone
			}

		},
		methods: {
			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)
			},
			thisdaysDistance(endTime){
						
							 var date=new Date()
							 var date2=newDate(endTime);
							 return daysDistance(date,date2)
							 
			},
			thisdaysDistance2(){
						if(this.item.endTime){
							var date=newDate(this.item.startTime)
							var date2=newDate(this.item.endTime);
							return daysDistance(date,date2)
						}
							return 0
							 
			},
			getChargeList() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})

				API.personCardList({

				}).then((res) => {
					uni.hideLoading();
					var cardList = res.data.cardList;
					var expireUserCardList = res.data.expireUserCardList;
					var sz = [
						...cardList,
						...expireUserCardList
					]
					var obj = sz.find(item => {
						return item.id == this.id
					})
					this.item = obj
					//console.log(obj)

					//this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			confirmPhone() {
				this.openModalBl = false;
				uni.makePhoneCall({
					phoneNumber: this.content //仅为示例
				});
			},
		}
	}
</script>
<style>
	page {
		background-color: #fff;
		padding-bottom: 100px;
	}
</style>
<style lang="scss" scoped>
	.header {
		padding: 24rpx 32rpx;
		opacity: 0.9;
		background: linear-gradient(30deg, rgba(59, 182, 254, 1) 13.4%, rgba(0, 185, 98, 1) 85.87%);

		.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;
				margin-top: 24rpx;
			}

			/deep/.u-active {
				background: linear-gradient(84.49deg, rgba(59, 182, 254, 1) 4.25%, rgba(0, 185, 98, 1) 95.02%);
			}
		}

	}

	// 卡片信息
	.card-infos {
		padding: 24rpx 32rpx;

		.item {
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;

			.title {
				color: rgba(119, 119, 119, 1);
				font-size: 32rpx;
				width: 140rpx;
			}

			.value {
				color: rgba(16, 16, 16, 1);
				font-size: 32rpx;
				margin-left: 24rpx;
			}

			.highlight {
				color: rgba(0, 185, 98, 1);
			}
		}
	}
</style>