JP-ChargeTeam51/pages/user/myPile/myPile.vue

<template>
	<view>
		<ujp-navbar title="充电桩设置"></ujp-navbar>
		<!-- <view class="main">
			<view class="pile-details">
				<view class="detail-content">
					<p class="name">玉桥小区充电站01号直流80kW</p>
					<view class="info">
						2015国标 |<text class="dc-fast"> 直流快充 </text> | 80kW
					
					</view>
					<view class="state">
						<view class="state-items">
							工作状态：充电中<text class="dot charging-dot"></text>
						</view>
						<view class="state-items">
							运行状态：正常<text class="dot"></text>
						</view>
						<view class="state-items">
							网络状态：联网<text class="dot"></text>
						</view>
						<view class="state-items">
							故障状态：正常<text class="dot"></text>
						</view>
						
					</view>
				</view>
				
				<view class="detail-switch">
					
					<u-switch v-model="checked" size="40" active-color="#00E266" inactive-color="#DDDDDE"></u-switch>
					<view class="switch-text">
						共享
					</view>
				</view>
				
			</view>
			
			<view class="pile-details">
				<view class="detail-content">
					<p class="name">玉桥小区充电站02号交流7kW</p>
					<view class="info">
						2015国标 | <text class="ex-slow">交流慢充</text> | 7kW
					</view>
					<view class="state">
						<view class="state-items">
						工作状态：空闲<text class="dot"></text>
						</view>
						<view class="state-items">
							运行状态：正常<text class="dot"></text>
						</view>
						<view class="state-items">
							网络状态：联网<text class="dot"></text>
						</view>
						<view class="state-items">
							故障状态：正常<text class="dot"></text>
						</view>
						
					</view>
				</view>
				
				<view class="detail-switch">
					
					<u-switch v-model="checked" size="40" active-color="#00E266" inactive-color="#DDDDDE"></u-switch>
					<view class="switch-text">
						共享
					</view>
				</view>
				
			</view>
		</view> -->
		<view class="options">

			<u-cell-group>

				<u-cell-item title="开放共享" :arrow="false">

					<view class="">

						<u-radio-group>

							<u-radio @change="radioChange" v-for="(item, index) in list2" :key="index" :name="item.name"
								:disabled="item.disabled" active-color="#00b962">

								{{item.name}}

							</u-radio>

						</u-radio-group>

					</view>



				</u-cell-item>

				<u-cell-item title="开放预约" :arrow="false">
					<view class="">

						<u-radio-group @change="radioGroupChange">

							<u-radio @change="radioChange" v-for="(item, index) in list2" :key="index" :name="item.name"
								:disabled="item.disabled" active-color="#00b962">

								{{item.name}}

							</u-radio>

						</u-radio-group>

					</view>
				</u-cell-item>

				<u-cell-item title="预约自动确认" :arrow="false">
					<view class="">

						<u-radio-group @change="radioGroupChange">

							<u-radio @change="radioChange" v-for="(item, index) in list2" :key="index" :name="item.name"
								:disabled="item.disabled" active-color="#00b962">

								{{item.name}}

							</u-radio>

						</u-radio-group>

					</view>
				</u-cell-item>

				<u-cell-item title="允许预约日期" value="周一/周二/周三/周四/周五/周六/周日"></u-cell-item>

				<u-cell-item title="允许预约时段" value="10:00至12:00"></u-cell-item>

				<u-cell-item :arrow="false" class="time-cell border-bottom" title="预约时长选项">




				</u-cell-item>


				<!-- <p>预约时长选项</p> -->


				<view class="" style="padding-left: 16px;">
					<u-radio-group @change="radioGroupChange" class="radio-padding" shape="square">
					
						<u-radio @change="radioChange" v-for="(item, index) in timeList" :key="index" :name="item.name"
							:disabled="item.disabled" active-color="#00b962">
					
							{{item.name}}
					
						</u-radio>
					</u-radio-group>
					
				</view>









			</u-cell-group>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list2: [{
						name: "是"
					},
					{
						name: "否"
					}
				],
				timeList: [{
						name: "10分钟"
					},
					{
						name: "20分钟"
					},
					{
						name: "30分钟"
					}
				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	::v-deep.u-cell_title {

		width: 30% !important;
	}

	::v-deep .u-cell {
		line-height: 20px;
		padding: 12px 20px 12px 0;
		margin-left: 12px;
	}

	::v-deep.u-radio-group {
		justify-content: start !important;
	}

	::v-deep.u-radio-group:last-child {

		justify-content: space-between !important;
		padding: 0 0 10px 0px;
	}


	::v-deep.u-cell__value {

		text-align: left;

		color: #101010;

		font-size: 16px
	}

	::v-deep.u-radio-group {
		line-height: 30px;
		width: 100%;
		display: flex;
		justify-content: space-around;

	}



	::v-deep.border-bottom:after {
		border-bottom-width: 0px !important;



	}
</style>