WashingCar-frontend-Ver3.0/pages/rechargeNetwork/rechargeNetwork.vue

<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<view class="handle">
		<view class="top">

		</view>
		<view class="header">
			<view class="seach">
				<text class="lefts">洗车</text>
				<view class="rights">
					<img class="i" src="https://www.jiubaotongxue.love/image/seach.png" alt="" />
					<input class="inp" type="text" name="" id="" placeholder="请输入商家名称" @input="inputOutcome" v-model="emitValue" v-if="searchIsshow===1">
					<input class="inp"  type="text" name="" id="" placeholder="请输入商家名称" style="width: 75%;height:100%;" @input="inputOutcome" v-model="emitValue" v-if="searchIsshow===0">
					<text style="font-size: 30rpx; position: relative; display: block;margin-left: 20rpx; color: #1378f7; z-index: 99999; " v-if="searchIsshow===0" @click="closeSeach">取消搜索</text>
				</view>
			</view>
		</view>
		
		<scroll-view scroll-y="true" class="auto-body">
			<view class="header-two" :style="{zIndex:bgImage}">
	
			
			</view>
			<view class="boxs">
			<view class="boxs-flex" v-for="(item,index) in netWorkList" :key="item.id" @click="demos(index)">
				<img class="i" :src="item.image" alt="" />
				<view class="right-flex">
					<view class="title">
						<text>{{item.networkName}}</text>
						<view class="title-right">
							<img class="title-right-i" src="https://www.jiubaotongxue.love/image/map2.png"
								alt="" />
							<text>{{item.gongli}}km</text>
						</view>
					</view>
					<view class="centers">
						<img class="centers-i" src="https://www.jiubaotongxue.love/image/handle4.png" alt="" />
						<text class="flex-centers-txt">{{item.networkArea}}</text>
					</view>
					<view class="centers1">
						<view class="centers-i-l">
							<img class="centers-i-l-i" src="https://www.jiubaotongxue.love/image/demo29.png"
								alt="" />
							<text class="txt">营业时间：00:00-23:59&nbsp;&nbsp;&nbsp;</text>
						</view>
						<!-- <view class="centers-i-l">
							<img class="centers-i-l-i" src="https://www.jiubaotongxue.love/image/handle3.png"
								alt="" />
							<text class="txts">站点维修</text>
						</view> -->
					</view>
					<view class="bottoms">
					<view class="lefta">
					总工位：{{item.idleDevice}}
					</view>
					<view class="righta">
						空闲：{{item.idleDevice-item.workDevice}}
					</view>
					</view>
				</view>
				<!-- <view class="abo">
					暂停营业
				</view> -->
			</view>
			</view>
		</scroll-view>
	</view>
	<view class="promptbgk" v-if="promptbgk===1">
		<view class="prompt">
			<view class="prompt-title">
				温馨提示
			</view>
			<view class="prompt-body">
				门店暂未开通充值优惠，请在平台上办理
			</view>
			<view class="prompt-bottom">
				<view class="left-btn" @click="leftBtn">
					取消
				</view>
				<view class="right-btn" @click="rightBtn">
					确定
				</view>
			</view>
		</view>
	</view>
	<search :netWorkList="netWorkList" :emitValue="emitValue" v-show="searchIsshow===0"></search>
</template>
<script setup>
		import {
			ref
		} from 'vue'
		import {
			onLoad,onShow
		} from '@dcloudio/uni-app'
		import {
			storeToRefs
		} from 'pinia';
		import {
			list
		} from '../../stor/list/list.js'
		const emitValue = ref('')
		const bgImage = ref(9999)
		const searchIsshow = ref(1)
		const l = list()
		const {
			netWorkList
		} = storeToRefs(l)
		l.getNetworks()
		console.log(netWorkList);
		const titles = ref('附近门店')
		const bgcolor = ref('#aaa')
		const color = ref('#000')
		const demo = ref([0,1,2,3,4,5])
		const networkIndex = ref(0)
		onLoad(() => {
			titles.value = '附近门店'
			bgcolor.value = '#fff'
			color.value = '#000'
		})
		onShow(()=>{
			searchIsshow.value =1
			bgImage.value=9999
		})
	const promptbgk = ref(0)
	const demos = (index) => {
		networkIndex.value=index
		promptbgk.value = 1
	}
	const leftBtn = () => {
		promptbgk.value = 0
	}

	const rightBtn = () => {
		promptbgk.value = 0
		uni.navigateTo({
			url: `/pages/recharge/recharge?id=${netWorkList.value[networkIndex.value].id}`
		})
	}
	const inputOutcome = (e)=>{
		console.log(e)
		bgImage.value=99
		searchIsshow.value =0
	}
	const closeSeach = ()=>{
		emitValue.value=''
		searchIsshow.value = 1
		bgImage.value=9999
	}
