Signed-off-by: wayne <waynexu17@126.com>

pages/main/index/artificial_order.vue

@@ -24,7 +24,7 @@
             <span class="order-status" v-else-if="form.status === '400'">订单支付中</span>
             <span class="order-status" v-else-if="form.status === '401'">订单支付成功</span>
             <span class="order-status" v-else-if="form.status === '402'">订单支付失败</span>
-            <span class="order-status" v-else>未生成</span> -->
+            <span class="order-status" v-else>未生成</span>-->
           </div>
         </el-form-item>
 
@@ -39,7 +39,11 @@
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="订单类型" prop="productType">
-              <el-select v-model="form.productTypeName" placeholder="请选择订单类型" @change="productTypeChange">
+              <el-select
+                v-model="form.productTypeName"
+                placeholder="请选择订单类型"
+                @change="productTypeChange"
+              >
                 <el-option
                   v-for="item in productTypes"
                   :key="item.id"
@@ -51,7 +55,11 @@
           </el-col>
           <el-col :span="12">
             <el-form-item label="交易类型" prop="orderType">
-              <el-select v-model="form.orderTypeName" placeholder="请选择交易类型" @change="orderTypeChange">
+              <el-select
+                v-model="form.orderTypeName"
+                placeholder="请选择交易类型"
+                @change="orderTypeChange"
+              >
                 <el-option
                   v-for="item in orderTypes"
                   :key="item.id"
@@ -66,7 +74,7 @@
         <el-row :gutter="20">
           <el-col :span="12">
             <el-form-item label="订单金额" prop="price">
-              <el-input v-model.number="form.price" placeholder="请输入实际金额"></el-input>
+              <el-input v-model="form.price" placeholder="请输入实际金额"></el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -121,15 +129,11 @@
         </el-form-item>
 
         <el-form-item label="内部备注" prop="privateComment">
-          <quill-editor
-            ref="quillEditor"
-            class="editer"
-            :options="editorOption"
-            v-model="form.privateComment"
-          ></quill-editor>
+          <quill-editor :options="editorOption" v-model="form.privateComment" ref="myQuillEditor" class="editer"></quill-editor>
+          <input type="file" hidden accept=".jpg, .png" ref="fileBtn" @change="handleChange" />
         </el-form-item>
       </el-card>
-    
+
       <el-form-item>
         <el-button class="save-btn" type="primary" @click="saveSubmit()">保存</el-button>
         <el-button class="cancel-btn" @click="cancelSubmit()">取消</el-button>
@@ -144,32 +148,34 @@
 </template>
 
 <script>
