caimei-applets-crm/components/cm-module/receipt/receipt-modal.vue

<template name="modal">
	<view class="modal-template">
		<!-- 自定义弹窗内容 -->
		<tui-modal :show="show" :padding="'40rpx 60rpx'" @cancel="handleClickCancel" :custom="true" fadeIn>
			<view class="tui-modal-custom">
				<!-- 当收款金额等于所选订单的剩余应收金额 -->
				<template v-if="handleType == 1">
					<view class="tui-prompt-text">
						订单金额：<text class="text">￥{{ hanldOrder.payTotalFee | NumFormat }}</text>
					</view>
					<view class="tui-prompt-text">
						余额抵扣：<text class="text">￥{{ hanldOrder.balancePayFee | NumFormat }}</text>
					</view>
					<view class="tui-prompt-text">
						应收金额：<text class="text">￥{{ hanldOrder.payableAmount | NumFormat }}</text>
					</view>
					<view class="tui-prompt-text">
						已收金额：<text class="text">￥{{ hanldOrder.paidAmount | NumFormat }}</text>
					</view>
					<view class="tui-prompt-text">
						收款金额：<text class="text">￥{{ amount | NumFormat }}</text>
					</view>
					<view class="tui-prompt-text">
						剩余应收：<text class="text"
							>￥{{ (amount - hanldOrder.surplusAmount) | NumFormat }}({{
								hanldOrder.orderNums
							}}个订单)</text
						>
					</view>
				</template>
				<!-- 当收款金额大于所选订单的剩余应收金额 -->
				<template v-if="handleType == 2">
					<view class="tui-prompt-text">
						收款金额：<text class="text">￥{{ amount | NumFormat }}</text>
					</view>
					<view class="tui-prompt-text">
						剩余应收：<text class="text"
							>￥{{ hanldOrder.surplusAmount | NumFormat }}({{ hanldOrder.orderNums }}个订单)</text
						>
					</view>
					<view class="tui-prompt-text">
						本次收款金额超出剩余应收金额：<text class="text"
							>￥{{ (amount - hanldOrder.surplusAmount) | NumFormat }}</text
						>关联订单的同时将超出金额退到机构余额吗？
					</view>
				</template>
				<!-- 当收款金额等于所选订单的剩余应收金额 -->
				<template v-if="handleType == 3">
					<view class="tui-prompt-text">
						收款金额：<text class="text">￥{{ amount | NumFormat }}</text>
					</view>
					<view class="tui-prompt-text">
						剩余应收：<text class="text"
							>￥{{ hanldOrder.surplusAmount | NumFormat }}({{ hanldOrder.orderNums }}个订单)</text
						>
					</view>
					<view class="tui-prompt-text">
						本次收款后，订单剩余未收款金额：<text class="text"
							>￥{{ (hanldOrder.surplusAmount - amount ) | NumFormat }}</text
						>抹平确认还是等值确认？
					</view>
				</template>
				<view class="tui-prompt-flex" v-if="handleType == 1">
					<view class="btn btn-cancel" @click="handleClickCancel">取消</view>
					<view class="btn btn-confirm" @click="handleClick(4)">确认收款</view>
				</view>
				<view class="tui-prompt-flex" v-if="handleType == 2">
					<view class="btn btn-cancel" @click="handleClickCancel">取消</view>
					<view class="btn btn-confirm" @click="handleClick(3)">退到余额</view>
				</view>
				<view class="tui-prompt-flex" v-if="handleType == 3">
					<view class="btn btn-warning" @click="handleClick(1)">抹平确认</view>
					<view class="btn btn-confirm" @click="handleClick(4)">等值确认</view>
				</view>
				
			</view>
		</tui-modal>
	</view>
</template>

<script>
export default {
	name: 'modal',
	props: {
		totalOrder: {
			type: Object
		},
		modelTpye: {
			//1
			type: Number,
			default: 1
		},
		amount: {
			type: Number
		},
		show: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			handleType: 1,
			hanldOrder: {}
		}
	},
	filters: {
		NumFormat(value) {
			//处理金额
			if (value) {
				return Number(value).toFixed(2)
			} else {
				return '0.00'
			}
		}
	},
	created() {
		this.initData(this.modelTpye, this.totalOrder)
	},
	methods: {
		async initData(type, order) {
			this.handleType = type
			this.hanldOrder = order
			console.log('handleType', this.handleType)
			console.log('hanldOrder', this.hanldOrder)
			console.log('amount', this.amount)
		},
		handleClick(type) {
			this.$emit('click',type)
		},
		handleClickCancel() {
			this.$emit('cancel')
		}
	}
}
</script>

<style lang="scss">
.tui-prompt-text {
	font-size: $font-size-26;
	color: #333333;
	line-height: 44rpx;
	.text {
		color: $color-system;
	}
}
.tui-prompt-flex {
	width: 100%;
	height: 70rpx;
	display: flex;
	margin-top: 40rpx;
	.btn {
		flex: 1;
		line-height: 70rpx;
		font-size: $font-size-26;
		text-align: center;
		color: #ffffff;
		border-radius: 33rpx;
		margin: 0 24rpx;
		&.btn-cancel {
			background: #f7f7f7;
			color: #999999;
		}
		&.btn-confirm {
			background: $color-system;
		}
		&.btn-warning {
			background: #f0ad4e;
		}
	}
}
</style>