</script>
<style lang="scss">
	.handle {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #f0f3fb;

		.top {
			width: 100%;
			height: 10%;
			position: relative;
		}

		.header {
			width: 100%;
			height: 192rpx;
			background-image: url("https://www.jiubaotongxue.love/image/handle1.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			position: fixed;
			font-size: 36rpx;
			top: 180rpx;
			z-index: 9999;

			.seach {
				width: 100%;
				height: 150rpx;
				display: flex;
				align-items: center;

				.lefts {
					display: block;
					margin-left: 30rpx;
				}

				.rights {
					width: 590rpx;
					height: 72rpx;
					position: relative;
					display: flex;
					margin-left: 30rpx;
					align-items: center;
					.i {
						width: 34rpx;
						height: 34rpx;
						position: absolute;
						left: 30rpx;
						top: 50%;
						transform: translateY(-50%);

					}

					.inp {
						width: 100%;
						height: 100%;
						background-color: white;
						border-radius: 30rpx;
						box-sizing: border-box;
						padding-left: 80rpx;
						font-size: 28rpx;
					}
				}
			}
		}


		.auto-body {
			width: 100%;
			height: 80%;
			position: relative;
			margin-top: 170rpx;
			.header-two {
				width: 90%;
				height: 172rpx;
				background-image: url("https://www.jiubaotongxue.love/image/handle2.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				position: relative;
				z-index: 10;
				transform: translateX(-50%);
				margin-left: 50%;
			}

			.boxs {
				width: 100%;
				height: 80%;

				.boxs-flex {
					width: 100%;
					height: 244rpx;
					background-color: white;
					border-radius: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 20rpx;
					position: relative;

					.i {
						width: 184rpx;
						height: 164rpx;
						margin-left: 36rpx;
						border-radius: 10rpx;
					}

					.right-flex {
						width: 68%;
						height: 244rpx;

						.title {
							width: 100%;
							height: 42rpx;
							display: flex;
							justify-content: space-between;
							margin-top: 30rpx;
							font-size: 30rpx;
							font-weight: 600;
							line-height: 42rpx;
							box-sizing: border-box;
							padding-right: 30rpx;
							.title-right {
								width: 160rpx;
								height: 42rpx;
								display: flex;
								align-items: center;
								font-size: 24rpx;
								color: #666;

								.title-right-i {
									width: 28rpx;
									height: 28rpx;
									margin-right: 10rpx;
								}
							}
						}

						.centers {
							width: 100%;
							height: 34rpx;
							display: flex;
							align-items: center;
							margin-top: 10rpx;

							.centers-i {
								width: 24rpx;
								height: 24rpx;
							}

							.flex-centers-txt {
								display: block;
								width: 80%;
								height: 34rpx;
								position: relative;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								font-size: 24rpx;
								margin-left: 10rpx;

							}
						}

						.centers1 {
							width: 100%;
							height: 28rpx;
							font-size: 24rpx;
							display: flex;
							align-items: center;
							margin-top: 10rpx;

							.centers-i-l {
								display: flex;
								align-items: center;

								.centers-i-l-i {
									width: 24rpx;
									height: 24rpx;
								}

								.txt {
									display: block;
									margin-left: 10rpx;
								}

								.txts {
									display: block;
									margin-left: 10rpx;
									color: #FF3232;
								}
							}

							
						}
						.bottoms{
							width: 100%;
							height: 36rpx;
							display: flex;
							margin-top: 16rpx;
							.lefta{
								width: 220rpx;
								height: 36rpx;
								background: #348EFF;
								border-radius: 5rpx;
								background-image: url("https://www.jiubaotongxue.love/image/handle5.png");
								background-position:170rpx 5rpx;
								background-size: 24rpx  24rpx;
								background-repeat: no-repeat;
								box-sizing: border-box;
								padding-left: 30rpx;
								font-size: 22rpx;
								color: white;
								line-height: 36rpx;
							}
							.righta{
								width: 220rpx;
								height: 36rpx;
								background:#42BE45;
								margin-left: 20rpx;
								border-radius: 5rpx;
								background-image: url("https://www.jiubaotongxue.love/image/handle5.png");
								background-position:170rpx 5rpx;
								background-size: 24rpx  24rpx;
								background-repeat: no-repeat;
								font-size: 22rpx;
								color: white;
								line-height: 36rpx;
								box-sizing: border-box;
								padding-left: 30rpx;
								font-size: 22rpx;
							}
						}
					}
					.abo{
						width: 108rpx;
						height: 36rpx;
						background: linear-gradient( 135deg, #FE7864 0%, #FF3232 100%);
						position: absolute;
						top: 30rpx;
						left: 40rpx;
						line-height: 36rpx;
						color: white;
						font-size: 22rpx;
						text-align: center;
						border-radius: 10rpx 0rpx 10rpx 0rpx;
					}
				}
			}
		}
	}

	.promptbgk {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.2);

		.prompt {
			position: absolute;
			width: 515rpx;
			// height: 400rpx;
			background-color: #ffffff;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			/* 默认为 column，但这里明确指定 */
			align-items: center;
			/* 水平居中 */
			justify-content: space-around;

			.prompt-title {
				width: 100%;
				text-align: center;
				font-size: 30rpx;
				height: 120rpx;
				line-height: 120rpx;
				box-sizing: border-box;
				padding-top: 10rpx;

			}

			.prompt-body {
				width: 100%;
				text-align: center;
				font-size: 26rpx;
				height: 60rpx;
				line-height: 60rpx;
			}

			.prompt-bottom {
				position: relative;
				width: 100%;
				height: 160rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.left-btn {
					width: 180rpx;
					height: 75rpx;
					background-color: #f2f2f2;
					font-size: 28rpx;
					text-align: center;
					line-height: 75rpx;
					margin-right: 20rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}

				.right-btn {
					width: 180rpx;
					height: 75rpx;
					background-color: #f2f2f2;
					font-size: 28rpx;
					color: #57aff7;
					text-align: center;
					line-height: 75rpx;
					margin-left: 20rpx;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}
			}
		}
	}
</style>