state_grid
/
invoice_fill_h5
关注 4
点赞 0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
浏览代码

F

张涛 1年前
父节点
a40cd24fcf 9e5838be9b
当前提交
3bf9e90365
共有 6 个文件被更改，包括 143 次插入 和 2 次删除
分列视图 显示文件统计
  1. 8
    0
      index.html
  2. 4
    0
      src/main.js
  3. 48
    1
      src/pages/invoice/components/InvoiceInfo.vue
  4. 5
    1
      src/pages/invoice/fill.vue
  5. 77
    0
      src/utils/wx.js
  6. 1
    0
      vite.config.js

+ 8
- 0
index.html 查看文件 

@@ -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 查看文件 

@@ -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
- 1
src/pages/invoice/components/InvoiceInfo.vue 查看文件 

@@ -4,12 +4,23 @@
4 4 
       开票信息（<span class="groupTitle">请务必仔细填写以下信息，必填</span>）
5 5 
     </template>
6 6 
     <van-field
7 
+      class="org-cell"
7 8 
       label="开票单位"
8 9 
       v-model="props.pdata.orgName"
9 10 
       name="orgName"
10 11 
       placeholder="请输入开票单位"
11 12 
       :rules="[{ required: true, message: '请输入开票单位' }]"
12 
-    />
13 
+    >
14 
+      <template #button>
15 
+        <van-button
16 
+          class="btn-fapiao"
17 
+          plain
18 
+          type="success"
19 
+          size="small"
20 
+          @click="getWxInvoiceTitle"
21 
+        >微信抬头</van-button>
22 
+      </template>
23 
+    </van-field>
13 24 
     <van-field
14 25 
       label="纳 税 号"
15 26 
       v-model="props.pdata.taxNo"
 
@@ -107,6 +118,8 @@
107 118 
 </template>
108 119 
 <script setup>
109 120 
 import { ref, reactive, watch } from "vue";
121 
+import { chooseInvoiceTitle } from '@/utils/wx';
122 
+
110 123 
 const props = defineProps({
111 124 
   isFinished: String,
112 125 
   pdata: {
 
@@ -114,9 +127,43 @@ const props = defineProps({
114 127 
     default: () => ({}),
115 128 
   },
116 129 
 });
130 
+
131 
+
132 
+const emits = defineEmits(['change']);
133 
+
134 
+// 获取微信发票抬头
135 
+const getWxInvoiceTitle = () => {
136 
+  chooseInvoiceTitle().then(res => {
137 
+    const data = {
138 
+      orgName: res.title,
139 
+      taxNo: res.taxNumber,
140 
+      address: res.companyAddress,
141 
+      phone: res.telephone,
142 
+      bankName: res.bankName,
143 
+      cardNo: res.bankAccount,
144 
+    }
145 
+    emits('change', data);
146 
+  });
147 
+};
148 
+
117 149 
 </script>
118 150 
 <style lang="less" scoped>
119 151 
 .groupTitle {
120 152 
   color: red;
121 153 
 }
154 
+
155 
+
156 
+.btn-fapiao {
157 
+  border-color: transparent;
158 
+  height: 24px;
159 
+}
160 
+</style>
161 
+
162 
+<style lang="less">
163 
+
164 
+.org-cell {
165 
+  .van-cell__value .van-field__button {
166 
+    line-height: 0;
167 
+  }
168 
+}
122 169 
 </style>

+ 5
- 1
src/pages/invoice/fill.vue 查看文件 

@@ -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 查看文件 

@@ -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 
+}

+ 1
- 0
vite.config.js 查看文件 

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