zx_flk_app/pages/package/package.vue

<template>
	<view class="container-view">
		<view class="top-bg" :style="'padding-top:'+statusBarHeight+'px;'">
			<view class="flex-row" :style="'height:'+navabarHeight+'px;'">
				<view class="flex-row" @tap="bindReturnView"><img class="return-view" src="https://qiniu.bms16.com/FnHXbzly7aXi8zLghrTU5BZdwH5_" /></view>
				<text class="top-text">我的套餐</text>
			</view>
			
			<view class="package-card flex-row flex-between">
				<view class="flex-row flex-column" style="align-items: flex-start;">
					<view class="left-first flex-row">
						<view>小米 Su7</view>
						<img class="left-img" src="https://qiniu.bms16.com/Fpf25Lkkrx05pvLw08mksVQKAQWf" />
					</view>
					<view class="left-second flex-row">
						<view style="margin-right: 32rpx;">适用电池:<text>48v20Ah</text></view>
						<view>押金:<text>$5.0</text></view>
					</view>
					<view class="left-third">
						<view>卡号:<text>2024110202578</text></view>
					</view>
				</view>
				<img class="card-right" src="https://qiniu.bms16.com/FuOJQxzypa-NginyHGdsWlzwnB8z" />
			</view>
		</view>
		<view class="box-view">
			<!-- <view class="package-card flex-row flex-between">
				<view class="flex-row flex-column" style="align-items: flex-start;">
					<view class="left-first flex-row">
						<view>小米 Su7</view>
						<img class="left-img" src="https://qiniu.bms16.com/Fpf25Lkkrx05pvLw08mksVQKAQWf" />
					</view>
					<view class="left-second flex-row">
						<view style="margin-right: 32rpx;">适用电池:<text>48v20Ah</text></view>
						<view>押金:<text>$5.0</text></view>
					</view>
					<view class="left-third">
						<view>卡号:<text>2024110202578</text></view>
					</view>
				</view>
				<img class="card-right" src="https://qiniu.bms16.com/FuOJQxzypa-NginyHGdsWlzwnB8z" />
			</view> -->
			<view class="package-view" v-for="item in packageList">
				<view class="top-view flex-row flex-between">
					<view class="top-title">{{item.total_duration}}<text> 天 </text>{{item.total_times}}<text> 次 </text></view>
					<view v-if="item.status==1" class="card-text card-b">生效中</view>
					<view v-if="item.status==2" class="card-text card-o">待生效</view>
				</view>
				<view class="package-item" style="margin-bottom: 32rpx;">
					<view class="item-title">有效期至</view>
					<view class="item-info">{{item.ctime}}</view>
				</view>
				<view class="package-item" style="margin-bottom: 32rpx;">
					<view class="item-title">有效时长</view>
					<view class="item-info">{{item.efficient_day}}<text>/{{item.total_duration}}天</text></view>
				</view>
				<view class="package-item">
					<view class="item-title">免费换电数</view>
					<view class="item-info">{{item.change_rate}}<text>/{{item.total_times}}次</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var config = require('../../common/config.js');
	var common = require('../../common/common.js');
	var http = require('../../common/http.js');
	var storage = require('../../common/storage.js');
	export default {
		components: {
			
		},
		data() {
			return {
				statusBarHeight: 0,
				navabarHeight: 0,
				packageList: [
					{ctime: '2024-04-04 16:15',total_duration: 30,efficient_day: 24,change_rate: 6,total_times: 10,status:1},
					{ctime: '2024-04-04 16:15',total_duration: 30,efficient_day: 24,change_rate: 6,total_times: 10,status:2},
				]
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			const clientRect = uni.getMenuButtonBoundingClientRect()
			const sysinfo = uni.getSystemInfoSync()
			let GAP = 8
			// #ifdef MP-ALIPAY
			GAP = 0
			// #endif
			const navabarHeight = (clientRect.bottom - sysinfo.statusBarHeight) + (clientRect.top - sysinfo.statusBarHeight) + GAP
			this.navabarHeight = navabarHeight
			this.statusBarHeight = sysinfo.statusBarHeight
			this.mapCtx = uni.createMapContext('myMap');
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			
		},
		methods: {
			bindReturnView() {
				uni.navigateBack({
					delta: 1,
				}) // 返回上一页
			},
		}
	};
</script>

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