应用市场错误响应拦截与错误页制作

2020/appstore/index.js

@@ -1,54 +0,0 @@
import Vue from 'vue'
import axios from 'axios'
import router from '../router'
import VueAxios from 'vue-axios'
import store from '../store'
import {Toast, Dialog} from 'cube-ui'
Vue.use(VueAxios, axios);
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么，添加公共前缀，自动添加sessionid
  let sessionId = store.state.sessionId;
  if (config.method == 'post') {
    if (sessionId) {
      config.data.sessionId = sessionId;
    }
    config.url = "/attendance" + config.url
  } else if (config.method == 'get') {
    if (sessionId) {
      config.url = "/attendance" + config.url + '?sessionId=' + sessionId
    }
  }
  // 添加loading
  return config;
}, function (error) { // 对请求错误做些什么
  console.error(error)
  return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {  // 在接收请求之前做些什么
    // 这里就是status == 200
    let data = response.data
    // 未登录，登录
    if (data.respCode != '0000') {
      if (data.respCode == '0001') {  // 权限失败
        router.push({name: "Error"})  // 往错误页面跳转
      } else if (!response.config.headers.errorHandler) {  // 可在请求时在header里面设置参数表示自己处理异常
        Dialog.$create({type: 'alert', title: '提示', content: response.data.respMsg || '系统异常，请稍后重试'}).show()
      }
      return Promise.reject(response)
    }
    return data
  },
  function (error) {    // 对响应错误做些什么
    Toast.$create({
      type: 'text',
      txt: '服务器开小差了，请稍后重试',
      time: 2000
    }).show()
    return Promise.reject(error);
  })

2020/appstore/src/assets/css/index-mobile.css

@@ -498,6 +498,11 @@
    text-align: left;
  }
  .app-search-history-item,
  .app-search-history-delete {
    cursor: pointer;
  }
  .app-search-history-item {
    display: inline-block;
    width: auto;
@@ -538,4 +543,44 @@
  .app-search-item .app-download {
    margin-top: .42rem;
  }
  .no-data-img {
    width: 3.2rem;
    height: 2.8rem;
    background: url(../img/no-data-mobile.png) center no-repeat;
    margin: 0 auto;
  }
  
  .no-data-text {
    font-size: .16rem;
    color: #232D34;
    line-height: .24rem;
  }
  /* 错误页 */
  .error-page {
    margin-left: -1.25rem;
    margin-top: -1.675rem;
  }
  .error-img {
    width: 2.5rem;
    height: 2.19rem;
    background: url(../img/error500-mobile.png) center no-repeat;
  }
  .error-text {
    text-align: center;
    font-size: .16rem;
    line-height: .24rem;
    margin-top: .2rem;
  }
  .back-home {
    width: .88rem;
    height: .32rem;
    font-size: .14rem;
    line-height: .32rem;
    margin: .4rem auto 0;
  }
}

2020/appstore/src/assets/css/index.css

