zx_flk_app/pages/batteryRecord/batteryRecord.vue

<template>
	<view class="container-view">
		<view class="order-type-view flex-row flex-between">
			<view class="car-model-list flex-row">
				<view class="car-model-text">小米Su5</view><img class="right-corner-icon"
					src="https://qiniu.bms16.com/Fqs6TrEmcdT7QNEdKWs9Hir2cacO" alt="">
			</view>
		</view>
		<view v-for="(item,index) of list" :key="index" class="batteryList">
			<view class="header">
				<view v-if="item.status == 1" class="h5">开始换电</view>
				<view v-if="item.status == 2" class="h5">换电中</view>
				<view v-if="item.status == 3" class="h5">换电成功</view>
				<view v-if="item.status == 4" class="h5">换电失败</view>
				<view v-if="item.status == 0" class="h5">未知</view>
				<view class="time">{{item.ctime}}</view>
			</view>
			<view class="dl">
				<view class="dt">换电单号</view>
				<view class="dd">{{item.order_sn}}</view>
			</view>
			<view class="dl">
				<view class="dt">归还电池</view>
				<view class="dd">{{item.btn_battery}}</view>
			</view>
			<view class="dl">
				<view class="dt">借出电池</view>
				<view class="dd">{{item.bor_battery}}</view>
			</view>
			<view class="dl">
				<view class="dt">换电类型</view>
				<view v-if="item.type == 0" class="dd">机柜换电</view>
				<view v-if="item.type == 1" class="dd">门店换电</view>
			</view>
			<view class="dl">
				<view class="dt">电柜名称</view>
				<view class="dd">{{item.dev_name}}</view>
			</view>
			<image class="top" src="https://qiniu.bms16.com/FpVjOP5pZY1gXcCcS3TwI0GkywEe" mode=""></image>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import duration from 'dayjs/plugin/duration'
	dayjs.extend(duration);
	var config_gyq = require('../../common/config_gyq.js');
	var request = require('../../common/request');
	var common = require('../../common/common.js');
	export default {
		data() {
			return {
				car_sn: "",
				list: []
			}
		},
		onLoad() {
			this.car_sn = uni.getStorageSync('car_info').car_sn
			this.listFn()
		},
		methods: {
			async listFn() {
				let {
					data
				} = await request.postApi(config_gyq.API_FLK_CABINET_EXCHANGE_ORDER, {
					car_sn: this.car_sn
				})
				if (data.code == 200) {
					this.list = data.data.list
					this.list.map(item=>{
						item.btn_battery = item.btn_battery ? item.btn_battery.join(',') : ''
						item.bor_battery = item.bor_battery ? item.bor_battery.join(',') : ''
						item.ctime = common.formatTime(item.ctime)
					})
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.batteryList {
		width: 698rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 32rpx;
		margin: auto;
		margin-top: 20rpx;
		position: relative;

		.top {
			position: absolute;
			right: 30rpx;
			bottom: 30rpx;
			width: 40rpx;
			height: 40rpx;
		}

		.dl {
			display: flex;
			align-items: center;
			margin-top: 30rpx;

			.dt {
				font-family: PingFangSC, PingFang SC;
				font-size: 28rpx;
				color: #9FA7B7;
				padding-right: 30rpx;
			}

			.dd {
				font-family: Futura, Futura;
				font-weight: 500;
				font-size: 30rpx;
				color: #060809;
			}
		}

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-family: PingFangSC, PingFang SC;
			font-weight: bold;
			border-bottom: 2rpx solid #F4F5F6;
			padding-bottom: 30rpx;

			.h5 {
				font-size: 36rpx;
				color: #060809;
			}

			.time {
				font-family: Futura, Futura;
				font-weight: 500;
				font-size: 34rpx;
				color: #5E6F90;
				font-style: normal;
			}
		}
	}

	.order-type-view {
		padding: 32rpx;
		height: 96rpx;
		margin-bottom: 20rpx;
		background: #FFFFFF;
		align-items: center;
	}

	.car-model-list {
		position: relative;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 40rpx;
		color: #060809;
	}

	.right-corner-icon {
		width: 14rpx;
		height: 14rpx;
		position: absolute;
		bottom: 9rpx;
		right: -22rpx;
	}
</style>