二维码生成

components/BsChosen.vue

@@ -1,3 +1,10 @@
+<!--
+ * @Author: ch
+ * @Date: 2022-05-26 10:41:45
+ * @LastEditors: ch
+ * @LastEditTime: 2022-06-15 15:43:49
+ * @Description: file content
+-->
 <template>
   <div class="chosen">
     <div class="chosen-title flex flex-between flex-middle">
@@ -45,7 +52,6 @@ export default {
         categoryId: "",
         order: "",
       });
-      console.log(res.result);
       vm.recommendedData = res.result.records;
       vm.pages = res.result.pages;
     },

components/BsPay.vue

@@ -2,7 +2,7 @@
  * @Author: ch
  * @Date: 2022-05-08 00:39:50
  * @LastEditors: ch
- * @LastEditTime: 2022-06-15 15:08:19
+ * @LastEditTime: 2022-06-15 16:01:10
  * @Description: file content
 -->
 <template>
@@ -23,7 +23,9 @@
 <script>
 import {ApiPostPayCdoeImg} from '@/plugins/api/wx'
 import {ApiGetOrderDetail} from '@/plugins/api/order'
-import UiMoney from './UiMoney.vue'
+import UiMoney from './UiMoney.vue';
+import QRcode from 'qrcode';
+
 export default {
 	components: { UiMoney },
 	props : {
@@ -85,7 +87,12 @@ export default {
 			if(error){
 				return false;
 			}
-			this.imgUrl = result.payDataInfo.codeImgData;
+			QRcode.toDataURL(result.payDataInfo.codeUrlData,{
+				width : 200
+			}, (err, url)=>{
+				this.imgUrl = url;
+			})
+			
 		},
 
 		/**
@@ -132,6 +139,14 @@ export default {
 		width: 160px;
 		height: 160px;
 		margin: 15px auto 20px;
+		position: relative;
+		overflow: hidden;
+		img{
+			width: 200px;
+			position: absolute;
+			left: -20px;
+			top: -20px;
+		}
 	}
 	&--timer{
 		color: #999;

package.json

@@ -22,6 +22,7 @@
     "js-util-all": "^1.0.6",
     "lodash": "^4.17.21",
     "nuxt": "^2.15.8",
+    "qrcode": "^1.5.0",
     "v-distpicker": "^1.2.13",
     "vue": "^2.6.14",
     "vue-server-renderer": "^2.6.14",