OfficeApp/subpkg/newArchives/newArchives.vue

<template>
  <view class="">
    <view class="card">
      <u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm">
        <view class="item">
          <view class="title">基本信息</view>
          <u-form-item labelWidth="auto" label="户主姓名" required prop="name" borderBottom>
            <u--input v-model="formData.name" placeholder="请输入姓名"></u--input>
          </u-form-item>
          <u-form-item label="性别" required prop="sex" borderBottom>
            <u-radio-group v-model="formData.sex" style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'男'},{value:0,label:'女'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <u-form-item label="年龄" required prop="age" borderBottom>
            <u--input v-model="formData.age" placeholder="请输入年龄"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" label="身份证号" required prop="id_card" borderBottom>
            <u--input v-model="formData.id_card" placeholder="请输入身份证号" type="idcard"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" label="联系方式" required prop="phone" borderBottom>
            <u--input v-model="formData.phone" placeholder="请输入手机号" type="number"></u--input>
          </u-form-item>
        </view>
        <view class="item">
          <view class="title">地区信息</view>
          <districtSelector ref="districtSelectorRef"></districtSelector>
          <u-form-item labelWidth="auto" label="详细地址" required prop="address" borderBottom>
            <u--input v-model="formData.address" placeholder="请输入详细地址"></u--input>
          </u-form-item>
          <u-form-item labelWidth="auto" label="汽车是否能到家" required prop="residents.infant" borderBottom>
            <u-radio-group v-model="formData.highway" style="margin: 16rpx;">
              <u-radio :customStyle="{marginRight: '16px'}"
                v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
                :name="item.value">
              </u-radio>
            </u-radio-group>
          </u-form-item>
          <block value="智能手机">
            <u-form-item labelWidth="auto" label="是否使用智能手机" required prop="formData.infant" borderBottom>
              <u-radio-group v-model="formData.smart_phone" style="margin: 16rpx;">
                <u-radio :customStyle="{marginRight: '16px'}"
                  v-for="(item, index) in [{value:1,label:'是'},{value:0,label:'否'}]" :key="index" :label="item.label"
                  :name="item.value">
                </u-radio>
              </u-radio-group>
            </u-form-item>
            <block v-if="formData.smart_phone>0">
              <u-form-item labelWidth="auto" label="微信号" required prop="formData.infantList.age" borderBottom>
                <u--input v-model="formData.wechat" placeholder="请输入微信号"></u--input>
              </u-form-item>
            </block>
          </block>
        </view>
        <view class="item">
          <view class="title">常住人口</view>
          <residents ref="residentsRef"></residents>
        </view>
        <view class="item">
          <view class="title">种养殖</view>
          <breeding ref="breedingRef"></breeding>
        </view>
      </u--form>
      <button @click="addArchives" type="primary" class="btn">创建</button>
    </view>
  </view>
</template>

<script>
  import { Toast } from "../../libs/uniApi"
  import { informationAdd } from "@/api/information.js"
  import districtSelector from "@/components/districtSelector/districtSelector.vue" //地区选择器
  import residents from "@/components/newArchives/residents.vue" // 常住人口
  import breeding from "@/components/newArchives/breeding.vue" // 种养殖
  export default {
    components:{districtSelector, residents, breeding},
    data() {
      return {
        formData: {
          id_card: '',
          sex: '',
          name: '',
          phone: '', //电话
          highway: '',//汽车是否能到家
          smart_phone: '',//是否使用智能手机
          wechat: '', //微信号
          address: '',//家庭地址
          age: '',//年龄
        },
        rules: {
          phone: {
            required: true,
            pattern: /^(1[3456789]\d{9})$/,
            message: '请输入正确的手机号码',
            trigger: ['change', 'blur']
          },
          id_card: {
            required: true,
            pattern: /^\d{17}[\dX]$|^\d{15}[\dX]$/,
            message: '请输入正确的身份证号',
            trigger: ['change', 'blur']
          },
          sex: {
            type: 'number',
            max: 1,
            required: true,
            message: '请选择男或女',
            trigger: ['blur', 'change']
          },
          name: {
            type: 'string',
            required: true,
            message: '姓名不能为空',
            trigger: ['change', 'blur']
          },
        },
      }
    },
    onLoad() {},
    onShow() {},
    methods: {
      // 新增档案
      async addArchives() {
        console.log(await this.$refs.districtSelectorRef.validate());
        this.$refs.uForm.validate().then(async (e) => {
          if (e) {
            // uni.showLoading()
            // let res = await informationAdd(this.formData);
            // uni.hideLoading()
            // uni.showToast({
            //   icon: "none",
            //   title: "添加成功",
            //   success: () => {
            //     setTimeout(() => {
            //       uni.navigateBack()
            //     }, 1000)
            //   }
            // })
          }
        })

      },
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .card {
    background-color: #fff;
    margin: 28rpx;
    padding: 28rpx;
    border-radius: 14rpx;

    .item {
      margin-top: 30rpx;

      &:nth-child(1) {
        margin-top: 0;
      }

      .title {
        font-weight: 500;
        font-size: 34rpx;

        &::before {
          width: 8rpx;
          height: 26rpx;
          border-radius: 4rpx;
          background-color: #3175f9;
          content: "";
          display: inline-block;
          margin-right: 8rpx;
        }
      }
    }

    .btn {
      margin-top: 32rpx;
      // margin-bottom: 40rpx;
      width: 100%;
      height: 84rpx;
      background: $theme-oa-color;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      color: #fff;
      line-height: 80rpx;
      text-align: center;
    }
  }
</style>