post-ui/src/views/sets/addcollections.vue

<template>
  <div>
    <div class="addfrom">
      <div class="addcenter">
        <span>有点问题先别试</span>
        <el-form
          ref="pubform"
          label-width="100px"
          :style="{ border: '1px soild #ccc' }"
          :model="pubform"
          :rules="rules"
        >
          <el-form-item label="藏品名称" prop="collectionTitle">
            <el-input v-model="pubform.collectionTitle"></el-input>
          </el-form-item>

          <el-form-item label="售卖时间" >
            <el-date-picker
            type="datetime"
            placeholder="起始时间"
            v-model="pubform.showStart"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
          <el-date-picker
            type="datetime"
            placeholder="结束时间"
            v-model="pubform.showEnd"
            value-format="yyyy-MM-dd HH:mm: ss"
          >
          </el-date-picker>
          </el-form-item>

          <el-form-item label="藏品价格" prop="colPrice">
            <el-input v-model="pubform.colPrice"></el-input>
          </el-form-item>

          <el-form-item label="藏品状态" prop="remark">
            <el-input v-model="pubform.remark"></el-input>
          </el-form-item>

          <el-form-item label="藏品数量" prop="colCount">
            <el-input v-model="pubform.colCount"></el-input>
          </el-form-item>

          <el-form-item label="藏品图片" prop="colImage">
            <el-upload
              class="avatar-uploader"
              action="http://39.105.160.25:10996"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="this.pubform.colImage"
                :src="this.pubform.colImage"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>

          <el-form-item label="备注" prop="colStory">
            <el-input
              type="textarea"
              :rows="4"
              v-model="pubform.colStory"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitpub">提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { addcollections,upload } from "../../api/collection/collection";
export default {
  name: "addPublisher",
  // props: ["issuerID"],
  data() {
    return {
      imageUrl: "",
      fileList: [], //上传的文件列表
      pubform: {
        collectionTitle: "",
        colPrice: "",
        remark: "",
        colImage: "",
        colStory: "",
        showEnd:'',
        showStart:'',
        colCount:''
      },

      rules: {
        pname: [
          { required: true, message: "请输入发行方名称", trigger: "blur" },
        ],
      },
    };
  },


  methods: {
    handleAvatarSuccess() {
      console.log("上传成功");
    },
    beforeAvatarUpload(file) {
      let formData = new FormData();
      formData.append("file", file);
      upload(formData).then((res) => {
        console.log(res);
        this.pubform.colImage = res.url;
      });
    },

    submitpub() {
      let valid = this.$refs.pubform.validate().catch((err) => false);
      if (!valid) {
        this.$notify({
          title: "警告",
          message: "请填写内容",
          type: "warning",
        });
      }

      addcollections(this.pubform).then(() => {
        this.pubform.collectionTitle = "";
        this.pubform.showStart = "";
        this.pubform.colPrice = "";
        this.pubform.remark = "";
        this.pubform.colImage = "";
        this.pubform.colStory = "";
        this.pubform.showEnd = "";
        this.pubform.colCount= ""
      
      });
      this.$notify({
        title: "成功",
        message: "创建消息成功",
        type: "success",
      });
    },
  },
};
</script>

<style>
.addfrom {
  margin: auto;
  width: 70%;
  border: solid 2px #fcf6f6;
  margin-top: 40px;
  border-radius: 4px;
}
.addcenter {
  margin: auto;
  width: 60%;
  margin-top: 40px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 100%;
  display: block;
}
</style>