一、WeirdOwl-WebCat表单使用-内部使用

属性

属性	类型	default	描述
formEls	Object	[]	表单配置formEls
formTpl	String	template1	目前只有两种模板 template1登录类似 template2预约确认类似
formStatus	Boolean	true	表单状态 false 按钮样式 btn-disable 表单永远不可提交
isCaptchaImg	Number	-1	为了减少循环次数，由使用者配置短信表单formEls配置下标，未配置则证明该表单没有短信
isCaptchaMsg	Number	-1	为了减少循环次数，由使用者配置短信表单formEls配置下标，未配置则证明该表单没有短信eg3
sendNow	Boolean	true	是否已进入页面就发起获取短信流程eg3
apis	Object	null	表单提交请求apis

1.formEls

属性	类型	default	支持elType范围	描述
elType	String	input		目前支持的表单类型：input button captchaMsg captchaImg
type	String	text	input button captchaMsg captchaImg	input 的类型： text number idcard digit
placeholder	String		input button captchaMsg captchaImg	输入框为空时占位符
required	Bollean	true	input button captchaMsg captchaImg	是否必填
isCaptchaMsg	Number	-1	captchaMsg	为了减少循环次数，由使用者配置短信表单formEls配置下标，未配置则证明该表单没有短信eg3
getPhoneIndex	Number		captchaMsg	获取手机号的表单序号或者从app.globalData.mobile中获取eg3
noticePos	String		captchaMsg	top：eg2；bottom必填eg3
describe	String		input	最右边的描述
label	String		input captchaMsg captchaImg	标签
value	Stirng		input button captchaMsg captchaImg	默认值
disabled	Bollean	false	input button captchaMsg captchaImg	表单是否可输入, true: 非空以及其他均不校验，不影响按钮的状态
hidden	Bollean	false	input button captchaMsg captchaImg	表单是否影藏
verifyType	Stirng		input button captchaMsg captchaImg	校验类型（默认是表单name）=》用于扩展已实现的校验：phone idcard password chinese verifyCode
maxlength	Number	140	input button captchaMsg captchaImg	最大输入长度，设置为 -1 的时候不限制最大长度
name	String	el	input button captchaMsg captchaImg
voiceAPI	Object	{url: data:{}}	captchaMsg	语音api
msgAPI	Object	{url: data:{}}	captchaMsg	短信api
formType	String	submit	button	提交类型 =》目前只支持submiteg2
submit	Function		button	提交函数，在发送请求的前一步调用eg2
success	Function		button	请求成功eg2
fail	Function		button	请求失败
complete	Function		button	暂未实现

2.apis

apis: {
      url: 'checkPhone',
      data:{}
    }

使用方式

"usingComponents": {
    "wo-form": "/miniprogram_npm/wo-form/index",
  }

Example


<!--index.wxml-->
<wo-nav progress = "{{true}}" noBorder = "{{true}}"></wo-nav>
<view class="container">
    <lable class="f48 w630 label-text mb40">您的手机号是？</lable>
    <wo-form form-els ="{{formEls}}" apis="{{apis}}"></wo-form>
    <view class="colA f24 modify w630">原手机号码丢失？选择<text bindtap="goModify" class="blue">申请人工审核</text>修改手机号码</view>
</view>

const app = getApp()
Page({
  data: {
    formEls: [
      {
        placeholder: '请输入手机号注册或登录',
        name: 'mobile',
        type: 'number',
        verifyType: 'phone',
        value: '',
        maxlength: 13
      },
      {
        elType: 'button',
        success: (res, data) => {
          app.globalData.mobile = data.mobile
          if (res.exist) {
            wx.navigateTo({
              url: `/pages/password/password?${app.serialize({ mobile: data.mobile, identityStatus: res.identityStatus })}`
            })
          } else {
            wx.navigateTo({
              url: `/pages/register/register?${app.serialize({ mobile: data.mobile })}`
            })
          }
        }
      }
    ],
    apis: {
      url: 'checkPhone'
    }
  },
  goModify() {
    wx.navigateTo({
      url: '/pages/modifyphone/modifyphone'
    })
  },
  error(e) {
    console.log(e.detail)
  }
})

<!--index.wxml-->
<wo-nav progress = "{{true}}" percent = "{{67}}" no-border = "{{true}}"></wo-nav>
<view class="f48 mlr60 h1">注册</view>
<wo-form is-captcha-msg="{{0}}" form-els = "{{formEls}}" apis = "{{apis}}"></wo-form>
<view class="check-cont w630 f24 colA {{onCheck ? 'on-class' : 'off-class'}}">
    <view class="chechtab" bindtap="_check"><image wx:if="{{onCheck}}"  src="/images/icon/[email protected]" /></view>
    我已阅读并同意<text class="blue"  bindtap = "_contract">《优其鼎服务协议》</text>
