pages/sub_medical/patient.vue

<template>
	<view class="patient">
		<view class="patient-bgc">
			<!-- #ifdef APP-PLUS -->
			<u-navbar title="就诊人管理" :background="background" title-color="#ffffff" :border-bottom="false" back-icon-color="#ffffff"></u-navbar>
			<!-- #endif -->
		</view>
		<view class="patient-ul">
			<view class="patient-ul-item">
				<u-field label="当前就诊人" placeholder="" disabled input-align="right" label-width="150">
					<u-button size="mini" slot="right" plain type="primary" shape="circle" @click="deleteMenber" :custom-style="btn">删除</u-button>
				</u-field>
				<view class="patient-ul-item-msg">
					<u-field label="就诊人员" placeholder="李小明/男/24岁" disabled :placeholder-style="mstyle" input-align="right" :border-bottom="false"></u-field>
					<u-field label="证件号码" placeholder="2324324*****323123" disabled :placeholder-style="mstyle" input-align="right" :border-bottom="false"></u-field>
					<u-field label="就诊卡号" placeholder="30230248912" disabled :placeholder-style="mstyle" input-align="right" :border-bottom="false"></u-field>
					<u-field label="联系电话" placeholder="131****3421" disabled :placeholder-style="mstyle" input-align="right" :border-bottom="false"></u-field>
				</view>
			</view>
			<view class="patient-ul-item">
				<u-field label="就诊人" placeholder="" disabled input-align="right" label-width="150">
					<u-button size="mini" slot="right" type="primary" plain shape="circle" @click="deleteMenber" :custom-style="btn">删除</u-button>
				</u-field>
				<view class="patient-ul-item-msg">
					<u-field label="就诊人员" placeholder="李小明/男/24岁" disabled :placeholder-style="mstyle" input-align="right" :border-bottom="false"></u-field>
					<u-field label="证件号码" placeholder="2324324*****323123" disabled :placeholder-style="mstyle" input-align="right" :border-bottom="false"></u-field>
					<u-field label="就诊卡号" placeholder="30230248912" disabled :placeholder-style="mstyle" input-align="right" :border-bottom="false"></u-field>
					<u-field label="联系电话" placeholder="131****3421" disabled :placeholder-style="mstyle" input-align="right" :border-bottom="false"></u-field>
				</view>
			</view>
		</view>
		<u-button @click="" :custom-style="addBtn">添加就诊人</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					'background': 'no'
				},
				btn:{
					padding:'0 30rpx',
					background:'#ffffff'
				},
				addBtn: {
					backgroundColor: ' #2FA8E1',
					padding: '50rpx 0',
					color: '#FFFFFF',
					width: ' 600rpx',
					fontSize: '30rpx',
					border: '1px solid #2FA8E1',
				},
				mstyle:'color:#333333',
			}
		},
		onLoad() {

		},
		methods: {
			deleteMenber(){
				let that = this
				let cardid = '123'
				that.$u.post('/medicalapi/medicalcard/delete/' + cardid).then(res=>{
					console.log(res.data)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-btn--primary--plain{
		background-color: #FFFFFF !important;
	}
	.patient {
		font-family: "PingFang-SC-Medium";
		&-bgc {
			background-image: url(./images/pat_bannar.png);
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			padding-bottom: 340rpx;
		}

		&-ul {
			margin-top: -270rpx;
			padding: 0 30rpx;
			&-item{
				margin-bottom: 30rpx;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				&-msg{
					.u-field{
						color: #a1a1a1;
					}
				}
			}
		}
	}
</style>