temporary-parking-frontend/src/App.vue

<template>
  <div>
    <!--    <div @click="send">send</div>-->
    <router-view></router-view>
  </div>
</template>
<script>
import { isMini } from '@/utils/common';

// import { crmQueryMemberInfo } from '@/utils/api-crm-member';
// import Ws from '@/utils/websocket';
import SockJS from '@/utils/sockjs';
import Stomp from '@/lib/stompjs/index';
// import uni from '@/utils/uniHooks';
import { Encrypt, Decrypt } from '@/utils/crypto';
import CacheTool from '@/utils/cache-tool';
import uni from '@/utils/uniHooks';
import { mapGetters } from 'vuex';
import { initWxJsSdkConfig } from '@/utils/login.js';
import { getUrlParams, getPlatform } from '@/utils/index.js';
// import qs from 'qs';
export default {
  data() {
    return {
      ws: null,
      msg: '',
      isInit: false,
      stompClient: null,
      host: 'https://dev-crm-kpl.kerryprops.com.cn/xcrm-api',
      token: '1234',
    };
  },
  created() {
    this.init();
  },
  mounted() {
    // if(!this.isInit) {
    //   this.init();
    // }
  },
  computed: {
    disabledBtn() {
      return this.numArr.findIndex((val) => !val) !== -1;
    },
    ...mapGetters({
      groupId: (state) => state.groupId,
      openid: (state) => state.openid,
      mallId: (state) => state.mallId,
      kipUserId: (state) => state.kipUserId,
      userInfo: (state) => state.userInfo,
    }),
  },
  methods: {
    async init() {
      // 初始化环境变量
      CacheTool.init();
      if (this.isInit) return;
      this.isInit = false;
      // 当前页面是否是在微信公众号运行：start
      const kipAccessToken = uni.getStorageSync('kipAccessToken');
      const query = getUrlParams();
      const platform = getPlatform();
      this.$store.commit('SET_GROUP_ID', query.groupId);
      this.$store.commit('SET_MALL_ID', query.mallid);
      console.log(65, kipAccessToken);
      // TODO true 需要取消
      if (platform === 'micromessenger' && !kipAccessToken || true) {
        // 如果用户没有登录的话，我们需要让用户完成授权拿到 openid
        const openid = uni.getStorageSync('openid');
        if (!openid && false) {
          // 当进入其他页面时，需要先打开路由展示
          this.isInit = true;
          // 前往授权页面
          this.$router.replace({
            path: '/openWx',
            query: query,
          });
          return;
        }
        // 初始化微信
        initWxJsSdkConfig(['chooseWXPay']);
        // 如果用户不选择登录，则不走登录逻辑
        this.isInit = true;
        this.$router.replace({
            path: '/login',
            query: query,
          });
        return;
      }
      // 如果用已经登录
      if (platform === 'micromessenger' && kipAccessToken) {
        this.$router.replace({
          path: '',
          query: query,
        });
        this.isInit = true;
        return;
      }
      // 当前页面是否是在微信公众号运行：end

      /* 微信小程序 webview 配置 */
      if (!query?.pageId?.length || !query?.token?.length) {
        return;
      }
      window.token = query?.token;
      // this.getTicket()
      this.wss(() => {
        this.$store.dispatch('baseInit', {
          pageId: window.location.href.replace(/.*pageId=([0-9A-Z]*).*/g, '$1'),
          // callback: this.wss,
          callback: () => {
            console.log(838383, this.isInit);
            this.isInit = true;
            // 当所有的数据都初始化之后再次执行
            this.getTicket();
          },
        });
      });
    },
    send() {
      window.stompClient.send(
        '/sendToWechat',
        {},
        JSON.stringify({
          token: window.token,
          data: Encrypt(
            JSON.stringify({
              type: 'openWxPay',
              options: {},
            })
          ),
        })
      );
    },
    wss(callback) {
      try {
        console.log(
          107107,
          this.host + '/hafengWebsocket' + '?token=' + window.token
        );
        const socket = new SockJS(
          this.host + '/hafengWebsocket' + '?token=' + window.token
        );
        window.stompClient = Stomp.over(socket);
        window.stompClient.debug = null;
        const self = this;
        this.windowSendInit();
        window.stompClient.connect({}, (frame) => {
          callback && callback();
          window.subscribe('projectId', (options) => {
            self.$store.commit('SET_PROJECT_ID', options.projectId);
            self.$store.commit('SET_ACCESS_TOKEN', options.accessToken);
          });
        });
      } catch (err) {
        console.log(err);
        callback && callback();
      }
    },
    disconnect() {
      if (window.stompClient != null) {
        window.stompClient.disconnect();
      }
    },
    windowSendInit() {
      // uni.showToast({title: '哈哈哈哈'})
      // return
      window.toWXSendMsg = function ({
        type = '',
        funcName = '',
        options = {},
      }) {
        /**
         * 向小程序端发送消息
         */
        if (!type) return;
        window.stompClient.send(
          '/sendToWechat',
          {},
          JSON.stringify({
            token: window.token,
            data: Encrypt(
              JSON.stringify({
                type: type,
                funcName,
                options,
              })
            ),
          })
        );
      };
      // 主动订阅事件回调
      window.subscribe = function (type, callback) {
        const subscribeId = window.stompClient.subscribe(
          '/user/' + window.token + '/toH5',
          function (response) {
            try {
              let res = {
                token: '', // 微信小程序端 页面的传递过来的token
                data: '', // 微信小程序端 页面的传递过来的信息（已加密）
              };
              if (response.body) {
                res = JSON.parse(response.body);
              }
              // 检查 微信小程序端 发送过来的信息和token是否与当前页面的 token一致。并且 res.data 携带信息，在解密之后是 json 格式
              if (res.token && res.token === self.token && res.data) {
                const msgJson = JSON.parse(Decrypt(res.data));
                const reg = new RegExp(type);
                // 获取 projectId
                if (reg.test(msgJson.type)) {
                  callback(msgJson.options, subscribeId);
                  subscribeId.unsubscribe();
                  return;
                }
              }
            } catch (err) {
              console.log('stomp error', err);
            }
          }
        );
      };
    },
    // 环境变量初始化
    envInit() {
      const href = `${window.location.href}`;
      // dev
      if (/8080|dev-/g.test(href)) {
        CacheTool.setEnv('qa');
        return;
      }
      // qa
      if (/qa-/g.test(href)) {
        CacheTool.setEnv('dev');
        return;
      }
      // prod
      CacheTool.setEnv('prod');
    },
    // h5获取配置---公众号支付
    getTicket() {
      console.log(173);
      let self = this;
      var datas = {
        groupId: this.groupId,
        mallid: this.mallId,
        url: window.location.href.split('#')[0],
      };
      self.$md(datas);
      console.log(199, datas);
      uni.request({
        // url: self.$baseURL + "api/1.0/login/getTicket",
        // url: 'https://qa-crm-kpl.kerryprops.com.cn/xcrm-api/' + "api/1.0/login/getTicket",
        method: 'POST',
        data: datas,
        header: JSON.parse(uni.getStorageSync('handleUser')),
        success: (res) => {
          console.log(206, res);
          if (res.data.code == 0) {
            self.$wx.config({
              debug: false, // 开启调试模式
              appId: res.data.data.appId, // 必填，公众号的唯一标识
              timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串
              signature: res.data.data.signature, // 必填，签名
              jsApiList: ['chooseWXPay'], // 必填，需要使用的JS接口列表
            });
            self.$wx.ready(function () {
              self.$wx.checkJsApi({
                jsApiList: ['chooseWXPay'],
                success: (res) => {
                  console.log('checked api:', res);
                },
                fail: (err) => {
                  console.log('check api fail:', err);
                },
              });
            });
            self.$wx.error(function (res) {
              console.log('err', res);
            });
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: 'none',
            });
          }
        },
      });
    },
  },
};
</script>
<style>
page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
}
</style>