+import axios from 'axios'
+
 export default {
   data() {
     let checkPrice = (rule, value, callback) => {
       if (!value) {
-        return callback(new Error("请输入订单金额"))
+        return callback(new Error("请输入订单金额"));
       } else if (isNaN(value) || value > 100000) {
-        return callback(new Error("请输入实际金额0-10万元"))
-      } else { 
-        callback()
+        return callback(new Error("请输入实际金额0-10万元"));
+      } else {
+        callback();
       }
-    }
+    };
     let checkProductId = (rule, value, callback) => {
       if (isNaN(value)) {
-        return callback(new Error("请输入数字"))
-      } else { 
-        callback()
+        return callback(new Error("请输入数字"));
+      } else {
+        callback();
       }
-    }
+    };
     let checkOriginOrderNo = (rule, value, callback) => {
-      const reg = /^[0-9a-zA-Z]+$/
+      const reg = /^[0-9a-zA-Z]+$/;
       if (!reg.test(value)) {
-        return callback(new Error("请输入数字和字母"))
-      } else { 
-        callback()
+        return callback(new Error("请输入数字和字母"));
+      } else {
+        callback();
       }
-    }
+    };
     return {
       action: "",
       id: "",
@@ -196,17 +202,27 @@ export default {
         uid: [{ required: true, message: "请输入用户uid", trigger: "blur" }],
         productTitle: [
           { required: true, message: "请输入订单名称", trigger: "blur" },
-          { max: 25, message: "订单名称最多输入25个字", trigger: "blur" },
+          { max: 25, message: "订单名称最多输入25个字", trigger: "blur" }
+        ],
+        productType: [
+          { required: true, message: "请选择订单类型", trigger: "change" }
+        ],
+        orderType: [
+          { required: true, message: "请选择交易类型", trigger: "change" }
         ],
-        productType: [{ required: true, message: "请选择订单类型", trigger: "change" }],
-        orderType: [{ required: true, message: "请选择交易类型", trigger: "change" }],
         price: [{ validator: checkPrice, trigger: "blur" }],
         originOrderNo: [{ validator: checkOriginOrderNo, trigger: "blur" }],
         productId: [{ validator: checkProductId, trigger: "blur" }],
-        publicComment: [{ max: 50, message: "外部备注最多输入50个字", trigger: "blur" }],
+        publicComment: [
+          { max: 50, message: "外部备注最多输入50个字", trigger: "blur" }
+        ],
         privateComment: [
           { required: true, message: "请输入内部备注", trigger: "blur" },
-          { max: 10000, message: "内部备注最多输入10000个字符", trigger: "blur" },
+          {
+            max: 10000,
+            message: "内部备注最多输入10000个字符",
+            trigger: "blur"
+          }
         ]
       },
       orderTypes: [],
@@ -248,30 +264,38 @@ export default {
   //   }
   // },
   watch: {
-    'form.orderType': {
+    "form.orderType": {
       handler() {
-        if (this.form.orderType === 2 || this.form.orderType === 5 || this.form.orderType === 8) {
-          this.radio = "1"
+        if (
+          this.form.orderType === 2 ||
+          this.form.orderType === 5 ||
+          this.form.orderType === 8
+        ) {
+          this.radio = "1";
         } else if (this.form.orderType === 9) {
-          this.radio = "2"
+          this.radio = "2";
         } else {
-          this.radio = "3"
+          this.radio = "3";
         }
       }
     }
   },
   mounted() {
-    console.log(this.$route.query);
+    if (this.$refs.myQuillEditor) {
+      this.$refs.myQuillEditor.quill
+        .getModule("toolbar")
+        .addHandler("image", this.imgHandler);
+    }
     const type = this.$route.query.type;
     if (type === "create") {
-      this.action = "create"
-      this.getAllChoice()
+      this.action = "create";
+      this.getAllChoice();
     } else if (type === "edit") {
-      this.action = "create"
-      this.id = this.$route.query.id
-      this.hasSave = true
-      this.getAllChoice()
-      this.getOrder()
+      this.action = "create";
+      this.id = this.$route.query.id;
+      this.hasSave = true;
+      this.getAllChoice();
+      this.getOrder();
     }
   },
   methods: {
@@ -280,12 +304,12 @@ export default {
         action: this.action
       });
       if (res) {
-        console.log(res)
-        const allChoice = res.data
-        this.orderTypes = allChoice.order_types
-        this.productTypes = allChoice.product_types
-        this.channels = allChoice.channels
-        this.orderState = allChoice.order_state
+        console.log(res);
+        const allChoice = res.data;
+        this.orderTypes = allChoice.order_types;
+        this.productTypes = allChoice.product_types;
+        this.channels = allChoice.channels;
+        this.orderState = allChoice.order_state;
       }
     },
     async getOrder() {
@@ -294,24 +318,24 @@ export default {
       });
       if (res) {
         if (res.status === 1 && res.data) {
-          const data = res.data
-          this.form.uid = data.uid || ""
-          this.form.productTitle = data.product_title || ""
-          this.form.productType = data.product_type || ""
-          this.form.orderType = data.order_type || ""
-          this.form.price = data.price.replace("-","") || ""
-          this.form.channel = data.channel || ""
-          this.form.outOrderId = data.out_order_id || ""
-          this.form.productId = data.product_id || ""
-          this.form.originOrderNo = data.origin_order_no || ""
-          this.form.publicComment = data.public_comment || ""
-          this.form.privateComment = data.private_comment || ""
-          this.form.orderNo = data.order_no || ""
-          this.form.status = data.status || ""
-          this.form.productTypeName = data.product_type_name || ""
-          this.form.orderTypeName = data.order_type_name || ""
-          this.form.channelName = data.channel_name || ""
-          console.log(this.form)
+          const data = res.data;
+          this.form.uid = data.uid || "";
+          this.form.productTitle = data.product_title || "";
+          this.form.productType = data.product_type || "";
+          this.form.orderType = data.order_type || "";
+          this.form.price = data.price.replace("-", "") || "";
+          this.form.channel = data.channel || "";
+          this.form.outOrderId = data.out_order_id || "";
+          this.form.productId = data.product_id || "";
+          this.form.originOrderNo = data.origin_order_no || "";
+          this.form.publicComment = data.public_comment || "";
+          this.form.privateComment = data.private_comment || "";
+          this.form.orderNo = data.order_no || "";
+          this.form.status = data.status || "";
+          this.form.productTypeName = data.product_type_name || "";
+          this.form.orderTypeName = data.order_type_name || "";
+          this.form.channelName = data.channel_name || "";
+          console.log(this.form);
         }
       }
     },
@@ -328,26 +352,26 @@ export default {
         origin_order_no: this.form.originOrderNo,
         public_comment: this.form.publicComment,
         private_comment: this.form.privateComment
-      }
-      this.saveData = data
-      let res = await this.$post("/api/admin/order/create", data)
+      };
+      this.saveData = data;
+      let res = await this.$post("/api/admin/order/create", data);
       if (res) {
         if (res.status === 1) {
-          this.id = res.data.id
-          this.saveData.id = res.data.id
-          this.form.orderNo = res.data.order_no
-          this.hasSave = true
+          this.id = res.data.id;
+          this.saveData.id = res.data.id;
+          this.form.orderNo = res.data.order_no;
+          this.hasSave = true;
           this.$message({
             message: "保存成功",
             type: "success"
-          })
+          });
         } else if (res.status === -2) {
           this.$message({
             message: `当前订单用户的账户余额不足(可用余额${res.data.can_use}元)，操作失败!`,
             type: "error"
-          })
+          });
         } else if (res.info) {
-          console.log(res.info)
+          console.log(res.info);
         }
       }
     },
