circulation_ancientCoins_new/components/userCard.vue

<template>
	<view :class="'user-card-com' + (!showuinfo ? ' popup-user-card' : '')">
		<uni-card :title="dataitem.name" extra=" " margin="0 10rpx 20rpx 10rpx" shadow="none"
			:border="false" padding="24rpx 0 0 0">
			<view>
				<uni-data-checkbox mode="button" v-model="type" :localdata="types"
					@change="changeType"></uni-data-checkbox>
			</view>

			<view class="bed-wrapper" v-show="type == 1">
				<uni-easyinput v-model="value" placeholder="请输入床位位置" placeholderStyle="color: #999999;font-size: 30rpx;"
					:trim="true" @input="inputevent"></uni-easyinput>
			</view>

			<view class="card-cus-txt" v-if="type == 0">
				首次预约，建议等待医生叫号
			</view>

			<view class="card-cus-txt" v-else>
				没有找到床位，可不填写位置
			</view>

		</uni-card>
	</view>
</template>

<script>
export default {
	name: "visitorList",
	options: { styleIsolation: "shared" },
	props: {
		showuinfo: {
			type: Boolean,
			default: () => true
		},
		dataitem: {
			type: Object,
			default: () => { }
		},
		index: {
			type: Number,
			default: () => -1
		},
	},
	data() {
		return {
			cssUrl: this.cssUrl,
			value: '',
			type: 0,
			types: [{
				text: '等医生叫号',
				value: 0
			}, {
				text: '找床位候诊',
				value: 1
			}],
		}
	},
	methods: {
		inputevent(e) {
			var obj = new Object()
			obj.key = this.index
			obj.type = this.type
			obj.bed_desc = e
			this.$emit('clickEvent', obj)
		},
		changeType(e) {
			var obj = new Object()
			obj.key = this.index
			obj.type = this.type
			obj.bed_desc = ''
			if (this.type == 1) obj.bed_desc = this.value
			this.$emit('clickEvent', obj)
		},
		setType(typeval) {
			this.value = typeval
		},
		setTypeValue(typeval) {
			setTimeout(function () {
				this.type = typeval
			}.bind(this))
		},
		getData() {
			var obj = new Object()
			obj.value = this.value
			obj.type = this.type
			return obj
		}
	}
};

</script>

<style lang="scss" scoped>
.user-card-com {
	width: 100%;
	height: auto;
	overflow: hidden;

	&.popup-user-card {
		::v-deep {
			.uni-card__header {
				display: none !important;
			}

			.uni-card {
				padding: 0 32rpx 0rpx 32rpx !important;
				margin-bottom: 0rpx !important;
			}

			.uni-card__content {
				padding: 0 !important;
			}

			.checklist-group {
				margin-bottom: 46rpx !important;
			}

			.card-cus-txt {
				margin-bottom: 42rpx;
			}

			.uni-easyinput {
				margin-bottom: 46rpx;
			}
		}
	}

	::v-deep {
		.uni-easyinput {
			margin-bottom: 24rpx;

			.uni-easyinput__content-input {
				padding-left: 24rpx !important;
				color: #333333;
				font-size: 30rpx;
				line-height: 30rpx;
				letter-spacing: 0.22rpx;
				height: 86rpx;
				line-height: 86rpx;
				display: flex;
				align-items: center;
				position: relative;
				top: -2rpx;
			}

			.is-input-border {
				border: 2rpx solid #DCDCDC !important;
			}

			.is-input-border.is-focused {
				border-color: #39D067 !important;

				.uni-icons.uniui-clear {
					color: #c0c4cc !important;
				}
			}
		}

		.uni-card {
			border-radius: 0;
			padding: 32rpx !important;

			.uni-data-checklist .checklist-group {
				column-gap: 24rpx;
				margin-bottom: 24rpx;

				.checklist-box {
					margin: 0;
					width: calc(50% - 14rpx);
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;

					.checklist-content {
						flex: none;
					}

					.checklist-content .checklist-text {
						font-size: 30rpx;
						font-weight: normal;
						letter-spacing: 0.22rpx;
						margin-left: 12rpx;
						color: #666666;
					}

					.radio__inner {
						width: 36rpx;
						height: 36rpx;
						border: 2rpx solid #BCBCBC;
						border-radius: 36rpx;
					}

					&.is--button {
						margin-right: 0rpx;
						padding: 20rpx 42rpx 20rpx 24rpx;
						box-sizing: border-box;
						border: none;
						min-height: 82rpx;
						border-radius: 8rpx;
						transition: border-color 0.2s;
						background: #F8F8F8;

						&.is-checked {
							background: #F5FFF4;

							.radio__inner {
								border-color: #00C160;
							}

							.radio__inner-icon {
								background: #00C160;
							}

							.checklist-text {
								color: #333333;
							}
						}
					}
				}
			}

			.card-cus-txt {
				font-size: 24rpx;
				font-weight: normal;
				line-height: 34rpx;
				height: 34rpx;
				letter-spacing: 1.77rpx;
				color: #666666;
				text-align: center;
			}

			.uni-card__header {
				border: none;
				padding: 0;

				.uni-card__header-extra .uni-card__header-extra-text {
					font-size: 24rpx;
					font-weight: normal;
					line-height: normal;
					letter-spacing: 0.14rpx;
					color: #949699;
				}

				.uni-card__header-content .uni-card__header-content-title {
					font-weight: 600;
					line-height: 42rpx;
					font-size: 32rpx;
					color: #333333;

					&:before {
						content: '';
						display: inline-block;
						width: 8rpx;
						height: 34rpx;
						z-index: 0;
						border-radius: 10rpx;
						background: #58CA7F;
						position: relative;
						top: 5rpx;
						margin-right: 12rpx;
					}
				}
			}
		}
	}
}
</style>