홈 탐색 도움말
가입하기 로그인
galaxy
/
template-parking-h5
2
0
포크 0
파일 이슈 0 풀 리퀘스트 0 위키
소스 검색

feat(KIP-11184): Temp parking | ali program | H5 & native 信息交互 postMessage通讯

john 2 년 전
부모
8342df9d93
커밋
481cda6be3
10개의 변경된 파일과 193개의 추가작업 그리고 28개의 파일을 삭제
분할 보기 변경상태 보기
  1. 8 0
      public/index.html
  2. 42 14
      src/App.vue
  3. 68 0
      src/api/parking/index.js
  4. 1 1
      src/main.js
  5. 7 4
      src/pages/parkingFee/mixins/parkingFee.js
  6. 8 6
      src/pages/parkingFee/mixins/parkingFeeDetail.js
  7. 4 2
      src/store/index.js
  8. 12 0
      src/utils/alipayClient/index.js
  9. 15 0
      src/utils/common/localStorage.js
  10. 28 1
      src/utils/index.js

+ 8 - 0
public/index.html
파일 보기 

@@ -25,6 +25,7 @@
 
         qaPayment: 'https://qa-payment.kerryonvip.com',
 
       };
 
     }
 
+    window.isAlipayClient = false
 
     // const userAgent = window.navigator.userAgent.toLowerCase()
 
     // if(!/miniprogram/g.test(userAgent)) {
 
     //   document.getElementsByTagName('title')[0].innerText= '临时停车'
 
@@ -53,6 +54,13 @@
 
       // var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
 
       // document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
 
   </script>
 
+    <!--引入https://appx/web-view.min.js， 如该 H5 页面需要同时在非支付宝客户端内使用，为避免该请求404，可参考以下写法 -->
 
+    <script>
 
+      if (navigator.userAgent.indexOf('AlipayClient') > -1) {
 
+        document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
 
+          window.isAlipayClient = true
 
+      }
 
+    </script>
 
 </head>
 
 
 <body>

+ 42 - 14
src/App.vue
파일 보기 

@@ -24,7 +24,12 @@
 
 </template>
 
 <script>
 
 import loginMinix from '@/mixins/login';
 
-import { getIsMin, getIsWxh5, getUrlParams, initEnv, requestInit, wssInit, theCommunicationBetweenWechatAndH5IsNormal, isReloadBefore, getsTheCurrentTopic } from '@/utils/index.js';
 
+import { 
+  getIsMin, getIsWxh5, getUrlParams, initEnv, requestInit, 
+  wssInit, theCommunicationBetweenWechatAndH5IsNormal, 
+  isReloadBefore, getsTheCurrentTopic, alipayClientInit,
 
+  localStorageInit, setToken, windowSendInit
 
+} from '@/utils/index.js';
 
 import uni from '@/utils/uniHooks';
 
 import { getAppIdByGroupIdAndMallId } from '@/utils/index.js';
 
 import sensorsFn from '@/plugins/sensors';
 