</view>
const app = getApp()
const verifyCode = '验证码'
const pass = '密码(6~16位英文、数字或字符)'
Page({
  data: {
    formEls: [{
      elType: 'captchaMsg',
      name: 'verifyCode',
      noticePos： ‘top’，
      type: 'number',
      maxlength: 6,
      placeholder: verifyCode,
      label: verifyCode
    },
    {
      name: 'password',
      password: true,
      placeholder: pass,
      label: pass,
      maxlength: 16
    },
    {
      elType: 'button',
      submit(data, next) {
        // 如果没有勾选注册协议
        if (!this.data.onCheck) {
          app.toast('请同意优其鼎服务协议')
          return false
        }
        data.mobile = app.globalData.mobile
        next(data)  // 当调用next 时才会发送配置的请求，并且合并data数据
        return false
      },
      success: () => {
        wx.redirectTo({
          url: '/pages/realname/realname'
        })
      }
    }],
    onCheck: true, // 是否选择协议
    apis: {
      url: 'register'
    }
  },
  _contract() {
    wx.navigateTo({
      url: '/pages/agree/agree'
    })
  },
  _check() {
    this.setData({ onCheck: app.globalData.onCheck })
  },
  error(e) {
    console.log(e.detail)
  }
})

<!--index.wxml-->
<wo-nav progress = "{{false}}" noBorder = "{{false}}" title="申请人工审核修改手机号"></wo-nav>
<view class="container">
    <wo-form form-tpl = "template2" form-els ="{{formEls}}" is-captcha-msg = "3" send-now = "{{false}}" apis="{{apis}}">
        <view class="idcard-img-cont col3 f28" slot="idNumQUERYafter">
            <view class="idcard">
                <text>手持身份证头像面照片</text>
                <view class="idcard-cont">
                    <image class="idcard-pos" src="/images/img/[email protected]" />
                    <image class="del-icon" src="/images/icon/[email protected]" />
                </view>
            </view>
            <view class="idcard">
                <text>身份证国徽面</text>
                <view class="idcard-cont">
                    <image class="idcard-pos" src="/images/img/[email protected]" />
                    <image class="del-icon" src="/images/icon/[email protected]" />
                </view>
            </view>
        </view>
        <view class="idcard-img-des colA f24 center" slot="mobilebefore">请上传彩色、完整证件图片，支持jpg、png、bmp格式</view>
    </wo-form>
</view>
/*
 * @Author: WeirdOwl
 * @Date: 2018-10-23 10:40:55
 * @Last Modified by: WeirdOwl
 * @Last Modified time: 2018-10-29 20:38:41
 */
const app = getApp()
Page({
  data: {
    formEls: [
      {
        placeholder: '请输入姓名',
        name: 'realNameQUERY',
        verifyType: 'chinese',
        type: 'text',
        label: '姓名',
        value: '',
        maxlength: 13
      },
      {
        placeholder: '请输入身份证号',
        name: 'idNumQUERY',
        verifyType: 'idcard',
        type: 'idcard',
        label: '身份证号',
        value: '',
        maxlength: 18
      },
      {
        placeholder: '请输入手机号',
        name: 'mobile',
        verifyType: 'phone',
        type: 'number',
        label: '新手机号',
        value: '',
        maxlength: 13
      },
      {
        placeholder: '请输入验证码',
        elType: 'captchaMsg',
        name: 'verifyCode',
        getPhoneIndex: 2,
        noticePos: 'bottom',
        verifyType: 'phone',
        type: 'number',
        label: '验证码',
        value: '',
        maxlength: 6
      },
      {
        elType: 'button',
        value: '提交',
        success: (res, data) => {
          app.globalData.mobile = data.mobile
          if (res.exist) {
            wx.navigateTo({
              url: `/pages/password/password?${app.serialize({ mobile: data.mobile, identityStatus: res.identityStatus })}`
            })
          } else {
            wx.navigateTo({
              url: `/pages/register/register?${app.serialize({ mobile: data.mobile })}`
            })
          }
        }
      }
    ],
    apis: {
      url: 'checkPhone'
    }
  },
  goModify() {
    wx.navigateTo({
      url: `/pages/register/register?${app.serialize({ mobile: data.mobile })}`
    })
  },
  error(e) {
    console.log(e.detail)
  }
})

一、WeirdOwl-WebCat表单使用-内部使用

猜你喜欢