template-parking-h5/src/App.vue

<template>
  <div>
    <keep-alive v-if="isInit" :include="cachedViews" :max="15">
      <router-view :key="key" />
    </keep-alive>
    <div v-else>
      <br />
      <br />
      <van-skeleton title :row="3" />
      <br />
      <br />
      <van-skeleton title :row="4" />
      <br />
      <br />
      <van-skeleton title :row="3" />
      <br />
      <br />
      <van-skeleton title :row="4" />
      <br />
      <br />
    </div>
    <wx-points-commit ref="wxPointsCommit"></wx-points-commit>
  </div>
</template>
<script>
import loginMinix from '@/mixins/login';
import { getIsMin, getIsWxh5, getUrlParams, initEnv, requestInit, wssInit, theCommunicationBetweenWechatAndH5IsNormal, isReloadBefore, getsTheCurrentTopic } from '@/utils/index.js';
import uni from '@/utils/uniHooks';
import { getAppIdByGroupIdAndMallId } from '@/utils/index.js';
import sensorsFn from '@/plugins/sensors';

export default {
  mixins: [loginMinix],
  async created() {
    await initEnv();
    await requestInit();
    await this.init();
    // await sensorsFn(); // 埋点初始化
    // 初始化环境变量
  },
  computed: {
    cachedViews() {
      return this.$store.state.cachedViews.cachedViews;
    },
    passLogin() {
      return this.$store.state.passLogin;
    },
    key() {
      return this.$route.path;
    },
    isInit() {
      return this.$store.state.isInit;
    },
  },
  watch: {
    cachedViews() {
      console.log('cachedViews(打印已经缓存的页面)', this.cachedViews);
    },
    $route: {
      immediate: true,
      handler(route) {
        const {
          name,
          meta: { keepAlive },
        } = route;
        if (name && keepAlive) {
          this.$store.commit('cachedViews/ADD_CACHED_VIEW', route);
        }
      },
    },
  },
  methods: {
    async init() {
      uni.setStorageSync('env', window.env);
      // 如果是微信小程序。初始化wss
      if (getIsMin()) {
        // 如果刷新之后没有与微信小程序建立链接则提示用户，关闭小程序重新进入
        const isReloadLoop = await isReloadBefore();
        if (isReloadLoop) {
          const isReload = await theCommunicationBetweenWechatAndH5IsNormal();
          if (isReload) {
            const { theme } = getsTheCurrentTopic();
            this.$dialog({
              title: '温馨提示',
              message: '当前网络异常，请重新进入小程序',
              confirmButtonColor: this.$theme[theme].primaryColor,
            });
            return;
          }
        }
        if (window.location.href.indexOf('cryptojs') > -1) {
          return;
        }
        // 保留 carList
        const carList = uni.getStorageSync('carList');
        // 每次进入页面清空 缓存数据
        window.localStorage.clear();
        if (carList) {
          uni.setStorageSync('carList', JSON.parse(carList));
        }
        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', {
            options,
            callback: () => {
              this.$store.commit('SET_IS_INIT', true);
              // 无感积分逻辑
              // this.wxEasyPointsCommitStatusInit();
            },
          });
        } catch (err) {
          console.log(err);
        }
      }
      // 如果是微信公众号
      if (getIsWxh5()) {
        // 判断用户是否登录
        this.micromessengerInit();
      }
    },
    micromessengerInit() {
      this.$store.commit('SET_IS_INIT', false);
      let path = '';
      let [groupId, mallId] = window.location.pathname.split('/').filter((elm) => elm);
      // return;
      // 如果groupId 是 tparking
      if (groupId === 'tparking') {
        [path, groupId, mallId] = window.location.pathname.split('/').filter((elm) => elm);
      }
      if (!groupId || !mallId) {
        groupId = uni.getStorageSync('groupId');
        mallId = uni.getStorageSync('mallId');
      }

      this.$store.commit('SET_GROUP_ID', groupId);
      this.$store.commit('SET_MALL_ID', mallId);
      // 设置appid
      const appid = getAppIdByGroupIdAndMallId({
        groupId,
        mallId,
        type: 'appid',
      });
      uni.setStorageSync('appid', appid);
      // 如果用户没有openid
      const openid = uni.getStorageSync('openid');

      const query = getUrlParams();
      // return;
      // 设置openid
      this.$nextTick(() => {
        this.$store.commit('SET_IS_INIT', true);
        if (openid && openid !== 'undefined') {
          this.$store.commit('SET_OPENID', openid);
          // 用户选择不登录
          if (this.isLogin !== '3') {
            this.$store.commit('SET_IS_INIT', false);
            setTimeout(() => {
              this.$store.commit('SET_IS_INIT', true);
            }, 700);
            // 判断用户是否需要登录
            this.checkIsLogin(() => {
              this.$store.commit('SET_IS_INIT', true);
              // window.location.reload();
              this.$store.dispatch('getUserDetail');
              this.$store.commit('SET_MEMBER', uni.getStorageSync('member'));
              // 无感积分逻辑
              this.wxEasyPointsCommitStatusInit();
              // uni.getStorageSync();
            });
          }
        } else {
          // 前往授权页面
          if (this.$route.path.indexOf('openWx') < 0) {
            let openWxPath = 'openWx';
            if (this.$route.fullPath === '/') {
              openWxPath = `/${groupId}/${mallId}/openWx`;
            }
            this.$router.push({
              path: openWxPath,
              query,
            });
          }
        }
      });
    },
    // 无感积分相关
    async wxEasyPointsCommitStatusInit() {
      return;
      this.$refs.wxPointsCommit.open();
      // 判断用户是否登陆
      if (uni.getStorageSync('openid') && uni.getStorageSync('member') && uni.getStorageSync('member') !== {}) {
        const easyPointsCommitStatus = await getWxEasyPointsCommitStatus();
        if (easyPointsCommitStatus) {
          this.$refs.wxPointsCommit.open();
        }
      }
    },
  },
};
</script>
<style lang="less">
/* 如果有其他引入，合并即可，该文件最好放第一行 */
// @import '@kip/ui-mobile/theme/theme.css';
@import '~@/kui/theme/theme.css';
</style>

<style>
page {
  display: flex;
  flex-direction: column;
  height: 100%;
}

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