caimei-applets-weisha/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>您有余额<text class="price_number">￥{{ payModelData.ableUserMoney }}</text>暂未使用,是否需要抵扣订单?</text>
						<text>抵扣后您只需再支付<text class="price_number">￥{{ payModelData.pendingPayments }}</text></text></view>
					<view class="alert-btn" @click="cancelConfirm(dataInfo)">不抵扣,继续付款</view>
					<view class="alert-btn border" @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">您有余额<text class="price_number">￥{{ payModelData.ableUserMoney }}</text>暂未使用,是否需要抵扣订单?抵扣后订单支付完成</view>
					<view class="alert-btn" @click="cancelConfirm(dataInfo)">不抵扣,继续付款</view>
					<view class="alert-btn border" @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">目前账户余额剩余<text class="price_number">￥{{ payModelData.ableUserMoney.toFixed(2) }}</text>是否抵扣订单？</view>
					<view class="alert-btn" @click="hideConfirm">取消,不抵扣</view>
					<view class="alert-btn border" @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/wisa/img/pay-alert-bg.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;
			}
			.price_number {
				color: $uni-text-color-price;
			}
		}
		.alert-btn {
			box-sizing: border-box;
			width: 492rpx;
			height: 86rpx;
			background: $btn-confirm;
			line-height: 86rpx;
			text-align: center;
			border-radius: 43rpx;
			color: #ffffff;
			margin-top: 20rpx;
			border: 1px solid $btn-confirm;
			&.border {
				background: #fff;
				color: $btn-confirm;
			}
		}
	}
}
</style>