1

pages/remind/index.vue

@@ -0,0 +1,137 @@
+<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>