jp-car-phone/pages/remind/index.vue

<template>
	<view>
		<car-common  mytitle="提醒" :noback="false"  ref="common"></car-common>
		<view class="remind">
			<view class="remind-title up">
				<u-icon name="md-alarm" custom-prefix="custom-icon" color="#69b54a" size="40"></u-icon>
				<span style="color:#69b54a">上车提醒</span>
			</view>
			<view class="remind-item" v-for="item,i in upList" :key="i">
				<view class="remind-left">
					<h3>19路</h3>
					<p>开往<span>红光路加气站</span>方向，<span>豉湖路转盘</span>上车</p>
					<view class="remind-radio">
						<span>到站提醒：</span>
						<u-radio-group v-model="item.stopInAdvance" @change="radioGroupChange">
							<u-radio 
								@change="radioChange" 
								v-for="(item, index) in list" :key="index" 
								:name="item.id"
							
							>
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="remind-right">
					<u-icon name="shanchu" custom-prefix="custom-icon"  color="#fff"></u-icon>
					<span>删除</span>
				</view>
			</view>
			<view class="remind-title up">
				<u-icon name="md-alarm" custom-prefix="custom-icon" color="#fd8032" size="40"></u-icon>
				<span style="color:#fd8032">下车提醒</span>
			</view>
			<view class="remind-item" v-for="item,i in downList" :key="i">
				<view class="remind-left">
					<h3>19路</h3>
					<p>开往<span>红光路加气站</span>方向，<span>豉湖路转盘</span>上车</p>
					<view class="remind-radio">
						<span>到站提醒：</span>
						<u-radio-group v-model="value" @change="radioGroupChange">
							<u-radio 
								@change="radioChange" 
								v-for="(item, index) in list" :key="index" 
								:name="item.name"
								:disabled="item.disabled"
							>
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="remind-right">
					<u-icon name="shanchu" custom-prefix="custom-icon"  color="#fff"></u-icon>
					<span>删除</span>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	import api from './index.js'
	export default   api
</script>
<style>
	page{
		background-color: #f7f7f7;
	}
</style>
<style scoped lang="scss">
	.remind-title{
		display: flex;
		align-items: center;
		padding: 10px;
		span{
			margin-left:5px;
		}
	}
	.remind-item{
		background-color: #fff;
		display: flex;
		margin-top: 10px;
	}
	.remind-left{
		flex: 1;
		padding: 10px;
		h3{
			margin: 10px 0;
		}
		p{
			span{
				color:#77b0ff;
			}
		}
		.remind-radio{
			display: flex;
			align-items: center;
		}
	}
	.remind-right{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width:60px;
		background-color: #ff6666;
		color:#fff;
		
	}
</style>