esswisdom_app/pages/devices/index.vue

<template>
	<view class="container">
		<view class="account_number">
		 <view class="password">
		 <input class="weui-input" confirm-type="search" :value="account" :placeholder="$t('devices.enterId')"  @input="bindKeyInput1"/>
		 <image class="login_imgae1" src="/static/search.png" mode="" @click="getmuitiStationinfo"/>
		 </view>
		</view>
		<view class="toptabbar">
		<top-tabbar
		  :tabIndex="tabIndex"
		  :tabBars="[
	  { name: $t('devices.allStations'), id: 0 },
	  { name: $t('devices.onlineStations'), id: 1 },
	  { name: $t('devices.offlineStations'), id: 2 }
	]"
		  @toggleToptab="toggleTab"
		  selectedBottomColor="#30c58d"
		  selectedTextColor="#343434"
		  textColor="#7d7e80"
		  bgColor="#ffffff"
		></top-tabbar>
	</view>
	   <view class="data_list">
	        <!-- 空数据提示 -->
	        <view v-if="muitiStationinfo.length === 0" class="empty-tip">{{$t('devices.noData')}}</view>
	        <!-- 列表渲染 -->   
	        <view v-else v-for="(item, index) in muitiStationinfo" :key="item.id || index">
				<view class="card_box" v-show="tabIndex==0" @click="powerstation(item)">
				<image class="card_image" :src="item.absoluteStationPicUrl" mode="aspectFill" lazy-load/>
					<view class="card_title">
						<view class="card_title1">
							{{item.stationName}}
						</view>
						<view class="card_title2">
							{{item.detailedaddress}}
						</view>
						<view class="card_title3">
							{{item.installedCap}}kW / {{item.installedPower}}kWh
						</view>
					</view>
				</view>
				<view class="card_box" v-show="tabIndex==1&&item.onlineStatus==1">
	            <image class="card_image" :src="item.absoluteStationPicUrl" mode="aspectFill" lazy-load/>
					<view class="card_title">
						<view class="card_title1">
							{{item.stationName}}
						</view>
						<view class="card_title2">
							{{item.detailedaddress}}
						</view>
						<view class="card_title3">
							{{item.installedCap}}kW / {{item.installedPower}}kWh
						</view>
					</view>
				</view>
				<view class="card_box" v-show="tabIndex==2&&item.onlineStatus==0">
				<image class="card_image" :src="item.absoluteStationPicUrl" mode="aspectFill" lazy-load/>
					<view class="card_title">
						<view class="card_title1">
							{{item.stationName}}
						</view>
						<view class="card_title2">
							{{item.detailedaddress}}
						</view>
						<view class="card_title3">
							{{item.installedCap}}kW / {{item.installedPower}}kWh
						</view>
					</view>
				</view>
	        </view>
	    </view>
	</view>
</template>
	  
<script setup>
import { ref,onMounted } from 'vue';
import topTabbar from '@/components/top-tabbar.vue';
import request from '@/utils/request';
import { useI18n } from 'vue-i18n'
 import { onLoad } from '@dcloudio/uni-app';
const { t } = useI18n()
	const account = ref('')
	const bindKeyInput1 = (e) => {
			 console.log(e.detail.value);
			 account.value = e.detail.value
			 getmuitiStationinfo(); // 电站接口
	};
	
	// 选中标签的索引
	const tabIndex = ref(0);
	
	// 导航栏标签列表
	const tabBars = ref([
	  { name: '全部电站', id: 0 },
	  { name: '在线电站', id: 1 },
	  { name: '离线电站', id: 2 }
	]);
	
	// 切换标签
	const toggleTab = (index) => {
		tabIndex.value = index
	};
	const powerstation = (item) => {
	  uni.navigateTo({
	  	url:`/pages/powerstation/index?stationName=${item.stationName}&id=${item.powerId}&date=${item.operationDate}`
	  })
	};
	onLoad((options) => {
	  console.log('页面加载，参数为:', options);
	  tabIndex.value = options.type*1
	 
	});
	 onMounted(() => {
		 uni.setNavigationBarTitle({
		   title:t('devices.listTitle'),
		 });
		 getmuitiStationinfo(); // 电站接口
		 });
		 const muitiStationinfo = ref([])
		 const getmuitiStationinfo = async ()=>{
		 	try {
		 	   const response = await request({
		 	     url: '/muitiStation/page/info',
		 	     method: 'POST',
		 		 header:{'Content-Type': 'application/x-www-form-urlencoded'},
		 		 data:{
		 			 state: '',
		 			 city: '',
		 			 country:'' ,
		 			 county: '',
		 			 keyword:account.value,
		 			 keywordCategory: 0,
		 			 countryCode: '',
		 			 provinceCode: '',
		 			 cityCode: '',
		 			 countyCode: '',
		 			 pn: 1,
		 			 ps: 99,
		 			 onlineStatus:''
		 		 }
		 	   });
			   console.log(response.data.data.records);
		 	   muitiStationinfo.value = response.data.data.records
		 	
		 	 } catch (error) {
		 	   console.error('登录失败:', error);
		 	 }
		 };
</script>

<style scoped>
	  .uni-page{
	  		width: 100%;
	  		height: 100%;
	  	}
	  .container {
		  height: 100%;
	    background: linear-gradient(to bottom, #007545 -40%, #f0f5f5 40%, #f0f5f5 100%);
	    box-sizing: border-box;
		display: flex;
       flex-direction: column;
	  }     
	  .account_number{
	    width: 100%;
		display: flex;
		justify-content: center;
	  }
	  .account{
	  font-size: 32rpx;
	  }
	  .login_imgae1{
	   margin-right: 20rpx;
	   width: 40rpx;
	  height: 40rpx;
	  }
	  .weui-input{
	    flex: 1;
	    height: 80rpx;
	  }
	  .password{
		  width: 90%;
	     display: flex;
	     align-items: center;
	   font-size: 28rpx;
	  padding:0rpx 20rpx;
	  border:1rpx #cccccc solid;
	  box-sizing: border-box;
	  border-radius: 100rpx;
	  background-color: #f0f5f5;
	   }
	   .toptabbar {
	     width: 100%;
	     height: 80rpx;
	     margin-top: 20px;
	     padding: 10rpx 20rpx;
	     box-sizing: border-box;
	   }
	
	   .data_list {
		   width: 100%;
		   flex: 1;
		   overflow-y: auto;
	       display: flex;
		   flex-direction: column;
	       padding: 10px;
		   box-sizing: border-box;
	   }
	   .empty-tip {
	       text-align: center;
	       color: #999;
	       font-size: 14px;
	       padding: 20px;
	   }
	   .card{
		   width: 90%;
	   }
	   .card_image{
		   width: 160rpx;
		   height: 160rpx;
		   border-radius: 10rpx;
	   }
	   .card_box{
		   width: 100%;
		   height: 200rpx;
		   box-sizing: border-box;
		   border-radius: 10rpx;
		   background-color: #ffffff;
		   display: flex;
		   align-items: center;
		   padding: 30rpx;
		   margin-top: 20rpx;
	   }
	   .card_title{
          flex: 1;
		  margin-left: 20rpx;
		  display: flex; 
		  flex-direction: column;
	   }
	   .card_title1{
		   font-size: 36rpx;
	   }
	   .card_title2{
		   font-size: 28rpx;
		   color: #ccc;
		   margin-top: 10rpx;
	   }
	   .card_title3{
	   		   font-size: 28rpx;
			   color: #ccc;
			   margin-top: 8rpx;
	   }
	   .uni-top-tabbar{
		   height: 100rpx;
	   }
</style>