pika_shangjia/pages/cell/cell.vue

<template>
	<view>
		<view class="top-box">
			<view class="top-title">
				<view class="ddflex" :style="'height: '+ systems.navigationHeight + 'rpx;padding-top:' + systems.ktxStatusHeight + 'rpx;'+'line-height: '+ systems.navigationHeight + 'rpx;'">
					<view>白云科技门店</view>
					<image class="dow-ssicon" src="../../static/pages/images/dow-ssicon.png"></image>
				</view>
			</view>
			<view class="tab-box ddflex">
				<view class="fflex ddflex">
					<view :class="'tab-item fflex '+(queryType==1?'tab-item-active':'')" @click="queryTypeChange(1)">
						<view>全部</view>
						<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
					</view>
					<view :class="'tab-item fflex '+(queryType==2?'tab-item-active':'')" @click="queryTypeChange(2)">
						<view>未租</view>
						<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
					</view>
					<view :class="'tab-item fflex '+(queryType==3?'tab-item-active':'')" @click="queryTypeChange(3)">
						<view>已租</view>
						<image class="tab-active-icon" src="../../static/images/tab_cur.png"></image>
					</view>
				</view>
				<view class="ddflex">
					<image class="saoma" src="../../static/pages/images/saoma.png"></image>
					<image class="sousuo" src="../../static/pages/images/search.png" @click="jumpUrl('/machineAndCell/cellSearch/cellSearch')"></image>
				</view>
			</view>
		</view>
		
		<view :style="'height: '+ (systems.navigationHeight+systems.ktxStatusHeight+106) + 'rpx;'"></view>
		
		<view class="ddflex state-box">
			<view class="state-item">
				<view class="ddflex">
					<view class="icon"></view>
					<view class="state-label">租赁中</view>
				</view>
				<view class="ddflex state-data">
					<view>6</view>
					<view>16.66%</view>
				</view>
			</view>
			<view class="state-item">
				<view class="ddflex">
					<view class="icon" style="background: #0FCB27;"></view>
					<view class="state-label">空闲</view>
				</view>
				<view class="ddflex fflex state-data">
					<view>30</view>
					<view>83.33%</view>
				</view>
			</view>
		</view>
		
		<!-- 电池 -->
		<view>
			<view class="cell-box" v-for="item,index in 10">
				<view class="ddflex">
					<view style="margin-right: 35rpx;">
						<cell :width="99" :height="197" :soc="index*10" :showsoc="true"></cell>
					</view>
					<view class="cell-info fflex">
						<view class="ddflex">
							<view class="cell-title">60V40AH</view>
							<view class="cell-state">已租</view>
						</view>
						<view class="cell-info ddflex">
							<view>机柜名称：</view>
							<view>CHZD04TTCC200329109</view>
						</view>
						<view class="cell-info  ddflex">
							<view>电池ID：</view>
							<view>613880983244</view>
						</view>
						<view class="cell-info ddflex">
							<view>门店：</view>
							<view>白云科技门店</view>
						</view>
						<view class="cell-info ddflex">
							<view>剩余30天</view>
						</view>
						<view class="cell-info ddflex">
							<view>2023-04-03  11:07:46</view>
						</view>
					</view>
				</view>
				<view class="cell-option ddflex">
					<view class="fflex" @click="jumpUrl('/machineAndCell/map/map')">定位</view>
					<view class="fflex" @click="jumpUrl('/machineAndCell/BMS/BMS')">BMS</view>
					<view class="fflex" @click="jumpUrl('/machineAndCell/cellDetail/cellDetail')">详情</view>
				</view>
			</view>
		</view>


		<foot channel="cell" :isUpdate="isUpdate"></foot>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	import cell from "../../components/cell/index";
	import foot from "../../components/nav-bar/index";

	export default {
		components: {
			cell,
			foot
		},
		props: {},
		data() {
			return {
				systems: {},
				isTop:0,
				
				queryType:1
			}
		},
		onLoad(options) {

		},
		onShow() {
			
		},
		methods: {
			jumpUrl(url){
				if(req.isLogins(true)){
					uni.navigateTo({
						url:url
					})
				}
			},
			queryTypeChange(val) {
				if (this.queryType == val) return false
				this.queryType = val
			},
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			let systems = {
				ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
				navigationHeight: 44 * pxToRpxScale // 导航栏的高度
			};
			systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
			this.systems = systems;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>

<style>
	@import "./cell.css";
</style>