sooka_consult_uniapp/pages/cooperative/addCooperative.vue

<template>
  <uni-section title="提交前请仔细核对信息，提交后不可修改！" type="line">
    <view class="example">
      <!-- 自定义表单校验 -->
      <uni-forms ref="customForm" :rules="rules" :modelValue="customFormData" label-align="center">
        <uni-forms-item label="名 称" required name="name" label-width="125" label-align="center" >
          <uni-easyinput v-model="customFormData.name" placeholder="请输入供销社名称" />
        </uni-forms-item>
        <uni-forms-item label="地 址" required name="address" label-width="95" label-align="center" >
          <uni-easyinput v-model="customFormData.address" placeholder="请输入供销社地址" />
        </uni-forms-item>
        <uni-forms-item label="电 话" required name="chargePhone" label-width="95" label-align="center" >
          <uni-easyinput v-model="customFormData.chargePhone" placeholder="请输入负责人电话" />
        </uni-forms-item>
        <uni-forms-item label="负责人" required name="chargePeople" label-width="95" label-align="center" >
          <uni-easyinput v-model="customFormData.chargePeople" placeholder="请输入负责人姓名" />
        </uni-forms-item>
        <uni-forms-item label="图 片" required name="url" label-width="95">
          <upload :imgArr="imageList" :fileSize="1" :limit="3" @updateImg="updateImg"/>
        </uni-forms-item>
      </uni-forms>
      <button type="primary" @click="submit('customForm')">提交</button>
    </view>
  </uni-section>
</template>

<script>
import { addCooperative } from "@/api/cooperative/cooperative";
import upload from '../../components/upload/index.vue'
export default {
  components: {
    upload
  },
  data() {
    return {
      // 基础表单数据
      baseFormData: {
        name: '',
        address:'',
        chargePeople:'',
        chargePhone:'',
        imgUrl:'',
      },
      // 校验规则
      rules: {
        name: {
          rules: [{
            required: true,
            errorMessage: '供销社名称不能为空'
          }]
        },
        address: {
          rules: [{
            required: true,
            errorMessage: '供销社地址不能为空'
          }]
        },
        chargePeople: {
          rules: [{
            required: true,
            errorMessage: '负责人姓名不能为空'
          }]
        },
        chargePhone: {
          rules: [
            {
              required: true,
              errorMessage: '负责人电话不能为空'
            },
            {
              pattern:'^1[3456789]\\d{9}$',
              errorMessage: '负责人电话不合法'
            }
          ]
        },
        imgUrlList: {
          rules: [{
            required: true,
            errorMessage: '图片不能为空'
          }]
        },
      },
      imageList: [],
      customFormData:{}
    }
  },
  onLoad() {},
  onReady() {
    // 设置自定义表单校验规则，必须在节点渲染完毕后执行
    this.$refs.customForm.setRules(this.rules)
  },
  created() {

  },
  methods: {
    //转换为下拉选列表
    formatOptions(data) {
      return data.map(item => ({
        value: item.id,
        text: item.productName,
        children: item.children ? this.formatOptions(item.children) : null,
      }));
    },
    submit(ref) {
      this.$refs[ref].validate().then(res => {
        if (res) {
          this.customFormData.imgUrl = this.imageList.join(',')
          addCooperative(this.customFormData).then(response => {
            this.$modal.msgSuccess('提交成功');
            this.customFormData = {...this.baseFormData};
            uni.navigateTo({
              url: '../cooperative/cooperative'
            });
          }).catch(err => {
            console.log('err', err);
          })
        }
      })
    },
    updateImg(imgList) {
      this.imageList = imgList;
    }
  }
}
</script>

<style lang="scss">

.example {
  padding: 15px;
  background-color: #fff;
}

.segmented-control {
  margin-bottom: 15px;
}

.button-group {
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.form-item {
  display: flex;
  align-items: center;
}

.button {
  display: flex;
  align-items: center;
  height: 35px;
  margin-left: 10px;
}
</style>