效果图:
代码:
<template>
<view class="container">
<view class="form">
<uni-forms ref="form" :modelValue="formData" :rules="rules" label-width="80px" label-align="left"
:border="true">
<uni-forms-item label="姓名" name="name">
<uni-easyinput v-model="formData.name" type='text' placeholder="请输入您的姓名" maxlength='13'
:inputBorder="false" @input='userInputOne' />
</uni-forms-item>
<uni-forms-item label="手机号码" name="mobile">
<uni-easyinput v-model="formData.mobile" type='number' placeholder="请输入您的手机号码" maxlength='11'
:inputBorder="false" @input='userInputTow' />
</uni-forms-item>
<uni-forms-item label="单位名称" name="company">
<uni-easyinput v-model="formData.company" type='text' placeholder="请输入您的单位名称" maxlength='20'
:inputBorder="false" @input='userInputThree' />
</uni-forms-item>
<uni-forms-item label="所在地区" name="location">
<uni-data-picker placeholder="请选择您所在的地区" popup-title="请选择所在地区" :localdata="areaDate"
@change="onchange">
</uni-data-picker>
</uni-forms-item>
</uni-forms>
</view>
<view class="btn-wrap">
<button class="btnSubmit" @click="finDCertificate">提交</button>
</view>
</view>
</template>
<script>
import {
certificate,
area,
trainRegister
} from '@/api/user'
export default {
data() {
return {
formData: {
name: '',
mobile: '',
company: '',
location: '',
},
areaDate: [],
}
},
onLoad() {
let that = this
// // // 引入json文件
// let dnf = require('../../utils/city-china.json')
// this.areaDate = dnf
area().then((res) => {
const {
data
} = res
// console.log(data);
that.areaDate = data
})
},
methods: {
onchange(e) {
// console.log('onchange:', e);
const {
detail
} = e
const res = detail.value
const adress = res[0].text + res[1].text + res[2].text
this.formData.location = adress
},
userInputOne(e) {
const {
name,
} = this.formData
if (name != '') {
// let reg = /^[\u4e00-\u9fa5]{1,13}$/
const reg = /^(?:[\u4e00-\u9fa5·]{1,13})$/
const result = reg.test(name)
if (result == false) {
this.$nextTick(() => {
this.formData.name = name.replace(/[^\u4e00-\u9fa5]/g, '')
})
}
}
},
userInputTow(e) {
const {
mobile,
} = this.formData
if (mobile != '') {
let reg = /^1[0-9]{0,10}$/
const result = reg.test(mobile)
if (result == false) {
this.$nextTick(() => {
this.formData.mobile = mobile.replace(/\D/g,'')
})
}.0
}
},
userInputThree(e) {
const {
company,
} = this.formData
if (company != '') {
// let reg = /^[\u4e00-\u9fa5]{1,30}$/
const reg = /^(?:[\u4e00-\u9fa5·]{1,30})$/
const result = reg.test(company)
if (result == false) {
this.$nextTick(() => {
this.formData.company = company.replace(/[^\u4e00-\u9fa5]/g,'')
})
}
}
},
finDCertificate() {
const {
name,
mobile,
company,
location
} = this.formData
if (!name) {
uni.showToast({
title: '请输入您的姓名',
icon: 'none',
duration: 2000
})
return
}
if (!mobile) {
uni.showToast({
title: '请输入您的手机号码',
icon: 'none',
duration: 2000
})
return
}
if (!company) {
uni.showToast({
title: '请输入您的单位名称',
icon: 'none',
duration: 2000
})
return
}
if (!location) {
uni.showToast({
title: '请选择您所在的地区',
icon: 'none',
duration: 2000
})
return
}
const result = trainRegister({
name: this.formData.name,
mobile: this.formData.mobile,
company: this.formData.company,
location: this.formData.location
}).then((res) => {
if (res.code == 1) {
uni.reLaunch({
url: '/subpkg/applySuccess/applySuccess'
});
}
}).catch((err) => {
uni.showToast({
title: '提交失败',
icon: 'none',
duration: 2000
})
return
})
},
}
}
</script>
<style scoped lang="scss">
.container {
height: 100%;
position: relative;
.form {
padding: 0 30rpx;
padding-right: 0;
background-color: #ffffff;
border-top: 1px solid #ebebeb;
// border-bottom: 1px solid #ebebeb;
}
.btn-wrap {
position: absolute;
font-size: 36rpx;
bottom: 10%;
width: 100%;
}
.btnSubmit {
color: #ffffff;
width: 690rpx;
border-radius: 10rpx;
font-size: 36rpx;
background-color: #df3535;
}
/deep/ .uni-forms-item--border:nth-child(1){
border: none !important;
}
/deep/.is-first-border {
border: none;
}
/deep/ .uni-forms-item--border {
border-top: 1px solid #ebebeb;
}
/deep/ .uni-easyinput__content-input {
text-align: right;
font-size: 28rpx !important;
// color: #999999;
}
/deep/ .uni-easyinput__content {
padding-right: 31rpx;
}
/deep/ .input-value-border {
border: none;
}
/deep/ .input-value {
display: flex;
padding-right: 31rpx;
}
/deep/ .selected-area {
display: flex;
justify-content: flex-end;
}
/deep/ .input-arrow {
width: 8px;
height: 8px;
border-left: 1.3px solid #6f6f6f;
border-bottom: 1.3px solid #6f6f6f;
margin-top: 9px;
transform: rotate(270deg);
}
/deep/ .selected-list {
justify-content: flex-end;
.text-color {
font-size: 28rpx !important;
// color: #999999;
}
}
/deep/ .uni-icons {
display: none;
}
}
</style>