@@ -19,6 +19,10 @@ body {
  text-align: center;
}
a {
  text-decoration: none;
}
.main-content {
  width: 960px;
  margin: 0 auto;

2020/appstore/src/axios.js

@@ -0,0 +1,27 @@
import axios from 'axios';
import router from './router/index';
// axios.interceptors.request.use(
//   (config) => {
//     // 在发送请求之前做些什么，添加公共前缀，自动添加sessionid
//   },
//   (error) => {
//     // 对请求错误做些什么
//     return Promise.reject(error);
// });
axios.interceptors.response.use(
  response => { // status == 200 接收请求之前判断
    let data = response.data;
    if (data.X_RESULTCODE !== '0') {
      return Promise.reject(response);
    }
    return data;
  },
  error => { // 处理响应错误
    router.push({ name: 'Error' });
  },
);
export default axios;

2020/appstore/src/main.js

@@ -1,11 +1,5 @@
import Vue from 'vue';
import App from './App.vue';
import axios from 'axios';
import router from './router';
import store from './store';
import './assets/css/index.css';
import './assets/css/index-mobile.css';
import {
  Input,
  Row,
@@ -13,6 +7,14 @@ import {
  Loading,
} from 'element-ui';
import App from './App.vue';
import store from './store';
import router from './router';
import axios from './axios';
import './assets/css/index.css';
import './assets/css/index-mobile.css';
Vue.config.productionTip = false;
Vue.prototype.$http = axios;

2020/appstore/src/store/index.js

@@ -8,51 +8,10 @@ export default new Vuex.Store({
  state: {
    appTypeId: null,
    appData: [], // APP_TYPE []
    appId: null,
  },
  getters: {
    appData: (state) => state.appData, // 获取接口下 app 数据字段
    // appLists: (state) => { // 搜索也获取所有分类下的 app，从中筛选
    //   let allApps = [];
    //   let appData = state.appData;
    //   if (appData.length !== 0) {
    //     appData.forEach((e) => {
    //       allApps = allApps.concat(e.APP_LIST);
    //     });
    //     return allApps;
    //   }
    //   return [];
    // },
    appList: (state) => { // APP_LIST [] 获取当前分类下的 app 组
      let appData = state.appData;
      let appTypeId = state.appTypeId;
      if (appData.length !== 0 && appTypeId) {
        let list = appData.find((e) => e.APP_CATALOG_ID == state.appTypeId).APP_LIST; // 忽略字符串与数字
        return list;
      }
      return [];
    },
    appTypeId: (state) => state.appTypeId, // 获取当前配置的 类别
    appTypeName: (state) => { // 获取当前配置的 类别
      let appData = state.appData;
      let appTypeId = state.appTypeId;
      if (appData.length !== 0 && appTypeId) {
        let name = appData.find((e) => e.APP_CATALOG_ID == state.appTypeId).CATALOG_NAME;
        return name;
      }
      return '';
    },
    app: (state) => { // 获取当前 app
      let appData = state.appData;
      let appTypeId = state.appTypeId;
      let appId = state.appId;
      if (appData.length !== 0 && appTypeId && appId) {
        let list = appData.find((e) => e.APP_CATALOG_ID == appTypeId).APP_LIST;
        let app = list.find((e) => e.APP_ID == appId);
        return app;
      }
      return {};
    },
  },
  mutations: {
    setAppData(state, data) { // 设置接口 app 数据
@@ -64,9 +23,6 @@ export default new Vuex.Store({
    setAppTypeId(state, typeId) { // 设置 appTypeId
      state.appTypeId = typeId;
    },
    setAppId(state, appId) { // 设置 appId
      state.appId = appId;
    },
  },
  actions: {},
});

2020/appstore/src/views/Detail.vue

@@ -1,5 +1,5 @@
<template>
  <div v-loading="showLoading" class="app-detail">
  <div class="app-detail">
    <div class="catalog">
      <div class="main-content">
        <div class="front-catalog">{{appTypeName}}<span>></span></div>
@@ -93,19 +93,32 @@ export default {
  },
  data() {
    return {
      showLoading: true,
      showDownCard: false,
      appDownLeft: '',
      appDownTop: '',
      judgeUrl: null,
      judgeUrl: null, // 设备对应的 apk 链接
    };
  },
  computed: {
    appTypeName() {
      return this.$store.getters.appTypeName;
      let appData = this.$store.getters.appData;
      let appTypeId = this.$store.getters.appTypeId;
      if (appData.length !== 0 && appTypeId) {
        let name = appData.find((e) => e.APP_CATALOG_ID == appTypeId).CATALOG_NAME;
        return name;
      }
      return '';
    },
    app() {
      return this.$store.getters.app;
      let appData = this.$store.getters.appData;
      let appTypeId = this.$route.query.appTypeId;
      let appId = this.$route.query.appId;
      if (appData.length !== 0 && appTypeId && appId) {
        let list = appData.find((e) => e.APP_CATALOG_ID == appTypeId).APP_LIST;
        let app = list.find((e) => e.APP_ID == appId);
        return app;
      }
      return {};
    },
    apkType() {
      if (this.app !== undefined && Object.keys(this.app).length !== 0) {
@@ -115,17 +128,9 @@ export default {
      return [];
    },
  },
  created() {
    // 设置当前页的 app 信息
    let appTypeId = this.$route.query.appTypeId;
    let appId = this.$route.query.appId;
    this.$store.commit('setAppTypeId', appTypeId);
    this.$store.commit('setAppId', appId);
  },
  methods: {
    showPreview(app) { // 是否展示 app 预览图
      if (Object.keys(app).length !== 0) {
        this.showLoading = false;
        if (this.getAppPreview(app).length !== 0) {
          return true;
        }
@@ -142,7 +147,6 @@ export default {
        }
      });
      appPreview.sort();
      this.appPreviewArr = appPreview;
      return appPreview;
    },
    sortApkType(type) { // app 版本排序

2020/appstore/src/views/Error.vue

@@ -1,17 +1,57 @@
<template>
  <div class="error-page">请求不到数据</div>
  <div class="error-page">
    <div class="error-img"></div>
    <div class="error-text">{{warningText}}</div>
    <div class="back-home" @click="backHome">返回首页</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: '数据请求错误',
      warningText: '对不起，服务器连接失败…',
    };
  },
  methods: {
    backHome() {
      this.$router.push({ name: 'Home' });
    },
  },
};
</script>
<style>
.error-page {
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -160px;
  margin-top: -183px;
  font-weight: 400;
}
.error-img {
  width: 320px;
  height: 280px;
  background: url(../assets/img/error500-pc.png) center no-repeat;
}
.error-text {
  font-size: 16px;
  color: #232D34;
  line-height: 24px;
}
.back-home {
  width: 88px;
  height: 32px;
  background: #19BB20;
  border-radius: 4px;
  font-size: 14px;
  color: #FFFFFF;
  line-height: 32px;
  margin: 30px auto 0;
  cursor: pointer;
}
</style>

2020/appstore/src/views/Frame.vue

@@ -54,7 +54,7 @@
      </div>
    </transition>
    <router-view/>
    <router-view v-loading="showLoading" />
  </div>
</template>
@@ -76,6 +76,9 @@ export default {
    showNav() { // 是否展示
      return !(window.innerWidth < 980 && this.$route.path !== '/');
    },
    showLoading() {
      return this.appTypes.length === 0;
    },
  },
  created() {
    // 请求数据
@@ -87,26 +90,21 @@ export default {
    // 测试环境 /display/getAppType  /ipu-home/wlwdata?action=appStore.getAppType
    this.$http.get('/ipu-home/wlwdata?action=appStore.getAppType')
      .then((res) => {
        this.appTypes = res.data.APP_TYPE;
        this.$store.commit('setAppData', res.data.APP_TYPE);
      })
      .catch((err) => {
        this.$router.push({ name: 'Error' });
        this.appTypes = res.APP_TYPE;
        this.$store.commit('setAppData', res.APP_TYPE);
      });
  },
  beforeRouteUpdate(to, from, next) {
    // 进入之前，更新state信息
  beforeRouteUpdate(to, from, next) { // 进入之前，更新state信息
    if (to.query.appTypeId) {
      this.$store.commit('setAppTypeId', to.query.appTypeId);
    } else {
      this.$store.commit('setAppTypeId', this.appTypes[0].APP_CATALOG_ID);
    }
    next();
  },
  methods: {
    isActive(typeId) {
      if (this.$route.name === 'Search') return false;
      if (this.$route.name === 'Home' && Object.keys(this.$route.query).length === 0) {
        this.$store.commit('setAppTypeId', this.appTypes[0].APP_CATALOG_ID);
      }
      let appTypeId = this.$store.getters.appTypeId;
      return appTypeId == typeId; // 忽略类型
    },

2020/appstore/src/views/Home.vue

@@ -1,8 +1,8 @@
<template>
  <div class="app-home">
    <div v-loading="showLoading" class="app-list">
    <div class="app-list">
      <el-row :gutter="49.5">
        <template v-for="(app, index) in getAppList()">
        <template v-for="(app, index) in appList">
          <el-col :span="8" :key="index">
            <div class="app-item" @click="toAppDetail(app.APP_ID)">
              <div class="main-content">
@@ -62,21 +62,23 @@ export default {
  },
  data() {
    return {
      showLoading: true,
      showDownload: false,
      apkType: [],
      judgeUrl: null,
      judgeUrl: null, // 设备对应的 apk 链接
    };
  },
  methods: {
    getAppList() {
      let appList = this.$store.getters.appList;
      this.showLoading = false;
      if (appList.length !== 0) {
        return appList;
  computed: {
    appList() {
      let appData = this.$store.getters.appData;
      let appTypeId = this.$store.getters.appTypeId;
      if (appData.length !== 0 && appTypeId) {
        let list = appData.find((e) => e.APP_CATALOG_ID == appTypeId).APP_LIST; // 忽略字符串与数字
        return list;
      }
      return [];
    },
  },
  methods: {
    sortApkType(type) { // app 版本排序
      let apkType = [...type]; // 不能直接对 $store 内的数据进行倒转操作，先复制
      if (apkType.length === 1 || apkType[0].APK_TYPE.toLowerCase() === 'ios') {
@@ -86,7 +88,6 @@ export default {
    },
    toAppDetail(appId) { // 进入 app 详情页
      let appTypeId = this.$store.getters.appTypeId;
      this.$store.commit('setAppId', appId);
      this.$router.push({
        name: 'Detail',
        query: {
@@ -95,12 +96,12 @@ export default {
        },
      });
    },
    toDownload(app) {
    toDownload(app) { // 下载按钮
      let apk = {};
      this.apkType = this.sortApkType(app.APP_INFO);
      if (window.innerWidth >= 980) {
      if (window.innerWidth >= 980) { // pc 弹出二维码
        this.showDownload = true;
      } else {
      } else { // 辨别设备 跳转下载链接
        const UA = navigator.userAgent.toLowerCase();
        if (UA.indexOf('micromessenger') !== -1) return alert('请点击右上角前往浏览器下载');
        if (UA.indexOf('iphone') !== -1) {

2020/appstore/src/views/Search.vue

@@ -48,13 +48,17 @@
              </div>
              <div class="app-desc">{{app.APP_BRIEF}}</div>
            </div>
            <a class="app-download" @click.stop="toDownload(app)">下载</a>
            <a class="app-download" :href="judgeUrl"
              @click.stop="toDownload(app)">下载</a>
          </div>
        </div>
      </template>
    </div>
    <div v-else class="no-data">未查询到资源，请重新搜索</div>
    <div v-else class="no-data">
      <div class="no-data-img"></div>
      <div class="no-data-text">{{warningText}}</div>
    </div>
    <div v-if="showDownload">
      <div class="black-sheild">
@@ -87,10 +91,12 @@ export default {
  },
  data() {
    return {
      showDownload: false,
      apkType: [],
      showDownload: false, // 展示下载二维码
      apkType: [], // app 版本
      value: '',
      hisArr: [], // 搜索历史记录
      judgeUrl: null, // 设备对应的 apk 链接
      warningText: '对不起，没有找到您搜索的结果',
    };
  },
  computed: {
@@ -99,28 +105,18 @@ export default {
      let appData = this.$store.getters.appData;
      if (appData.length !== 0) {
        appData.forEach((e) => {
          allApps = allApps.concat(e.APP_LIST);
          allApps = allApps.concat(e.APP_LIST); // 将所有分类下 app 合并在一起
        });
      }
      if (allApps.length !== 0) {
        let resultApps = this.querySearch(allApps);
        if (resultApps.length !== 0) {
          return resultApps;
        }
        return resultApps;
      }
      return [];
    },
    showResults() { // 展示搜索结果 如无则显示未查询到页面
      if (this.resultApps.length !== 0 && this.$route.query.key) { // 有结果且有查询词
        return true;
      }
      if (window.innerWidth < 980 && this.resultApps.length === 0 && !this.$route.query.key) { // 移动端无查询
        return true;
      }
      return false;
    showResults() { // 展示搜索结果 如无则显示未查询到
      return !(this.resultApps.length === 0 && this.$route.query.key); // 有查询词且返回结果为空
    },
    showHistory() { // 展示搜索历史记录
      return this.resultApps.length === 0 && !this.$route.query.key // 移动端无查询时
      return (this.resultApps.length === 0 && !this.$route.query.key); // 移动端无查询时
    },
  },
  created() {
@@ -138,11 +134,10 @@ export default {
  },
  methods: {
    querySearch(allApps) { // 搜索
      this.showLoading = false;
      let value = this.$route.query.key;
      if (value) {
      let val = this.$route.query.key;
      if (val) {
        let results = allApps.filter((e) => {
          return e.APP_NAME.toLowerCase().indexOf(value.toLowerCase()) !== -1;
          return e.APP_NAME.toLowerCase().indexOf(val.toLowerCase()) !== -1;
        });
        return results; // 搜索词有效时匹配数据（可能为空）
      }
@@ -231,8 +226,8 @@ export default {
    toDownload(app) { // 下载
      let apk = {};
      this.apkType = this.sortApkType(app.APP_INFO);
      if (window.innerWidth >= 980) {
        this.showDownload = true; // pc 端启用二维码，移动端识别设备挂载链接
      if (window.innerWidth >= 980) { // pc 端启用二维码，移动端识别设备挂载链接
        this.showDownload = true;
      } else {
        const UA = navigator.userAgent.toLowerCase();
        if (UA.indexOf('micromessenger') !== -1) return alert('请点击右上角前往浏览器下载');
@@ -296,4 +291,17 @@ export default {
.no-data {
  margin-top: 50px;
}
.no-data-img {
  width: 320px;
  height: 280px;
  background: url(../assets/img/no-data-pc.png) center no-repeat;
  margin: 0 auto;
}
.no-data-text {
  font-size: 16px;
  color: #232D34;
  line-height: 24px;
}
</style>