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

<template>
	<navigationStyle :titles="titles" :bgcolor="bgcolor" :color="color"></navigationStyle>
	<view class="preferentialDetail">
		<view class="tops"></view>
		<img class="first" src="https://www.jiubaotongxue.love/image/demo11.png" alt="" />
		<view class="box">
			<view class="titlex">
				兑换说明
			</view>
			<view class="body-q">
				<input class="q-input" type="text" placeholder="请输入兑换码" />
				<img class="q-img" src="https://www.jiubaotongxue.love/image/demo12.png" alt="" @click="add" />

			</view>
		</view>
		<scroll-view scroll-y="true" class="auto-body">
			<view class="boxs">
				<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="请输入商家名称">
					</view>
				</view>
				<view class="boxs-flex" v-for="(item,index) in netWorkList" :key="item.id" @click="demos(index)">
					<view class="checkboxs">
						<view class="actImg " :class="{activeImg:listIndex===index}">
							
						</view>
					</view>
					<view class="boxs-flexs">
						<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/handle4.png"
										alt="" />
									<text>{{item.gongli}}</text>
								</view>
							</view>
							<view class="centers">
								<img class="centers-i" src="https://www.jiubaotongxue.love/image/map2.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.special+item.workDevice}}
								</view>
								<view class="righta">
									空闲:{{item.special}}
								</view>
							</view>
						</view>
						<!-- <view class="abo">
							暂停营业
						</view> -->
					</view>
					
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		list
	} from '../../stor/list/list.js'
	import {
		storeToRefs
	} from 'pinia';
	const l = list()
	l.getNetworks()
	const {
		netWorkList,
		markers,
		BranchInformationList
	} = storeToRefs(l)
	console.log(netWorkList);
	const titles = ref('团购兑换')
	const bgcolor = ref('#fff')
	const color = ref('#000')
	const listIndex = ref(10)
	const demos = (index)=>{
		listIndex.value=index
	}
	const add = ()=>{
		uni.showToast({
			icon:"none",
			title:"暂未开通",
			duration:1000
		})
	}
</script>

<style lang="scss">
	.preferentialDetail {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #f1f4fb;

		.tops {
			width: 100%;
			height: 11%;
		}

		.first {
			display: block;
			width: 100%;
			height: 320rpx;
		}

		.box {
			width: 90%;
			height: 248rpx;
			transform: translateX(-50%);
			margin-left: 50%;
			background-color: white;
			position: relative;
			margin-top: 30rpx;
			border-radius: 30rpx;

			.titlex {
				width: 100%;
				height: 66rpx;
				line-height: 66rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				font-weight: 700;
				padding-left: 30rpx;
				position: absolute;
				top: 20rpx;

			}

			.body-q {
				width: 90%;
				height: 100rpx;
				position: absolute;
				margin-left: 50%;
				transform: translateX(-50%);
				// border: 1rpx solid #4475ee;
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				top: 100rpx;
				background-color: #f7f7f7;

				.q-input {
					width: 58%;
					height: 80rpx;

					margin-left: 50rpx;
					line-height: 80rpx;
					font-size: 28rpx;
				}

				.q-img {
					width: 40rpx;
					height: 40rpx;
					margin-right: 52rpx;
				}

			}


		}

		.auto-body {
			width: 100%;
			height: 45%;
			position: relative;
			margin-top: 20rpx;
			background-color: white;
			border-radius: 20rpx;

			.boxs {
				width: 100%;
				height: 100%;
				position: relative;

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

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

					.rights {
						width: 494rpx;
						height: 72rpx;
						position: relative;
						display: flex;
						margin-left: 30rpx;

						.i {
							width: 34rpx;
							height: 34rpx;
							position: absolute;
							left: 30rpx;
							top: 50%;
							transform: translateY(-50%);

						}

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

				.boxs-flex {
					width: 100%;
					height: 294rpx;
					background-color: white;
					position: relative;
					.checkboxs{
						width: 100%;
						height: 50rpx;
						position: relative;
						border-top: 1rpx solid #ddd;
						// background-color: red;
						.actImg{
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
							border: 1rpx solid #666;
							position: absolute;
							right: 30rpx;
							bottom: 0rpx;
							
							background-repeat: no-repeat;
							background-size: 100% 100%;
						}
						.activeImg{
							border: none;
							background-image: url("https://www.jiubaotongxue.love/image/tuan1.png");
						}
					}
					.boxs-flexs{
						width: 100%;
						height: 244rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						// margin-top: 20rpx;
						position: relative;
						
						.i {
							width: 184rpx;
							height: 164rpx;
							margin-left: 36rpx;
						}
						
						.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;
						
								.title-right {
									width: 120rpx;
									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;
						}
					}

				
				}
			}
		}
	}
</style>