15-puzzle
/
front-pc
Observar 1
Favorito 0
Fork 0
Código Issues 0 Pull Requests 0 Versões 0 Wiki Atividade
Ver código fonte

feats

张延森 3 anos atrás
pai
b607971c88
commit
61d8f9a58e
3 arquivos alterados com 24 adições e 6 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 1
    0
      public/index.html
  2. 1
    0
      public/js/qrcode.min.js
  3. 22
    6
      src/pages/index/index.vue

+ 1
- 0
public/index.html Ver arquivo 

@@ -6,6 +6,7 @@
6 6 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
7 7 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
8 8 
     <title>16宫格最优步数计算工具 - 云致</title>
9 
+    <script src="js/qrcode.min.js"></script>
9 10 
   </head>
10 11 
   <body>
11 12 
     <noscript>

+ 1
- 0
public/js/qrcode.min.js
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


+ 22
- 6
src/pages/index/index.vue Ver arquivo 

@@ -15,7 +15,10 @@
15 15 
       <button @click="handleSumbit">确定</button>
16 16 
       <button @click="handleReset">重置</button>
17 17 
     </div>
18 
-    <div class="pay" v-html="payForm"></div>
18 
+    <div class="pay">
19 
+      <h3 style="text-align: center" v-if="showpaytip">请使用微信扫码支付1元</h3>
20 
+      <div ref="payQRCode" style="margin:auto; width: 128px"></div>
21 
+    </div>
19 22 
   </div>
20 23 
   <div>
21 24 
     <h3 style="text-align:center">支付成功之后, 请通过单号查询结果</h3>
 
@@ -49,12 +52,15 @@
49 52 
   const payForm = ref()
50 53 
   const queryNo = ref()
51 54 
   const answerList = ref([])
55 
+  const payQRCode = ref()
56 
+  const showpaytip = ref(false)
52 57
53 58 
   const handleInput = (e, i) => values.value[i] = e.target.value;
54 59 
   // const handleEmail = e => email.value = e.target.value
55 60 
   const handleReset = () => {
56 61 
     values.value = emptyBlocks.slice()
57 62 
     payForm.value = ""
63 
+    showpaytip.value = false
58 64 
   }
59 65 
   const handleSumbit = () => {
60 66 
     // if (!email.value) {
 
@@ -68,14 +74,24 @@
68 74 
       payRtnUrl: `${window.location.origin}${window.location.path || ''}`
69 75 
     }
70 76
71 
-    postJSON('/order-save', { data }).then(res => {
77 
+    postJSON('/order-save', { data }).then(text => {
78 
+      showpaytip.value = true
79 
+      new window.QRCode(payQRCode.value, {
80 
+        text,
81 
+        width: 128,
82 
+        height: 128,
83 
+        colorDark : "#135200",
84 
+        colorLight : "#ffffff"
85 
+      })
86 
+
72 87 
       // v-html 暂时不知道为什么不能执行 JS
73 88 
       // 也不执行 JS
74 89 
       // payForm.value = res
75 
-      document.querySelector('.pay').innerHTML = res
76 
-      // 手动执行
77 
-      document.forms[0].submit();
90 
+      // document.querySelector('.pay').innerHTML = res
91 
+      // // 手动执行
92 
+      // document.forms[0].submit();
78 93 
     }).catch(err => {
94 
+      console.error(err)
79 95 
       alert(err.message)
80 96 
     })
81 97 
   }
 
@@ -174,7 +190,7 @@
174 190 
         display: inline-block;
175 191 
         font-size: 1em;
176 192 
         padding: 1em 2em;
177 
-        margin-bottom: 60px;
193 
+        // margin-bottom: 60px;
178 194 
         appearance: none;
179 195 
         background-color: #fff;
180 196 
         color: #000;