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">
				<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 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">
				<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>
	export default {
		data() {
			return {
				list: [
					{
						name: '提前1站',
						disabled: false
					},
					{
						name: '提前2站',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 'orange',
			}
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}
		}
	}
</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;
	}
	.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>