caimei-applets-caimei/pages/seller/components/cm-clubmodal.vue

<template name="coupon">
	<view class="tui-modal-content">
		<!-- 弹窗提示 -->
		<tui-modal :show="show" @cancel="handleClick" :custom="true" fadeIn >
			<view class="tui-modal-custom">
				<input v-if="modalType==1"  placeholder="请输入新的姓名" class="tui-modal-input" v-model="inputData" maxlength="10"/>
				<input v-if="modalType==2"  placeholder="请输入添加的咨询人姓名" class="tui-modal-input" v-model="inputData" maxlength="10"/>
				<view class="tui-modal-flex">
					<view class="tui-modal-button cancel" @click="handleClick">取消</view>
					<view class="tui-modal-button confirm" @click="handleconfirm">确定</view>
				</view>
			</view>
		</tui-modal>
	</view>
</template>

<script>
export default {
	name: 'coupon',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		modalType:{
			type: Number,
			default:2
		}
	},
	data() {
		return {
			inputData:''
		}
	},
	created() {
		
	},
	methods: {
		handleClick(){
			this.$parent.isClubModalShow = false
		},
		handleconfirm() {
			let msgText =''
			if(this.modalType == 1){
				msgText = '请输入新的姓名'
			}else{
				msgText = '请输入咨询人姓名'
			}
			if(this.inputData == ''){
				this.$util.msg(msgText, 2000)
				return
			}
			this.$emit('handleChoiceaText', this.inputData)
			this.$parent.isClubModalShow = false
		}
	}
}
</script>

<style lang="scss">
.coupon-template {
	width: 100%;
	height: auto;
	background: #ffffff;
	float: left;
	margin-top: 24rpx;
	.coupon-title {
		width: 702rpx;
		padding: 0 24rpx;
		height: 88rpx;
		line-height: 88rpx;
		position: relative;
		.text {
			font-size: $font-size-28;
			color: $text-color;
		}
		.text-coupon {
			display: inline-block;
			float: right;
			padding-right: 30rpx;
			line-height: 88rpx;
			font-size: 28rpx;
			color: #f94b4b;
		}
		.iconfont {
			width: 50rpx;
			height: 88rpx;
			line-height: 88rpx;
			color: #999999;
			display: block;
			position: absolute;
			right: 0;
			top: 0;
		}
	}
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 220rpx;
	padding: 24rpx 32rpx 0 32rpx;
	.title {
		font-size: $font-size-32;
		color: $text-color;
		line-height: 68rpx;
		text-align: center;
		float: left;
		width: 100%;
		height: 68rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
	}
	.title-search {
		width: 100%;
		height: 66rpx;
		background: #ffffff;
		box-sizing: border-box;
		float: left;
		.search-from {
			width: 100%;
			height: 100%;
			background: #f7f7f7;
			border-radius: 32rpx;
			float: left;
			position: relative;
			.input {
				width: 500rpx;
				height: 64rpx;
				float: left;
				line-height: 64rpx;
				color: $text-color;
				font-size: $font-size-24;
			}
			.icon-iconfonticonfontsousuo1 {
				width: 64rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				display: block;
				font-size: $font-size-38;
				float: left;
				color: #999999;
			}
			.icon-shanchu1 {
				font-size: $font-size-32;
				color: #999999;
				position: absolute;
				width: 64rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				top: 0;
				right: 0;
				z-index: 10;
			}
		}
	}
	.tui-popup-main {
		width: 100%;
		float: left;
		padding-top: 10rpx;
		.tui-popup-scroll {
			width: 100%;
			height: 600rpx;
			.list {
				width: 100%;
				height: 176rpx;
				box-sizing: border-box;
				padding: 24rpx 0;
				background-size: cover;
				.list-cell-le {
					width: 128rpx;
					height: 100%;
					box-sizing: border-box;
					float: left;
					border: 1px dashed #e1e1e1;
					.logo {
						width: 126rpx;
						height: 126rpx;
						border-radius: 8rpx;
					}
				}
				.list-cell-ri {
					width: 470rpx;
					height: 100%;
					box-sizing: border-box;
					float: left;
					margin-left: 24rpx;
					.list-name {
						width: 100%;
						height: 40rpx;
						float: left;
						line-height: 40rpx;
						text-align: left;
						font-size: $font-size-26;
						color: #333333;
						margin-bottom: 24rpx;
						.tags {
							display: inline-block;
							width: 60rpx;
							height: 32rpx;
							border-radius: 8rpx;
							background: #f0cb72;
							font-size: $font-size-22;
							color: #4e4539;
							text-align: center;
							line-height: 32rpx;
							margin-left: 20rpx;
							&.sv {
								background: #333333;
								color: #f0cb72;
							}
						}
					}
					.list-ntel {
						width: 100%;
						height: 50rpx;
						float: left;
						line-height: 50rpx;
						text-align: left;
						font-size: $font-size-24;
						color: #666666;
						.list-link {
							display: inline-block;
							float: left;
							margin-right: 40rpx;
						}
						.list-texl {
							display: inline-block;
							float: left;
						}
					}
				}
				.list-cell-btn {
					width: 40rpx;
					height: 100%;
					float: right;
					.checkbox {
						width: 40rpx;
						line-height: 128rpx;
						float: right;
						box-sizing: border-box;
						text-align: center;
						text-decoration: none;
						-webkit-tap-highlight-color: transparent;
						overflow: hidden;
						&.icon-weixuanze {
							color: #b2b2b2;
						}
						&.icon-yixuanze {
							color: #FF5B00;
						}
					}
				}
			}
		}
		.tui-popup-coupon {
			width: 100%;
			height: 500rpx;
			box-sizing: border-box;
			padding: 30rpx 20rpx;
			.tui-popup-h1 {
				width: 100%;
				height: 66rpx;
				display: flex;
				align-items: center;
				.tui-popup-text {
					flex: 1;
					height: 66rpx;
					line-height: 66rpx;
					font-size: $font-size-30;
					color: #333333;
					&.red {
						color: #f94b4b;
					}
					&.bold {
						font-weight: bold;
					}
					&.left {
						text-align: left;
					}
					&.right {
						text-align: right;
					}
				}
			}
		}
	}
}
.tui-modal-custom{
	.tui-modal-input{
		width: 480rpx;
		height: 90rpx;
		border-radius: 8rpx;
		border: 1px solid #B2B2B2;
		line-height: 90rpx;
		padding: 0 20rpx;
		color: #333333;
		font-size: $font-size-30;
	}
	.tui-modal-flex{
		width: 100%;
		height: 72rpx;
		margin-top: 40rpx;
		display: flex;
		.tui-modal-button{
			flex: 1;
			line-height: 72rpx;
			font-size: $font-size-28;
			text-align: center;
			border-radius: 38rpx;
			padding: 0;
			margin: 0 15rpx;
			box-sizing: border-box;
			border: 1px solid #B2B2B2;
			&.cancel{
				background: #FFFFFF;
				color: #333333;
			}
			&.confirm{
				border-color: #FF5B00;
				background: $btn-confirm;
				color: #FFFFFF;
			}
		}
	}
}
</style>