uview图片上传多张

<template>
  <view class="contain-box">
    <u-navbar
      :title="title"
      :is-back="true"
      back-icon-color="#fff"
      :background="background"
      :border-bottom="false"
      title-color="#fff"
    >
    </u-navbar>
    <view class="form-box">
      <u-form :model="form" ref="uForm" labelWidth="200" :toast="false">
        <!-- 报修区域类型 -->
        <u-form-item label="报修区域类型" prop="areaType" borderBottom required>
          <u-input
            v-model="areaTypeLabel"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择区域类型"
            @click="showTypeFun"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-select :list="listType" v-model="showType" @confirm="getShowtype">
        </u-select>
        <!-- 报修类型 -->
        <u-form-item label="报修类型" prop="warrantyType" borderBottom required>
          <u-input
            v-model="warrantyLabel"
            disabled
            disabledColor="#ffffff"
            placeholder="请选择类型"
            @click="showTypeFun2"
          ></u-input>
          <u-icon slot="right" name="arrow-right"></u-icon>
        </u-form-item>
        <u-select
          :list="warrantyTypeList"
          v-model="showType2"
          @confirm="getShowtype2"
          label-name="text"
          value-name="value"
        >
        </u-select>
        <u-form-item label="报修名称" prop="name" required>
          <u-input v-model="form.name" placeholder="请输入名称" />
        </u-form-item>
        <u-form-item label="报修位置" prop="reportAdress" required>
          <u-input v-model="form.reportAdress" placeholder="请输入位置" />
        </u-form-item>
        <u-form-item label="事件描述" prop="description" required>
          <u-input
            v-model="form.description"
            type="textarea"
            height="150"
            :auto-height="true"
            :border="true"
            placeholder="请输入内容（最多200字）"
            :maxlength="200"
          />
        </u-form-item>
        <u-form-item label="现场图片">
          <u-upload
            :max-count="9"
            upload-text="最多9张"
            @on-success="successUpload"
            @on-change="changeUpload"
            @on-error="errorUpload"
            @on-remove="removeUpload"
            :action="action_"
            :file-list="fileList"
            :max-size="5 * 1024 * 1024"
            :header="header_"
          >
          </u-upload>
        </u-form-item>
        <u-form-item label="联系人" prop="reportUserName" required>
          <u-input
            v-model="form.reportUserName"
            placeholder="请输入"
            disabled
          />
        </u-form-item>
        <u-form-item label="联系方式" prop="reportUserMobile" required>
          <u-input v-model="form.reportUserMobile" placeholder="请输入" />
        </u-form-item>
        <u-form-item label="所属企业" prop="reportEnterName" required>
          <u-input v-model="form.reportEnterName" placeholder="请输入" />
        </u-form-item>
      </u-form>
      <u-button @click="submit('uForm')" type="primary" style="margin-top: 15px"
        >提交工单</u-button
      >
    </view>
  </view>
</template>

<script>
import API from "@/api/api.js";
import dev from "@/api/dev.js";
import { listDictItems, workOrderinsert } from "@/api/repairs.js";
let urlAPI = require("@/static/config.js");
export default {
  data() {
    const validdaterateprop = (rule, value, callback) => {
      if (value <= 0) {
        callback(new Error("请评分"));
      } else {
        callback();
      }
    };
    return {
      title: "报修添加",
      background: {
        backgroundColor: "#558eff",
      },
      showType: false,
      showType2: false,
      listType: [
        {
          label: "室内",
          value: "1",
        },
        {
          label: "室外",
          value: "2",
        },
      ],
      areaTypeLabel: "",
      warrantyLabel: "",
      form: {
        areaType: "",
        warrantyType: "",
        name: "",
        reportAdress: "",
        description: "",
        imgPath: "",
        //取 uni.getStorageSync();
        reportUserName: uni.getStorageSync("userName_u"),
        reportUserMobile: uni.getStorageSync("contactWay_u"),
        reportEnterName:
          uni.getStorageSync("enterpriseName_u") &&
          uni.getStorageSync("enterpriseName_u") !== "null"
            ? uni.getStorageSync("enterpriseName_u")
            : "",
        reportEnterId: uni.getStorageSync("enterpriseId_u"),
        reportUserId: uni.getStorageSync("id_u"),
        id: "",
      },
      rules: {
        areaType: [
          {
            required: true,
            message: "请选择报修类型",
            trigger: ["blur", "change"],
          },
        ],
        warrantyType: [
          {
            required: true,
            message: "请选择",
            trigger: ["blur", "change"],
          },
        ],
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: ["blur", "change"],
          },
        ],
        reportAdress: [
          {
            required: true,
            message: "请输入位置",
            trigger: ["blur", "change"],
          },
        ],
        reportUserName: [
          {
            required: true,
            message: "请输入名称",
            trigger: ["blur", "change"],
          },
        ],
        reportUserMobile: [
          {
            required: true,
            message: "请输入联系方式",
            trigger: ["blur", "change"],
          },
        ],
        reportEnterName: [
          {
            required: true,
            message: "请输入所属企业",
            trigger: ["blur", "change"],
          },
        ],
        description: [
          {
            required: true,
            max: 200,
            message: "请输入描述",
            trigger: ["blur"],
          },
        ],
      },
      // action_: dev.imgUrl + "/sdfs/file/uploadImage",
      action_: urlAPI.baseUrl_applet + "/sdfs/file/uploadImage",
      header_: {
        "author-token-key": uni.getStorageSync("token"),
      },
      fileList: [],
      warrantyTypeList: [],
    };
  },
  onLoad(e) {
    console.log("e", e);
    this._listDictItems();
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    if (this.$refs.uForm) {
      this.$refs.uForm.setRules(this.rules);
    }
    console.log("process.env.NODE_ENV", process.env.NODE_ENV);
  },
  watch: {},
  methods: {
    //报修类型
    _listDictItems() {
      listDictItems().then((res) => {
        if (res.data.code == "00000") {
          this.warrantyTypeList = res.data.data || [];
        }
      });
    },
    showTypeFun() {
      this.showType = true;
    },
    getShowtype(e) {
      this.form.areaType = e[0].value;
      this.areaTypeLabel = e[0].label;
    },
    showTypeFun2(e) {
      this.showType2 = true;
    },
    getShowtype2(e) {
      this.form.warrantyType = e[0].value;
      this.warrantyLabel = e[0].label;
    },
    submit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          const params = Object.assign({}, this.form);
          workOrderinsert(params).then((res) => {
            if (res.data.code == "00000") {
              uni.showToast({
                title: "添加成功",
              });
              setTimeout(() => {
                uni.navigateTo({
                  url: `/pages/repairs/repairs`,
                });
              }, 1000);
            } else {
              uni.showToast({
                icon: "none",
                title: res.data.desc,
              });
            }
          });
        } else {
          console.log("验证失败");
        }
      });
    },
    successUpload(data, index, lists, name) {
      if (data.code == "00000") {
        let imgarr = [];
        imgarr = lists.map((item) => {
          return item.response.data;
        });
        this.form.imgPath = imgarr.join(",");
      }
    },
    changeUpload(res, index, lists, name) {
      // console.log("changeUpload", lists);
    },
    errorUpload(res, index, lists, name) {},
    removeUpload(index, lists, name) {
      let imgarr = [];
      imgarr = lists.map((item) => {
        return item.response.data;
      });
      this.form.imgPath = imgarr.join(",");
    },
  },
};
</script>

<style lang="scss">
.contain-box {
  height: 100vh;
  background-color: #fff;
  .form-box {
    padding: 18px;
  }
}
</style>