15-puzzle
/
front-pc
关注 1
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

feats

张延森 3 年前
父节点
b607971c88
当前提交
61d8f9a58e
共有 3 个文件被更改，包括 24 次插入 和 6 次删除
合并视图 显示文件统计
  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 查看文件

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

+ 1
- 0
public/js/qrcode.min.js
文件差异内容过多而无法显示
查看文件


+ 22
- 6
src/pages/index/index.vue 查看文件

15 
       <button @click="handleSumbit">确定</button>
 15 
       <button @click="handleSumbit">确定</button>
16 
       <button @click="handleReset">重置</button>
 16 
       <button @click="handleReset">重置</button>
17 
     </div>
 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 
   </div>
 22 
   </div>
20 
   <div>
 23 
   <div>
21 
     <h3 style="text-align:center">支付成功之后, 请通过单号查询结果</h3>
 24 
     <h3 style="text-align:center">支付成功之后, 请通过单号查询结果</h3>
49 
   const payForm = ref()
 52 
   const payForm = ref()
50 
   const queryNo = ref()
 53 
   const queryNo = ref()
51 
   const answerList = ref([])
 54 
   const answerList = ref([])
55 
+  const payQRCode = ref()
56 
+  const showpaytip = ref(false)
52
57
53 
   const handleInput = (e, i) => values.value[i] = e.target.value;
 58 
   const handleInput = (e, i) => values.value[i] = e.target.value;
54 
   // const handleEmail = e => email.value = e.target.value
 59 
   // const handleEmail = e => email.value = e.target.value
55 
   const handleReset = () => {
 60 
   const handleReset = () => {
56 
     values.value = emptyBlocks.slice()
 61 
     values.value = emptyBlocks.slice()
57 
     payForm.value = ""
 62 
     payForm.value = ""
63 
+    showpaytip.value = false
58 
   }
 64 
   }
59 
   const handleSumbit = () => {
 65 
   const handleSumbit = () => {
60 
     // if (!email.value) {
 66 
     // if (!email.value) {
68 
       payRtnUrl: `${window.location.origin}${window.location.path || ''}`
 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 
       // v-html 暂时不知道为什么不能执行 JS
 87 
       // v-html 暂时不知道为什么不能执行 JS
73 
       // 也不执行 JS
 88 
       // 也不执行 JS
74 
       // payForm.value = res
 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 
     }).catch(err => {
 93 
     }).catch(err => {
94 
+      console.error(err)
79 
       alert(err.message)
 95 
       alert(err.message)
80 
     })
 96 
     })
81 
   }
 97 
   }
174 
         display: inline-block;
 190 
         display: inline-block;
175 
         font-size: 1em;
 191 
         font-size: 1em;
176 
         padding: 1em 2em;
 192 
         padding: 1em 2em;
177 
-        margin-bottom: 60px;
193 
+        // margin-bottom: 60px;
178 
         appearance: none;
 194 
         appearance: none;
179 
         background-color: #fff;
 195 
         background-color: #fff;
180 
         color: #000;
 196 
         color: #000;