JP-ChargeTeam51/pages/record/coupon.vue

<template>
	<view class="main1">
		<view class="main2">
			<view  class="n1">
				<view class="c1">
					<img src="@/assets/logo/logo4Ud.png">
					<u-icon name="close" size="48" @click="bk()"
					 color="#fff"></u-icon>
				</view>
				<view class="c2">
					{{chargeDetail.stationName}}
				</view>
				<view class="c3">
					免费停车优惠券<span v-if="date3">（已过期）</span>
				</view>
			</view>
			<view  class="n2">
				<view  class="a1" >
					<view class="c4">
						免费停车时长
					</view>
					
					<view class="c5" >
						{{ minuteConversion(userParkingCoupon.freeMinute,true)}}
					</view>
				</view>
				
				<view class="a2" >
					<view class="c4">
						当前时间
					</view>
					
					<view class="c5">
						{{ newTime}}
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	
	import {
		newDate,
		currentTimeStamp,
		parseUnixTime,
		secondsDistance,minuteConversion
		
	} from '@/utils'
	import * as API from '@/apis/index.js'
	export default {
		data() {
			return {
				id:"",
				chargeDetail:{},
				chargeDetails:{},
				useFreeMinute:0,
				newTime:0,
				date3:false,
				userParkingCoupon:null,
			}
		},
		onLoad(op) {
			
			if (op.id) {
				this.id = op.id;
				
			}
			this.getNewTime()
		},
		onShow(){
			this.getchargingDetail();
		},
		methods: {
			minuteConversion(a,b){
				return minuteConversion(a,b)
			},
			bk(){
					uni.navigateBack()
			},
			getNewTime(){
					setTimeout(()=>{
						this.newTime=parseUnixTime(currentTimeStamp())
						this.getNewTime()
					},1000)
			},
			getPercent(chargingRecord,time,str) {
				if (!chargingRecord.startTime) {
					return '00:00:00'
				}
				var Hour = 0;
				var Fen = 0;
				var S = 0;
				
					var now = newDate(chargingRecord.startTime).getTime();
					var date = newDate(chargingRecord.endTime).getTime();
					if(time){
						date=date+time*1000*60
					}
					var seconds = parseInt(( date-now ) / 1000);
					
					var ms = seconds;
							
					Hour = parseInt(Math.floor(ms / (60 * 60)));
					Fen = parseInt(Math.floor(ms % (60 * 60) / 60));
					S = parseInt(Math.floor(ms % (60)));
							
				if(str){
					var obj = "";
					if(Hour){
						obj+=Hour+"小时"
					}
					if(Fen){
						obj+=Fen+"分"
					}
					
								
					return obj;
				}else{
					var obj = (Hour > 9 ? "" : "0") + Hour + ":" + (Fen > 9 ? "" : "0") + Fen + ":" + (S > 9 ? "" : "0") + S
								
								
					return obj;
				}
				
			},
			getchargingDetail() {
				if(this.id==''){
					return ;
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.chargingDetail(this.id).then((res) => {
					uni.hideLoading();
					
					this.chargeDetail = res.data.chargingRecord;
					if(this.chargeDetail.chargeDetails){
							this.chargeDetails=JSON.parse(this.chargeDetail.chargeDetails)
					}
					this.useFreeMinute=res.data.useFreeMinute;
					this.useFreeCoupon=res.data.useFreeCoupon;
					
					this.userParkingCoupon=res.data.userParkingCoupon
					
					
					var date1 = newDate(this.chargeDetail.endTime).getTime();
					var date2 = new Date().getTime();
					var date3 =date2-24*60*60*1000
					if(date3>date1){
						this.date3=true
						var s='background-color:#9E9E9E';
						document.getElementsByTagName("uni-page")[0].style=s
						document.getElementsByTagName("uni-page-body")[0].style=s
						
					}
			
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style  lang="scss" scoped>
	page{
		  transform: rotate(90deg);
		  /* 确保旋转后的内容不超出容器 */
		  width: 100vw; /* 设置为视口高度 */
		  height: 100vw; /* 设置为视口宽度 */
		 // overflow: hidden;
		  background-color: #FF3D00;
		  color:#fff;
	}
	/* 定位内容 */
	  // position: absolute;
	  // width: 100vw; /* 设置为视口高度 */
	  // height: 100vw; /* 设置为视口宽度 */
	  //        top: 200rpx;
	  //        left: 200rpx;
	//  transform: translate(-50%, -50%) rotate(-90deg);
	.main2 {
		padding: 80rpx;
		white-space: pre;
		height: 100vw; /* 设置为视口宽度 */
		width: 100vh;
		
		    display: flex;
		    flex-direction: column;
		    justify-content: space-between;
	}
	.c1{
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
			
		img{
			width: 270rpx;
			//height: 56rpx;
		}
	}
	.c2{
		font-size: 96rpx;
		font-weight: bold;
	}
	.c3{
		font-size: 72rpx;
		font-weight: bold;
	}
	.a1{
		.c4{
			font-size: 48rpx;
		}
		.c5{
			font-size: 96rpx;
		}
	}
	.a2{
		.c4{
			font-size: 40rpx;
			text-align: end;
		}
		.c5{
			font-size: 56rpx;

		}
	}
	.n2{
		    display: flex;
		    justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
	}
</style>