@@ -364,86 +388,128 @@ export default {
         origin_order_no: this.form.originOrderNo,
         public_comment: this.form.publicComment,
         private_comment: this.form.privateComment
-      }
-      const confirmData = data
-      const saveData = this.saveData
-      const isConfirm = true
+      };
+      const confirmData = data;
+      const saveData = this.saveData;
+      const isConfirm = true;
       for (const key in confirmData) {
         if (confirmData[key] !== saveData[key]) {
-          console.log(confirmData[key],saveData[key])
+          console.log(confirmData[key], saveData[key]);
           this.$message({
-            message: '与保存订单不一致，请先保存订单！',
-            type: 'warning'
-          })
-          return
+            message: "与保存订单不一致，请先保存订单！",
+            type: "warning"
+          });
+          return;
         }
       }
-      let res = await this.$post("/api/admin/order/confirm_order", data)
+      let res = await this.$post("/api/admin/order/confirm_order", data);
       if (res) {
         if (res.status === 1) {
           this.$message({
             message: "提交成功",
             type: "success"
-          })
+          });
           setTimeout(() => {
-            this.$router.push('/main/artificial_orders')
-          }, 1000)
+            this.$router.push("/main/artificial_orders");
+          }, 1000);
         } else if (res.info) {
-          console.log(res.info)
+          console.log(res.info);
         }
       }
     },
     saveSubmit() {
-      this.$refs['form'].validate(valid => {
+      this.$refs["form"].validate(valid => {
         if (valid) {
-          this.saveOrder()
+          this.saveOrder();
         } else {
-          console.log("error submit!!")
-          return false
+          console.log("error submit!!");
+          return false;
         }
-      })
+      });
     },
     confirmSubmit() {
-      this.$refs['form'].validate(valid => {
+      this.$refs["form"].validate(valid => {
         if (valid) {
-          this.$confirm(`确认提价订单后，${this.form.uid}的账户将${this.form.orderTypeName}${this.form.price}元 ，交易方式为${this.form.channelName}，请您再次确认操作！`, '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }).then(() => {
-            this.confirmOrder()
-          }).catch(() => {
-            this.$message({
-              type: 'info',
-              message: '已取消提交'
-            })       
-          })
+          this.$confirm(
+            `确认提价订单后，${this.form.uid}的账户将${this.form.orderTypeName}${this.form.price}元 ，交易方式为${this.form.channelName}，请您再次确认操作！`,
+            "提示",
+            {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+              type: "warning"
+            }
+          )
+            .then(() => {
+              this.confirmOrder();
+            })
+            .catch(() => {
+              this.$message({
+                type: "info",
+                message: "已取消提交"
+              });
+            });
         } else {
-          console.log("error submit!!")
-          return false
+          console.log("error submit!!");
+          return false;
         }
-      })
+      });
     },
     cancelSubmit() {
-      this.$router.push('/main/artificial_orders')
+      this.$router.push("/main/artificial_orders");
     },
     productTypeChange() {
-      const productTypeObject = this.productTypes.find((element) => {
-        return element.name === this.form.productTypeName
-      })
-      this.form.productType = productTypeObject.id
+      const productTypeObject = this.productTypes.find(element => {
+        return element.name === this.form.productTypeName;
+      });
+      this.form.productType = productTypeObject.id;
     },
     orderTypeChange() {
-      const orderTypeObject = this.orderTypes.find((element) => {
-        return element.name === this.form.orderTypeName
-      })
-      this.form.orderType = orderTypeObject.id
+      const orderTypeObject = this.orderTypes.find(element => {
+        return element.name === this.form.orderTypeName;
+      });
+      this.form.orderType = orderTypeObject.id;
     },
     channelChange() {
-      const channelObject = this.channels.find((element) => {
-        return element.name === this.form.channelName
-      })
-      this.form.channel = channelObject.id
+      const channelObject = this.channels.find(element => {
+        return element.name === this.form.channelName;
+      });
+      this.form.channel = channelObject.id;
+    },
+
+    imgHandler(state) {
+      if (state) {
+        //触发input的单击 ，fileBtn换成自己的
+        this.$refs.fileBtn.click();
+      }
+    },
+    handleChange(e) {
+      const files = e.target.files
+      if (!files) {
+        return;
+      }
+      const file = files[0];
+      // if (file.size / 1024 > 500) {
+      //   this.$message.error("图片大小不得超过500k，请重新选择");
+      //   return false;
+      // }
+      console.log(file)
+      const formData = new FormData();
+      formData.append("file", file);
+      formData.append("original_filename", file.name);
+      console.log(formData)
+      this.$axios
+        .$post("/file/proxyUpload", 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);
+          // this.$emit(
+          //   "change",
+          //   this.content + `<img src="${res.filename}" alt="${file.name}"/>`
+          // );
+        });
     }
   }
 };