caimei-applets-caimei/pages/seller/order/components/cm-regula-popup.vue

<template name="regulations">
	<view class="regulations-template">
		<view class="regulations-title" @tap.stop="hanldOperationConfim">
			<text class="text">售后条款:</text>
			<view class="freight-right">
				<text class="text-l">{{regulaText}}</text>
				<text class="iconfont icon-xiayibu"></text>
			</view>
		</view>
		<!--底部选择模态层弹窗组件 -->
		<view class="popup spec" :class="specClass"  @touchmove.stop.prevent="discard" >
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer">
				<view class="content">
					<view class="freight-ltitle">售后条款</view>
					<text class="iconfont icon-iconfontguanbi" @click="freightConfim"></text>
					<view class="freight-radio">
						<radio-group class="row-group" @change="radioChange">
							<label class="row-input" v-for="(item, index) in regulaDatas" :key="index">
								<view class="row-text" @click.stop="gotoConten(item)">{{item.name.length>10?item.name.substring(0,10)+'...':item.name}}</view>
								<radio class="row-radio" :value="item.id" color="#FF5B00"/>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="btn">
					<view class="button add" @click="freightConfim">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default{
		name:'regulations',
		props:{
			regulaDatas:{
				type:Array
			}
		},
		data(){
			return{
				regulaText:'无条款',
				freightMoney:0,
				specClass: '',//规格弹窗css类，控制开关动画
				clauseId:0
			}
		},
		created() {
		},
		methods:{
			gotoConten(item){
				if(item.name!='无条款'){
					this.$api.navigateTo(`/pages/service/sellconten?clauseId=${item.id}`)
				}
			},
			radioChange(e){
				this.clauseId = e.target.value;
				this.regulaDatas.forEach((item,index)=>{
					if(item.id==this.clauseId){
						if(item.name.length>10){
							this.regulaText = item.name.substr(0,10)+'...'
						}else{
							this.regulaText = item.name;
						}
					}
				})
			},
			freightConfim(){//提交完成选择
			this.$emit('handleData',this.clauseId)
			this.hideSpec()
			},
			hideSpec() {//关闭弹窗
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 200);
			},
			hanldOperationConfim(data){//显示弹窗
				this.specClass = 'show';
				this.freightMoney = this.hanldFreight
			},
			showTip(){//显示弹窗
				this.$emit('@showregulaAlert');
			},
		}
	}
</script>

