jn_app/pages/common/stationListPage.vue

<template>
	<view class="stationList">
		<view class="stationList_top" @click="back">
			<text>退出</text>
		</view>
		<view class="stationList_logo flex justify-end">
			<view class="stationList_logo_sty flex">
				<!-- <image src="../../static/jnImage/loginPage/logo.png" mode=""></image> -->
				<text>请选择风场/电站</text>
			</view>
		</view>
		<view class="stationList_List">
			<uni-list>
				<uni-list-item v-for="(item, index) in windData" :key="index" :title="item.wpname"
					thumb="../../static/jnImage/commonPage/wind.png" thumb-size="sm" clickable
					@click="onClick(item.wpname, item.wpid)" />
			</uni-list>
			<uni-list>
				<uni-list-item v-for="(item, index) in powerData" :key="index" :title="item.wpname"
					thumb="../../static/jnImage/commonPage/power.png" thumb-size="sm" clickable
					@click="onClick(item.wpname, item.wpid)" />
			</uni-list>
		</view>
		<view class="stationListback flex justify-center">
			<image src="../../static/jnImage/commonPage/closed.png" mode="" @click="back"></image>
		</view>
	</view>
</template>

<script>
	import {
		windPowerDataApi
	} from '../../api/common.js'
	export default {
		data() {
			return {
				windData: [],
				powerData: []
			}
		},
		created() {
			this.requestData("0", "-1");
			this.requestData("0", "-2");
		},
		methods: {
			requestData(type1, type2) {
				windPowerDataApi({
						company: type1,
						type: type2
					})
					.then((res) => {
						if (Object.values(res.data.data).length) {
							if (res.data.data.powerVos.length > 0) {
								res.data.data.powerVos.forEach(item => {
									let obj = {
										wpname: item.wpname,
										wpid: item.wpid
									}
									if (type2 === "-1") {
										this.windData.push(obj)
									} else {
										this.powerData.push(obj)
									}
								})
							}

						} else {
							this.windData = [];
							this.powerData = [];
						}
					});
			},
			back() {
				this.$tab.navigateBack()
			},
			onClick(name, wpid) {
				uni.setStorageSync('stationName', name)
				uni.setStorageSync('stationWpid', wpid)
				this.$tab.redirectTo('/pages/home/stationIndex')
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #202246;
	}

	.stationList {
		width: 100vw;
		background: url('../../static/jnImage/loginPage/windBack.png'), url('../../static/jnImage/loginPage/backWav.png');
		background-repeat: no-repeat, repeat;
		background-size: 100% 260px, 100% 5px;

		.stationList_top {
			width: 100vw;
			height: 60px;
			line-height: 60px;

			text {
				margin-left: 30px;
				font-size: 36upx;
				color: #4287FF;
			}
		}

		.stationList_logo {
			margin-bottom: 40px;

			.stationList_logo_sty {
				height: 80px;
				width: 60%;
				background: url('../../static/jnImage/commonPage/stationBack.png');
				background-size: cover;
				position: relative;

				image {
					width: 60px;
					height: 45px;
					position: absolute;
					top: 20px;
					left: 20px;
				}

				text {
					color: #4287FF;
					font-size: 34upx;
					position: absolute;
					top: 50px;
					left: 80px;
					font-style: italic;
				}
			}
		}

		.stationList_List {
			.uni-list {

				.uni-list--border-top,
				.uni-list--border-bottom {
					background-color: rgba(255, 255, 255, 0.3) !important;
				}

				.uni-list--border:after {
					background-color: rgba(255, 255, 255, 0.3) !important;
				}

				.uni-list-item {
					background-color: #021D64 !important;

					.uni-list-item__container {
						.uni-list-item__content {
							.uni-list-item__content-title {
								color: #fff;
							}
						}
					}
				}
			}
		}

		.stationListback {
			margin-top: 30px;

			image {
				width: 30px;
				height: 30px;
			}
		}
	}
</style>