jinhuaihua-h5/pages/index/fillForm.vue

<template>
  <view class="content">
    <view class="info">
      <div class="cro">
        <!-- :error-type="['border-bottom']" -->
        <u-form :model="form" ref="uForm" label-width="200" :label-style="{ color: '#333333', fontSize: '34rpx', fontWeight: 'bold' }">
          <view style="text-align: center;color: #333;font-size: 36rpx;font-weight: bold;">添加收货地址</view>
          <u-form-item label="收货人" prop="name"><u-input v-model="form.name" placeholder="请填写收货人姓名" /></u-form-item>
          <u-form-item label="手机号码" prop="phone"><u-input placeholder="请填写收货人手机号" v-model="form.phone" type="number" maxlength="11"></u-input></u-form-item>
          <u-form-item label="验证码" prop="code">
            <u-input placeholder="请输入验证码" v-model="form.code" type="text"></u-input>
            <view slot="right" @click="getCode" style="color: #F09B38;">{{ codeTips }}</view>
          </u-form-item>
          <u-form-item label="单位"><u-input v-model="form.sex" type="text" placeholder="请填写单位名称" /></u-form-item>
          <u-form-item label="选择地区"><u-input v-model="form.sex2" type="select" placeholder="请选择省市区" /></u-form-item>
          <u-form-item label="详细地址" prop="sex3"><u-input v-model="form.sex3" type="text" placeholder="街道楼栋门牌号" /></u-form-item>
        </u-form>
        <u-button @click="submit">提交</u-button>
        <u-picker mode="region" v-model="show" :area-code="arrCode" @confirm="change"></u-picker>
        <u-verification-code seconds="60" ref="uCode" @change="codeChange"></u-verification-code>
      </div>
    </view>
  </view>
</template>

<script>
import { getInfo } from '@/common/api.js'
export default {
  data() {
    return {
      form: {
        name: '',
        intro: '',
        phone: '',
        sex: '',
        sex3: ''
      },
      show: false,
      val: '',
      arrCode: [],
      radio: '',
      switchVal: false,
      codeTips: '',
      rules: {
        name: [
          {
            required: true,
            message: '请输入姓名',
            // 可以单个或者同时写两个触发验证方式
            trigger: ['change', 'blur']
          }
        ],
        intro: [
          {
            required: true,
            min: 5,
            message: '简介不能少于5个字',
            trigger: 'blur'
          }
        ],
        sex3: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          console.log('验证通过')
        } else {
          console.log('验证失败')
        }
      })
    },
    codeChange(text) {
      this.codeTips = text
    },
    // 获取验证码
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码',
          mask: true
        })
        setTimeout(() => {
          uni.hideLoading()
          // 这里此提示会被this.start()方法中的提示覆盖
          this.$u.toast('验证码已发送')
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start()
        }, 2000)
      } else {
        this.$u.toast('倒计时结束后再发送')
      }
    },
    change(e) {
      this.val = e.province.label + e.city.label + e.area.label
      this.arrCode = [e.province.value, e.city.value, e.area.value]
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  }
}
</script>

<style lang="scss" scoped>
@import '/static/css/quill.core.css';
@import '/static/css/quill.snow.css';
.content {
  height: 100vh;
  background: url(../../static/bgi.png) no-repeat;
  background-size: 100% 100%;
  padding: 52rpx 25rpx 34rpx;
  .info {
    background-color: #ffffff;
    border-radius: 15px;
    .cro {
      padding: 40rpx;
      // /deep/.uni-input-placeholder,
      /deep/.uni-input-input {
        color: #666 !important;
        font-size: 30rpx;
      }
    }
  }
}
</style>