@@ -32,6 +37,7 @@ import sensorsFn from '@/plugins/sensors';
 
 export default {
 
   mixins: [loginMinix],
 
   async created() {
 
+    
     await initEnv();
 
     await requestInit();
 
     await this.init();
 
@@ -72,6 +78,27 @@ export default {
 
   methods: {
 
     async init() {
 
       uni.setStorageSync('env', window.env);
 
+      // 如果是支付宝小程序：初始化
 
+      if (isAlipayClient) {
 
+        setToken()
 
+        localStorageInit();
 
+        windowSendInit()
 
+        try {
 
+          this.$store.commit('SET_IS_INIT', false);
 
+          const options = await alipayClientInit();
 
+          await this.$store.dispatch('baseInit', {
 
+            options,
 
+            callback: () => {
 
+              this.$store.commit('SET_IS_INIT', true);
 
+              // 无感积分逻辑
 
+              // this.wxEasyPointsCommitStatusInit();
 
+            },
 
+          });
 
+        } catch (err) {
 
+          console.log(err);
 
+        }
 
+        return
 
+      }
 
       // 如果是微信小程序。初始化wss
 
       if (getIsMin()) {
 
         // 如果刷新之后没有与微信小程序建立链接则提示用户，关闭小程序重新进入
 
@@ -100,20 +127,21 @@ export default {
 
         if (window.location.href.indexOf('cryptojs') > -1) {
 
           return;
 
         }
 
-        // 保留 carList
 
-        const carList = uni.getStorageSync('carList');
 
-        // 保留 buildingId
 
-        const buildingId = window.localStorage.getItem('buildingId')
 
-        // 每次进入页面清空 缓存数据
 
-        window.localStorage.clear();
 
-        if (carList) {
 
-          uni.setStorageSync('carList', JSON.parse(carList));
 
-        }
 
-        if (buildingId) {
 
-          window.localStorage.setItem('buildingId', buildingId)
 
-        }
 
+        // // 保留 carList
 
+        // const carList = uni.getStorageSync('carList');
 
+        // // 保留 buildingId
 
+        // const buildingId = window.localStorage.getItem('buildingId')
 
+        // // 每次进入页面清空 缓存数据
 
+        // window.localStorage.clear();
 
+        // if (carList) {
 
+        //   uni.setStorageSync('carList', JSON.parse(carList));
 
+        // }
 
+        // if (buildingId) {
 
+        //   window.localStorage.setItem('buildingId', buildingId)
 
+        // }
 
+        setToken();
 
+        localStorageInit();
 
         this.$store.commit('SET_IS_INIT', false);
 
-        window.token = `${window.location.href}`.replace(/.*wx\/(.*)\/.*/g, '$1');
 
         try {
 
           const options = await wssInit();
 
           this.$store.dispatch('baseInit', {

+ 68 - 0
src/api/parking/index.js
파일 보기 

@@ -174,4 +174,72 @@ export function paperCoupon(couponCode, vehicleNo) {
 
 
 export function updateUnionId({openId, unionId, vipCode = null}) {
 
   return window.requestms.put(`update-union-id?openId=${openId}&unionId=${unionId}&vipCode=${vipCode}`, {}, { loading: false });
 
+}
 
+
 
+
 
+// Temp parking Frontend ｜前端功能开关 config api: https://kerryprops.atlassian.net/browse/KIP-11003
 
+
 
+/* 
+新增键值对配置：
 
+curl --request POST \
 
+  --url http://localhost:8080/conf-values \
 
+  --header 'Content-Type: application/json' \
 
+  --data '{
 
+  "key": "key1",
 
+  "value": {
 
+    "key": "key1",
 
+    "value": null,
 
+    "description": "some desc 中文一些描述性文字",
 
+    "createTime": "2023-07-19 11:11:00"
 
+  },
 
+  "description": "some desc 中文一些描述性文字",
 
+  "createTime": "2023-07-19 11:11:00"
 
+}'
 
+ */
 
+export function aDDConfValues(params) {
 
+  return window.requestms.post(`conf-values`, params, { loading: false });
 
+}
 
+/* 
+所有配置列表：
 
+curl --request GET \
 
+  --url http://localhost:8080/conf-values/
 
+ */
 
+export function getConfValues(params) {
 
+  return window.requestms.get(`conf-values`, {}, { loading: false });
 
+}
 
+/* 
+查询具体key1的值：
 
+curl --request GET \
 
+  --url http://localhost:8080/conf-values/key1
 
+ */
 
+export function getConfValueOfKey(key) {
 
+  return window.requestms.get(`conf-values/${key}`, {}, { loading: false });
 
+  // return window.requestms.get(`https://qa-kip-service-internal.kerryplus.com/temporary-parking-service/conf-values/${key}`, {}, { loading: false });
 
+}
 
+/* 
+修改key1的值:
 
+curl --request PUT \
 
+  --url http://localhost:8080/conf-values/key1 \
 
+  --header 'Content-Type: application/json' \
 
+  --data '{
 
+  "key": "key1",
 
+  "value": {
 
+    "key": "key333",
 
+    "description": "ffffffffff",
 
+    "createTime": "2023333300"
 
+  },
 
+  "description": "sofgggggg4545字",
 
+  "createTime": "2023-01-11 11:11:00"
 
+}'
 
+ */
 
+export function putConfValueOfKey(key, params) {
 
+  return window.requestms.put(`conf-values/${key}`, params, { loading: false });
 
+}
 
+/* 
+删除key1：
 
+curl --request DELETE \
 
+  --url http://localhost:8080/conf-values/key1
 
+ */
 
+export function deleteConfValueOfKey(key) {
 
+  return window.requestms.delete(`conf-values/${key}`, {}, { loading: false });
 
 }

+ 1 - 1
src/main.js
파일 보기 

@@ -6,7 +6,7 @@ import VConsole from 'vconsole';
 
 // 或者使用配置参数来初始化，详情见文档
 
 // 开发环境和qa环境 打开debug
 
 const debug = /dev-t?-?|qa-t?-?|sl-t?-?|808[0-9]/.test(window.location.href);
 
-if (debug && process.env.NODE_ENV !== 'dev') {
 
+if (debug) {
 
   window.vConsole = new VConsole(
 
     // { theme: 'dark' }
 
   );

+ 7 - 4
src/pages/parkingFee/mixins/parkingFee.js
파일 보기 

@@ -16,7 +16,7 @@ import uni from '@/utils/uniHooks';
 
 // import greenCom from '../components/green/home.vue';
 
 // import officeBlueCom from '../components/officeBlue/home.vue';
 
 // import purpleCom from '../components/purple/home.vue';
 
-import { parkingLots, qrCodes, unlicensedCarCheckIn } from '@/api/parking';
 
+import { parkingLots, qrCodes, unlicensedCarCheckIn, getConfValueOfKey } from '@/api/parking';
 
 import { reject } from 'lodash';
 
 
 export default {
 
@@ -478,13 +478,16 @@ export default {
 
         try {
 
           // 判断是否启用停车发票
 
           uni.showLoading()
 
-          const res = await getAccessH5(`${this.mallId}-invoice`);
 
-          if(res?.data === 1) {
 
+          // const res = await getAccessH5(`${this.mallId}-invoice`);
 
+          const res = await getConfValueOfKey('HEJIInvoiceSwitch')
 
+          const lbsId = uni.getStorageSync('lbsId')
 
+          if(res?.switch && res.lbsId.length && res.lbsId.indexOf(lbsId) > -1) {
 
             uni.hideLoading();
 
             // console.log(474, this.Dialog);
 
             this.$dialog({
 
               title: '温馨提示',
 
-              message: '小程序“停车开票”功能将从2023年8月10日起提供服务，支持开具3个月内停车记录的发票，如需停车开票，请稍后尝试或咨询服务台',
 
+              // message: '小程序“停车开票”功能将从2023年8月10日起提供服务，支持开具3个月内停车记录的发票，如需停车开票，请稍后尝试或咨询服务台',
 
+              message: res.message,
 
               confirmButtonColor: this.$theme[this.theme].primaryColor
 
             })
 
             // 提示用户

+ 8 - 6
src/pages/parkingFee/mixins/parkingFeeDetail.js
파일 보기 

@@ -156,12 +156,14 @@ export default {
 
     },
 
     // 前往支付
 
     async toPay() {
 
-      // 判断微信小程序与 h5 是否正常通信
 
-      const isReload = await theCommunicationBetweenWechatAndH5IsNormal()
 
-      if(!isReload) {
 
-        uni.setStorageSync('isReload', 1)
 
-        window.location.reload()
 
-        return
 
+      if (!isAlipayClient) {
 
+        // 判断微信小程序与 h5 是否正常通信
 
+        const isReload = await theCommunicationBetweenWechatAndH5IsNormal()
 
+        if(!isReload) {
 
+          uni.setStorageSync('isReload', 1)
 
+          window.location.reload()
 
+          return
 
+        }  
       }
 
       if (this.btnLoading) return
 
       this.btnLoading = true

+ 4 - 2
src/store/index.js
파일 보기 

@@ -185,7 +185,7 @@ const store = new Vuex.Store({
 
         //     '8aaa81947c6e1ca0017c7201e82d0001#8aaa80cc7d4fc7b3017d55c4d6120000#8aaa80b47c784020017c78b00d060022#ozdsB4yx3I7ez2Ba3DgEmeSR-CFY#13601829387'
 
         //   )
 
         // );
 
-        console.log(128, options);
 
+        // console.log('128128128128', options);
 
         // if (!pageId) return;
 
         let {
 
           groupId = '',
 
@@ -223,7 +223,9 @@ const store = new Vuex.Store({
 
         commit('SET_APPID', appId);
 
 
         // let { groupId, mallId } =
 
-        if (!/CRM|PUDONG|JINGAN/.test(source)) {
 
+        // source: "ALIPAY"
 
+        // console.log('227227227227', !/CRM|PUDONG|JINGAN|ALIPAY/.test(source), source)
 
+        if (!/CRM|PUDONG|JINGAN|ALIPAY/.test(source)) {
 
           const groupIdAndMallId = getGroupIdAndMallIdByLsbId(lbsId);
 
           groupId = groupIdAndMallId.groupId;
 
           mallId = groupIdAndMallId.mallId;

+ 12 - 0
src/utils/alipayClient/index.js
파일 보기 

@@ -0,0 +1,12 @@
 
+export function  alipayClientInit() {
 
+  return new Promise(resolve => {
 
+    // 请求 projectId
 
+    window.toWXSendMsg({
 
+      type: 'getProjectId',
 
+      options: {},
 
+    });
 
+    window.subscribe('projectId',( options ) => {
 
+      resolve(options.options);
 
+    });
 
+  })
 
+}

+ 15 - 0
src/utils/common/localStorage.js
파일 보기 

@@ -0,0 +1,15 @@
 
+import uni from '../uniHooks'
 
+export function localStorageInit() {
 
+  // 保留 carList
 
+  const carList = uni.getStorageSync('carList');
 
+  // 保留 buildingId
 
+  const buildingId = window.localStorage.getItem('buildingId')
 
+  // 每次进入页面清空 缓存数据
 
+  window.localStorage.clear();
 
+  if (carList) {
 
+    uni.setStorageSync('carList', JSON.parse(carList));
 
+  }
 
+  if (buildingId) {
 
+    window.localStorage.setItem('buildingId', buildingId)
 
+  }
 
+}

+ 28 - 1
src/utils/index.js
파일 보기 

@@ -247,6 +247,21 @@ export function getUrl() {
 
 export function windowSendInit() {
 
   const token = window.token;
 
   window.toWXSendMsg = function ( {type = '',funcName = '',options = {}} ) {
 
+    if(isAlipayClient) {
 
+      my.postMessage({
 
+        name:'h5',
 
+        body: {
 
+          token,
 
+          data: {
 
+            type: type,
 
+            funcName,
 
+            options,
 
+          }
 
+        }
 
+      });
 
+      return
 
+    }
 
+
 
     /**
 
      * 向小程序端发送消息
 
      */
 
@@ -269,6 +284,13 @@ export function windowSendInit() {
 
 
   // 主动订阅事件回调
 
   window.subscribe = function ( type,callback ) {
 
+    if(isAlipayClient) {
 
+      my.onMessage = function (response) {
 
+        console.log('293my.onMessage', response)
 
+        callback(response.body.data);
 
+      }
 
+      return
 
+    }
 
     const subscribeId = window.stompClient.subscribe('/user/' + token + '/toH5',function ( response ) {
 
       try {
 
         let res = {
 
@@ -347,4 +369,9 @@ export function getsTheCurrentTopic() {
 
   return { theme, componentName }
 
 }
 
 
-export * from './common/websocket.js'
 
+export function setToken() {
 
+  window.token = `${window.location.href}`.replace(/.*wx\/(.*)\/.*/g, '$1');
 
+}
 
+export * from './common/websocket.js'
 
+export * from './common/localStorage.js'
 
+export * from './alipayClient/index.js'