工作台二维码扫码弹框

package.json

@@ -55,6 +55,7 @@
     "jsencrypt": "3.0.0-rc.1",
     "jszip": "^3.7.1",
     "nprogress": "0.2.0",
+    "qrcodejs2": "^0.0.2",
     "quill": "1.3.7",
     "quill-image-resize-module": "^3.0.0",
     "screenfull": "5.0.2",

src/assets/styles/ruoyi.scss

@@ -95,9 +95,9 @@ h6 {
   color: inherit;
 }
 
-.el-dialog:not(.is-fullscreen) {
-  margin-top: 6vh !important;
-}
+// .el-dialog:not(.is-fullscreen) {
+//   margin-top: 6vh !important;
+// }
 
 .el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
   overflow: auto;

src/views/components/index/payContain.vue

@@ -58,8 +58,9 @@
       </div>
       <div class="integral-box c48">
         <div>
-          可用积分：{{ memberInfo.pointsValue }}积分（{{
-            (memberInfo.pointsValue / getRules) | formatPrice
+          可用积分：
+          {{ pointsValue }}积分 （{{
+            (pointsValue / getRules) | formatPrice
           }}元）
         </div>
         <div>
@@ -101,7 +102,7 @@
     </div>
     <Base-dialog
       title="请先扫码会员卡"
-      :isShow.sync="isShow && !memberInfo.userId"
+      :isShow.sync="isShow"
       @submit="submitForm"
       confirmName="确 认"
     >
@@ -124,13 +125,37 @@
         </el-form-item>
       </el-form>
     </Base-dialog>
-    <!-- <qrcode-vue :value="value" :size="size" level="H" /> -->
+    <Base-dialog
+      title="请扫码支付"
+      :isShow.sync="isShowCode"
+      width="400px"
+      :isShowFooter="false"
+    >
+      <div class="scan_pay_box">
+        <div class="code_box">
+          <div id="root" ref="qrCodeUrl"></div>
+          <div class="code_box_tip fl_b">
+            <img
+              class="dialog-icon"
+              src="../../../assets/images/icon_scan3.png"
+              slot="suffix"
+            />
+            <p>打开手机的微信扫描二维码支付</p>
+          </div>
+        </div>
+        <div class="c48">
+          实付金额（元）:
+          <span class="money">￥</span>
+          <span class="money fs30">{{ 1511 | formatPrice }}</span>
+        </div>
+      </div>
+    </Base-dialog>
   </container>
 </template>
 
 <script>
 import { mapGetters } from "vuex";
-// import QrcodeVue from "qrcode.vue";
+import QRCode from "qrcodejs2";
 export default {
   name: "SaasMemberPayContain",
   props: {
@@ -155,6 +180,10 @@ export default {
         return {};
       },
     },
+    getUserDetail: {
+      type: Function,
+      default: () => {},
+    },
   },
   data() {
     var validateCardSn = (rule, value, callback) => {
@@ -180,14 +209,20 @@ export default {
       ],
       active: 1,
       isShow: false,
-      cardSn: "",
+      cardSn: "1000146902628081",
       rules: {
         cardSn: [{ validator: validateCardSn, trigger: "blur" }],
       },
+      qrcode: null,
+      isShowCode: false,
     };
   },
 
-  mounted() {},
+  mounted() {
+    // this.$nextTick(() => {
+    //   this.creatQrCode();
+    // });
+  },
 
   methods: {
     handelPay() {
@@ -198,9 +233,9 @@ export default {
         });
         return;
       }
-      if (!this.memberInfo.userId) {
+      if (!this.isHaveUser) {
         this.$nextTick(() => {
-          this.$refs["ruleForm"].resetFields();
+          this.$refs["ruleForm"] && this.$refs["ruleForm"].resetFields();
         });
         this.isShow = true;
         return;
@@ -240,16 +275,35 @@ export default {
     submitForm() {
       this.$refs["ruleForm"].validate((valid) => {
         if (valid) {
-          this.memberInfo.cardSn = this.cardSn;
+          this.getUserDetail(this.cardSn).then((res) => {
+            this.isShow = false;
+            this.handelPay();
+          });
         } else {
           console.log("error submit!!");
           return false;
         }
       });
     },
+    creatQrCode() {
+      this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
+        text: "https://www.baidu.com/", // 需要转换为二维码的内容
+        width: 200,
+        height: 200,
+        colorDark: "#000000",
+        colorLight: "#ffffff",
+        correctLevel: QRCode.CorrectLevel.H,
+      });
+    },
   },
   computed: {
     ...mapGetters(["getRules"]),
+    pointsValue() {
+      if (!this.isHaveUser) {
+        return 0;
+      }
+      return this.memberInfo.pointsValue;
+    },
     payPrice() {
       return (
         this.from.allPrice -
@@ -258,11 +312,17 @@ export default {
       ).toFixed(2);
     },
     deductionIntegral() {
-      return this.memberInfo.pointsValue > this.morePointsValue
+      if (!this.isHaveUser) {
+        return 0;
+      }
+      return this.pointsValue > this.morePointsValue
         ? this.morePointsValue
-        : this.memberInfo.pointsValue;
+        : this.pointsValue;
     },
     paidPointsValue() {
+      if (!this.isHaveUser) {
+        return 0;
+      }
       return this.morePointsValue - this.deductionIntegral;
     },
     paidPrice() {
@@ -271,9 +331,12 @@ export default {
     morePointsValue() {
       return this.from.discount * this.getRules;
     },
+    isHaveUser() {
+      return !!this.memberInfo.userId;
+    },
   },
   components: {
-   
+    QRCode,
   },
 };
 </script>
@@ -446,4 +509,37 @@ export default {
     margin: 8px 8px 0 0;
   }
 }
+.scan_pay_box {
+  width: 280px;
+  margin: 0 auto;
+  .code_box {
+    height: 330px;
+    padding: 30px 40px;
+    border: 1px solid #cccccc;
+    .code_box_tip {
+      img {
+        width: 44px;
+        height: 44px;
+      }
+      p {
+        width: 130px;
+        color: #4a4a4b;
+        font-size: 18px;
+      }
+    }
+  }
+  .c48 {
+    margin-top: 20px;
+    text-align: center;
+    font-size: 16px;
+    .fs30 {
+      font-size: 26px;
+    }
+  }
+}
+.money {
+  font-weight: 800;
+  color: #eb5757;
+  font-size: 16px;
+}
 </style>

src/views/index.vue

@@ -8,6 +8,7 @@
         <pay-contain
           @changeFocusType="changeFocusType"
           @checkValue="checkValue"
+          :getUserDetail="getUserDetail"
           @pay="pay"
           :list="selectedGoodList"
           :from="payForm"
@@ -102,15 +103,19 @@ export default {
     changeFocusType(type) {
       this.inputFocusType = type;
     },
-    getUserDetail() {
-      getUserDetail(this.memberInfo.cardSn)
-        .then((res) => {
-          res.data.code = res.data.cardSn;
-          this.memberInfo = res.data;
-        })
-        .catch((e) => {
-          this.resetUser(this.memberInfo.cardSn);
-        });
+    getUserDetail(cardSn) {
+      return new Promise((resolve, reject) => {
+        getUserDetail(cardSn)
+          .then((res) => {
+            res.data.code = res.data.cardSn;
+            this.memberInfo = res.data;
+            resolve();
+          })
+          .catch((e) => {
+            this.resetUser(this.memberInfo.cardSn);
+            reject();
+          });
+      });
     },
     resetUser(cardSn = "") {
       this.memberInfo = { cardSn };
@@ -134,8 +139,7 @@ export default {
           if (this.memberInfo.code === cardSn) {
             return;
           }
-          this.memberInfo.cardSn = cardSn;
-          this.getUserDetail();
+          this.getUserDetail(cardSn);
         }
       },
       mmediate: true,