init
This commit is contained in:
dute7liang
261
src/views/my/userInfo2/index.vue
Normal file
261
src/views/my/userInfo2/index.vue
Normal file
@@ -0,0 +1,261 @@
|
||||
<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">填写真实有效的信息，审核才会通过哦~</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: '请输入月薪' }]"/>
|
||||
<van-field
|
||||
v-model="userInfo.companyAddress"
|
||||
is-link
|
||||
required
|
||||
readonly
|
||||
:rules="[{ required: true, message: '请选择省市区' }]"
|
||||
label="单位地址"
|
||||
placeholder="请选择省市区"
|
||||
@click="companyAddressShow = true"
|
||||
/>
|
||||
<van-popup v-model:show="companyAddressShow" round position="bottom">
|
||||
<van-cascader
|
||||
v-model="cascaderValue"
|
||||
title="请选择所在地区"
|
||||
: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
|
||||
v-model="userInfo.customerAddress"
|
||||
is-link
|
||||
required
|
||||
readonly
|
||||
:rules="[{ required: true, message: '请选择所在地区' }]"
|
||||
label="现居住地址"
|
||||
placeholder="请选择所在地区"
|
||||
@click="customerAddressShow = true"
|
||||
/>
|
||||
<van-popup v-model:show="customerAddressShow" round position="bottom">
|
||||
<van-cascader
|
||||
v-model="customerAddressValue"
|
||||
title="请选择所在地区"
|
||||
: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: '请输入详细地址' }]"/>
|
||||
</div>
|
||||
|
||||
<div class="action">
|
||||
<view class="tt">
|
||||
直系亲属联系人
|
||||
</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
|
||||
v-model="userInfo.kinsfolkRefText"
|
||||
is-link
|
||||
:rules="[{ required: true, message: '请选择关系' }]"
|
||||
required
|
||||
readonly
|
||||
label="关系"
|
||||
placeholder="请选择关系"
|
||||
@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"
|
||||
>
|
||||
提交
|
||||
</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";
|
||||
|
||||
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' },
|
||||
];
|
||||
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>
|
||||
Reference in New Issue
Block a user