国际化
This commit is contained in:
John
@@ -1,37 +1,78 @@
|
||||
<template>
|
||||
<j-nav-bar color="#FFF" nav-bar-background="#f9bf3a" :placeholder="false"/>
|
||||
<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"/>
|
||||
<j-gap height="120" background="#F9BF3A" opacity="0" />
|
||||
<div class="action">
|
||||
<view class="tt">填写真实有效的信息，审核才会通过哦~</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="单位名称" placeholder="请输入单位名称" :rules="[{ required: true, message: '请输入单位名称' }]"/>
|
||||
<van-field required v-model="userInfo.companyTitle" type="text" label="职位" placeholder="请输入职位" :rules="[{ required: true, message: '请输入职位' }]"/>
|
||||
<van-field required v-model="userInfo.companyPhone" type="tel" label="单位电话" placeholder="号码加区号（非必填）" :rules="[{ required: true, message: '号码加区号' }]"/>
|
||||
<van-field required v-model="userInfo.companyYear" type="number" label="工作年龄" placeholder="请输入工龄" :rules="[{ required: true, message: '请输入工龄' }]"/>
|
||||
<van-field required v-model="userInfo.incomeWan" type="number" label="月薪" placeholder="请输入月薪" :rules="[{ required: true, message: '请输入月薪' }]"/>
|
||||
<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-model="userInfo.companyAddress"
|
||||
is-link
|
||||
required
|
||||
readonly
|
||||
:rules="[{ required: true, message: '请选择省市区' }]"
|
||||
label="单位地址"
|
||||
placeholder="请选择省市区"
|
||||
: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-popup v-model:show="companyAddressShow" round position="bottom">
|
||||
<van-cascader
|
||||
v-model="cascaderValue"
|
||||
title="请选择所在地区"
|
||||
: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="详细地址" placeholder="请输入详细地址" :rules="[{ required: true, message: '请输入详细地址' }]"/>
|
||||
<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
|
||||
@@ -39,38 +80,58 @@
|
||||
is-link
|
||||
required
|
||||
readonly
|
||||
:rules="[{ required: true, message: '请选择所在地区' }]"
|
||||
label="现居住地址"
|
||||
placeholder="请选择所在地区"
|
||||
: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-popup v-model:show="customerAddressShow" round position="bottom">
|
||||
<van-cascader
|
||||
v-model="customerAddressValue"
|
||||
title="请选择所在地区"
|
||||
: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="详细地址" placeholder="例：东北石油大学启智寝室楼2A603" :rules="[{ required: true, message: '请输入详细地址' }]"/>
|
||||
<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="姓名" placeholder="请输入真实姓名" :rules="[{ required: true, message: '请输入真实姓名' }]"/>
|
||||
<van-field required v-model="userInfo.kinsfolkPhone" type="tel" label="手机号码" placeholder="请输入手机号码" :rules="[{ required: true, message: '请输入手机号码' }]"/>
|
||||
<van-field
|
||||
required
|
||||
v-model="userInfo.kinsfolkName"
|
||||
type="text"
|
||||
:label="$t('userInfo.name')"
|
||||
:placeholder="$t('userInfo.enter') + $t('userInfo.name')"
|
||||
:rules="[{ required: true, message: $t('userInfo.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: '请选择关系' }]"
|
||||
:rules="[{ required: true, message: $t('app.select') + $t('userInfo.relationship') }]"
|
||||
required
|
||||
readonly
|
||||
label="关系"
|
||||
placeholder="请选择关系"
|
||||
:label="$t('userInfo.relationship')"
|
||||
:placeholder="$t('app.select') + $t('userInfo.relationship')"
|
||||
@click="showPicker = true"
|
||||
/>
|
||||
<van-popup v-model:show="showPicker" round position="bottom">
|
||||
@@ -93,29 +154,31 @@
|
||||
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 {showToast} from "vant";
|
||||
import {useRouter} from "vue-router";
|
||||
import {useCascaderAreaData} from "@vant/area-data";
|
||||
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 companyAddressShow = ref(false)
|
||||
const customerAddressShow = ref(false)
|
||||
const { t } = useI18n()
|
||||
|
||||
const companyAddressShow = ref(false);
|
||||
const customerAddressShow = ref(false);
|
||||
const cascaderValue = ref('');
|
||||
const customerAddressValue = ref('');
|
||||
const columns = [
|
||||
{ text: '父母', value: '1' },
|
||||
{ text: '配偶', value: '2' },
|
||||
{ text: '子女', value: '3' },
|
||||
{ text: '祖父母', value: '4' },
|
||||
{ text: t('userInfo.parents'), value: '1' },
|
||||
{ text: t('userInfo.spouse'), value: '2' },
|
||||
{ text: t('userInfo.children'), value: '3' },
|
||||
{ text: t('userInfo.grandparents'), value: '4' }
|
||||
];
|
||||
const userInfo = reactive({
|
||||
backCardNum: '',
|
||||
@@ -139,28 +202,28 @@ const userInfo = reactive({
|
||||
kinsfolkRef: '',
|
||||
kinsfolkRefText: '',
|
||||
realName: ''
|
||||
})
|
||||
});
|
||||
const _getUserInfo = () => {
|
||||
getUserInfo().then(res => {
|
||||
resetData(userInfo, res)
|
||||
resetData(userInfo, res);
|
||||
columns.forEach(c => {
|
||||
if (c.value == userInfo.kinsfolkRef) {
|
||||
userInfo.kinsfolkRefText = c.text
|
||||
userInfo.kinsfolkRefText = c.text;
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const borrowPage = {
|
||||
pageNum: 0,
|
||||
pageSize: 3,
|
||||
}
|
||||
const useEdit = ref(true)
|
||||
pageSize: 3
|
||||
};
|
||||
const useEdit = ref(true);
|
||||
const _getBorrowPage = () => {
|
||||
getBorrowPage(borrowPage).then(res => {
|
||||
useEdit.value = res.length === 0;
|
||||
})
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const options = useCascaderAreaData();
|
||||
const onFinish = ({ selectedOptions }) => {
|
||||
@@ -183,21 +246,18 @@ const onConfirm = ({ selectedOptions }) => {
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const router = useRouter()
|
||||
const router = useRouter();
|
||||
const saveUserInfoBtn = (values) => {
|
||||
updateCustomerCard(userInfo).then(res => {
|
||||
router.back()
|
||||
})
|
||||
}
|
||||
|
||||
router.back();
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
_getUserInfo()
|
||||
_getBorrowPage()
|
||||
})
|
||||
_getUserInfo();
|
||||
_getBorrowPage();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
@@ -215,6 +275,7 @@ onMounted(() => {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
box-shadow: 0 0 1vw 0px #e0e0e0;
|
||||
|
||||
&-content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
@@ -249,6 +310,7 @@ onMounted(() => {
|
||||
color: #738aa4;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
//
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user