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.

571 lines
14 KiB

<template>
<view class="evan-form-show">
<view class="bottom-border">
<view class="left-border"><text class="mgl10">项目信息</text></view>
</view>
<uni-forms :value="formData" ref="form" validate-trigger="bind" err-show-type="toast">
<uni-forms-item name="code" required label="客户编号">
<uni-easyinput type="text" :inputBorder="true" v-model="enterpriseForm.code" placeholder="请输入客户编号"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="name" required label="客户名称">
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.name" placeholder="客户名称"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="time" label="法人代表">
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.name" placeholder="法人代表"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="phone" required label="联系电话">
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="联系电话"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="phone" required label="申请额度">
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="申请额度"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="phone" required label="业务类别">
<uni-easyinput disabled type="text" :inputBorder="true" v-model="enterpriseForm.phone" placeholder="业务类别"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="phone" required label="参加评委">
<uni-easyinput type="textarea" v-model="enterpriseForm.remarks" placeholder="参加评委"></uni-easyinput>
</uni-forms-item>
<uni-forms-item required name="enGuaranteeMeasures" label="反担保措施">
<uni-data-checkbox mode="list" v-model="enterpriseFrom.enGuaranteeMeasures" :localdata="easuresList"></uni-data-checkbox>
</uni-forms-item>
<uni-forms-item name="name" required label="反担保措施描述">
<uni-easyinput type="textarea" v-model="enterpriseForm.remarks" placeholder="反担保措施描述"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="name" required label="担保部A角审核意见">
<uni-easyinput type="textarea" v-model="enterpriseForm.remarks" placeholder="担保部A角审核意见"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="name" required label="资产管理部审核意见">
<uni-easyinput type="textarea" v-model="enterpriseForm.remarks" placeholder="资产管理部审核意见"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="name" required label="信息服务部审核意见">
<uni-easyinput type="textarea" v-model="enterpriseForm.remarks" placeholder="信息服务部审核意见"></uni-easyinput>
</uni-forms-item>
<uni-forms-item name="name" required label="法规监督部审核意见">
<uni-easyinput type="textarea" v-model="enterpriseForm.remarks" placeholder="法规监督部审核意见"></uni-easyinput>
</uni-forms-item>
</uni-forms>
<view class="bottom-border">
<view class="left-border"><text class="mgl10">审核</text></view>
</view>
<uni-forms :value="formData" ref="form" validate-trigger="bind" err-show-type="toast">
<uni-forms-item name="name" required label="审核意见">
<uni-easyinput type="textarea" v-model="enterpriseForm.remarks" placeholder="审核意见"></uni-easyinput>
</uni-forms-item>
</uni-forms>
<view class="foot-btn btn-rig pad-bt">
<button plain class="mini-btn round plain-btn" type="primary" size="mini" @click="goto('/pages/application/application')">返回</button>
<button class="mini-btn round suc-btn" type="primary" size="mini" @click="goto('/pages/application/application')">提交</button>
</view>
<timeline></timeline>
</view>
</template>
<script>
import utils from '@/components/evan-form/utils.js'
const CONTACT_INFO={
name:'',
phone:'',
duty:''
}
export default {
data() {
return {
cusTypeList: [{
text: '个人',
value: '0'
},
{
text: '企业',
value: '1'
}],//客户类型列表
cusType: '1',
EvaluationList: [{
text: '房产',
value: '0',
InputValue: ''
},
{
text: '车辆',
value: '1',
InputValue: ''
},
{
text: '设备',
value: '2',
InputValue: ''
},
{
text: '其他',
value: '3',
InputValue: ''
}],//评估价值列表
employeeMsg: [{
name: '个人',
value: '3'
},
{
name: '企业',
value: '4'
}],//客户经理列表
genderList: [{
text: '男',
value: 1
},
{
text: '女',
value: 2
}],//性别列表
easuresList: [{
text: '第三方保证',
value: 1
},
{
text: '抵押',
value: 2
},
{
text: '个人无限责任连带',
value: 3
},
{
text: '质押',
value: 4
}],
imgList: [],
maritalList: ['未婚','已婚','离异','再婚'],//婚姻状况列表
educationList: ['本科','大专','高职','中专','其他'],//学历列表
isExistList: [{
text: '否',
value: 0
},
{
text: '是',
value: 1
}],//是否存在关联人列表
manager: '',
enterpriseFrom: {
maritalStatus: 0,//婚姻状况
gender: 1,//性别
education: 0, //学历
legalGender: 1, //关联人性别
isExistRelated: 0, //是否存在关联人
enGuaranteeMeasures: ''
},//个人form
enterpriseForm: {},//企业form
hideRequiredAsterisk: false,
// 表单的内容必须初始化
info: {
name: '',
email: '',
desc: '',
phone: '',
sex: '',
},
rules: {
cusType: {
required: true,
message: '请选择客户'
},
code: {
required: true,
message: '请选择客户编号'
},
manager: {
required: true,
message: '请选择客户经理'
},
name: {
required: true,
message: '请输入姓名'
},
email: [{
required: true,
message: '请输入邮箱'
}, {
type: 'email',
message: '邮箱格式不正确'
}],
desc: [{
required: true,
message: '请输入简介'
},
{
min: 10,
max: 30,
message: '简介必须在10到30个字之间'
}
],
phone: [{
required: true,
message: '请输入手机号'
},
{
validator: (rule, value, callback) => {
// 注意这里如果用的是methods里的isMobilePhone将不生效
if (this.$utils.isMobilePhone(value)) {
callback()
} else {
callback(new Error('手机号格式不正确'))
}
}
},
// 或者这样也是可以的
// {
// validator: this.isMobile
// }
],
sex: {
required: true,
message: '请选择性别'
}
},
info2:{
name:'',
email:'',
phone:''
},
rules2:{
name: {
required: true,
message: '请输入姓名'
},
email: [{
required: true,
message: '请输入邮箱'
}, {
type: 'email',
message: '邮箱格式不正确'
}],
phone:[{
required: true,
message: '请输入手机号'
},
{
pattern:'^1\\d{10}$', // 注意这里由于小程序的缘故正则表达式需要通过string的方式传递并且去除两边的斜杠,中间的斜杠变成两个斜杠
message:'手机号格式不正确'
}
]
},
dynamicInfo:{
test1:'',
test2:'',
list:[{...CONTACT_INFO}]
},
dynamicRules:{
test1:[{required:true,message:'请输入rule规则字段'},{min:4,max:8,message:'必须4-8位'}]
},
showRuleParam:true,
showRequiredParam:true,
mobileRules:[{required:true,message:'请输入手机号'},{pattern:'^1\\d{10}$',message:'手机号格式不正确'}] // 注意这里由于小程序的缘故正则表达式需要通过string的方式传递并且去除两边的斜杠,中间的斜杠变成两个斜杠
}
},
mounted() {
// 这里必须放在mounted中,不然h5,支付宝小程序等会找不到this.$refs.form
this.$refs.form.setRules(this.rules)
},
methods: {
//客户类型选择
cusChange(e) {
this.cusType = e.detail.value
},
//性别选择
genderChange(e) {
this.personageForm.gender = e.detail.value
},
//婚姻状况选择
maritalChange(e) {
this.personageForm.maritalStatus = e.detail.value
},
//学历选择
educationChange(e) {
this.personageForm.education = e.detail.value
},
//关联人性别选择
legalGenderChange(e) {
this.personageForm.legalGender = e.detail.value
},
isExistChange(e) {
this.personageForm.isExistRelated = e.detail.value
},
bindPickerChange: function(e) {
// this.cusType = e.target.value
},
save() {
this.$refs.form.validate((res) => {
if (res) {
uni.showToast({
title: '验证通过'
})
}
})
},
promiseSave(){
this.$refs.form.validate().then((res)=>{
uni.showToast({
title: '验证通过'
})
}).catch(()=>{
})
},
async asyncSave(){
try{
const result=await this.$refs.form.validate()
if(result){
uni.showToast({
title: '验证通过'
})
}
} catch(e){
console.log(e)
}
},
saveForm2(){
this.$refs.form2.validate((res) => {
if (res) {
uni.showToast({
title: '验证通过'
})
}
})
},
utilsSave() {
utils.validate(this.info, this.rules, (res, errors) => {
if (res) {
uni.showToast({
title: '验证通过'
})
}
})
},
validateSingle() {
this.$refs.form.validateField('email', (res) => {
if (res) {
uni.showToast({
title: '验证通过'
})
}
})
},
validateMultiple() {
this.$refs.form.validateField(['email', 'phone'], (res) => {
if (res) {
uni.showToast({
title: '验证通过'
})
}
})
},
isMobilePhone() {
const reg = /^1\d{10}$/
if (reg.test(value)) {
return true
}
return false
},
isMobile(rule, value, callback) {
if (this.$utils.isMobilePhone(value)) {
callback()
} else {
callback(new Error('手机号格式不正确'))
}
},
sexChange(e) {
this.info.sex = e.detail.value
},
addContact(){
this.dynamicInfo.list.push({...CONTACT_INFO})
},
deleteContact(index){
this.dynamicInfo.list.splice(index,1)
},
toggleRuleParam(){
this.showRuleParam=!this.showRuleParam
},
toggleRequiredParam(){
this.showRequiredParam=!this.showRequiredParam
},
dynamicSave(){
this.$refs.dynamicForm.validate((res)=>{
if(res){
uni.showToast({
title: '验证通过'
})
}
})
},
ViewImage(e) {
uni.previewImage({
urls: this.imgList,
current: e.currentTarget.dataset.url
});
},
DelImg(e) {
uni.showModal({
title: '提示',
content: '确定要删除该文件吗?',
cancelText: '取消',
confirmText: '确定',
success: res => {
if (res.confirm) {
this.imgList.splice(e.currentTarget.dataset.index, 1)
}
}
})
},
ChooseImage() {
uni.chooseImage({
count: 4, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: (res) => {
if (this.imgList.length != 0) {
this.imgList = this.imgList.concat(res.tempFilePaths)
} else {
this.imgList = res.tempFilePaths
}
}
});
},
}
}
</script>
<style lang="scss" scoped>
.evan-form-show {
padding: 0 30rpx;
background-color: #fff;
.form-input {
font-size: 28rpx;
color: #333;
text-align: right;
width: 100%;
box-sizing: border-box;
height: 60rpx;
&.textarea{
height: 240rpx;
padding: 24rpx 0;
text-align: left;
}
}
.form-input-placeholder {
font-size: 28rpx;
color: #999;
}
&__button {
width: 100%;
height: 88rpx;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
font-size: 36rpx;
color: #fff;
margin-top: 20rpx;
background-color: #2D87D5;
&::before,
&::after {
border: none;
}
}
.customize-form-item {
&__label {
font-size: 28rpx;
color: #333;
margin-bottom: 16rpx;
}
&__radio {
display: flex;
align-items: center;
margin-bottom: 16rpx;
&__text {
font-size: 28rpx;
color: #333;
}
}
}
}
.label-color{
color: #00B9FF;
}
// 必填
.is-required {
color: $uni-color-error;
}
.checklist-group {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
flex-wrap: wrap;
}
.checklist-box {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
margin: 10rpx 0;
margin-right: 50rpx;
}
.checklist-content {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.checklist-text {
font-size: 28rpx;
color: #333;
margin-left: 10rpx;
transition: color 0.2s;
}
.checkbox__inner {
flex-shrink: 0;
position: relative;
border: 2rpx solid #DCDFE6;
border-radius: 4rpx;
box-sizing: border-box;
width: 32rpx;
height: 32rpx;
background-color: #fff;
z-index: 1;
transition: border-color 0.1s;
}
.checkbox__inner-icon {
border: 2rpx solid #fff;
border-left: 0;
border-top: 0;
height: 16rpx;
left: 10rpx;
position: absolute;
top: 2rpx;
width: 6rpx;
opacity: 0;
transition: transform .2s;
transform-origin: center;
transform: rotate(40deg) scaleY(0.4);
}
</style>