H5-ThreeDoorder/components/deduction/deduction.vue

<template>
	<view class="Deduction" @tap="IsDeduction = !IsDeduction">
		<view style="display: flex;justify-content:space-between;align-items: center;">
			<view v-show="!IsDeduction" class="inactive"></view>
			<view v-show="IsDeduction" class="active">
				<image style="width: 100%;height: 100%;" src="https://img.agrimedia.cn/chwl/v2/xuanzyong.png"></image>
			</view>
			<view class="Deduction-Amount">
				可用消费补贴卡余额抵扣:<text class="Deduction-Amount-Text">￥{{_amount(CanBeUsed)}}</text>
			</view>
			<view class="Amount">
				账户余额:{{_amount(amount)}}
			</view>
		</view>
		<view class="Amount-Running-Low" v-if="notEnough">
			您余额不足，实际可抵扣<text class="Amount-Running-Low-Text">￥{{_amount(Deduction_Amount)}}</text>
		</view>
	</view>
</template>

<script>
	/**
	 * 若是传入的matrixing为true则会按照抵扣比例的计算方式计算抵扣价格
	 * <deduction  :price="v['price'] * v['num']" matrixing :DeductionAmount="v['deduction_prop']"></deduction>
	 * */
	import {
		conWalletInfoAPI
	} from '@/request/pay/index.js';
	import mixin from '@/static/js/mixin/mixin.js'
	export default {
		name: "deduction",
		mixins: [mixin],
		props: {
			// 售价
			price: {
				type: [String, Number],
				default: 0,
			},
			// 进价
			buyingPrice: {
				type: [String, Number],
				default: false
			},
			// 抵扣比例
			DeductionAmount: {
				type: [String, Number],
				default: 0,
			}

		},
		data() {
			return {
				// 用户抵扣余额
				amount: -1,
				// 是否抵扣
				IsDeduction: true,
				// 最大抵扣金额
				CanBeUsed: 0,
				// 实际抵扣金额
				Deduction_Amount: 0,
				// 余额是否不足
				notEnough: false
			};
		},
		computed: {
			ax() {
				return {
					price: this['price'],
					IsDeduction: this['IsDeduction'],
					buyingPrice: this['buyingPrice'],
					DeductionAmount: this['DeductionAmount']
				}
			}
		},
		watch: {
			ax:{
				deep:true,
				immediate:true,
				async handler(val){
					// 使用deep属性之后,因为请求用户数据为异步操作所以在执行顺序上会有一定差异,所以在此处判断使用async来达到请求到用户余额信息后再经行计算
					if(this['amount'] == -1){
						let conWalletInfo = await conWalletInfoAPI();
						this['amount'] = conWalletInfo['data']['amount']
						// this['amount'] = 600
					};
					// 切换时会导致继续从上一次扣除过的金额继续扣除,并不会将上一次扣除过的金额重新加回来,
					this['amount'] += Number(this['Deduction_Amount']);
					console.log(val,'监听改变');
					// 得到利润
					const profit = this['price'] - this['buyingPrice'];
					// 计算最大抵扣金额
					this['CanBeUsed'] = Math.trunc(profit * (this['DeductionAmount'] / 100));
					if (val['IsDeduction']) {
						console.log(this['amount'],this['CanBeUsed']);
						// 余额足够抵扣
						if(this['amount'] >= this['CanBeUsed']){
							console.log('余额足够抵扣');
							// 余额减去最大抵扣金额
							this['amount'] -= this['CanBeUsed'];
							// 实际抵扣金额也设置为最大抵扣金额
							this['Deduction_Amount'] = this['CanBeUsed'];
							this['notEnough'] = false;
						}else{
							console.log('余额不足抵扣');
							this.count();
							// 显示余额不足提示
							this['notEnough'] = true;
						}
					} else {
						this['amount'] += Number(this['Deduction_Amount']);
						this['Deduction_Amount'] = 0;
						this['notEnough'] = false;
					};
					const _amount = this['amount'],
						  _Deduction_Amount = this['Deduction_Amount'],
						  _price = this['price'] - this['Deduction_Amount'];
					this.$emit('change', {
						// 余额
						_amount,
						// 实际抵扣
						_Deduction_Amount,
						// 实际支付价格
						_price,
						// 状态
						status: val['IsDeduction']
					})
				}
			},
		},
		methods: {
			count() {
				this['notEnough'] = true;
				this['Deduction_Amount'] = this['amount'];
				this['amount'] = 0;
			}

		}
	}
</script>

<style lang="scss">
	.Deduction {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		padding: 32rpx;

		.Deduction-Amount {
			font-weight: bold;
			flex: 1;
			margin-left: 15rpx;
		}

		.Amount,
		.Deduction-Amount,
		.Amount-Running-Low {
			font-size: 24rpx;
			color: rgba(102, 102, 102, 1);
			line-height: 50rpx;

			&-Text {
				color: #EB4141;
			}
		}

		.Amount-Running-Low {
			padding-left: 56rpx;
		}

		// 未抵扣样式
		.inactive,
		.active {
			width: 40rpx;
			height: 40rpx;
			min-width: 40rpx;
			max-width: 40rpx;
			min-height: 40rpx;
			max-height: 40rpx;
			border-radius: 50%;
		}

		.inactive {
			border: 1rpx solid #c8c9cc;
		}

		// 抵扣样式
		.active {
			// background-color: #FF7700;
			// position: relative;
			color: #FFFFFF;
			// .icon-gouxuan{
			// 	content: '√';
			// 	position: absolute;
			// 	left: 50%;
			// 	top: 50%;
			// 	transform: translate(-50% -50%);
			// }
		}
	}
</style>