bugfix

src/components/BaseDialog.vue

@@ -19,9 +19,13 @@
     </div>
     <slot></slot>
     <div slot="footer" class="dialog-footer" v-if="isShowFooter">
-      <el-button :loading="disabledBtn" type="primary" @click="confirmBtn">{{
-        confirmName
-      }}</el-button>
+      <el-button
+        v-throttle
+        :loading="disabledBtn"
+        type="primary"
+        @click="confirmBtn"
+        >{{ confirmName }}</el-button
+      >
       <el-button :loading="disabledBtn" @click="visible = false">{{
         cancelName
       }}</el-button>

src/views/components/index/payContain.vue

@@ -99,11 +99,38 @@
         <el-button type="danger" @click="handelPay">立即收款</el-button>
       </div>
     </div>
+    <Base-dialog
+      title="请先扫码会员卡"
+      :isShow.sync="isShow && !memberInfo.userId"
+      @submit="submitForm"
+      confirmName="确 认"
+    >
+      <el-form :model="this" :rules="rules" ref="ruleForm">
+        <el-form-item label=" " prop="cardSn">
+          <div class="input-box">
+            <el-input
+              placeholder="请扫描会员卡"
+              v-model="cardSn"
+              :max="8"
+              v-int="{ set: 0 }"
+            >
+              <img
+                class="dialog-icon"
+                src="../../../assets/images/icon_scan.png"
+                slot="suffix"
+              />
+            </el-input>
+          </div>
+        </el-form-item>
+      </el-form>
+    </Base-dialog>
+    <!-- <qrcode-vue :value="value" :size="size" level="H" /> -->
   </container>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
+// import QrcodeVue from "qrcode.vue";
 export default {
   name: "SaasMemberPayContain",
   props: {
@@ -130,6 +157,12 @@ export default {
     },
   },
   data() {
+    var validateCardSn = (rule, value, callback) => {
+      if (value.length !== 16) {
+        return callback(new Error("会员卡号格式不正确"));
+      }
+      callback();
+    };
     return {
       money: "",
       checked: true,
@@ -146,6 +179,11 @@ export default {
         },
       ],
       active: 1,
+      isShow: false,
+      cardSn: "",
+      rules: {
+        cardSn: [{ validator: validateCardSn, trigger: "blur" }],
+      },
     };
   },
 
@@ -161,10 +199,10 @@ export default {
         return;
       }
       if (!this.memberInfo.userId) {
-        this.$message({
-          message: "请先扫描会员信息",
-          type: "warning",
+        this.$nextTick(() => {
+          this.$refs["ruleForm"].resetFields();
         });
+        this.isShow = true;
         return;
       }
       this.from.userId = this.memberInfo.userId;
@@ -199,6 +237,16 @@ export default {
     focus(type) {
       this.$emit("update:type", type);
     },
+    submitForm() {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          this.memberInfo.cardSn = this.cardSn;
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
   },
   computed: {
     ...mapGetters(["getRules"]),
@@ -224,6 +272,9 @@ export default {
       return this.from.discount * this.getRules;
     },
   },
+  components: {
+   
+  },
 };
 </script>
 
@@ -390,4 +441,9 @@ export default {
     outline: none;
   }
 }
+.input-box {
+  img {
+    margin: 8px 8px 0 0;
+  }
+}
 </style>