<style lang="scss">
	.regulations-template{
		width: 100%;
		height: auto;
		background: #FFFFFF;
		float: left;
		margin-top: 24rpx;
		.regulations-title{
			width: 702rpx;
			padding: 0 24rpx;
			height: 88rpx;
			line-height: 88rpx;
			font-size: $font-size-28;
			color: $text-color;
			background: #FFFFFF;
			float: left;
			font-weight: bold;
			border-bottom: 1rpx solid #EBEBEB;
			position: relative;
			.freight-left{
				float: left;
				.icon-yunfeishuoming{
					height: 100%;
					padding:15rpx;
					color: $color-system;
					font-weight: normal;
				}
			}
			.Tk{
				float: right;
				margin-right: 38rpx;
				font-size: $font-size-28;
				color: #666666;
			}
			.freight-right{
				float: right;
				color: #2A81FF;
				.text-l{
					margin-right: 40rpx;
					font-weight: normal;
				}
				.text{
					line-height: 88rpx;
					color: #ff0000;
					margin:0 20rpx;
					font-weight: normal;
				}
				.icon-xiayibu{
					width: 50rpx;
					height: 88rpx;
					line-height: 88rpx;
					color: #999999;
					display: block;
					position: absolute;
					right: 0;
					top: 0;
					font-weight: normal;
				}
			}
		}
	}
	.freight-ltitle{
		width: 100%;
		line-height: 60rpx;
		height: 60rpx;
		font-size: $font-size-34;
		color: #333333;
		text-align:center;
	}
	.icon-iconfontguanbi{
		position: absolute;
		top: 0;
		right: 0;
		font-size: 34rpx;
		color: #b2b2b2
	}
	.freight-radio{
		height: 66rpx;
		line-height: 66rpx;
		padding: 0 20rpx;
		.row-group{
			width: 100%;
			max-height: 460rpx;
			overflow: auto;

		}
		.row-input{
			height: 66rpx;
			line-height: 66rpx;
			width: 100%;
			display: block;
			// .row-text:nth-child(1){
			// 	color: #666666;
			// 	pointer-events: none;
			// }
		}
		.row-radio{
			float: right;
			transform: scale(0.9);
			color: #b2b2b2;
		}
		.row-text{
			font-size: $font-size-28;
			color: #1890f9;
			float: left;
		}
	}
	.freight-group{
		width: 100%;
		height: 88rpx;
		display: flex;
		border-bottom: 1px solid #FFFFFF;
		flex-direction: row;
		.text{
			display: block;
			flex: 1;
			line-height: 88rpx;
			font-size: $font-size-24;
			color: #999999;
			text-align: left;
			padding-left: 10rpx;
		}
		.group-from{
			flex: 1;
			height: 40rpx;
			padding: 20rpx;
			line-height: 40rpx;
			align-items: flex-start;
			font-size: $font-size-24;
			color: $text-color;
			background: #F7F7F7;
			border-radius: 14rpx;
			margin-bottom: 20rpx;
			margin-top: 10rpx;
			.form-input{
				height: 40rpx;
				line-height: 40rpx;
				flex-grow: 1;
			}
		}
	}	
	/* 加入购物模态层*/
	@keyframes showPopup {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes showLayer {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(-100%);
		}
	}
	@keyframes hideLayer {
		0% {
			transform: translateY(-100%);
		}
		100% {
			transform: translateY(0);
		}
	}
	@keyframes showAmnation {
		0% {
			top: -12rpx;
			opacity: 0;
		}
		50% {
			top: -60rpx;
			opacity: 1;
		}
		100% {
			top: -100rpx;
			opacity: 0;
		}
	}
	@keyframes hideAmnation {
		0% {
			top: -100rpx;
			opacity: 0;
		}
		100% {
			top: -12rpx;
			opacity: 0;
		}
	}
	.popup {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
		display: none;
		.mask{
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 21;
			background-color: rgba(0, 0, 0, 0.6);
		}
		.layer {
			position: fixed;
			z-index: 22;
			bottom: -710rpx;
			width: 702rpx;
			padding: 24rpx 24rpx 36rpx 24rpx;
			height: 670rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			.content {
				width: 100%;
				position: relative;
			}
			.btn {
				width: 100%;
				height: 88rpx;
				display: flex;
				.button {
					width: 702rpx;
					height: 88rpx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: $font-size-28;
					border-radius: 44rpx;
					background: $btn-confirm;
				}
			}
		}
		
		&.show {
			display: block;
			.mask{
				animation: showPopup 0.2s linear both;
			}
			.layer {
				animation: showLayer 0.2s linear both;
			}
		}
		&.hide {
			display: block;
			.mask{
				animation: hidePopup 0.2s linear both;
			}
			
			.layer {
				animation: hideLayer 0.2s linear both;
			}
		}
		&.none {
			display: none;
		}
		&.service {
			.row {
				margin: 30upx 0;
				.title {
					font-size: 30upx;
					margin: 10upx 0;
				}
				.description {
					font-size: 28upx;
					color: #999;
				}
			}
		}
		.layer-smimg{
			width: 114rpx;
			height: 114rpx;
			float: left;
			border-radius: 10rpx;
			margin-right: 24rpx;
			image{
				width: 114rpx;
				height: 114rpx;	
				border-radius: 10rpx;
			}
		}
		.layer-nunbox{
			justify-content: space-between;
			align-items: center;
			width: 536rpx;
			height: 88rpx;
			padding: 13rpx 0 0 0;
			float: left;
			.layer-nunbox-t{
				width: 100%;
				height:44rpx;
				position:relative;
				display: flex;
				.layer-nunbox-text{
					line-height: 44rpx;
					font-size: $font-size-28;
				}
				.number-box{
					display: flex;
					justify-content: center;
					align-items: center;
					.iconfont{
						font-size: $font-size-32;
						padding:0 18rpx;
						font-size: $text-color;
					}
					.btn-input{
						width: 62rpx;
						height: 48rpx;
						line-height: 48rpx;
						background: #F8F8F8;
						border-radius: 4rpx;
						text-align: center;
						font-size: $font-size-28;
					}
				}
				.product-step{
					position: absolute;
					left: 45rpx;
					bottom: 0;
					height: 44rpx;
					background: #FFFFFF;
				}
			}
			.layer-nunbox-b{
				width: 100%;
				height:44rpx;
				margin-top: 13rpx;
			}
			.text{
				line-height: 44rpx;
				font-size: $font-size-28;
				.p{
					color: #FF2A2A;
				}
				.p:first-child{
					margin-left: 30rpx;
				}
				.p.sm{
					font-size: $font-size-24;
				}
			}
		}
	}	
</style>