-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathtax_calculator.html
198 lines (190 loc) · 6.12 KB
/
tax_calculator.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>房贷计算器</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta hid="description" name="description" content="房贷计算器" />
<!-- 引入样式 -->
<link rel="stylesheet" href="css/minit-ui.css">
<style scoped>
.bottom-title {
font-size: 12px;
text-align: center;
width: 100%
}
input {
position: absolute;
right: 60px;
top: 12px;
border: none;
height: 20px;
text-align: right;
padding: 2px;
font-size: 18px;
}
select {
position: absolute;
right: 30px;
bottom: 10px;
width: 50%;
height: 25px;
font-size: 16px;
line-height: 16px;
border-radius: 5px;
border: 1px solid #d9d9d9;
}
.mint-radiolist {
display: inherit;
}
.mint-radiolist-label{
padding: 0
}
.mint-radio-input:checked + .mint-radio-core {
background-color:#f08300;
border-color: #f08300;
}
</style>
</head>
<body class="bodyBg">
<div id="app">
<mt-cell title="房屋面积">
<input type="number" style="width:50%" v-model="area" />平方米
</mt-cell>
<mt-cell title="现成交价">
<input type="number" style="width:50%;right:50px" v-model="price" />万元
</mt-cell>
<mt-cell title="增值税征收税">
<input type="number" style="width:50%;right:30px" v-model="addTax" />%
</mt-cell>
<mt-cell title="个人所得税征收税率">
<input type="number" style="width:35%;right:30px" v-model="selfTax" />%
</mt-cell>
<mt-cell title="住宅类型">
<mt-radio v-model="type" :options="['住宅', '非住宅']">
</mt-radio>
</mt-cell>
<mt-cell title="购房年限">
</mt-cell>
<mt-cell>
<mt-radio v-model="year" :options="['未满2年', '满2不满5', '满5年']">
</mt-cell>
<mt-cell title="买方第几房">
<select v-model="homes">
<option value="首套房">首套房</option>
<option value="第二套房">第二套房</option>
<option value="三套及以上">三套及以上</option>
</select>
</mt-cell>
<mt-cell title="卖方唯一住房">
<mt-radio v-model="isOnly" :options="['是', '否']">
</mt-cell>
<mt-button @click="submit()" type="primary" style="width: 90%;margin-left: 5%;background:#f08300;border-radius: 41px;">计算</mt-button>
<p class="bottom-title">结果仅提供参考，其他费用以实际收费标准为准</p>
<div v-show="isShow">
<p class="bottom-title">小计：{{(results.total * 10000).toFixed(2)}}元</p>
<p class="bottom-title">契税：{{(results.deedTax * 10000).toFixed(2)}}元</p>
<p class="bottom-title">增值税：{{(results.addTax * 10000).toFixed(2)}}元</p>
<p class="bottom-title">个人所得税：{{(results.selfTax * 10000).toFixed(2)}}元</p>
<p class="bottom-title">印花税：{{(results.printTax * 10000).toFixed(2)}}元</p>
<p class="bottom-title">土地增值税：{{(results.landTax * 10000).toFixed(2)}}元</p>
</div>
</div>
<!-- built files will be auto injected -->
</body>
<!-- 引入组件库 -->
<script src="js/vue.js"></script>
<script src="js/mintUi.js"></script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
isShow: false,
area: '', //房屋面积
price: '', //现成交价
addTax: '5.6', //增值税征收税率
selfTax: '1.0', //个人所得税征收税率
type: '住宅',
year: '未满2年',
homes: '首套房',
isOnly: '是',
results: {
total: 0,
deedTax: 0, //契税
addTax: 0, //增值税
selfTax: 0, //个人所得税
printTax: 0, //印花税
landTax: 0 //土地增值税
}
}
},
methods: {
submit() {
if (!this.area) {
this.$toast('请输入房屋面积')
return
}
if (!this.price) {
this.$toast('请输入现成交价')
return
}
if (!this.addTax) {
this.$toast('请输入增值税征收率')
return
}
if (!this.price) {
this.$toast('请输入个人所得税征收率')
return
}
this.calculation()
},
calculation() {
this.isShow = true
// 是否是住房
if (this.type == '住宅') {
// 是否大于90平
if (this.area > 90) {
// 第几房
if (this.homes == '首套房' || this.homes == '第二套房') {
// 是否三房以上
this.results.deedTax = this.price * 0.01 //契税
} else {
this.results.deedTax = this.price * 0.03 //契税
}
} else {
if (this.homes == '首套房') {
// 是否三房以上
this.results.deedTax = this.price * 0.01 //契税
}
if (this.homes == '第二套房') {
this.results.deedTax = this.price * 0.02 //契税
}
if (this.homes == '三套及以上') {
this.results.deedTax = this.price * 0.03 //契税
}
}
if (this.year == '未满2年') {
this.results.addTax = this.price * 0.056
} else {
this.results.addTax = 0
}
this.results.selfTax = this.price * 0.01
this.results.printTax = 0
this.results.landTax = 0
this.results.total = this.results.deedTax + this.results.addTax + this.results.selfTax + this.results.printTax + this.results.landTax
} else {
// 非住宅
this.results.deedTax = this.price * 0.03
this.results.addTax = this.price * 0.056
this.results.selfTax = this.price * 0.01
this.results.printTax = this.price *0.001
this.results.landTax = this.price *0.01
this.results.total = this.results.deedTax + this.results.addTax + this.results.selfTax + this.results.printTax + this.results.landTax
}
}
}
})
</script>
</html>