Skip to content

U
uview-ui
Commit 967a4cc4 authored by wlxuqu's avatar wlxuqu
Browse files
Options

1. 修正键盘样式 

2. 优化form-item样式
parent 7d0c07f9
Hide whitespace changes
Inline Side-by-side
Showing with 48 additions and 380 deletions
pages/componentsC/test/index.vue
View file @ 967a4cc4
<template> <template>
<view class="pageMain"> <view class="">
<u-radio-group v-model="value" @change="radioGroupChange">
<view class="title">完善个人信息</view> <u-radio
<view class="info">为了给您精准的推荐，请完善以下信息 @change="radioChange"
</view> v-for="(item, index) in list" :key="index"
<view class="my-form"> :name="item.name"
<u-form :model="form" ref="formRef"> :disabled="item.disabled"
>
<view class="my-form-item" @tap="selectSchoolTap"> {{item.name}}
<view class="border padding position"> </u-radio>
<u-icon name="dingwei" custom-prefix="iconfont" color="#A0A0A0"></u-icon> </u-radio-group>
<view class="collegeSelectValue">{{selectSchool.orgName}}{{selectSchool.regionName?('（'+selectSchool.regionName+'）'):''}}</view>
<u-icon name="jiantou8" custom-prefix="iconfont" color="#A0A0A0"></u-icon>
</view>
</view>
<view v-for="(formItem,i) in needKeyArr">
<view class="my-form-item" v-if="formItem.name=='name'">
<u-form-item prop="name" :label-style="{display:'none'}" :border-bottom="false">
<view class="border padding">
<u-input class="my-input" v-model="form.name" placeholder="请输入姓名" />
</view>
</u-form-item>
</view>
<view class="my-form-item" v-else-if="formItem.name=='idNumber'">
<u-form-item prop="idNumber" label-width="0" :border-bottom="false">
<view class="border padding">
<u-input v-model="form.idNumber" placeholder="请输入身份证" />
</view>
</u-form-item>
</view>
<view class="my-form-item" v-else-if="formItem.name=='password'">
<u-form-item prop="password" label-width="0" :border-bottom="false">
<view class="border padding">
<u-input v-model="form.password" placeholder="请输入密码" />
</view>
</u-form-item>
</view>
<view class="my-form-item" v-else-if="formItem.name=='idNumberEncryption'">
<u-form-item prop="idNumberEncryption" label-width="0" :border-bottom="false">
<view class="border padding">
<u-input v-model="form.idNumberEncryption" placeholder="请输入身份证后六位" />
</view>
</u-form-item>
</view>
<view class="my-form-item" v-else-if="formItem.name=='jobNumber'">
<u-form-item prop="jobNumber" label-width="0" :border-bottom="false">
<view class="border padding">
<u-input v-model="form.jobNumber" placeholder="请输入学工号" />
</view>
</u-form-item>
</view>
<view class="my-form-item" v-else-if="formItem.name=='sex'">
<u-radio-group v-model="form.sex">
<u-radio v-for="(item, index) in sexList" :key="index" :name="item.name" :disabled="item.disabled" shape="circle"
@change="radioChange">
{{item.label}}
</u-radio>
</u-radio-group>
</view>
</view>
</u-form>
</view>
<view class="submitButton" @tap="submitTap">
<text class="buttonText">确定</text>
</view>
<!-- 提交新建校区模态框 -->
<u-modal title="完善该校区信息" content="确认以上信息无误" v-model="collegeNewBuildMotalShow" @confirm="subNewBuildCollegeForm"
:show-cancel-button="true"></u-modal>
<view class="">
</view>
</view> </view>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
value: '男', list: [
// 性别列表 {
sexList: [{ name: 1,
label: '男', disabled: false
name: 'MALE',
disabled: false
},
{
label: '女',
name: 'FEMALE',
disabled: false
}
],
//新建校区模态框显示
collegeNewBuildMotalShow: false,
// 新建校区传递过来的参数
selectSchool: {
orgId: 0,
orgName: "",
regionId: 0,
regionName: ""
},
// 需要提供的值数组
needKeyArr: [
],
// 表单数据
form: {
name: '',
password: '',
idNumber: '',
idNumberEncryption: '',
jobNumber: '',
sex: 'MALE'
}, },
// 表单规则 {
formRules: { name: 2,
name: [{ disabled: false
required: true,
message: '请输入真实姓名',
trigger: ['blur']
}, {
pattern: /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{1,20}$/,
message: '请输入中文',
trigger: ['blur']
}],
phone: [{
required: true,
message: '请输入手机号',
trigger: ['blur']
}, {
pattern: /^1[23456789]\d{9}$/,
message: '请输入正确手机号',
trigger: ['blur']
}],
password: [{
required: true,
message: '请输入密码',
trigger: ['blur']
}, ],
// todo 身份证号验证
idNumber: [{
required: true,
message: '请输入身份证号',
trigger: ['blur']
}, {
pattern: /^(\d{18,18}|\d{17,17}x|\d{17,17}X)$/,
message: '请输入正确身份证号码',
trigger: ['blur']
}],
// todo 加密身份证=====
idNumberEncryption: [{
required: true,
message: '请输入身份证号后六位',
trigger: ['blur']
}, {
pattern: /^(\d{6,6}|(\d{5}x))$/i,
message: '请输入正确身份证号码后六位',
trigger: ['blur']
}],
jobNumber: [{
required: true,
message: '请输入学工号',
trigger: ['blur']
}]
}, },
countdownTime: 0, {
} name: 3,
}, disabled: false
methods: {
// 学校选择点击时
selectSchoolTap() {
uni.navigateBack({})
},
// 获取验证码
getphonecode() {
if (this.countdownTime > 0) {
return;
}
this.countdownTime = 5
let intervalId = setInterval(() => {
if (this.countdownTime <= 0) {
clearTimeout(intervalId)
return;
}
this.countdownTime -= 1;
}, 1000)
},
submitTap() {
if (!this.needKeyArr || this.needKeyArr.length == 0) {
this.collegeNewBuildMotalShow = true;
return;
} }
this.$refs.formRef.validate((v) => { ],
if (v) { // u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
this.collegeNewBuildMotalShow = true; value: 1,
} };
}) },
}, methods: {
// 点击模态框确定按钮提交新建校区表单信息 // 选中某个单选框时，由radio时触发
subNewBuildCollegeForm() { radioChange(e) {
uni.showToast({ // console.log(e);
title: '点击了确定',
icon: 'none'
})
return;
try {
let newObj = {}
this.needKeyArr.map(v => v.name).forEach(v => {
newObj[v] = this.form[v]
})
let school = {
orgId: parseInt(this.selectSchool.orgId),
orgRegionId: parseInt(this.selectSchool.regionId),
}
this.$u.$api.purchaser_perfection({ ...school,
...newObj
}).then(d => {
uni.reLaunch({
url: '/pages/home/index'
})
})
} catch (e) {
uni.showToast({
title: '有异常：' + JSON.stringify(e),
icon: 'none'
})
}
},
// 单选按钮点击时触发
radioChange(e) {
this.form.sex = e
}
}, },
onLoad(params) { // 选中任一radio时，由radio-group触发
if (params) { radioGroupChange(e) {
this.selectSchool = Object.keys(params).reduce((obj, curr) => { // console.log(e);
if (!params[curr] || params[curr] == 'null') {
obj[curr] = ''
} else {
obj[curr] = params[curr]
}
return obj
}, {})
this.$u.$api.gate_orgCheckField({
orgId: params.orgId
}).then(d => {
if (!d.find(v => v.name == 'name')) {
d.push({
name: 'name',
notes: '姓名'
})
}
this.needKeyArr = d;
})
}
},
onReady() {
// 官方要求，设置表单验证规则
if (this.$refs.formRef) {
this.$refs.formRef.setRules(this.formRules);
}
},
}
</script>
<style lang="scss" scoped>
// 本页主体
.pageMain {
padding: 65rpx;
min-height: 100vh;
box-sizing: border-box;
// background-image: url(@/static/common/img/userLogin.jpg);
}
// 大标题
.title {
font-weight: bold;
margin-top: 80rpx;
font-size: 52rpx;
color: #2A2A2A;
line-height: 52px;
}
// 标题下描述信息
.info {
font-size: 28rpx;
color: #6A6A6A;
margin-bottom: 100rpx;
}
// 表单信息
.my-form {
.my-form-item {
// 添加边框
.border {
border: 2rpx solid #E2E2E2;
border-radius: 12rpx;
display: flex;
width: 100%;
box-sizing: border-box;
.padding {
max-width: 330rpx;
}
}
// 添加边距
.padding {
padding: 20rpx 50rpx;
}
.my-input {
width: 100%;
}
// 获取短信验证码
.getphonecode {
min-width: 100rpx;
border-left: 2rpx solid #E2E2E2;
padding: 20rpx 20rpx;
color: #6A6A6A;
}
.getphonecode.hasTime {
color: #558BD3;
}
// 错误警告信息
// .u-form-item__message {
// font-size: 28rpx;
// margin-left: 50rpx !important;
// }
}
}
// 选择学校按钮行
.position {
display: flex;
align-items: center;
line-height: 70rpx;
// 定位、下拉-字体图标
.iconfont {
// color: #A0A0A0;
// padding-right: 20rpx;
}
// 文本区域
.collegeSelectValue {
flex: 1;
padding-left: 20rpx;
}
}
// 确定按钮
.submitButton {
background-color: #4990EE;
border: 1rpx solid #AEAEAE;
border-radius: 12rpx;
width: 100%;
padding: 25rpx 0;
text-align: center;
margin-top: 70rpx;
// 按钮文本
.buttonText {
font-size: 32rpx;
color: #FFFFFF;
} }
} }
</style> };
</script>
\ No newline at end of file
uview-ui/components/u-car-keyboard/u-car-keyboard.vue
View file @ 967a4cc4
...@@ -197,6 +197,7 @@ ...@@ -197,6 +197,7 @@
border-radius: 8rpx; border-radius: 8rpx;
box-shadow: 0 2rpx 0rpx #888992; box-shadow: 0 2rpx 0rpx #888992;
font-weight: 500; font-weight: 500;
justify-content: center;
} }
.u-carinput-hover { .u-carinput-hover {
......
uview-ui/components/u-form-item/u-form-item.vue
View file @ 967a4cc4
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
marginBottom: elLabelPosition == 'left' ? 0 : '10rpx', marginBottom: elLabelPosition == 'left' ? 0 : '10rpx',
}"> }">
<!-- 为了块对齐 --> <!-- 为了块对齐 -->
<view class="u-form-item--left__content"> <view class="u-form-item--left__content" v-if="required || leftIcon || label">
<!-- nvue不支持伪元素before --> <!-- nvue不支持伪元素before -->
<text v-if="required" class="u-form-item--left__content--required">*</text> <text v-if="required" class="u-form-item--left__content--required">*</text>
<view class="u-form-item--left__content__icon" v-if="leftIcon"> <view class="u-form-item--left__content__icon" v-if="leftIcon">
......
uview-ui/components/u-search/u-search.vue
View file @ 967a4cc4
...@@ -249,14 +249,18 @@ export default { ...@@ -249,14 +249,18 @@ export default {
// 确定搜索 // 确定搜索
search(e) { search(e) {
this.$emit('search', e.detail.value); this.$emit('search', e.detail.value);
// 收起键盘 try{
uni.hideKeyboard(); // 收起键盘
uni.hideKeyboard();
}catch(e){}
}, },
// 点击右边自定义按钮的事件 // 点击右边自定义按钮的事件
custom() { custom() {
this.$emit('custom', this.keyword); this.$emit('custom', this.keyword);
// 收起键盘 try{
uni.hideKeyboard(); // 收起键盘
uni.hideKeyboard();
}catch(e){}
}, },
// 获取焦点 // 获取焦点
getFocus() { getFocus() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment