boss/pages/main/index/artificial_payment_add.vue

<template>
  <div class="mainContainer">

    <div class="pform-head">
      <h3>申请人工充值</h3>
    </div>

    <div class="pform-body">
      <el-form label-width="100px">
        <el-form-item label="充值用户" prop="uid">
          <el-input v-model="form.uid" placeholder="请输入用户uid"></el-input>
        </el-form-item>
        <el-form-item label="订单名称" prop="productTitle">
          <el-input v-model="form.product_title" placeholder="充值+渠道，入充值工行，充值PayPal，充值数字货币"></el-input>
        </el-form-item>
        <el-form-item label="订单金额" prop="price">
          <el-input v-model="form.price" placeholder="请输入实际金额"></el-input>
        </el-form-item>
        <el-form-item label="打款证明">
          <span style="position: relative;width: 148px;height: 148px;overflow: hidden;display: inline-block">
          <el-upload
            action="/upload_image"
            list-type="picture-card"
            :file-list="form.banner_img_list"
            :on-remove="del_banner_img"
            :on-success="handleBannerSuccess"
          >
           <i class="el-icon-plus"></i>
          </el-upload>
           </span>
        </el-form-item>
        <el-form-item label="备注" prop="price">
          <el-input v-model="form.remark" placeholder="备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" style="margin-top: 60px;">
        <el-button type="primary" style="margin-left: 100px;" @click="submitForm">保存并提交审核</el-button>
      </div>
    </div>

  </div>
</template>

<script>

  export default {
    data() {
      return {
        form:{
          product_title:'',
          uid:'',
          price:'',
          remark:'',
          private_comment:'',
          banner_img_list:[],
        }
      }
    },
    computed: {

    },
    mounted() {

    },
    methods: {
      handleChange(e) {
        const files = e.target.files;
        if (!files) {
          return;
        }
        const file = files[0];
        console.log(file);
        const formData = new FormData();
        formData.append("file", file);
        formData.append("original_filename", file.name);
        console.log(formData);
        this.$axios
          .$post("/upload_image", formData, {
            headers: { "Content-Type": "multipart/form-data" }
          })
          .then(res => {
            console.log(res);
            const index = this.myQuillEditor.selection.savedRange.index;
            this.myQuillEditor.insertEmbed(index, "image", res.filename);
          });
      },
      async submitForm() {
        var data = this.form;
        var res = await this.$post("/api/admin/order/createPayment", data);
        if (res && res.status === 1) {
          this.form = {
            product_title:'',
            uid:'',
            price:'',
            private_comment:'',
          }
          this.$message.success('提交保存成功')
        }
      },
      async handleBannerSuccess(res, file){
        let filename=res.filename;
        var info={"name": "1.png", "url": filename};
        this.form.banner_img_list.push(info);
        this.form.private_comment = filename;
      },
      async del_banner_img(){
        this.form.banner_img_list=[];
        this.form.private_comment ="";
      },
    }
  };
</script>

<style>
  .pform-head{
    text-align: center;
  }
  .pform-body{
    margin: 20px 200px;
  }
  .editer {
    width: 100%;
    height: 400px;
    padding: 0 0 50px;
  }

</style>