partnerApp/pages/tools/calculator/calculator.vue

<template>
	<view class="page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view style="margin-bottom: 20upx;">
			<view class="title d-flex a-center j-sb"><view>原价(元)</view></view>
			<view class="content d-flex a-center j-center">
				<view class="d-flex a-center j-center">交强险</view>
				<input class="flex-1 uni-input" type="digit" v-model="compulsoryPrice" maxlength="8"/>
			</view>
			<view class="content d-flex a-center j-center">
				<view class="d-flex a-center j-center">商业险</view>
				<input class="flex-1 uni-input" type="digit" v-model="bueinessPrice" maxlength="8" />
			</view>
			<view class="content d-flex a-center j-center">
				<view class="d-flex a-center j-center">车船税</view>
				<input class="flex-1 uni-input" type="digit" v-model="vesselTaxPrice" maxlength="8" />
			</view>
		</view>
		
		<view style="margin-bottom: 20upx;">
			<view class="title d-flex a-center j-sb"><view>返点(%)</view></view>
			<view class="content d-flex a-center j-center">
				<view class="d-flex a-center j-center">交强险</view>
				<input class="flex-1 uni-input" type="number" v-model="compulsoryPoint" maxlength="2" />
			</view>
			<view class="content d-flex a-center j-center">
				<view class="d-flex a-center j-center">商业险</view>
				<input class="flex-1 uni-input" type="number" v-model="bueinessPoint" maxlength="2" />
			</view>
			<view class="content d-flex a-center j-center">
				<view class="d-flex a-center j-center">车船税</view>
				<input class="flex-1 uni-input" type="number" v-model="vesselTaxPoint" maxlength="2" />
			</view>
		</view>
		
		<view class="total">
			<view class="title d-flex a-center j-sb">
				<view>总计</view>
				<view class="clearBtn" @tap="clear">清空</view>
			</view>
			<view class="originalTotal d-flex a-center">原价金额合计：￥ <text>{{originalTotal}}</text></view>
			<view class="actualTotal d-flex a-center">实收金额合计：￥ <text style="color:red;font-size: 34upx;">{{actualTotal}}</text></view>
			<view class="discountTotal d-flex a-center">总共为您节省：￥ <text style="color: #60ca1d;font-size: 34upx;">{{discountTotal}}</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				compulsoryPrice: '', //交强险原价
				bueinessPrice: '', //商业险原价
				vesselTaxPrice: '', //车船税原价
				compulsoryPoint: '', //交强险返点
				bueinessPoint: '', //商业险返点
				vesselTaxPoint: '', //车船税返点
			}
		},
		computed: {
			originalTotal() {
				let result = 0;
				if (this.compulsoryPrice != undefined && this.bueinessPrice != undefined && this.vesselTaxPrice != undefined) {
					result = ((this.compulsoryPrice - 0) + (this.bueinessPrice - 0) + (this.vesselTaxPrice - 0)).toFixed(2);
				}
				return result;
			},
			actualTotal() {
				let result = 0;
				if (this.compulsoryPrice != undefined && this.bueinessPrice != undefined && this.vesselTaxPrice != undefined) {
					result = ((this.compulsoryPrice - 0) * (1 - this.compulsoryPoint / 100) + (this.bueinessPrice - 0) * (1 - this.bueinessPoint /100) + (this.vesselTaxPrice - 0) * (1 - this.vesselTaxPoint / 100)).toFixed(2);
				}
				return result;
			},
			discountTotal() {
				let result1 = 0;
				let result2 = 0;
				if (this.compulsoryPrice != undefined && this.bueinessPrice != undefined && this.vesselTaxPrice != undefined) {
					result1 = (this.compulsoryPrice - 0) + (this.bueinessPrice - 0) + (this.vesselTaxPrice - 0);
					result2 = (this.compulsoryPrice - 0) * (1 - this.compulsoryPoint / 100) + (this.bueinessPrice - 0) * (1 - this.bueinessPoint / 100) + (this.vesselTaxPrice - 0) * (1 - this.vesselTaxPoint / 100);
				}
				return (result1 - result2).toFixed(2);
			}
		},
		onLoad() {
			// #ifdef H5
			document.getElementsByTagName('uni-page-head')[0].style.display = 'none'
			// #endif
		},
		methods: {
			clear(){
				this.compulsoryPrice = "";
				this.bueinessPrice = "";
				this.vesselTaxPrice = "";
				this.compulsoryPoint = "";
				this.bueinessPoint = "";
				this.vesselTaxPoint = "";
			}
		}
	}
</script>

<style>
	.page{
		padding: 25upx;
	}
	.uni-input{
		border: 1px solid #EEEEEE;
		padding: 5upx 12upx;
		margin: 15upx 10upx;
	}
	.title{
		height: 60upx;
		border-bottom: 2upx solid #CCCCCC;
	}
	.title>view{
		font-size: 32upx;
	}
	.content>view:nth-of-type(1){
		width: 150upx;
	}
	.total .originalTotal,.total .actualTotal,.total .discountTotal{
		height:70upx;
	}
	.clearBtn{
		color: #0094ff;
	}
</style>