zx_flk_app/pages/package/package.vue

<template>
	<view class="container-view">
		<view class="top-bg">
			<navigation whiteColor="true" type="true" :scroll='scrollTop' :name="$t('我的套餐')"></navigation>
			<!-- <view :style="{height: `calc(${statusBarHeight}px + 100px)`}"></view> -->
			<view class="package-card flex-row flex-between">
				<view class="flex-row flex-column" style="align-items: flex-start;">
					<view @click="$srcFn(`/pages/carList/carList`)" class="left-first flex-row">
						<view>{{car_info.car_name}}</view>
						<img class="left-img" src="https://qiniu.bms16.com/Fpf25Lkkrx05pvLw08mksVQKAQWf" />
					</view>
					<view class="left-second flex-row">
						<view style="margin-right: 32rpx;">{{ $t('适用电池') }}:<text>{{car_info.battery_tag_info.main_tag_name ? (car_info.battery_tag_info.main_tag_name) : ''}}{{car_info.battery_tag_info.child_tag_name ? '/' + car_info.battery_tag_info.child_tag_name : ''}}</text></view>
						<!-- <view>{{ $t('押金') }}:<text>$5.0</text></view> -->
					</view>
					<view class="left-third">
						<view>{{ $t('车辆编号') }}:<text>{{car_info.car_sn}}</text></view>
					</view>
				</view>
				<img class="card-right" src="https://qiniu.bms16.com/FuOJQxzypa-NginyHGdsWlzwnB8z" />
			</view>
		</view>
		<view class="box-view">
			<view class="package-view" v-for="item in hireOrderList">
				<view class="top-view flex-row flex-between">
					<view class="top-title" v-if="item.package_type == 1">
						{{item.total_day}}{{ $t('天') }}
					</view>
					<view class="top-title" v-if="item.package_type == 2">
						{{item.num}}{{ $t('次') }}
					</view>
					<view class="top-title" v-if="item.package_type == 3">
						{{item.total_day}}{{ $t('天') }}{{item.num}}{{ $t('次') }}
					</view>
					<view v-if="item.package_status==1" class="card-text card-b">{{ $t('生效中') }}</view>
					<view v-if="item.package_status==0" class="card-text card-o">{{ $t('待生效') }}</view>
					<view v-if="item.package_status==2" class="card-text card-o">{{ $t('已结束') }}</view>
				</view>
				<view class="package-item" style="margin-bottom: 32rpx;">
					<view v-if="item.expire_time != 0" class="item-title">{{ $t('有效期至') }}</view>
					<view class="item-info">{{tools.formatTime(item.expire_time)}}</view>
				</view>
				<view v-if="item.package_type != 2" class="package-item" style="margin-bottom: 32rpx;">
					<view class="item-title">{{ $t('有效时长') }}</view>
					<view class="item-info">
						{{ item.expire_time != 0 ? calculateRemainingDays(item.expire_time) : item.total_day }}<text
							style="color: #9FA7B7;">/{{item.total_day}}{{ $t('天') }}</text>
					</view>
				</view>
				<!-- 套餐类型 1 天卡 2 次卡 3 天次卡 -->
				<view v-if="item.package_type == 1" class="package-item">
					<view class="item-title">{{ $t('免费换电数') }}</view>
					<!-- <view style="color: #060809;" class="item-info">{{item.last_num}}{{ $t('次') }}</view> -->
					<view style="color: #060809;" class="item-info">{{ $t('不限次数') }}</view>
				</view>
				<view v-if="item.package_type == 2" class="package-item">
					<view class="item-title">{{ $t('免费换电数') }}</view>
					<view class="item-info">{{item.last_num}} <text style="color: #9FA7B7;">/{{item.num}}{{ $t('次') }}</text></view>
				</view>
				<view v-if="item.package_type == 3" class="package-item">
					<view class="item-title">{{ $t('免费换电数') }}</view>
					<view style="color: #060809;" class="item-info">{{item.last_num}}/{{item.num}}{{ $t('次') }}</view>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;"></view>
		<view @click='srcFn' class="packageBtn">{{ $t('前往购买套餐') }}</view>
	</view>
</template>
<script module="tools" lang="wxs" src="@/pages/common/wxs/tools.wxs"></script>
<script module="tools" lang="sjs" src="@/pages/common/wxs/tools.sjs"></script>
<script>
	var config = require('../../common/config_gyq.js');
	var common = require('../../common/common.js');
	var http = require('../../common/request.js');
	var storage = require('../../common/storage.js');
	const dayjs = require('dayjs');
	import {
		getRemainingTime
	} from '../../utils/util.js';
	export default {
		components: {

		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		data() {
			return {
				hireOrderList: [],
				page: 1,
				limit: 100,
				car_info: {},
				// statusBarHeight: 0,
				// navabarHeight: 0,
				packageList: []
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.car_info = uni.getStorageSync('car_info') || {};
			this.listFn()
		},
		methods: {
			calculateRemainingDays(expirationDate) {
				
				// // 获取当前时间
				// const now = dayjs();
				// // 解析到期时间
				// const endDate = dayjs(expirationDate * 1000);
				// // 计算剩余天数
				// const remainingDays = endDate.diff(now, 'day');
				// return remainingDays || 1;
				
				return  common.formatTimeDifference(expirationDate * 1000)
			},
			srcFn() {
				uni.navigateTo({
					url: `/pages/batteryPackage/batteryPackage`
				})
			},
			validDurationFn(start, end) {
				return getRemainingTime(start, end)
			},
			async listFn() {
				let {
					data
				} = await http.postApi(config.API_FLK_EXCHANGE_PACKAGE_ORDER_LIST, {
					page: this.page,
					pay_status: 2,
					car_sn: this.car_info.car_sn,
					limit: this.limit,
				})
				if (data.code == 200) {
					this.hireOrderList = data.data.list
				} else {
					common.simpleToast(resp.data.msg)
				}
			},
			bindReturnView() {
				uni.navigateBack({
					delta: 1,
				}) // 返回上一页
			},
		}
	};
</script>

<style>
	@import './package.css';

	.packageBtn {
		width: 686rpx;
		height: 80rpx;
		background: #060809;
		border-radius: 40rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		right: 0;
		margin: auto;
		bottom: 60rpx;
	}
</style>