caimei-applets-mcare/components/cm-module/modelAlert/order-alert.vue

<template name="sharealert">
	<view class="alert spec" >
		<view class="model-warp" @click.stop="hideConfirm">
			<view class="content" v-if="modelType == 1">
				<view class="content-title"></view>
				<view class="text-content clearfix">
					<view class="text">
						<text>您有采美余额￥{{payModelData.ableUserMoney}}暂未使用,是否需要抵扣订单?</text>
						<text>抵扣后您只需再支付￥{{payModelData.pendingPayments}}</text></view>
					<view class="alert-btn" @click="cancelConfirm(dataInfo)">不抵扣,继续付款</view>
					<view class="alert-btn" @click="paymentConfirm(1,dataInfo)">抵扣,继续付款</view>
				</view>				
			</view>
			<view class="content" v-if="modelType == 2">
				<view class="content-title"></view>
				<view class="text-content clearfix">
					<view class="text">您有采美余额￥{{payModelData.ableUserMoney}}暂未使用,是否需要抵扣订单?抵扣后订单支付完成</view>
					<view class="alert-btn" @click="cancelConfirm(dataInfo)">不抵扣,继续付款</view>
					<view class="alert-btn" @click="paymentConfirm(2,dataInfo)">抵扣</view>
				</view>				
			</view>
			<view class="content" v-if="modelType == 3">
				<view class="content-title"></view>
				<view class="text-content clearfix">
					<view class="text">目前机构余额剩余￥{{payModelData.ableUserMoney.toFixed(2)}}是否抵扣订单？</view>
					<view class="alert-btn" @click="hideConfirm">取消,不抵扣</view>
					<view class="alert-btn" @click="paymentConfirm(3,dataInfo)">抵扣</view>
				</view>				
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'sharealert',
		props:{
			modelType:{
				type:Number,
				default:3
			},
			payModelData:{
				type:Object
			}
		},
		data() {
			return{
				dataInfo:{}
			}
		},
		created() {
			this.infoData(this.payModelData)
		},
		methods:{
			infoData(el){
				this.dataInfo = el
			},
			hideConfirm(){
				this.$parent.isPayModel = false
			},
			cancelConfirm(data){
				this.$emit('cancelConfirm',data)
			},
			paymentConfirm(type,data){
				this.$parent.isPayModel = false
				let _data = {type:type,order:data}
				this.$emit('paymentConfirm',_data)
			},
			btnConfirm(data){//点击事件
				this.$emit('btnConfirm',data)
			}
		}
	}
</script>

<style lang="scss">
	/*弹窗*/
	 .model-warp.none{
		 display: none;
	 }
	 .model-warp.show{
		 display: block;
	 }
	 .model-warp{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.3);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10000;
		transition: all 0.4s;
		&.none{
			display: none;			
		}
		&.show{
			display: block;
		}
		.content{
			width: 540rpx;
			min-height: 310rpx;
			box-sizing: border-box;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			border-radius: 14rpx;
			background-color: #FFFFFF;
			padding-top: 180rpx;
			.content-title{
				position: absolute;
				left: 0;
				top: -53rpx;
				width: 100%;
				height: 232rpx;
				background: url(https://static.caimei365.com/app/img/icon/icon-orderAlert@2x.png) no-repeat;
				background-size: contain;
			}
			.text-content{
				width: 100%;
				min-height: 208rpx;
				box-sizing: border-box;
				padding:24rpx;
				float: left;
				background-color: #FFFFFF;
				border-radius:0 0 14rpx 14rpx;
				.text{
					letter-spacing: 2rpx;
					line-height: 50rpx;
					font-size: $font-size-26;
					color: $text-color;
					text-align: justify;
					margin-bottom: 30rpx;
				}
			}
			.alert-btn{
				width: 492rpx;
				height: 88rpx;
				background: $btn-confirm;
				line-height: 88rpx;
				text-align: center;
				border-radius: 44rpx;
				color: #FFFFFF;
				margin-top: 20rpx;
			}
		}	
	}
</style>