pika_shangjia/pages/machine/machine.vue

<template>
	<view>
		<view class="top-box">
			<view class="top-title">
				<view @click="showPop=true" 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="search-box ddflex">
				<image class="search-saoma" src="../../static/pages/images/saoma.png"></image>
				<view class="search-input ddflex fflex">
					<image class="search-input-icon" src="../../static/pages/images/search.png"></image>
					<input class="fflex"  placeholder="请输入编号查询"/>
					<view class="search-btn">搜索</view>
				</view>
			</view>
		</view>
		
		<view :style="'height: '+ (systems.navigationHeight+systems.ktxStatusHeight+134) + 'rpx;'"></view>
		
		<!-- 机柜 -->
		<view class="machine-item" v-for="item in 10" @click="jumpUrl('/machineAndCell/machineInfo/machineInfo')">
			<view class="ddflex" style="justify-content: space-between;">
				<view class="machine-title fflex tover">创业2街站</view>
				<view class="state">在线</view>
			</view>
			<view class="machine-number">机柜编号：CHZD04TTCC200329109</view>
			<view class="machine-info ddflex">
				<view class="ddflex">
					<view class="margin-r40">温度：29℃</view>
					<view class="margin-r40">仓门数：6</view>
					<view class="margin-r40">电池数：4</view>
				</view>
				<view class="fflex tover" style="color: #2A82E4;text-align: right;">
					白云科技
				</view>
			</view>
			<view class="address-box ddflex">
				<image class="address-icon" src="../../static/pages/images/address-icon.png"></image>
				<view class="fflex tover">朝阳区金台路道家园1号</view>
				<image class="daohang" src="../../static/pages/images/daohang.png"></image>
			</view>
		</view>
		
		<left-pop v-if="showPop" :showPop="showPop" :btnColor="'#11BB8B'" :showBtn='false' title="解除提醒" width="460rpx"
			@closePop="closePop()" @popSubmit="popSubmit()">
			<view class="" style="height: 100%;flex-direction: column;display: flex;">
				<view @click="closePop()" class="pop-title ddflex" :style="'height: '+ systems.navigationHeight + 'rpx;padding-top:' + systems.ktxStatusHeight + 'rpx;'+'line-height: '+ systems.navigationHeight + 'rpx;'">
					<view>白云科技门店</view>
					<image class="change-ssicon" src="../../static/pages/images/change.png"></image>
				</view>
				<view class="pop-content fflex">
					<view :class="'pop-content-item '+(index==0?'pop-content-active':'')" v-for="(item,index) in 10">
						<view class="pop-content-name">白云科技门店</view>
						<image class="pop-content-icon" src=""></image>
					</view>
				</view>
			</view>
		</left-pop>
		
		<foot channel="machine" :isUpdate="isUpdate"></foot>
	</view>
</template>

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

	export default {
		components: {
			foot,
			leftPop
		},
		props: {},
		data() {
			return {
				systems: {},
				isTop:0,
				isUpdate: false,
				
				showPop: false,
				tempData: null,
			}
		},
		onLoad(options) {

		},
		onShow() {
			this.setData({
				isUpdate: !this.isUpdate
			}); 
		},
		methods: {
			jumpUrl(url){
				if(req.isLogins(true)){
					uni.navigateTo({
						url:url
					})
				}
			},
			// 弹窗弹出
			openPop(item) {
				this.tempData = JSON.parse(JSON.stringify(item))
				this.showPop = true
			},
			// 弹窗关闭
			closePop() {
				this.showPop = false
				this.tempData = null
			},
			// 弹窗确认
			popSubmit() {
				this.closePop()
			},
		},
		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 "./machine.css";
</style>