<template>
|
<view class="box">
|
<view class="box_hz">
|
<image class="box_hz_bg" src="@/static/background/toubao_bg@2x.png" mode="widthFix"></image>
|
<view class="box_hz_title">请完善投保信息</view>
|
<view class="box_hz_info">请按要求填写以下内容</view>
|
<view class="box_hz_list">
|
<u--form
|
labelPosition="top"
|
:model="model"
|
:rules="rules"
|
ref="uForm"
|
>
|
<u-form-item
|
labelWidth="150"
|
label="选择保险方案："
|
prop="programmeName"
|
@click="show = true"
|
borderBottom
|
>
|
<u--input v-model="model.programmeName" disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
<u-form-item
|
labelWidth="200"
|
label="选择期望保险生效开始日期："
|
prop="startDate"
|
@click="openDate"
|
>
|
<u--input v-model="model.startDate" disabled disabledColor="#ffffff" placeholder="请选择" border="none"></u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
</u--form>
|
</view>
|
<view class="box_hz_footer">
|
<u-button type="primary" shape="circle" color="#437CB3" text="下一步" @click="submit"></u-button>
|
</view>
|
</view>
|
<!-- 选择保险 -->
|
<u-picker
|
:show="show"
|
:columns="columns"
|
keyName="label"
|
:immediateChange="true"
|
confirmColor="#437CB3"
|
@confirm="confirm"
|
@cancel="show = false" />
|
<!-- 期望保险生效时间 -->
|
<u-datetime-picker
|
:show="show1"
|
mode="date"
|
:minDate="minDate"
|
@cancel="show1 = false"
|
@confirm="confirm1" />
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
show: false,
|
show1: false,
|
columns: [],
|
backgroundImg: require('@/static/background/toubao_bg@2x.png'),
|
validType: null,
|
validTypeNum: null,
|
minDate: '',
|
model: {
|
programmeId: '',
|
programmeName: '',
|
startDate: '',
|
endDate: '',
|
cyclePrice: ''
|
},
|
rules: {
|
'programmeName': {
|
type: 'string',
|
required: true,
|
message: '请选择保险方案',
|
trigger: ['blur', 'change']
|
},
|
'startDate': {
|
type: 'string',
|
required: true,
|
message: '请选择保险生效开始日期',
|
trigger: ['blur', 'change']
|
}
|
}
|
};
|
},
|
onLoad() {
|
this.getSolutionsList()
|
},
|
methods: {
|
// 获取保险方案
|
getSolutionsList() {
|
this.$u.api.solutionsList()
|
.then(res => {
|
if(res.code === 200) {
|
let arr = res.data.map(item => {
|
return {
|
label: item.name,
|
id: item.id,
|
validType: item.validType,
|
validTypeNum: item.validTypeNum
|
}
|
})
|
this.columns.push(arr)
|
}
|
})
|
},
|
openDate() {
|
if (!this.model.programmeId) return uni.showToast({
|
title: '请先选择保险方案',
|
icon: 'none'
|
})
|
this.show1 = true
|
},
|
confirm(e) {
|
this.model.programmeId = e.value[0].id
|
this.model.programmeName = e.value[0].label
|
this.model.startDate = ''
|
this.model.endDate = ''
|
if (e.value[0].validType === 1) {
|
// 次月
|
this.minDate = new Date(this.getFirstDayOfNextMonth()).getTime()
|
} else if (e.value[0].validType === 0) {
|
// 次日
|
this.minDate = new Date(this.getFutureDate(e.value[0].validTypeNum)).getTime()
|
}
|
this.show = false
|
},
|
getFutureDate(days) {
|
let date = new Date();
|
date.setDate(date.getDate() + days);
|
let year = date.getFullYear();
|
let month = date.getMonth() + 1; // 月份是从0开始的
|
let day = date.getDate();
|
|
// 格式化月份和日期，保持两位数
|
month = ('0' + month).slice(-2);
|
day = ('0' + day).slice(-2);
|
|
return `${year}-${month}-${day}`;
|
},
|
// 获取下个月一号的日期
|
getFirstDayOfNextMonth() {
|
const now = new Date();
|
// 设置当前日期为下个月的一号
|
now.setDate(1);
|
now.setMonth(now.getMonth() + 1);
|
return now;
|
},
|
confirm1(e) {
|
this.model.startDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd') + ' 00:00:00'
|
this.$u.api.getCountCyclePriceVO({
|
solutionsId: this.model.programmeId,
|
startDate: this.model.startDate + ' 00:00:00'
|
}).then(res => {
|
if (res.code === 200) {
|
this.model.cyclePrice = res.data.cyclePrice
|
this.model.endDate = res.data.endDate
|
}
|
}).finally(() => {
|
this.show1 = false
|
})
|
},
|
submit() {
|
this.$refs.uForm.validate().then(res => {
|
uni.navigateTo({
|
url: `/pages/addPersonnel/addPersonnel?model=${JSON.stringify(this.model)}`
|
})
|
}).catch(errors => {
|
|
})
|
}
|
}
|
}
|
</script>
|
<style>
|
page {
|
background-color: #f7f7f7;
|
}
|
</style>
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
.box_hz {
|
width: 100%;
|
height: 440rpx;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
padding-top: 48rpx;
|
position: relative;
|
.box_hz_bg {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
z-index: -1;
|
}
|
.box_hz_title {
|
font-weight: 600;
|
font-size: 48rpx;
|
color: #FFFFFF;
|
font-style: normal;
|
}
|
.box_hz_info {
|
font-weight: 400;
|
font-size: 28rpx;
|
color: #FFFFFF;
|
font-style: normal;
|
margin-top: 16rpx;
|
}
|
.box_hz_list {
|
width: 100%;
|
padding: 32rpx 30rpx;
|
box-sizing: border-box;
|
background-color: #FFFFFF;
|
margin-top: 48rpx;
|
border-radius: 16rpx;
|
}
|
.box_hz_footer {
|
width: 100%;
|
margin-top: 60rpx;
|
}
|
}
|
}
|
</style>
|
