caimei-applets-caimei/components/module/creatOrder/sellerFreight.vue

<template name="freight">
	<view class="freight-template">
		 <!-- 运费信息 -->
		<view class="invoice-freight" @tap.stop="hanldOperationConfim">
			<view class="freight-left">
				运费<text class="iconfont icon-yunfeishuoming" @click.stop="showTip"></text>
			</view>
			<view class="freight-right">
				<text>{{freightText}}</text>
				<text class="text" v-if="freightData.freightType == '1'">￥{{freightData.freightTypeMoney}}</text>
				<text class="iconfont icon-xiayibu"></text>
			</view>
		</view>
		<!--底部选择模态层弹窗组件 -->
		<view class="popup spec" :class="specClass"  @touchmove.stop.prevent="discard" @click="freightConfim">
			<!-- 遮罩层 -->
			<view class="mask"></view>
			<view class="layer" @tap.stop="discard">
				<view class="content">
					<view class="freight-ltitle">选择运费</view>
					<view class="freight-radio">
						<radio-group class="row-group" @change="radioChange">
							<label class="row-input" v-for="(item, index) in freightList" :key="item.value">
								<radio class="row-radio" :value="item.value" :checked="index === current" color="#E15616"/>
								<view class="row-text">{{item.name}}</view>
							</label>
						</radio-group>
					</view>
					<view class="freight-group" v-if="freightData.freightType == '1'">
						<view class="group-from">
							<input class="form-input" type="text" v-model="freightData.freightTypeMoney"   placeholder="请填写运费" maxlength="20">
						</view>
					</view>	
					<view class="freight-group" v-if="freightData.freightType == '2'">
						<text class="text">{{freightText}}</text>
					</view>
					<view class="freight-group" v-if="freightData.freightType == '3'">
						<text class="text">{{freightText}}</text>
					</view>
				</view>
				<view class="btn">
					<view class="button add" @click="freightConfim">完成</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:"freight",
		data() {
			return{
				freightText:'不包邮',
				specClass: '',//规格弹窗css类，控制开关动画
				freightList:[
					{value:'1',name:'不包邮'},
					{value:'2',name:'包邮'},
					{value:'3',name:'到付'},
				],
				current:0,
				freightData:{
					freightType:'1',
					freightTypeMoney:10
				}
			}
		},
		created(){

		},
		computed: {

		},
		methods:{
			freightConfim(){
				console.log(this.freightData.freightType);
				switch(this.freightData.freightType){
					case '1':
						this.choiceaFreightFirst(this.freightData.freightType)
						break;
					case '2':
						this.choiceaFreightFirst(this.freightData.freightType)
						break;
					case '3':
					this.choiceaFreightFirst(this.freightData.freightType)
						break;	
				}		
			},
			choiceaFreightFirst(index){
				if(index == '1'){
					if(this.freightData.freightTypeMoney==''){
						this.$util.msg('请填写运费',2000)
						return
					}
					this.$emit('handleChoiceaFreight',this.freightData)
				}else{
					this.$emit('handleChoiceaFreight',this.freightData)
				}
				this.hideSpec()
			},
			showTip(){
				this.$emit('showFreightAlert');
			},
			hideSpec() {//关闭选择数量确认弹窗
				this.specClass = 'hide';
				setTimeout(() => {
					this.specClass = 'none';
				}, 200);
			},
			hanldOperationConfim(data){//显示选择数量确认弹窗
				console.log(data)
				this.specClass = 'show';
			},
			radioChange(e) {
				this.freightData.freightType = e.target.value;
				switch(this.freightData.freightType){
					case '1':
						this.freightText = '不包邮'
						break;
					case '2':
						this.freightText = '包邮'
						break;
					case '3':
						this.freightText = '到付'
						break;	
				}		
				for (let i = 0; i < this.freightList.length; i++) {
					if (this.freightList[i].value === this.freightType) {
						this.current = i;
						break;
					}
				}
			},
			discard(){
				//丢弃
			}
		}
	}
</script>

<style lang="scss">
	.freight-template{
		width: 100%;
		height: auto;
		background: #FFFFFF;
		float: left;
		margin-top: 24rpx;
		.invoice-freight{
			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;
			.freight-left{
				float: left;
				.icon-yunfeishuoming{
					height: 100%;
					padding:15rpx;
					color: $color-system;
					font-weight: normal;
				}
			}
			.freight-right{
				float: right;
				color: #2A81FF;
				.text{
					line-height: 88rpx;
					color: #ff0000;
					margin:0 20rpx;
				}
				.icon-xiayibu{
					line-height: 88rpx;
					color: #999999;
					font-weight: normal;
				}
			}
		}
	}
	.freight-ltitle{
		width: 100%;
		line-height: 60rpx;
		height: 60rpx;
		font-size: $font-size-28;
		color: #333333;
	}
	.freight-radio{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		display: flex;
		border-bottom: 1px solid #EBEBEB;
		.row-group{
			flex:1;
			display: flex;
		}
		.row-input{
			flex: 1;
			height: 88rpx;
			line-height: 88rpx;
		}
		.row-radio{
			float: left;
			transform: scale(0.6);
		}
		.row-text{
			font-size: $font-size-24;
			color: $text-color;
		}
	}
	.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;
			.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: -460rpx;
			width: 702rpx;
			padding: 24rpx 24rpx 36rpx 24rpx;
			height: 400rpx;
			border-radius: 40rpx 40rpx 0 0;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			align-content: space-between;
			.content {
				width: 100%;
			}
			.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: 14rpx;
					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 20rpx;
						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>