165 lines
4.2 KiB
Vue
165 lines
4.2 KiB
Vue
<template>
|
||
<view class="page">
|
||
<uv-form ref="form" :model="userInfo" :rules="rules" labelPosition="left" labelWidth="auto">
|
||
<uv-form-item borderBottom label="电话:" prop="userInfo.phone">
|
||
<uv-input v-model="userInfo.phone" border="none"></uv-input>
|
||
</uv-form-item>
|
||
<uv-form-item borderBottom label="地址:" prop="userInfo.location">
|
||
<uv-input v-model="userInfo.location" border="none"></uv-input>
|
||
</uv-form-item>
|
||
<uv-form-item borderBottom label="主体名称:" prop="userInfo.name">
|
||
<uv-input v-model="userInfo.name" border="none"></uv-input>
|
||
</uv-form-item>
|
||
<uv-form-item borderBottom label="统一社会信用代码:" prop="userInfo.code">
|
||
<uv-input v-model="userInfo.code" border="none"></uv-input>
|
||
</uv-form-item>
|
||
<uv-form-item label="营业执照" prop="pics">
|
||
<uv-upload
|
||
:fileList="fileList"
|
||
:maxCount="9"
|
||
:previewFullImage="true"
|
||
multiple
|
||
name="1"
|
||
@afterRead="afterRead"
|
||
@delete="deletePic"
|
||
></uv-upload>
|
||
</uv-form-item>
|
||
<uv-button
|
||
customStyle="margin-top: 10px"
|
||
text="提交"
|
||
type="primary"
|
||
@click="submit"
|
||
></uv-button>
|
||
<uv-button customStyle="margin-top: 10px" text="重置" type="error" @click="reset"></uv-button>
|
||
</uv-form>
|
||
<uv-action-sheet
|
||
ref="sexSelect"
|
||
:actions="actions"
|
||
description="如果选择保密会报错"
|
||
title="请选择性别"
|
||
@select="sexSelect"
|
||
>
|
||
</uv-action-sheet>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
userInfo: {
|
||
name: '',
|
||
sex: '',
|
||
code: '',
|
||
phone: '',
|
||
location: '',
|
||
businessLicense: '',
|
||
pics: [],
|
||
},
|
||
actions: [
|
||
{
|
||
name: '男',
|
||
},
|
||
{
|
||
name: '女',
|
||
},
|
||
{
|
||
name: '保密',
|
||
},
|
||
],
|
||
rules: {
|
||
'userInfo.name': {
|
||
type: 'string',
|
||
required: true,
|
||
message: '请填写姓名',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
'userInfo.sex': {
|
||
type: 'string',
|
||
max: 1,
|
||
required: true,
|
||
message: '请选择男或女',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
pics: {
|
||
type: 'array',
|
||
required: true,
|
||
message: '请上传照片',
|
||
trigger: ['blur', 'change'],
|
||
},
|
||
},
|
||
radio: '',
|
||
switchVal: false,
|
||
}
|
||
},
|
||
methods: {
|
||
// 提交
|
||
submit() {
|
||
// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
|
||
this.$refs.form
|
||
.validate()
|
||
.then(res => {
|
||
uni.showToast({
|
||
icon: 'success',
|
||
title: '校验通过',
|
||
})
|
||
})
|
||
.catch(errors => {
|
||
uni.showToast({
|
||
icon: 'error',
|
||
title: '校验失败',
|
||
})
|
||
})
|
||
},
|
||
// 重置
|
||
reset() {
|
||
this.$refs.form.resetFields()
|
||
this.$refs.form.clearValidate()
|
||
},
|
||
// 性别选择
|
||
showSexSelect() {
|
||
this.$refs.sexSelect.open()
|
||
this.hideKeyboard()
|
||
},
|
||
// 性别选择返回结果
|
||
sexSelect(e) {
|
||
this.userInfo.sex = e.name
|
||
// 对部分表单字段进行校验
|
||
this.$refs.form.validateField('userInfo.sex', err => {
|
||
// 处理错误后的逻辑
|
||
})
|
||
},
|
||
hideKeyboard() {
|
||
uni.hideKeyboard()
|
||
},
|
||
afterRead(e) {
|
||
// 这里直接模拟上传成功，这里的真实逻辑参考uv-upload组件示例
|
||
setTimeout(() => {
|
||
this.fileList = [
|
||
{
|
||
url: 'https://via.placeholder.com/100x100.png/3c9cff',
|
||
},
|
||
{
|
||
url: 'https://via.placeholder.com/100x100.png/ff0000',
|
||
},
|
||
]
|
||
this.userInfo.pics = this.fileList
|
||
this.$refs.form.validateField('pics', err => {
|
||
// 处理错误后的逻辑
|
||
})
|
||
})
|
||
},
|
||
deletePic(e) {
|
||
this.fileList.splice(e.index, 1)
|
||
this.$refs.form.validateField('pics', err => {
|
||
// 处理错误后的逻辑
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.page {
|
||
padding: 10rpx 30rpx;
|
||
}
|
||
</style>
|