vue-insagent-app/pages/tools/calculator/calculator.vue

<template>
	<view class="page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<service-widget @btnClick="btn_click"></service-widget>
		<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() {

		},
		methods: {
			btn_click() {
				uni.navigateTo({
					url: '/pages/chat/chat'
				})
			},
			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>