state_grid
/
invoice_fill_h5
Sledovat 4
Oblíbit 0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Vydání 0 Wiki Activity
Procházet zdrojové kódy

feat

Yansen před 1 rokem
rodič
03c5cfb9db
revize
fd581dd3e3
6 změnil soubory, kde provedl 144 přidání a 4 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  1. 8
    0
      index.html
  2. 4
    0
      src/main.js
  3. 48
    2
      src/pages/invoice/components/InvoiceInfo.vue
  4. 5
    1
      src/pages/invoice/fill.vue
  5. 77
    0
      src/utils/wx.js
  6. 2
    1
      vite.config.js

+ 8
- 0
index.html Zobrazit soubor 

@@ -4,7 +4,15 @@
4 4 
     <meta charset="UTF-8" />
5 5 
     <link rel="icon" href="/favicon.ico" />
6 6 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7 
+    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
7 8 
     <title>开票信息收集公示系统</title>
9 
+
10 
+    <!-- 测试请打开如下注释 -->
11 
+    <!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
12 
+    <script>
13 
+        // init vConsole
14 
+        var vConsole = new VConsole();
15 
+    </script> -->
8 16 
   </head>
9 17 
   <body>
10 18 
     <div id="app"></div>

+ 4
- 0
src/main.js Zobrazit soubor 

@@ -4,9 +4,13 @@ import App from './App.vue'
4 4 
 import vant from './vant'
5 5 
 import router from './router'
6 6 
 import store from './store'
7 
+import { initWxSDK2 } from './utils/wx';
7 8
8 9 
 const app = createApp(App)
9 10
11 
+// 初始化微信SDK
12 
+initWxSDK2();
13 
+
10 14 
 vant(app)
11 15 
 app.use(router)
12 16 
 app.use(store)

+ 48
- 2
src/pages/invoice/components/InvoiceInfo.vue Zobrazit soubor 

@@ -5,12 +5,23 @@
5 5 
       开票信息（<span class='groupTitle'>请务必仔细填写以下信息，必填</span>）
6 6 
     </template>
7 7 
     <van-field
8 
+      class="org-cell"
8 9 
       label="开票单位"
9 10 
       v-model="props.pdata.orgName"
10 11 
       name="orgName"
11 12 
       placeholder="请输入开票单位"
12 13 
       :rules="[{ required: true, message: '请输入开票单位' }]"
13 
-    />
14 
+    >
15 
+      <template #button>
16 
+        <van-button
17 
+          class="btn-fapiao"
18 
+          plain
19 
+          type="success"
20 
+          size="small"
21 
+          @click="getWxInvoiceTitle"
22 
+        >微信抬头</van-button>
23 
+      </template>
24 
+    </van-field>
14 25 
     <van-field
15 26 
       label="纳 税 号"
16 27 
       v-model="props.pdata.taxNo"
 
@@ -86,16 +97,51 @@
86 97 
 </template>
87 98 
 <script setup>
88 99 
 import { ref, reactive, watch } from 'vue';
100 
+import { chooseInvoiceTitle } from '@/utils/wx';
101 
+
89 102 
 const props = defineProps({
90 103 
   isFinished: String,
91 104 
   pdata: {
92 105 
     type: Object,
93 106 
     default: () => ({})
94 107 
   }
95 
-})
108 
+});
109 
+
110 
+const emits = defineEmits(['change']);
111 
+
112 
+// 获取微信发票抬头
113 
+const getWxInvoiceTitle = () => {
114 
+  chooseInvoiceTitle().then(res => {
115 
+    const data = {
116 
+      orgName: res.title,
117 
+      taxNo: res.taxNumber,
118 
+      address: res.companyAddress,
119 
+      phone: res.telephone,
120 
+      bankName: res.bankName,
121 
+      cardNo: res.bankAccount,
122 
+    }
123 
+    emits('change', data);
124 
+  });
125 
+};
126 
+
96 127 
 </script>
97 128 
 <style lang="less" scoped>
98 129 
 .groupTitle{
99 130 
   color: red;
100 131 
 }
132 
+
133 
+
134 
+.btn-fapiao {
135 
+  border-color: transparent;
136 
+  height: 24px;
137 
+}
138 
+</style>
139 
+
140 
+<style lang="less">
141 
+
142 
+.org-cell {
143 
+  .van-cell__value .van-field__button {
144 
+    line-height: 0;
145 
+  }
146 
+}
101 147 
 </style>

+ 5
- 1
src/pages/invoice/fill.vue Zobrazit soubor 

@@ -9,7 +9,7 @@
9 9 
       @changeOrgValue="changeOrg"
10 10 
       @changePersonValue="changePerson"
11 11 
     />
