TALL-MUI-4/App.vue

<script>
// import { mapState } from 'vuex';

export default {
  // computed: {
  //   ...mapState(['theme']),
  // },

  // watch: {
  //   theme(newTheme) {
  //     console.log('newTheme: ', newTheme);
  //     if (!newTheme) return;
  //     this.loadTheme();
  //   },
  // },

  async onLaunch(options) {
    // this.loadTheme();
    console.log('onLaunch options: ', options);
    this.checkNetwork(); // 监听网络状态
    this.getSystemInfo(); // 获取系统设备信息、
    await this.syncLocalDataToStore(options.query.u); // 将localStorage里的数据同步到store里
    const token = await this.getToken();
    if (!token) {
      this.$ui.showToast('获取用户信息失败, 请登录');
      // TODO: 跳转登录界面
      return;
    }
    this.noPhone(this.$store.state.user.phone);
    this.$store.dispatch('socket/initSocket');
  },

  methods: {
    // loadTheme() {
    //   const path = this.theme.replace('-', '/');
    //   import(`./common/styles/${path}.scss`);
    // },

    async getToken() {
      const { token } = this.$store.state.user;
      const tokenIsAvailable = this.$store.getters['user/tokenIsAvailable'];
      const userId = this.$store.getters['user/userId'];
      if (token && tokenIsAvailable) {
        // 1.1 store里有token 且没过期直接：使用store的token
        return token;
      } else {
        // 2. 根据userId获取token
        if (userId) {
          try {
            const { token } = await this.$store.dispatch('user/getTokenByUserId', userId);
            return token;
          } catch (error) {
            console.error('error: ', error);
            return null;
          }
        } else {
          return null;
        }
      }
    },

    /**
     * 将localStorage里的数据同步到store里
     * user, token, tokenExpiredTime
     */
    syncLocalDataToStore(urlUserId) {
      return new Promise((resolve, reject) => {
        try {
          const localUser = uni.$storage.getStorageSync('user');
          const localToken = uni.$storage.getStorageSync('anyringToken');
          const tokenExpiredTime = uni.$storage.getStorageSync('tokenExpiredTime');
          if (!this.$store.state.user.user) {
            if (localUser) {
              // 同步user信息
              const user = JSON.parse(localUser);
              if (!urlUserId || user.id === urlUserId) {
                this.$store.commit('user/setUser', user);
              } else {
                this.$store.commit('user/setUser', { id: urlUserId });
              }
            } else {
              this.$store.commit('user/setUser', { id: urlUserId });
            }
          }

          if (this.$store.state.user.token && localToken) {
            // 同步token
            this.$store.commit('user/setToken', localToken);
          }
          if (this.$store.state.user.tokenExpiredTime && tokenExpiredTime) {
            // 同步tokenExpiredTime
            this.$store.commit('user/setTokenExpiredTime', +tokenExpiredTime);
          }
          resolve();
        } catch (error) {
          reject(error);
        }
      });
    },

    // 检查网络状态 设置store里的网络状态变量
    // 网络连接 且 不是2g 不是3g 才算是网络连接; 否则不是 将启用本地存储
    checkNetwork() {
      uni.getNetworkType({
        success: ({ networkType }) => {
          this.$store.commit('setNetworkConnected', !(networkType === 'none' || networkType === '2g' || networkType === '3g'));
        },
      });
      // 监听网络状态的变化
      uni.onNetworkStatusChange(({ isConnected, networkType }) => {
        this.$store.commit('setNetworkConnected', isConnected && !(networkType === '2g' || networkType === '3g'));
      });
    },

    // 获取系统设备信息
    getSystemInfo() {
      uni.getSystemInfo({
        success: result => {
          this.$store.commit('setSystemInfo', result);
        },
        fail: error => {
          console.error('getSystemInfo fail:', error);
        },
      });
    },

    // 登录
    async signin() {
      try {
        const data = await uni.$u.api.signin();
        if (data && data.token) {
          this.$store.commit('user/setUser', data);
          this.$store.commit('user/setToken', data.token);
          noPhone(data.phone);
        } else {
          uni.$ui.showToast('返回数据异常');
        }
      } catch (error) {
        console.error('error: ', error);
        uni.$ui.showToast(error || '登录失败');
      }
    },

    /**
     * 没有手机号 跳转绑定手机号的界面
     * @param {string} phone
     */
    async noPhone(phone) {
      if (!phone) {
        // TODO:
        // uni.navigateTo({ url: '/pages/phone-bind/phone-bind' });
      }
    },
  },
};
</script>

<style lang="scss">
/*每个页面公共css */
@import '@/uni_modules/vk-uview-ui/index.scss';
@import '@/common/styles/iconfont.scss';
@import '@/common/styles/app.scss';
@import '@/common/styles/tailwind.scss';
@import '@/common/styles/theme/index.scss';

page {
  height: 100%;
}
</style>