mabao/pages/doctor_related/info_write.vue

<template>
	<view class="main">
		<view class="cu-list menu-avatar">
			<view class="cu-item">
				<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
				<view class="content">
					<view class="text-grey">医生姓名</view>
					<view class="text-gray text-sm flex">
						<text class="text-cut">
							科室名称 医生资质
						</text>
					</view>
				</view>
				<view class="action">

				</view>
			</view>
		</view>
		<view class="cu-list menu">
			<view class="cu-item arrow" @click="openhuanzhe">
				<view class="content">
					<text class="text-grey">咨询患者</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{value}}</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="openphone">
				<view class="content">
					<text class="text-grey">接听号码</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">13756797847</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="text-grey">咨询时间</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">10分钟</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="text-grey">咨询费用</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">19.9元</text>
				</view>
			</view>
		</view>
		<view class="cu-bar bg-white tabbar" style="position: fixed;bottom: 0;width: 100%;">
			<view class="bg-green submit" @click="">
				立即咨询
			</view>
		</view>

		<!-- 选择就诊人 -->
		<!-- 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 list" @click="value=item.name,showpeople=false">
					<view class="popup_list_title">
						<view class="title">{{item.name}}</view>
						<view class="body">
							男 18天
						</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" :disabled="item.disabled">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</scroll-view>
			<u-gap height="10" bg-color="#f9f9f9"></u-gap>
			<view class="popup_button">
				<text class="" @click="addPeople">⊕ 添加就诊人</text>
			</view>
		</u-popup>

		<!-- 选择手机号 -->
		<u-popup v-model="showphone" 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="phone" v-for="(item, index) in phoneList">
					<view class="list" @click="phoneValue=item.name">
						<view class="title">{{item.name}}</view>
						<view class="phone">{{item.num}}</view>
						<view class="button">
							<u-radio-group v-model="phoneValue">
								<u-radio @change="peopleRadioChange" :key="index" :name="item.name" :disabled="item.disabled">
								</u-radio>
							</u-radio-group>
						</view>
					</view>
				</view>
				<view style="padding: 0 50rpx;">
					<input style="border: 2rpx solid #a1a1a1; height:50rpx;" v-if="phoneValue==showinput" type="number" placeholder="请输入手机号" />
				</view>
			</scroll-view>
			<u-gap height="10" bg-color="#f9f9f9"></u-gap>
			<view style="padding: 0 10%; height: 100rpx;  ">
				<u-button type="primary" shape="circle" @click="">确认</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		onLoad(options) {

		},
		data() {
			return {
				/* 就诊人 */
				showpeople: false,
				list: [{
						name: '测试1',
						disabled: false
					},
					{
						name: '测试2',
						disabled: false
					},
					{
						name: '测试3',
						disabled: false
					},
					{
						name: '测试4',
						disabled: false
					},
					{
						name: '测试5',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '',
				/* 接听号码 */
				showphone: false,
				phoneList: [{
						name: '默认手机号',
						id: '0',
						num: '123123123',
						disabled: false
					},
					{
						name: '其他手机号',
						id: '1',
						num: '',
						disabled: false
					}
				],
				phoneValue: '',
				showinput: '其他手机号',
			}
		},
		methods: {
			//点击咨询患者
			openhuanzhe() {
				this.showpeople = true
			},
			//点击联系号码
			openphone() {
				this.showphone = true
			},
			// 选中某个单选框时，由radio时触发
			peopleRadioChange(e) {
				console.log(e);
			},
			phoneRadioChange(e) {
				console.log(e);
			},
			phoneListchange(item) {
				this.phoneValue = item
				console.log(item)
			},
			peopleListchange(item) {
				this.value = item
			},
			//添加就诊人
			addPeople(e) {

			},
			//添加手机号
			addPhone(e) {

			},
			a(e) {
				console.log(this.value);
			}

		}
	};
</script>

<style scoped lang="scss">
	.main {}

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

	.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;

		text {
			color: #0b73ba;
			font-weight: 500;
		}
	}

	/**选择号码的样式和选择患者不同
	需要更改样式*/
	.phone {
		height: 20%;
		width: 100%;

		.list {
			height: 100%;
			width: 100%;
			display: flex;
			padding: 0 10rpx 0 30rpx;


			.title {
				height: 100%;
				width: 65%;
				font-size: 32rpx;
				color: #7d7d7d;
				display: flex;

				align-items: center;
			}

			.phone {
				height: 100%;
				width: 30%;
				font-size: 32rpx;
				font-weight: 500;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.button {
				height: 100%;
				width: 5%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

		}
	}
</style>