Merge pull request rock-app#30 from Darren-chenchen/master

修复android5.0预览界面不显示问题
noxue · Oct 26, 2018 · 7551200 · 7551200
2 parents 736fd1a + c805ee5
commit 7551200
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/client/package.json b/client/package.json
@@ -12,14 +12,15 @@
   },
   "dependencies": {
     "axios": "^0.17.1",
+    "babel-polyfill": "^6.26.0",
     "element-ui": "^2.1.0",
     "less-loader": "^4.1.0",
     "vue": "^2.5.2",
+    "vue-context-menu": "^2.0.6",
+    "vue-infinite-scroll": "^2.0.2",
     "vue-lazyload": "^1.1.4",
     "vue-qr": "^1.2.8",
-    "vue-router": "^3.0.1",
-    "vue-context-menu": "^2.0.6",
-    "vue-infinite-scroll": "^2.0.2"
+    "vue-router": "^3.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",

diff --git a/client/src/components/appDetail/appPreView.vue b/client/src/components/appDetail/appPreView.vue
@@ -5,7 +5,9 @@
       <!--中间-->
       <div :class="getContentClass()" v-if="this.appBaseData">
         <div :class="getLeftClass()">
-          <div v-if="this.isIos || this.isAndroid">
+          <!--手机上查看-->
+          <div v-show="isPhone">
+            <p>手机</p>
             <phoneWrapper
               :appBaseData="appBaseData"
               :appVersionInfo="appVersionInfo"
@@ -15,7 +17,9 @@
           </div>
 
 
-          <div class="pcWrapper" v-if="!this.isIos && !this.isAndroid">
+          <!--pc上查看-->
+          <div class="pcWrapper" v-show="!isPhone">
+            <p>33333333</p>
             <img class="appicon" :src="getIconUrl()" alt="">
             <p class="title">{{this.appBaseData.appName}}</p>
             <div class="info">
@@ -32,8 +36,8 @@
         </div>
 
 
-        <!--手机视图-->
-        <div class="preview-mobilewrapper" v-show="this.showQRCode">
+        <!--右侧二维码-->
+        <div class="preview-mobilewrapper" v-show="!isPhone">
           <img class="mobieImg" src='../../assets/ic_mobilphone.png'>
           <vue-qr class="qrcodeImg" :text="downloadUrl" :margin="20"></vue-qr>
           <p class="codetips">请扫描二维码下载APP</p>
@@ -59,8 +63,8 @@
         appBaseData: null,
         downloadUrl: '',
         platformStr: '',
-        showQRCode: false,
-        pwd: ''
+        pwd: '',
+        isPhone: false
       }
     },
     computed: {
@@ -93,16 +97,21 @@
           }
       }
     },
-    created() {
+    mounted() {
       this.getAppInfo(this.$route.params.id)
 
       // 判断是否是手机设备
       if (this.isIos || this.isAndroid) {
-        this.showQRCode = false
+        this.isPhone = true
       } else {
-        this.showQRCode = true
+        this.isPhone = false
       }
     },
+    created() {
+      this.$nextTick(() => {
+      })
+
+    },
     methods: {
       getTableBackground(index) {
         if (index % 2 === 0) {
@@ -131,7 +140,7 @@
           }
 
         }, reject => {
-
+          this.$message.error('服务器错误')
         })
       },
       getIconUrl() {
@@ -173,14 +182,14 @@
       },
       getContentClass() {
         // 判断是否是手机设备
-        if (this.isIos || this.isAndroid) {
+        if (this.isPhone) {
           return 'preview-middlewrapper-forPhone'
         } else {
           return 'preview-middlewrapper'
         }
       },
       getLeftClass() {
-        if (this.isIos || this.isAndroid) {
+        if (this.isPhone) {
           return 'left-forPhone'
         } else {
           return 'left'

diff --git a/client/src/main.js b/client/src/main.js
@@ -11,6 +11,9 @@ import {configAxios} from './api/basehttp'
 import VueLazyLoad from 'vue-lazyload'
 import infiniteScroll from 'vue-infinite-scroll'
 
+// 解决android5.0 上预览界面不显示的问题
+import 'babel-polyfill'
+
 Vue.use(infiniteScroll)
 
 Vue.config.productionTip = false
@@ -50,7 +53,6 @@ Vue.use(VueLazyLoad, {
   loading: require('./assets/logo.png')
 })
 
-
 // 配置接口信息
 configAxios()