mabao/pages/service_box/box_information.vue

<template>
	<view style="background-color: #FFFFFF; width: auto;">
		<view style="height: 90vh;">

			<!-- 列选择器 -->
			<u-select v-model="choiceName" :list="choicelist" @confirm="confirm1"></u-select>
			<u-select v-model="relationship" :list="relationshipList" @confirm="confirm2"></u-select>

			<!-- 步骤条 -->
			<view class="steps">
				<u-steps :list="numList" :current="current"></u-steps>
			</view>

			<!-- 分隔 -->
			<u-gap height="30" bg-color="#f9f9f9"></u-gap>

			<!-- 宝贝信息 -->
			<view>
				<view>
					<!-- 标题 -->
					<view class="information-title">宝贝信息</view>
					<u-line color="#ededed" />
					<!-- 姓名 -->
					<uni-list :border="false">
						<uni-list-item :border="false" :clickable="true" @click="choiceName = true">
							<!-- 自定义左（header）右（footer）的内容 -->
							<view slot="header">
								<text class="xinghao">*</text>
								<text style="font-size: 28rpx;">绑定人</text>
							</view>
							<view slot="footer">
								<text style="font-size: 30rpx;">{{babyNmae}}</text>
							</view>
						</uni-list-item>

						<!-- 身份证 -->
						<uni-list-item :border="false">
							<!-- 自定义左（header）右（footer）的内容 -->
							<view slot="header">
								<text class="xinghao">*</text>
								<text style="font-size: 28rpx;">绑定人身份证</text>
							</view>
							<view slot="footer">
								<u-input v-model="babyID" type="idcard" :border="false" placeholder="请填写宝贝身份证" :clearable="false" input-align="right"
								 height="50" />
							</view>
						</uni-list-item>

						<!-- 社保 -->
						<uni-list-item :border="false">
							<!-- 自定义左（header）右（footer）的内容 -->
							<view slot="header">
								<text class="xinghao">*</text>
								<text style="font-size: 28rpx;">绑定人是否有社保</text>
							</view>
							<view slot="footer">
								<u-radio-group v-model="guarantee" @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>
						</uni-list-item>

					</uni-list>
				</view>
			</view>

			<!-- 分隔 -->
			<u-gap height="30" bg-color="#f9f9f9"></u-gap>

			<!-- 监护人信息 -->
			<view>
				<view>
					<!-- 标题 -->
					<view class="information-title">监护人信息</view>

					<!-- 线条 -->
					<u-line color="#ededed" />

					<uni-list :border="false">
						<!-- 监护人姓名 -->
						<uni-list-item :border="false">
							<!-- 自定义左（header）右（footer）的内容 -->
							<view slot="header">
								<text class="xinghao">*</text>
								<text style="font-size: 28rpx;">监护人姓名</text>
							</view>
							<view slot="footer">
								<u-input v-model="guardianName" type="text" :border="false" placeholder="请填写您真实姓名" :clearable="false"
								 input-align="right" height="50" />
							</view>
						</uni-list-item>

						<!-- 关系 -->
						<uni-list-item :border="false" :showArrow="true" :clickable="true" @click="relationship = true">
							<!-- 自定义左（header）右（footer）的内容 -->
							<view slot="header">
								<text class="xinghao">*</text>
								<text style="font-size: 28rpx;">与宝贝的关系</text>
							</view>
							<view slot="footer">
								<view style="color: #AAAAAA;" v-if="nRelationship == '' ">请选择</view>
								<view style="color: #AAAAAA;" v-else>{{nRelationship}}</view>
							</view>
						</uni-list-item>

					</uni-list>
				</view>
			</view>

		</view>
		<!-- 按钮 -->
		<view class="information-button">
			<u-button shape="circle" type="primary" @click="next">下一步</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//当前处于第几步
				current: 0,
				numList: [{
					name: '基本信息'
				}, {
					name: '确认订单'
				}, {
					name: '支付结果'
				}],
				list: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				//控制列选择器
				choiceName: false,
				relationship: false,
				choicelist: [{
						value: '1',
						label: '测试1'
					},
					{
						value: '2',
						label: '测试2'
					}
				],
				relationshipList: [{
						value: '1',
						label: '父母'
					},
					{
						value: '2',
						label: '祖父母'
					},
					{
						value: '3',
						label: '亲属'
					},
					{
						value: '4',
						label: '其他'

					}
				],
				/**
				 * 需要传的数据
				 * 名字
				 * 身份证
				 * 社保 值为  是  否
				 * 监护人姓名
				 * */
				babyNmae: '测试',
				babyID: '',
				guarantee: '',
				guardianName: '',
				nRelationship: ''

			}
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			},
			confirm1(e) {
				this.babyNmae = e[0].label
			},
			confirm2(e) {
				this.nRelationship = e[0].label
			},
			//下一步
			next(e) {
				console.log(123123)
				uni.navigateTo({
					url: '/pages/order/payment'
				});
			}
		}
	}
</script>

<style>
	.steps {
		padding-top: 50rpx;
		padding-bottom: 30rpx;
		height: auto;

	}

	/* 信息标题 */
	.information-title {
		height: auto;
		width: auto;
		font-size: 36rpx;
		font-weight: 700;
		padding: 30rpx 0 20rpx 30rpx;
	}

	/* 星号 */
	.xinghao {
		width: 20px;
		height: 20px;
		display: inline-block;
		vertical-align: middle;
		text-align: center;
		line-height: 26px;
		font-size: 15px;
		color: #f00;
	}

	.information-button {
		height: 10vh;
		padding: 0 20rpx;
	}
</style>