347 lines
10 KiB
Vue
347 lines
10 KiB
Vue
<template>
|
|
<j-nav-bar color="#FFF" nav-bar-background="#f9bf3a" :placeholder="false" />
|
|
|
|
<van-form @submit="saveUserInfoBtn">
|
|
<div class="content">
|
|
<j-gap height="120" background="#F9BF3A" opacity="0" />
|
|
<div class="action">
|
|
<view class="tt">{{ $t('userInfo.realPrompt') }}~</view>
|
|
<!-- <van-field required v-model="userInfo.realName" type="text" label="姓名" placeholder="请输入真实姓名" :rules="[{ required: true, message: '请输入真实姓名' }]"/>-->
|
|
<van-field
|
|
required
|
|
v-model="userInfo.companyName"
|
|
type="text"
|
|
:label="$t('userInfo.unitName')"
|
|
:placeholder="$t('app.enter') + $t('userInfo.unitName')"
|
|
:rules="[{ required: true, message: $t('app.enter') + $t('userInfo.unitName') }]"
|
|
/>
|
|
<van-field
|
|
required
|
|
v-model="userInfo.companyTitle"
|
|
type="text"
|
|
:label="$t('userInfo.position')"
|
|
:placeholder="$t('app.enter') + $t('userInfo.position')"
|
|
:rules="[{ required: true, message: $t('app.enter') + $t('userInfo.position') }]"
|
|
/>
|
|
<van-field
|
|
required
|
|
v-model="userInfo.companyPhone"
|
|
type="tel"
|
|
:label="$t('userInfo.workTelephone')"
|
|
:placeholder="$t('app.enter') + $t('userInfo.workTelephone')"
|
|
:rules="[{ required: true, message: $t('app.enter') + $t('userInfo.workTelephone') }]"
|
|
/>
|
|
<van-field
|
|
required
|
|
v-model="userInfo.companyYear"
|
|
type="number"
|
|
:label="$t('userInfo.workingAge')"
|
|
:placeholder="$t('app.enter') + $t('userInfo.workingAge')"
|
|
:rules="[{ required: true, message: $t('app.enter') + $t('userInfo.workingAge') }]"
|
|
/>
|
|
<van-field
|
|
required v-model="userInfo.incomeWan"
|
|
type="number"
|
|
:label="$t('userInfo.monthlyPay')"
|
|
:placeholder="$t('app.enter') + $t('userInfo.monthlyPay')"
|
|
:rules="[{ required: true, message: $t('app.enter') + $t('userInfo.monthlyPay') }]"
|
|
/>
|
|
|
|
<van-field
|
|
v-if="lang === 'zh_CN'"
|
|
v-model="userInfo.companyAddress"
|
|
is-link
|
|
required
|
|
readonly
|
|
:label="$t('userInfo.unitAddress')"
|
|
:placeholder="$t('app.select') + $t('userInfo.unitAddress')"
|
|
:rules="[{ required: true, message: $t('app.select') + $t('userInfo.unitAddress') }]"
|
|
@click="companyAddressShow = true"
|
|
/>
|
|
<van-field
|
|
v-else
|
|
v-model="userInfo.companyAddress"
|
|
required
|
|
:label="$t('userInfo.unitAddress')"
|
|
:placeholder="$t('app.enter') + $t('userInfo.unitAddress')"
|
|
:rules="[{ required: true, message: $t('app.enter') + $t('userInfo.unitAddress') }]"
|
|
/>
|
|
<van-popup v-model:show="companyAddressShow" round position="bottom">
|
|
<van-cascader
|
|
v-model="cascaderValue"
|
|
:title="$t('app.select') + $t('userInfo.unitAddress')"
|
|
:options="options"
|
|
@close="companyAddressShow = false"
|
|
@finish="onFinish"
|
|
/>
|
|
</van-popup>
|
|
|
|
<van-field
|
|
required
|
|
v-model="userInfo.companyAddressInfo"
|
|
type="text"
|
|
:label="$t('userInfo.addressInfo')"
|
|
:placeholder="$t('app.enter') + $t('userInfo.addressInfo')"
|
|
:rules="[{ required: true, message: $t('app.enter') + $t('userInfo.addressInfo') }]"
|
|
/>
|
|
|
|
|
|
<van-field
|
|
v-if="lang === 'zh_CN'"
|
|
v-model="userInfo.customerAddress"
|
|
is-link
|
|
required
|
|
readonly
|
|
:label="$t('userInfo.currentResidentialAddress')"
|
|
:placeholder="$t('app.select') + $t('userInfo.currentResidentialAddress')"
|
|
:rules="[{ required: true, message: $t('app.select') + $t('userInfo.currentResidentialAddress') }]"
|
|
@click="customerAddressShow = true"
|
|
/>
|
|
<van-field
|
|
v-else
|
|
v-model="userInfo.customerAddress"
|
|
required
|
|
:label="$t('userInfo.currentResidentialAddress')"
|
|
:placeholder="$t('app.enter') + $t('userInfo.currentResidentialAddress')"
|
|
:rules="[{ required: true, message: $t('app.enter') + $t('userInfo.currentResidentialAddress') }]"
|
|
/>
|
|
<van-popup v-model:show="customerAddressShow" round position="bottom">
|
|
<van-cascader
|
|
v-model="customerAddressValue"
|
|
:title="$t('app.select') + $t('userInfo.currentResidentialAddress')"
|
|
:options="options"
|
|
@close="customerAddressShow = false"
|
|
@finish="onCustomerAddressFinish"
|
|
/>
|
|
</van-popup>
|
|
|
|
<van-field
|
|
required
|
|
v-model="userInfo.customerAddressInfo"
|
|
type="text"
|
|
:label="$t('userInfo.addressInfo')"
|
|
:placeholder="$t('app.enter') + $t('userInfo.addressInfo')"
|
|
:rules="[{ required: true, message: $t('app.enter') + $t('userInfo.addressInfo') }]"
|
|
/>
|
|
</div>
|
|
|
|
<div class="action">
|
|
<view class="tt">
|
|
{{ $t('userInfo.directFamilyContactPerson') }}
|
|
</view>
|
|
|
|
<van-field
|
|
required
|
|
v-model="userInfo.kinsfolkName"
|
|
type="text"
|
|
:label="$t('userInfo.name')"
|
|
:placeholder="$t('app.enter') + $t('userInfo.name')"
|
|
:rules="[{ required: true, message: $t('app.enter') + $t('userInfo.name') }]"
|
|
/>
|
|
<van-field
|
|
required v-model="userInfo.kinsfolkPhone"
|
|
type="tel"
|
|
:label="$t('app.phoneNumber')"
|
|
:placeholder="$t('app.enter') + $t('app.phoneNumber')"
|
|
:rules="[{ required: true, message: $t('app.enter') + $t('app.phoneNumber') }]"
|
|
/>
|
|
<van-field
|
|
v-model="userInfo.kinsfolkRefText"
|
|
is-link
|
|
:rules="[{ required: true, message: $t('app.select') + $t('userInfo.relationship') }]"
|
|
required
|
|
readonly
|
|
:label="$t('userInfo.relationship')"
|
|
:placeholder="$t('app.select') + $t('userInfo.relationship')"
|
|
@click="showPicker = true"
|
|
/>
|
|
<van-popup v-model:show="showPicker" round position="bottom">
|
|
<van-picker
|
|
:columns="columns"
|
|
@cancel="showPicker = false"
|
|
@confirm="onConfirm"
|
|
/>
|
|
</van-popup>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div style="padding: 0 20px 60px">
|
|
<van-button
|
|
color="linear-gradient(to right, #D2A64C, #F9D88D)"
|
|
round
|
|
style="width: 100%; "
|
|
native-type="submit"
|
|
:disabled="!useEdit"
|
|
>
|
|
{{ $t('app.submit') }}
|
|
</van-button>
|
|
</div>
|
|
</van-form>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
import { getBorrowPage, getUserInfo, updateCustomerCard } from '@/api';
|
|
import { resetData } from '@/utils/dataUtil';
|
|
import { useRouter } from 'vue-router';
|
|
import { useCascaderAreaData } from '@vant/area-data';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
const { t } = useI18n()
|
|
|
|
const companyAddressShow = ref(false);
|
|
const customerAddressShow = ref(false);
|
|
const lang = localStorage.getItem('lang')
|
|
const cascaderValue = ref('');
|
|
const customerAddressValue = ref('');
|
|
const columns = [
|
|
{ text: t('userInfo.parents'), value: '1' },
|
|
{ text: t('userInfo.spouse'), value: '2' },
|
|
{ text: t('userInfo.children'), value: '3' },
|
|
{ text: t('userInfo.grandparents'), value: '4' },
|
|
{ text: t('userInfo.friend'), value: '5' }
|
|
];
|
|
const userInfo = reactive({
|
|
backCardNum: '',
|
|
incomeWan: 0,
|
|
bankType: '',
|
|
cardBackPicture: '',
|
|
cardFrontPicture: '',
|
|
cardNum: '',
|
|
companyAddress: '',
|
|
companyAddressInfo: '',
|
|
companyName: '',
|
|
companyPhone: '',
|
|
companyTitle: '',
|
|
companyYear: '',
|
|
customerAddress: '',
|
|
customerAddressInfo: '',
|
|
customerId: 0,
|
|
id: 0,
|
|
kinsfolkName: '',
|
|
kinsfolkPhone: '',
|
|
kinsfolkRef: '',
|
|
kinsfolkRefText: '',
|
|
realName: ''
|
|
});
|
|
const _getUserInfo = () => {
|
|
getUserInfo().then(res => {
|
|
resetData(userInfo, res);
|
|
columns.forEach(c => {
|
|
if (c.value == userInfo.kinsfolkRef) {
|
|
userInfo.kinsfolkRefText = c.text;
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
const borrowPage = {
|
|
pageNum: 0,
|
|
pageSize: 3
|
|
};
|
|
const useEdit = ref(true);
|
|
const _getBorrowPage = () => {
|
|
getBorrowPage(borrowPage).then(res => {
|
|
useEdit.value = res.length === 0;
|
|
});
|
|
};
|
|
|
|
const options = useCascaderAreaData();
|
|
const onFinish = ({ selectedOptions }) => {
|
|
companyAddressShow.value = false;
|
|
userInfo.companyAddress = selectedOptions.map((option) => option.text).join('/');
|
|
};
|
|
|
|
|
|
const onCustomerAddressFinish = ({ selectedOptions }) => {
|
|
customerAddressShow.value = false;
|
|
userInfo.customerAddress = selectedOptions.map((option) => option.text).join('/');
|
|
};
|
|
|
|
const showPicker = ref(false);
|
|
|
|
const onConfirm = ({ selectedOptions }) => {
|
|
showPicker.value = false;
|
|
userInfo.kinsfolkRef = selectedOptions[0].value;
|
|
userInfo.kinsfolkRefText = selectedOptions[0].text;
|
|
};
|
|
|
|
|
|
const router = useRouter();
|
|
const saveUserInfoBtn = (values) => {
|
|
updateCustomerCard(userInfo).then(res => {
|
|
router.back();
|
|
});
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
_getUserInfo();
|
|
_getBorrowPage();
|
|
});
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
background-image: linear-gradient(to bottom, #f9bf3a, #ffffff) !important;
|
|
padding-bottom: 30px;
|
|
|
|
|
|
.action {
|
|
margin: 20px;
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
background: #fff;
|
|
display: flex;
|
|
flex-flow: column;
|
|
box-shadow: 0 0 1vw 0px #e0e0e0;
|
|
|
|
&-content {
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px 20px;
|
|
box-shadow: 0 0 1vw 0px #e0e0e0;
|
|
|
|
&-item {
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.id-card-box {
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 1vw 0px #e0e0e0;
|
|
width: 500px;
|
|
height: 300px;
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.tt {
|
|
display: flex;
|
|
flex-flow: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
background: #f6f9fd;
|
|
color: #738aa4;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
//
|
|
}
|
|
|
|
}
|
|
|
|
.font-22 {
|
|
font-size: 22px;
|
|
}
|
|
|
|
</style>
|