代客下单修改，增加线上店铺装修页面

src/views/tool/Instead/components/popup-linshiCai.vue

@@ -0,0 +1,111 @@
+<template>
+  <el-dialog title="添加临时菜" width="410px" v-model="show" @close="reset">
+    <div>
+      <div>将临时菜添加至购物车，不会影响总商品库</div>
+      <div class="u-m-t-16">
+        <el-form ref="form" :model="form" label-width="80px" :rules="rules">
+          <el-form-item label="菜品名称" prop="product_name">
+            <el-input v-model="form.product_name" placeholder="请输入菜品名称"></el-input>
+          </el-form-item>
+          <el-form-item label="价格" prop="discount_sale_amount">
+            <el-input v-model="form.discount_sale_amount" placeholder="请输入价格" type="number">
+              <template #append>元</template>
+            </el-input>
+          </el-form-item>
+          <el-form-item label="下单数量" prop="number">
+            <el-input v-model="form.number" placeholder="请输入下单数量" type="number"></el-input>
+          </el-form-item>
+          <el-form-item label="备注">
+            <el-input v-model="form.remark" placeholder="请输入备注"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <template #footer>
+      <div>
+        <el-button size="medium" @click="close">取消</el-button>
+        <el-button size="medium" type="primary" @click="confirm">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+  <script>
+import { ElMessage } from "element-plus";
+export default {
+  data() {
+    return {
+      show: false,
+      rules: {
+        product_name: [{ required: true, message: "请输入菜品名称", trigger: "blur" }],
+        discount_sale_amount: [{ required: true, message: "请输入菜品价格", trigger: "blur" }],
+        number: [{ required: true, message: "请输入下单数量", trigger: "blur" }],
+      },
+      form: {
+        product_name: "",
+        discount_sale_amount: "",
+        number: 1,
+        remark: "",
+      },
+      category: [],
+      units: [],
+      option: {},
+    };
+  },
+
+  methods: {
+    reset() {
+      this.$refs.form.resetFields();
+    },
+
+    open(opt) {
+      this.show = true;
+      this.option = opt;
+    },
+    close() {
+      this.show = false;
+    },
+    async submit() {
+      this.$emit("confirm", this.form);
+      this.close();
+    },
+    confirm() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          console.log(valid);
+          if (this.form.discount_sale_amount * 1 <= 0 || this.form.discount_sale_amount * 1 <= 0) {
+            return ElMessage.error("价格和数量必须大于0");
+          }
+          this.submit();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+  mounted() {},
+};
+</script>
+  
+  <style lang="scss" scoped>
+::v-deep .el-dialog__body {
+  margin-bottom: 14px;
+  margin-top: 14px;
+}
+::v-deep .el-form-item__label {
+  text-align: left;
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+::v-deep .el-input__inner::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+::v-deep .el-input__inner::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+</style>