fangtanhua/pagesA/index/counter.vue

<template>
	<view class="counter">
		<view class="dataCenter-header u-flex u-row-between">
			<view class="header-item u-flex-col u-col-center" v-for="(item,index) in tabs" :key="index" @click="change(index)">
				<text :class="current == index ? 'active1' : 'active'">{{item}}</text>
				<image :style="{opacity:current == index ? 1 : 0}" src="../../static/images/dataCenter1-1.png" mode=""></image>
			</view>
		</view>
		<view class="" v-if="current == 0">
			<view class="jisuan-row u-flex">
				<view class="u-flex row-left">
					<text class="text">还款方式:</text>
					<u-icon name="question-circle-fill" color="#CCCCCC"></u-icon>
				</view>
				<u-radio-group v-model="denge" class="u-flex-1" size="24">
					<view class="row-right u-flex u-row-between">
						<u-radio :name="1" label-size="24">等额本息</u-radio>
						<u-radio :name="2" label-size="24">等额本金</u-radio>
					</view>
				</u-radio-group>
			</view>
			<view class="jisuan-row u-flex">
				<view class="u-flex row-left">
					<text class="text">计算方式:</text>
					<!-- <u-icon name="question-circle-fill" color="#CCCCCC"></u-icon> -->
				</view>
				<u-radio-group v-model="jisuan" class="u-flex-1" size="24">
					<view class="row-right u-flex u-row-between">
						<u-radio :name="1" label-size="24">贷款总额</u-radio>
						<u-radio :name="2" label-size="24">单价面积</u-radio>
					</view>
				</u-radio-group>
			</view>
			<view class="jisuan-row u-flex">
				<view class="u-flex row-left">
					<text class="text">贷款总额:</text>
					<!-- <u-icon name="question-circle-fill" color="#CCCCCC"></u-icon> -->
				</view>
				<view class="row-right u-flex u-row-between u-flex-1" v-if="jisuan == 1">
					<input type="digit" placeholder="请输入" class="input" v-model="shangyeprice">
					<text class="text">万元</text>
				</view>
				<view class="row-right u-flex u-row-between u-flex-1" v-if="jisuan == 2">
					<input type="digit" placeholder="请输入" class="input" v-model="shangyeprice">
					<text class="text" style="margin-right: 10rpx;">元/㎡</text>
					x
					<input type="digit" placeholder="请输入" class="input" v-model="shangyemianji">
					<text class="text">㎡</text>
				</view>
			</view>
			<view class="jisuan-row u-flex" v-if="jisuan == 2" @click="shoufushow = true">
				<view class="u-flex row-left">
					<text class="text">首付成数:</text>
					<!-- <u-icon name="question-circle-fill" color="#CCCCCC"></u-icon> -->
				</view>
				<view class="row-right u-flex u-row-between u-flex-1">
					<input type="text" placeholder="请选择" class="input" v-model="shoufuname" :disabled="true">
					<u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
				</view>
			</view>
			<view class="jisuan-row u-flex">
				<view class="u-flex row-left">
					<text class="text">贷款利率:</text>
					<u-icon name="question-circle-fill" color="#CCCCCC"></u-icon>
				</view>
				<view class="row-right u-flex u-row-between u-flex-1">
					<input type="digit" placeholder="请输入" class="input" v-model="shangyelilv">
					<text class="text">%</text>
				</view>
			</view>
			<view class="jisuan-row u-flex" @click="qixianshow = true">
				<view class="u-flex row-left">
					<text class="text">贷款期限:</text>
					<u-icon name="question-circle-fill" color="#CCCCCC"></u-icon>
				</view>
				<view class="row-right u-flex u-row-between u-flex-1">
					<input type="text" placeholder="请选择" class="input" v-model="qixianname" :disabled="true">
					<u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="" v-if="current == 1">
			<view class="jisuan-row u-flex">
				<view class="u-flex row-left">
					<text class="text">还款方式:</text>
					<u-icon name="question-circle-fill" color="#CCCCCC"></u-icon>
				</view>
				<u-radio-group v-model="denge" class="u-flex-1" size="24">
					<view class="row-right u-flex u-row-between">
						<u-radio :name="1" label-size="24">等额本息</u-radio>
						<u-radio :name="2" label-size="24">等额本金</u-radio>
					</view>
				</u-radio-group>
			</view>
			<view class="jisuan-row u-flex">
				<view class="u-flex row-left">
					<text class="text">计算方式:</text>
					<!-- <u-icon name="question-circle-fill" color="#CCCCCC"></u-icon> -->
				</view>
				<u-radio-group v-model="jisuan" class="u-flex-1" size="24">
					<view class="row-right u-flex u-row-between">
						<u-radio :name="1" label-size="24">贷款总额</u-radio>
						<u-radio :name="2" label-size="24">单价面积</u-radio>
					</view>
				</u-radio-group>
			</view>
			<view class="jisuan-row u-flex">
				<view class="u-flex row-left">
					<text class="text">贷款总额:</text>
					<!-- <u-icon name="question-circle-fill" color="#CCCCCC"></u-icon> -->
				</view>
				<view class="row-right u-flex u-row-between u-flex-1" v-if="jisuan == 1">
					<input type="digit" placeholder="请输入" class="input" v-model="gongjijinprice">
					<text class="text">万元</text>
				</view>
				<view class="row-right u-flex u-row-between u-flex-1" v-if="jisuan == 2">
					<input type="digit" placeholder="请输入" class="input" v-model="gongjijinprice">
					<text class="text" style="margin-right: 10rpx;">元/㎡</text>
					x
					<input type="digit" placeholder="请输入" class="input" v-model="gongjijinmianji">
					<text class="text">㎡</text>
				</view>
			</view>
			<view class="jisuan-row u-flex" v-if="jisuan == 2" @click="shoufushow = true">
				<view class="u-flex row-left">
					<text class="text">首付成数:</text>
					<!-- <u-icon name="question-circle-fill" color="#CCCCCC"></u-icon> -->
				</view>
				<view class="row-right u-flex u-row-between u-flex-1">
					<input type="text" placeholder="请选择" class="input" v-model="shoufuname" :disabled="true">
					<u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
				</view>
			</view>
			<view class="jisuan-row u-flex">
				<view class="u-flex row-left">
					<text class="text">贷款利率:</text>
					<u-icon name="question-circle-fill" color="#CCCCCC"></u-icon>
				</view>
				<view class="row-right u-flex u-row-between u-flex-1">
					<input type="digit" placeholder="请输入" class="input" v-model="gongjijinlilv">
					<text class="text">%</text>
				</view>
			</view>
			<view class="jisuan-row u-flex" @click="qixianshow = true">
				<view class="u-flex row-left">
					<text class="text">贷款期限:</text>
					<u-icon name="question-circle-fill" color="#CCCCCC"></u-icon>
				</view>
				<view class="row-right u-flex u-row-between u-flex-1">
					<input type="text" placeholder="请选择" class="input" v-model="qixianname" :disabled="true">
					<u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
				</view>
			</view>
		</view>
		<view class="" v-if="current == 2">
			<view class="jisuan-row u-flex">
				<view class="u-flex row-left">
					<text class="text">还款方式:</text>
					<u-icon name="question-circle-fill" color="#CCCCCC"></u-icon>
				</view>
				<u-radio-group v-model="denge" class="u-flex-1" size="24">
					<view class="row-right u-flex u-row-between">
						<u-radio :name="1" label-size="24">等额本息</u-radio>
						<u-radio :name="2" label-size="24">等额本金</u-radio>
					</view>
				</u-radio-group>
			</view>
			<view class="jisuan-row u-flex">
				<view class="u-flex row-left">
					<text class="text">计算方式:</text>
					<!-- <u-icon name="question-circle-fill" color="#CCCCCC"></u-icon> -->
				</view>
				<u-radio-group v-model="jisuan" class="u-flex-1" size="24" @change="changejisuan">
					<view class="row-right u-flex u-row-between">
						<u-radio :name="1" label-size="24">房屋总价</u-radio>
						<u-radio :name="2" label-size="24">单价面积</u-radio>
					</view>
				</u-radio-group>
			</view>
			<view class="jisuan-row u-flex">
				<view class="u-flex row-left">
					<text class="text">房屋总价:</text>
					<!-- <u-icon name="question-circle-fill" color="#CCCCCC"></u-icon> -->
				</view>
				<view class="row-right u-flex u-row-between u-flex-1" v-if="jisuan == 1">
					<input type="digit" placeholder="请输入" class="input" v-model="zuheprice" @input="changezuhe">
					<text class="text">万元</text>
				</view>
				<view class="row-right u-flex u-row-between u-flex-1" v-if="jisuan == 2">
					<input type="digit" placeholder="请输入" class="input" v-model="zuheprice" @input="changezuhe">
					<text class="text" style="margin-right: 10rpx;">元/㎡</text>
					x
					<input type="digit" placeholder="请输入" class="input" v-model="zuhemianji" @input="changezuhe">
					<text class="text">㎡</text>
				</view>
			</view>
			<view class="jisuan-row u-flex">
				<view class="u-flex row-left">
					<text class="text">首付成数:</text>
					<!-- <u-icon name="question-circle-fill" color="#CCCCCC"></u-icon> -->
				</view>
				<u-radio-group v-model="shoufu" class="u-flex-1" size="24" @change="changechengshu">
					<view class="row-right u-flex u-row-between">
						<u-radio :name="1" label-size="24">首套</u-radio>
						<u-radio :name="2" label-size="24">二套</u-radio>
						<view class="row-right u-flex u-row-between" style="width: 30%;" @click="shoufushow = true">
							<input type="text" placeholder="请选择" class="input" v-model="shoufuname" :disabled="true">
							<u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
						</view>
					</view>
				</u-radio-group>
			</view>
			<view class="jisuan-row u-flex" @click="qixianshow = true">
				<view class="u-flex row-left">
					<text class="text">贷款期限:</text>
					<u-icon name="question-circle-fill" color="#CCCCCC"></u-icon>
				</view>
				<view class="row-right u-flex u-row-between u-flex-1">
					<input type="text" placeholder="请选择" class="input" v-model="qixianname" :disabled="true">
					<u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
				</view>
			</view>
			<u-gap height="20" bg-color="#F6F6F6"></u-gap>
			<view class="tabs-title">
				公积金贷款信息
			</view>
			<view class="jisuan-row u-flex">
				<view class="u-flex row-left">
					<text class="text">贷款总额:</text>
					<!-- <u-icon name="question-circle-fill" color="#CCCCCC"></u-icon> -->
				</view>
				<view class="row-right u-flex u-row-between u-flex-1">
					<input type="number" placeholder="请输入" class="input" v-model="gongjijinprice" @input="changezuhe2">
					<text class="text">万元</text>
				</view>
			</view>
			<view class="jisuan-row u-flex">
				<view class="u-flex row-left">
					<text class="text">贷款利率:</text>
					<!-- <u-icon name="question-circle-fill" color="#CCCCCC"></u-icon> -->
				</view>
				<view class="row-right u-flex u-row-between u-flex-1">
					<input type="number" placeholder="请输入" class="input" v-model="gongjijinlilv">
					<text class="text">%</text>
				</view>
			</view>
			<u-gap height="20" bg-color="#F6F6F6"></u-gap>
			<view class="tabs-title">
				商业贷款信息
			</view>
			<view class="jisuan-row u-flex">
				<view class="u-flex row-left">
					<text class="text">贷款总额:</text>
					<!-- <u-icon name="question-circle-fill" color="#CCCCCC"></u-icon> -->
				</view>
				<view class="row-right u-flex u-row-between u-flex-1">
					<input type="number" placeholder="请输入" class="input" v-model="shangyeprice" @input="changezuhe1">
					<text class="text">万元</text>
				</view>
			</view>
			<view class="jisuan-row u-flex">
				<view class="u-flex row-left">
					<text class="text">贷款利率:</text>
					<u-icon name="question-circle-fill" color="#CCCCCC"></u-icon>
				</view>
				<view class="row-right u-flex u-row-between u-flex-1">
					<input type="number" placeholder="请输入" class="input" v-model="shangyelilv">
					<text class="text">%</text>
				</view>
			</view>
		</view>
		<view class="down-btn u-flex u-row-between">
			<text @click="chongzhi">重置</text>
			<text @click="toinfo">计算</text>
		</view>
		<u-select v-model="qixianshow" :list="qixianlist" label-name="name" value-name="value" @confirm="changeqixian"></u-select>
		<u-select v-model="shoufushow" :list="shoufulist" label-name="name" value-name="value" @confirm="changeshoufu"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['商业贷款', '公积金贷款', '组合贷款'],
				current: 0,
				denge: 1,
				jisuan: 1,
				shoufu: 1,


				shangyeprice: '',
				shangyemianji: '',
				shangyelilv: '',

				gongjijinprice: '',
				gongjijinmianji: '',
				gongjijinlilv: '',

				zuheprice: '',
				zuhemianji: '',

				qixianname: '30年(360期)',
				qixianvalue: '360',
				qixianlist: [],
				qixianshow: false,

				shoufuname: '',
				shoufuvalue: '',
				shoufulist: [],
				shoufushow: false,

				config: {}
			}
		},
		onLoad() {
			this.getdata()
		},
		computed: {

		},
		methods: {
			chongzhi() {
				this.shangyeprice = ''
				this.shangyemianji = ''
				this.shangyelilv = this.config.business_interest_rate

				this.gongjijinprice = ''
				this.gongjijinmianji = ''
				this.gongjijinlilv = this.config.accumulation_interest_rate

				this.zuheprice = ''
				this.zuhemianji = ''

				this.qixianname = '30年(360期)'
				this.qixianvalue = 360

				this.shoufuname = `${this.config.first_home_divide}成`
				this.shoufuvalue = this.config.first_home_divide

				this.denge = 1
				this.jisuan = 1
				this.shoufu = 1
			},
			changejisuan() {
				this.changezuhe()
			},
			changechengshu(e) {
				if (e == 1) {
					this.shoufuname = `${this.config.first_home_divide}成`
					this.shoufuvalue = this.config.first_home_divide
				} else {
					this.shoufuname = `${this.config.second_home_divide}成`
					this.shoufuvalue = this.config.second_home_divide
				}
				this.changezuhe()
			},
			changezuhe() {
				if (this.zuheprice > 0) {
					if (this.jisuan == 1) {
						this.shangyeprice = (this.zuheprice * (1 - this.shoufuvalue / 10)).toFixed(2)
					} else {
						this.shangyeprice = ((this.zuheprice * this.zuhemianji) / 10000 * (1 - this.shoufuvalue / 10)).toFixed(2)
					}
					this.gongjijinprice = ''
				} else {
					this.gongjijinprice = ''
					this.shangyeprice = ''
				}
			},
			changezuhe1(e) {
				if (this.zuheprice > 0) {
					if (this.jisuan == 1) {
						var zuheprice = (this.zuheprice * (1 - this.shoufuvalue / 10)).toFixed(2)
					} else {
						var zuheprice = ((this.zuheprice * this.zuhemianji) / 10000 * (1 - this.shoufuvalue / 10)).toFixed(2)
					}
					if (this.shangyeprice > zuheprice) {
						this.$u.toast(`商业贷款必须小于${zuheprice}万元`)
						this.gongjijinprice = ''
						return
					}
					this.gongjijinprice = (zuheprice - this.shangyeprice).toFixed(2)
				}
			},
			changezuhe2(e) {
				if (this.zuheprice > 0) {
					if (this.jisuan == 1) {
						var zuheprice = (this.zuheprice * (1 - this.shoufuvalue / 10)).toFixed(2)
					} else {
						var zuheprice = ((this.zuheprice * this.zuhemianji) / 10000 * (1 - this.shoufuvalue / 10)).toFixed(2)
					}
					if (this.gongjijinprice > zuheprice) {
						this.$u.toast(`公积金贷款必须小于${zuheprice}万元`)
						this.shangyeprice = ''
						return
					}
					this.shangyeprice = (zuheprice - this.gongjijinprice).toFixed(2)
				}
			},
			changeshoufu(e) {
				this.shoufuname = e[0].label
				this.shoufuvalue = e[0].value
				if (this.current == 2) {
					this.changezuhe()
				}
			},
			changeqixian(e) {
				this.qixianname = e[0].label
				this.qixianvalue = e[0].value
			},
			getdata() {
				this.$u.post('/api/Calculator/divide_list').then(res => {
					res.data.forEach(val => {
						this.shoufulist.push({
							name: `${val.name}成`,
							value: val.name
						})
					})
				})
				for (let i = 1; i <= 30; i++) {
					this.qixianlist.push({
						name: `${i}年(${i * 12}期)`,
						value: i * 12
					})
				}
				this.$u.post('/api/Index/platform_config').then(res => {
					if (res.code == 1) {
						this.config = res.data
						this.shangyelilv = this.config.business_interest_rate
						this.gongjijinlilv = this.config.accumulation_interest_rate
						this.shoufuname = `${this.config.first_home_divide}成`
						this.shoufuvalue = this.config.first_home_divide
					}
				})
			},
			change(index) {
				this.current = index
				this.shangyelilv = this.config.business_interest_rate
				this.gongjijinlilv = this.config.accumulation_interest_rate
				this.shoufu = 1
				this.shoufuname = `${this.config.first_home_divide}成`
				this.shoufuvalue = this.config.first_home_divide
			},
			toinfo() {
				if (this.current == 0) {
					if (this.jisuan == 1) {
						if (!this.shangyeprice) {
							this.$u.toast("请输入贷款总额")
							return
						}
					}
					if (this.jisuan == 2) {
						if (!this.shangyeprice || !this.shangyemianji) {
							this.$u.toast("请输入单价面积")
							return
						}
						if (!this.shoufuname) {
							this.$u.toast("请选择首付成数")
							return
						}
					}
					if (!this.shangyelilv) {
						this.$u.toast("请输入贷款利率")
						return
					}
					var params = {
						repay_type: this.denge,
						calculate_amount: this.jisuan == 1 ? (this.shangyeprice * 10000) : (this.shangyeprice * this.shangyemianji * (1 - this.shoufuvalue / 10)),
						interest_rate: this.shangyelilv,
						time_limit: this.qixianvalue
					}
					this.$u.post('/api/Calculator/not_group_loans', params).then(res => {
						if (res.code == 1) {
							uni.navigateTo({
								url: "./counter-info?params=" + encodeURIComponent(JSON.stringify(params)) + "&type=1"
							})
						} else {
							this.$u.toast(res.msg)
						}
					})
				}
				if (this.current == 1) {
					if (this.jisuan == 1) {
						if (!this.gongjijinprice) {
							this.$u.toast("请输入贷款总额")
							return
						}
					}
					if (this.jisuan == 2) {
						if (!this.gongjijinprice || !this.gongjijinmianji) {
							this.$u.toast("请输入单价面积")
							return
						}
						if (!this.shoufuname) {
							this.$u.toast("请选择首付成数")
							return
						}
					}
					if (!this.gongjijinlilv) {
						this.$u.toast("请输入贷款利率")
						return
					}
					var params = {
						repay_type: this.denge,
						calculate_amount: this.jisuan == 1 ? (this.gongjijinprice * 10000) : (this.gongjijinprice * this.gongjijinmianji * (1 - this.shoufuvalue / 10)),
						interest_rate: this.gongjijinlilv,
						time_limit: this.qixianvalue
					}
					this.$u.post('/api/Calculator/not_group_loans', params).then(res => {
						if (res.code == 1) {
							uni.navigateTo({
								url: "./counter-info?params=" + encodeURIComponent(JSON.stringify(params)) + "&type=2"
							})
						} else {
							this.$u.toast(res.msg)
						}
					})
				}
				if (this.current == 2) {
					if (this.jisuan == 1) {
						if (!this.zuheprice) {
							this.$u.toast("请输入房屋总价")
							return
						}
					}
					if (this.jisuan == 2) {
						if (!this.zuheprice || !this.zuhemianji) {
							this.$u.toast("请输入单价面积")
							return
						}
						if (!this.shoufuname) {
							this.$u.toast("请选择首付成数")
							return
						}
					}
					if (!this.shangyelilv) {
						this.$u.toast("请输入商业贷款利率")
						return
					}
					if (!this.gongjijinlilv) {
						this.$u.toast("请输入公积金贷款利率")
						return
					}
					var all = Number(this.gongjijinprice) + Number(this.shangyeprice)
					if (this.jisuan == 1) {
						var zuheprice = (this.zuheprice * (1 - this.shoufuvalue / 10)).toFixed(2)
					} else {
						var zuheprice = ((this.zuheprice * this.zuhemianji) / 10000 * (1 - this.shoufuvalue / 10)).toFixed(2)
					}
					if (all > zuheprice) {
						this.$u.toast(`贷款金额不得大于${zuheprice}万元`)
						return
					}
					var params = {
						repay_type: this.denge,
						business_calculate_amount: this.jisuan == 1 ? (this.shangyeprice * 10000) : (this.shangyeprice * this.shangyemianji * (1 - this.shoufuvalue / 10)),
						business_interest_rate: this.shangyelilv,
						accumulation_calculate_amount: this.jisuan == 1 ? (this.gongjijinprice * 10000) : (this.gongjijinprice * this.gongjijinmianji * (1 - this.shoufuvalue / 10)),
						accumulation_interest_rate: this.gongjijinlilv,
						time_limit: this.qixianvalue
					}
					uni.showLoading({
						mask: true,
						title: "请稍后"
					})
					this.$u.post('/api/Calculator/group_loans', params).then(res => {
						if (res.code == 1) {
							uni.navigateTo({
								url: "./counter-info?params=" + encodeURIComponent(JSON.stringify(params)) + "&type=3"
							})
						} else {
							this.$u.toast(res.msg)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}

	.counter {
		.tabs-title {
			padding: 24rpx 240rpx 0 24rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			background-color: #fff;
		}

		.jisuan-row {
			height: 82rpx;
			border-bottom: 2rpx solid #F6F6F6;
			padding: 0 24rpx;
			background-color: #fff;

			.row-left {
				width: 294rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}

			.row-right {
				.input {
					font-size: 24rpx;
					flex: 1;
					margin-right: 10rpx;
				}

				.text {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #CCCCCC;

				}
			}
		}

		.down-btn {
			position: fixed;
			z-index: 10;
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			bottom: 0;
			left: 0;
			padding: 0 24rpx 54rpx 24rpx;

			text:first-child {
				width: 338rpx;
				line-height: 84rpx;
				background: #FFA120;
				border-radius: 20rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}

			text:last-child {
				width: 338rpx;
				line-height: 84rpx;
				background: #1F7EFF;
				border-radius: 20rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.dataCenter-header {
			padding: 0 70rpx;
			height: 120rpx;
			background-color: #fff;
			position: sticky;
			top: 0;
			left: 0;
			z-index: 10;
			border-bottom: 2rpx solid #F5F5F5;

			.header-item {
				.active {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.active1 {
					font-size: 34rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				image {
					width: 50rpx;
					height: 20rpx;
					// margin-top: 10rpx;
				}
			}
		}
	}
</style>