mabao/pages/service_packs/packs_information.vue

<template>
	<view style="background-color: #f7f4f8; width: auto;">
		<view style="height: 100%;">

			<!-- 列选择器 -->
			<u-select v-model="choiceName" :list="babyList" value-name="id" label-name="name" @confirm="confirm1"></u-select>
			<u-select v-model="relationship" :list="guanxilist" @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.label}}</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 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;">{{nRelationship.label}}</view>
							</view>
						</uni-list-item>

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

		</view>
		<!-- 按钮 -->
		<view class="cu-bar bg-white tabbar border shop" style="position: fixed; bottom: 0; z-index: 99;width: 100%;">
			<view class="submit text-white" @click="next" style="background-color: rgb(11,115,186); font-size: 32rpx;">下一步</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(op) {
			this.packs = JSON.parse(op.data)
		},
		mounted() {
			this.getarchives()
		},
		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'
					}
				],
				guanxilist: [{
						value: '1',
						label: '父亲'
					},
					{
						value: '2',
						label: '母亲'
					},
					{
						value: '3',
						label: '祖父'
					},
					{
						value: '4',
						label: '祖母'
					},
					{
						value: '5',
						label: '外祖父'
					},
					{
						value: '6',
						label: '外祖母'
					},
					{
						value: '7',
						label: '叔侄'
					}
				],
				/**
				 * 需要传的数据
				 * 名字
				 * 身份证
				 * 社保 值为  是  否
				 * 监护人姓名
				 * */
				babyNmae: {
					label: "请选择",
					value: ""
				},
				babyID: '',
				guarantee: '',
				guardianName: '',
				nRelationship: {
					value: "",
					label: "请选择"
				},
				babyList: [],
				isindex: "",
				packs: {}


			}
		},
		methods: {
			getarchives: async function() {
				let res = await this.$request.post("/api/v1/patient/patientList")
				if (res.status == 0) {
					this.babyList = res.data.data
				}
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				if (e == "是") {
					this.isindex = 1
				} else {
					this.isindex = 0
				}
				console.log(this.isindex)
			},
			confirm1(e) {
				console.log(e)
				this.babyNmae = e[0]
			},
			confirm2(e) {
				this.nRelationship = e[0]
			},
			//下一步
			next(e) {
				if (this.babyNmae.value != "" && this.guardian_name != "") {
					let obj = {
						product_type: 6,
						patient_id: this.babyNmae.value,
						total_amount: this.packs.price / 100,
						service_pack_id: this.packs.id,
						is_security: this.isindex,
						guardian_name: this.guardianName,
						relationship_type: this.nRelationship.value,
						payment_type: 2
					}
					console.log(obj)
					uni.navigateTo({
						url: "../order/payment?data=" + JSON.stringify(obj)
					})
				} else {
					uni.showToast({
						title: "请填写完整",
						icon: "none"
					})
				}
				let obj = {
					product_type: 6,
					patient_id: this.babyNmae.value,
					total_amount: this.packs.price / 100,
					service_pack_id: this.packs.id,
					is_security: this.isindex,
					guardian_name: this.guardianName,
					relationship_type: this.nRelationship.value,
					payment_type: 2
				}
				console.log(obj)

			}
		}
	}
</script>

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

	}

	/* 信息标题 */
	.information-title {
		height: auto;
		width: auto;
		font-size: 30rpx;
		font-weight: 600;
		padding: 30rpx 0 20rpx 30rpx;
		background-color: #FFFFFF;
	}

	/* 星号 */
	.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>