You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
364 lines
9.8 KiB
364 lines
9.8 KiB
<template>
|
|
<div class="intelligent-computing">
|
|
<p class="hint-tit" style="word-break: break-all" v-html="itemList.msgText"></p>
|
|
|
|
<div class="intelligent-computing-box" v-if="propsType == 'observation'">
|
|
<h3 class="title">观察期计算</h3>
|
|
<van-cell-group inset>
|
|
<van-field
|
|
class="className"
|
|
readonly
|
|
is-link
|
|
input-align="right"
|
|
v-model="timeValue"
|
|
label="保单生效日"
|
|
@click-input="showPopup"
|
|
:disabled="!btnFloat"
|
|
/>
|
|
<van-field
|
|
name="radio"
|
|
class="className"
|
|
input-align="right"
|
|
label="约定观察期"
|
|
:disabled="!btnFloat"
|
|
>
|
|
<template #input>
|
|
<van-radio-group
|
|
:disabled="!btnFloat"
|
|
v-model="radio"
|
|
direction="horizontal"
|
|
@change="radioChange"
|
|
>
|
|
<van-radio name="90" shape="square">90天</van-radio>
|
|
<van-radio name="180" shape="square">180天</van-radio>
|
|
</van-radio-group>
|
|
</template>
|
|
</van-field>
|
|
<van-field
|
|
name="radio"
|
|
class="className"
|
|
input-align="right"
|
|
label="观察期截止日"
|
|
:disabled="!btnFloat"
|
|
>
|
|
<template #input>
|
|
{{ userComputedValue }}
|
|
</template>
|
|
</van-field>
|
|
</van-cell-group>
|
|
<button class="compute-btn" @click="userComputed('observation')" :disabled="!btnFloat">
|
|
计算
|
|
</button>
|
|
</div>
|
|
|
|
<div class="intelligent-computing-box" v-if="propsType == 'gracePeriod'">
|
|
<h3 class="title">宽限期计算</h3>
|
|
<van-cell-group inset>
|
|
<van-field
|
|
class="className"
|
|
readonly
|
|
is-link
|
|
input-align="right"
|
|
v-model="timeValue"
|
|
label="应交费日期"
|
|
@click-input="showPopup"
|
|
:disabled="!btnFloat"
|
|
/>
|
|
<van-field
|
|
name="endDate"
|
|
class="className"
|
|
input-align="right"
|
|
label="宽限期截止日"
|
|
:disabled="!btnFloat"
|
|
>
|
|
<template #input>
|
|
{{ userComputedValue }}
|
|
</template>
|
|
</van-field>
|
|
</van-cell-group>
|
|
<button class="compute-btn" @click="userComputed('gracePeriod')" :disabled="!btnFloat">
|
|
计算
|
|
</button>
|
|
</div>
|
|
|
|
<div class="intelligent-computing-box" v-if="propsType == 'yearOld'">
|
|
<h3 class="title">周岁计算</h3>
|
|
<van-cell-group inset>
|
|
<van-field
|
|
class="className"
|
|
readonly
|
|
is-link
|
|
v-model="timeValue"
|
|
label="出生年月日"
|
|
input-align="right"
|
|
@click-input="showPopup"
|
|
:disabled="!btnFloat"
|
|
/>
|
|
<van-field
|
|
name="age"
|
|
class="className"
|
|
input-align="right"
|
|
label="周岁"
|
|
:disabled="!btnFloat"
|
|
>
|
|
<template #input>
|
|
{{ userComputedValue }}
|
|
</template>
|
|
</van-field>
|
|
</van-cell-group>
|
|
<button class="compute-btn" @click="userComputed('yearOld')" :disabled="!btnFloat">
|
|
计算
|
|
</button>
|
|
</div>
|
|
|
|
<div class="intelligent-computing-box" v-if="propsType == 'takeEffect'">
|
|
<h3 class="title">生效日对应日计算</h3>
|
|
<van-cell-group inset>
|
|
<van-field
|
|
class="className"
|
|
readonly
|
|
is-link
|
|
input-align="right"
|
|
v-model="timeValue"
|
|
label="保单生效日"
|
|
@click-input="showPopup"
|
|
:disabled="!btnFloat"
|
|
/>
|
|
<van-field
|
|
name="effectDate"
|
|
class="className"
|
|
input-align="right"
|
|
label="保单生效日对应日"
|
|
:disabled="!btnFloat"
|
|
>
|
|
<template #input>
|
|
{{ userComputedValue }}
|
|
</template>
|
|
</van-field>
|
|
</van-cell-group>
|
|
<button class="compute-btn" @click="userComputed('takeEffect')" :disabled="!btnFloat">
|
|
计算
|
|
</button>
|
|
</div>
|
|
|
|
<van-popup v-model:show="show" position="bottom" teleport="body" round>
|
|
<van-date-picker
|
|
v-model="currentDateValues"
|
|
title="请选择日期"
|
|
:min-date="minDate"
|
|
:max-date="maxDate"
|
|
:formatter="formatter"
|
|
@cancel="show = false"
|
|
@confirm="confirmPicker"
|
|
/>
|
|
</van-popup>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { showToast } from 'vant'
|
|
import { Post } from '@/utils/https'
|
|
|
|
const props = defineProps({
|
|
propsType: { type: String, default: 'takeEffect' },
|
|
btnFloat: { type: Boolean, default: true },
|
|
itemList: { type: Object, default: () => ({}) },
|
|
})
|
|
|
|
const show = ref(false)
|
|
const timeValue = ref('日期选择')
|
|
const radio = ref('90')
|
|
const userComputedValue = ref('')
|
|
const userComputedRequest = ref(true)
|
|
|
|
const now = new Date()
|
|
const currentDateValues = ref([
|
|
String(now.getFullYear()),
|
|
String(now.getMonth() + 1).padStart(2, '0'),
|
|
String(now.getDate()).padStart(2, '0'),
|
|
])
|
|
|
|
const minDate = computed(() =>
|
|
props.propsType === 'yearOld' ? new Date(1970, 0, 1) : new Date(1970, 0, 1),
|
|
)
|
|
const maxDate = computed(() =>
|
|
props.propsType === 'yearOld' ? new Date() : new Date(2099, 11, 31),
|
|
)
|
|
|
|
function valuesToDate(values) {
|
|
const [y, m, d] = (values || currentDateValues.value).map((v) => Number(v))
|
|
return new Date(y, (m || 1) - 1, d || 1)
|
|
}
|
|
|
|
function showPopup() {
|
|
console.log(23232);
|
|
// 历史记录中不允许点击选择日期
|
|
if (!props.btnFloat) return
|
|
show.value = true
|
|
}
|
|
|
|
function radioChange() {
|
|
if (!props.btnFloat) return
|
|
userComputedRequest.value = true
|
|
userComputedValue.value = ''
|
|
}
|
|
|
|
function confirmPicker({ selectedValues }) {
|
|
const values = selectedValues || currentDateValues.value
|
|
currentDateValues.value = values
|
|
const [year, month, day] = values
|
|
const next = `${year}年${month}月${day}日`
|
|
userComputedRequest.value = next !== timeValue.value
|
|
timeValue.value = next
|
|
userComputedValue.value = ''
|
|
show.value = false
|
|
}
|
|
|
|
function formatter(type, option) {
|
|
if (type === 'year') option.text = `${option.text || option.value}年`
|
|
if (type === 'month') option.text = `${option.text || option.value}月`
|
|
if (type === 'day') option.text = `${option.text || option.value}日`
|
|
return option
|
|
}
|
|
|
|
function userComputed(type) {
|
|
if (timeValue.value === '日期选择') {
|
|
showToast('请选择时间')
|
|
return
|
|
}
|
|
const info = valuesToDate(currentDateValues.value)
|
|
let title = ''
|
|
let inputParams = ''
|
|
switch (type) {
|
|
case 'observation':
|
|
userComputedValue.value = DateAdd('d', parseInt(radio.value, 10), new Date(info))
|
|
inputParams = getNowFormatDate(info) + '|' + radio.value
|
|
title = '观察期'
|
|
break
|
|
case 'gracePeriod':
|
|
userComputedValue.value = DateAdd('d', 60, new Date(info))
|
|
inputParams = getNowFormatDate(info)
|
|
title = '宽限期'
|
|
break
|
|
case 'yearOld':
|
|
userComputedValue.value = getAges(new Date(info))
|
|
inputParams = getNowFormatDate(info)
|
|
title = '周岁'
|
|
break
|
|
case 'takeEffect':
|
|
userComputedValue.value = DateAdd('y', 1, new Date(info))
|
|
inputParams = getNowFormatDate(info)
|
|
title = '生效日对应日'
|
|
break
|
|
}
|
|
requestInfo(title, inputParams, userComputedValue.value)
|
|
}
|
|
|
|
function DateAdd(interval, number, date) {
|
|
switch (interval) {
|
|
case 'y':
|
|
if (date.getMonth() == 1 && date.getDate() == 29) {
|
|
date.setFullYear(date.getFullYear() + number)
|
|
DateAdd('d', -1, date)
|
|
} else {
|
|
date.setFullYear(date.getFullYear() + number)
|
|
}
|
|
break
|
|
case 'm':
|
|
date.setMonth(date.getMonth() + number)
|
|
break
|
|
case 'd':
|
|
date.setDate(date.getDate() + number)
|
|
break
|
|
}
|
|
return getNowFormatDate(date)
|
|
}
|
|
|
|
function getNowFormatDate(data) {
|
|
return `${data.getFullYear()}年${data.getMonth() + 1}月${data.getDate()}日`
|
|
}
|
|
|
|
function getAges(data) {
|
|
const brith = data
|
|
const toDay = new Date()
|
|
if (
|
|
brith.getFullYear() === toDay.getFullYear() &&
|
|
brith.getMonth() === toDay.getMonth() &&
|
|
brith.getDate() === toDay.getDate()
|
|
) {
|
|
return 0
|
|
}
|
|
let age = toDay.getFullYear() - brith.getFullYear()
|
|
if (toDay.getMonth() > brith.getMonth()) return age
|
|
if (toDay.getMonth() < brith.getMonth()) return age - 1
|
|
if (toDay.getDate() >= brith.getDate()) return age
|
|
return age - 1
|
|
}
|
|
|
|
function requestInfo(content, inputParams, outputParams) {
|
|
if (!userComputedRequest.value) return
|
|
userComputedRequest.value = false
|
|
const param = { userInfoId: localStorage.userId, content, inputParams, outputParams }
|
|
Post('api/calculator', param)
|
|
.then((res) => console.log(res))
|
|
.catch((err) => console.log(err))
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.intelligent-computing {
|
|
padding: 16rem;
|
|
background: transparent;
|
|
}
|
|
.intelligent-computing-box .van-cell {
|
|
padding: 0;
|
|
}
|
|
.intelligent-computing .hint-tit {
|
|
font-size: 16rem;
|
|
line-height: 20rem;
|
|
color: #17204d;
|
|
margin: 0;
|
|
}
|
|
.intelligent-computing-box {
|
|
background: transparent;
|
|
}
|
|
.intelligent-computing-box .title {
|
|
font-size: 16rem;
|
|
font-weight: 600;
|
|
color: #17204d;
|
|
margin: 12rem 0;
|
|
}
|
|
.intelligent-computing-box .compute-btn {
|
|
width: 100%;
|
|
height: 40rem;
|
|
margin-top: 16rem;
|
|
border: 0;
|
|
border-radius: 22rem;
|
|
background: linear-gradient(90deg, #025cea 0%, #0595f6 100%);
|
|
color: #fff;
|
|
font-size: 15rem;
|
|
&:disabled {
|
|
background: linear-gradient(270deg, #63a0ff 0%, #025cea 100%);
|
|
opacity: 0.3;
|
|
color: inherit;
|
|
}
|
|
}
|
|
.intelligent-computing-box .className {
|
|
background: transparent;
|
|
min-height: 48rem;
|
|
align-items: center;
|
|
}
|
|
:deep(.van-cell-group--inset) {
|
|
margin: 0;
|
|
padding: 0 12rem;
|
|
border-radius: 8rem;
|
|
}
|
|
:deep(.van-field__label label) {
|
|
white-space: nowrap;
|
|
}
|
|
:deep(.van-cell__right-icon) {
|
|
line-height: 25rem;
|
|
height: 24rem;
|
|
}
|
|
</style>
|
|
|