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>
			<!-- model控制开关 mode控制显示方向-->
			<u-popup v-model="showpeople" mode="bottom" border-radius="14" length="50%">
				<view class="popup_title">
					<view class="popup_title_text">选择就诊人</view>
				</view>
				<scroll-view style="height: 70%;" scroll-y="true">
					<view class="popup_list" v-for="(item, index) in babyList" :key="index" :data-index="index" @click="xuanzehuanzhe(item)">
						<view class="popup_list_title">
							<view class="title">{{item.name}}</view>
							<view class="body">
								{{item.sex==1?'男':'女'}}
							</view>
						</view>
						<view class="popup_list_button flex align-center">
							<u-radio-group v-model="value">
								<u-radio @change="peopleRadioChange" :key="index" :name="item.name">
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</scroll-view>
				<u-gap height="10" bg-color="#f9f9f9"></u-gap>
				<view class="popup_button">
					<image style="width: 32rpx;height: 32rpx;margin-right: 15rpx;" src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/addjiu.png"
					 mode=""></image>
					<view class="" @click="addPeople">
						添加就诊人档案
					</view>
				</view>
			</u-popup>
			<!-- 步骤条 -->
			<!-- <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="showpeople = 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;">{{value}}</text>
							</view>
						</uni-list-item>

						<!-- 身份证 -->
						<!-- <uni-list-item :border="false">
							<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)
		},
		onShow() {
			this.getarchives()
		},
		mounted() {

		},
		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: '叔侄'
					},
					{
						value: '8',
						label: '其他'
					}
				],
				/**
				 * 需要传的数据
				 * 名字
				 * 身份证
				 * 社保 值为  是  否
				 * 监护人姓名
				 * */
				babyNmae: {
					label: "请选择",
					value: ""
				},
				babyID: '',
				guarantee: '',
				guardianName: '',
				nRelationship: {
					value: "",
					label: "请选择"
				},
				babyList: [],
				isindex: -1,
				packs: {},
				showpeople: false,
				value: "请选择",
				huanzheID: ""

			}
		},
		methods: {
			getarchives: async function() {
				let res = await this.$request.post("/api/v1/patient/patientList")
				if (res.status == 0) {
					this.babyList = res.data.data
				}
			},
			peopleRadioChange(e) {
				console.log(e);
			},
			xuanzehuanzhe(item) {
				if (item.card_back_img_url == '' && item.card_img_url == '') {
					uni.showModal({
						title: "提示",
						content: "该档案人未上传证件照无法购买本服务包",
						confirmText: "前往设置",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "../archives/upcard?id=" + item.id
								})
								this.showpeople = false
							} else if (res.cancel) {
								this.showpeople = false
							}
						}
					})
					return false
				}
				this.huanzheID = item.id
				this.value = item.name
				this.showpeople = false
			},
			addPeople(e) {
				uni.navigateTo({
					url: "../archives/add_archives"
				})
			},
			// 选中任一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.value == "请选择") {
					uni.showToast({
						title: "请选择宝贝",
						icon: "none"
					})
					return false
				}
				if (this.isindex == -1) {
					uni.showToast({
						title: "请选择是否有社保",
						icon: "none"
					})
					return false
				}
				if (this.guardianName == "") {
					uni.showToast({
						title: "请填写监护人姓名",
						icon: "none"
					})
					return false
				}
				if (this.nRelationship.label == "请选择") {
					uni.showToast({
						title: "请选择关系",
						icon: "none"
					})
					return false
				}
				let obj = {
					product_type: 6,
					patient_id: this.huanzheID,
					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)
				})
			}
		}
	}
</script>

<style lang="scss">
	.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;
	}

	.popup_title {
		height: 15%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1rpx solid #f9f9f9;
	}

	.textareasty {
		background-color: white;
		border: 1px solid #efefef;
		border-radius: 16rpx;
		padding: 15rpx;
		margin: 15rpx auto;
	}

	.popup_title_text {
		width: auto;
		height: auto;
		font-size: 34rpx;
		font-weight: 540;
	}

	.popup_list {
		display: flex;
		height: 10vh;
		width: auto;
		border-bottom: 1rpx solid #f9f9f9;
	}

	.popup_list_title {
		height: 100%;
		width: 90%;
		display: inline-block;
		padding: 0 0 0 30rpx;

		.title {
			height: 50%;
			width: auto;
			font-size: 32rpx;
			font-weight: 500;
			padding: 20rpx 0 0 0;
		}

		.body {
			height: 50%;
			color: #a1a1a1;
			height: auto;
			width: auto;
			font-size: 30rpx;
			padding: 10rpx 0 0 0;
		}
	}

	.popup_button {
		height: 80rpx;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		view {
			color: #0b73ba;
			font-weight: 500;
		}
	}
</style>