12 
-    <invoice-info :isFinished="isFinished" :pdata="formData" />
12 
+    <invoice-info :isFinished="isFinished" :pdata="formData" @change="onInvoiceChange" />
13 13
14 14 
     <item-tpl :itemList="itemList" />
15 15 
 
@@ -87,6 +87,10 @@ onMounted(() => {
87 87 
   })
88 88 
 })
89 89
90 
+const onInvoiceChange = (e) => {
91 
+  Object.assign(formData, e);
92 
+}
93 
+
90 94 
 const onFailed = (errorInfo) => {
91 95 
   console.log('failed', formData);
92 96 
 };

+ 77
- 0
src/utils/wx.js Zobrazit soubor 

@@ -32,3 +32,80 @@ export function getRedirectURL (force, code) {
32 32 
     return `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd3bab568bc42d1de&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
33 33 
   }
34 34 
 }
35 
+/**
36 
+ * 初始化微信 SDK
37 
+ * @param {*} params
38 
+ * @returns
39 
+ */
40 
+export function initWxSDK(params) {
41 
+  return new Promise((resolve, reject) => {
42 
+    wx.config({
43 
+      beta: true, // 获取微信抬头必须这个
44 
+      debug: import.meta.env.DEV, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
45 
+      appId: params.appId, // 必填，公众号的唯一标识
46 
+      timestamp: params.timestamp, // 必填，生成签名的时间戳
47 
+      nonceStr: params.nonceStr, // 必填，生成签名的随机串
48 
+      signature: params.signature,// 必填，签名
49 
+      jsApiList: ['chooseInvoiceTitle'] // 必填，需要使用的JS接口列表
50 
+    });
51 
+
52 
+    wx.ready(() => {
53 
+      console.log('---微信SDK初始化成功---')
54 
+      resolve();
55 
+      window.__initwx = true;
56 
+    });
57 
+    wx.error(function(res){
58 
+      console.log('---微信SDK初始化失败---')
59 
+      console.error(res);
60 
+      window.__initwx = false;
61 
+      reject();
62 
+    });
63 
+  });
64 
+}
65 
+
66 
+/**
67 
+ * 获取微信抬头
68 
+ * @param {*} scene
69 
+ * @returns
70 
+ */
71 
+export function chooseInvoiceTitle(scene) {
72 
+  return new Promise((resolve, reject) => {
73 
+    if (!window.__initwx) {
74 
+      reject('微信SDK未成功初始化');
75 
+      return;
76 
+    }
77 
+
78 
+    wx.invoke('chooseInvoiceTitle', { scene }, function (res) {
79 
+      console.log('----------chooseInvoiceTitle------', res);
80 
+      if (res.err_msg == 'chooseInvoiceTitle:ok') {
81 
+      // choose_invoice_title_info 结构如下：
82 
+      // {
83 
+      //   "type":"0",
84 
+      //   "title":"腾讯科技(深圳)有限公司",
85 
+      //   "taxNumber":"123466789987646131",
86 
+      //   "companyAddress":"深圳市南山区某某路腾讯大厦",
87 
+      //   "telephone":"123456789",
88 
+      //   "bankName":"某某银行",
89 
+      //   "bankAccount":"621111111111290"
90 
+      // }
91 
+        resolve(typeof res.choose_invoice_title_info == 'string' ? JSON.parse(res.choose_invoice_title_info) : res.choose_invoice_title_info);
92 
+      } else {
93 
+        console.error(res.err_msg);
94 
+        console.debug(res);
95 
+        reject(res.err_msg);
96 
+      }
97 
+    });
98 
+  });
99 
+}
100 
+
101 
+// 本系统的特殊情况，使用外部服务初始化微信SDK
102 
+export function initWxSDK2() {
103 
+  const link = window.location.origin + window.location.pathname + window.location.search;
104 
+  const servAPI = '//api.h5.njyunzhi.com/mp/jssdk?url=' + encodeURIComponent(link);
105 
+
106 
+  fetch(servAPI).then(res => res.json()).then(res => {
107 
+    console.log('----------', res.data);
108 
+    initWxSDK(res.data);
109 
+  });
110 
+
111 
+}

+ 2
- 1
vite.config.js Zobrazit soubor 

@@ -6,7 +6,8 @@ import { VantResolver } from 'unplugin-vue-components/resolvers';
6 6
7 7 
 // https://vitejs.dev/config/
8 8 
 export default defineConfig({
9 
-  base: '/state-grid/invoice-filling-h5/',
9 
+  // base: '/state-grid/invoice-filling-h5/',
10 
+  base: '/test/',
10 11 
   server: {
11 12 
     //让局域网其他同事可以通过ip地址访问项目
12 13 
     host:'0.0.0.0',