推荐云手机

components/layout/index.vue

@@ -16,9 +16,9 @@ export default {
   },
   data() {
     return {
-        visible: true,
-        isApp: null,
-        isAndroid: null
+      visible: true,
+      isApp: null,
+      isAndroid: null
     };
   },
   mounted() {
@@ -27,18 +27,19 @@ export default {
     // 如果是苹果就显示，不需要做任何处理
     this.isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser
     this.isAndroid = this.$userAgent.isAndroid;
-    if(!this.isApp) return this.visible = false
-    if(this.isApp && this.isAndroid) {
-        this.visible = !!window.native.goneBack
-        return
+    if (!this.isApp) return this.visible = false
+    if (this.isApp && this.isAndroid) {
+      this.visible = !!window.native.goneBack
+      this.visible && window.native.goneBack()
+      return
     }
   },
   methods: {
     goBack() {
       // 如果为true是最前一页
-      if(this.isGoBack) {
+      if (this.isGoBack) {
         this.isAndroid ? window.native.backClick() : window.webkit.messageHandlers.appGoBack.postMessage({})
-        return 
+        return
       }
       this.$router.go(-1)
     }
@@ -47,11 +48,14 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.go-back{
-    position: fixed;
-    width: 42px;
-    height: 42px;
-    left: 26px;
-    bottom: 98px;
+.layout {
+  height: 100%;
+}
+.go-back {
+  position: fixed;
+  width: 42px;
+  height: 42px;
+  left: 26px;
+  bottom: 98px;
 }
 </style>

pages/introductionCloudPhone/articleDetails.vue

@@ -1,23 +1,26 @@
 <template>
-  <layout title='福利社区文章' :isRouterBack="true">
-    <div :class="isShowApp?'article':'article article-white'" >
-      <div class="article-title" v-if="isShowApp">
-        福利社区文章
-      </div>
+  <layoutBack :isGoBack='false'>
+    <layout title='福利社区文章' :isRouterBack="true">
+      <div :class="isShowApp?'article':'article article-white'">
+        <div class="article-title" v-if="isShowApp">
+          福利社区文章
+        </div>
 
-      <div class="article-title2">
-        {{ title }}
-      </div>
+        <div class="article-title2">
+          {{ title }}
+        </div>
 
-      <div class="article-content" v-html="content">
-      </div>
+        <div class="article-content" v-html="content">
+        </div>
 
-    </div>
-  </layout>
+      </div>
+    </layout>
+  </layoutBack>
 </template>
   
   <script>
 import layout from './components/layout';
+import layoutBack from '@/components/layout';
 export default {
   auth: false,
   name: 'articleDetails',
@@ -30,7 +33,7 @@ export default {
       content: '',
     };
   },
-  components: { layout },
+  components: { layout, layoutBack },
   created() {
     if (this.$route.query.id) {
       this.evantDetails(this.$route.query.id)
@@ -40,7 +43,7 @@ export default {
   computed: {
     isShowApp() {
       // 是否是APP
-      // const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
+      const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
       const isAndroid = this.$userAgent.isAndroid;
       const isIos = this.$userAgent.isIos;
       const isWx = this.$userAgent.isWx;
@@ -48,7 +51,7 @@ export default {
       // 如果微信小程序环境的，也不显示头部
       // 如果是h5 就显示头部
       let bool = false;
-      bool = isAndroid || isIos ? true : false;
+      bool = isApp && (isAndroid || isIos) ? true : false;
       return bool;
     },
   },
@@ -73,7 +76,7 @@ export default {
     font-family: PingFangSC, PingFang SC;
     font-weight: 500;
     font-size: 18px;
-    color: #CFD1D4;
+    color: #cfd1d4;
     line-height: 25px;
     text-align: left;
     font-style: normal;
@@ -98,15 +101,15 @@ export default {
 
 .article-white {
   .article-title {
-    color: #0A132B;
+    color: #0a132b;
   }
 
   .article-title2 {
-    color: #0A132B;
+    color: #0a132b;
   }
 
   .article-content {
-    color: #0A132B;
+    color: #0a132b;
   }
 }
 </style>

pages/introductionCloudPhone/components/layout.vue

@@ -7,7 +7,6 @@
       <slot></slot>
     </div>
 
-    <div v-if="isShowApp" class="floating-back" @click="leaveFun"> <img width="42" src="@/assets/image/introductionCloudPhone/back.png" /></div>
   </div>
 </template>
   
@@ -61,12 +60,12 @@ export default {
       // 如果微信小程序环境的，也不显示头部
       // 如果是h5 就显示头部
       let bool = false;
-      bool = isAndroid || isIos ? true : false;
+      bool = isApp && (isAndroid || isIos) ? true : false;
       return bool;
     },
     isShowNavBar() {
       // 是否是APP
-      // const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
+      const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
       const isAndroid = this.$userAgent.isAndroid;
       const isIos = this.$userAgent.isIos;
       const isWx = this.$userAgent.isWx;
@@ -76,7 +75,7 @@ export default {
       let bool = false;
       // bool = isApp ? (isAndroid ? !isAndroid : isIos) : (isWx ? !isWx : !isWx);
 
-      bool = isAndroid || isIos || isWx ? false : true;
+      bool = (isApp && (isAndroid || isIos)) || isWx ? false : true;
 
       // console.log()
       return bool || this.forceShowNavBar;
@@ -91,35 +90,6 @@ export default {
       }
       this.$router.go(-1);
     },// 退出相关逻辑
-    leaveFun() {
-      const isIos = this.$userAgent.isIos;
-      const isAndroid = this.$userAgent.isAndroid;
-      const isWx = this.$userAgent.isWx;
-
-      if (this.isRouterBack) {
-        if (this.$listeners.goBack) {
-          this.$emit('goBack');
-          return;
-        }
-        this.$router.go(-1);
-      } else if (isAndroid) {
-        window.native.backClick && window.native.backClick();
-      } else if (isIos) {
-        window.webkit.messageHandlers.appGoBack && window.webkit.messageHandlers.appGoBack.postMessage({})
-      }
-      else if (isWx) {
-        this.$wx.miniProgram.navigateBack({
-          data: 1
-        })
-      }
-      else {
-        uni.reLaunch({
-          url: '/pages/index/index'
-        });
-      }
-
-
-    },
   },
 };
   </script>

pages/introductionCloudPhone/index.vue

@@ -1,62 +1,65 @@
 <template>
-  <layout title='推荐云手机'>
-    <div :class="isShowApp?'introduction':'introduction introduction-white'">
-      <div class="introduction-title" v-if="isShowApp">
-        推荐云手机
-      </div>
-
-      <div class="introduction-tips">
-        请搜索您在云手机内希望使用的应用！
-      </div>
-
-      <div class="introduction-search">
-        <img src="@/assets/image/introductionCloudPhone/search.png" alt="" />
-        <input v-model="searchText" type="search" placeholder="请输入应用名"/>
-        <div @click="search">搜索</div>
-      </div>
+  <layoutBack :isGoBack='true'>
+    <layout title='推荐云手机'>
+      <div :class="isShowApp?'introduction':'introduction introduction-white'">
+        <div class="introduction-title" v-if="isShowApp">
+          推荐云手机
+        </div>
 
-      <div v-if="applicationList.length && isShow">
         <div class="introduction-tips">
-          以下推荐应用选您需要使用的应用
+          请搜索您在云手机内希望使用的应用！
+        </div>
+
+        <div class="introduction-search">
+          <img src="@/assets/image/introductionCloudPhone/search.png" alt="" />
+          <input v-model="searchText" type="search" placeholder="请输入应用名" />
+          <div @click="search">搜索</div>
         </div>
-        <div>
-          <div class="application">
-            <div v-for="(item,index) in applicationList" :key="index" @click="selectApplication(item)">
-              {{ item }}
+
+        <div v-if="applicationList.length && isShow">
+          <div class="introduction-tips">
+            以下推荐应用选您需要使用的应用
+          </div>
+          <div>
+            <div class="application">
+              <div v-for="(item,index) in applicationList" :key="index" @click="selectApplication(item)">
+                {{ item }}
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
-      <div style="margin-top: 24px;" v-if="appSeatchList.length && !isShow">
-        <div class="application-list" v-for="(item,index) in appSeatchList" :key="index">
-          <div class="application-list-top">
-            <img class="application-list-img" width="42" height="42" :src="item.img" alt="" />
-            <div class="application-list-rigth">
-              <div class="application-list-title">{{item.appName}} <span v-if="item.articleId>0" @click="goArticleDetails(item)">点击阅读</span></div>
-              <div class="application-list-tips">游戏名称云手机使用教程</div>
+        <div style="margin-top: 24px;" v-if="appSeatchList.length && !isShow">
+          <div class="application-list" v-for="(item,index) in appSeatchList" :key="index">
+            <div class="application-list-top">
+              <img class="application-list-img" width="42" height="42" :src="item.img" alt="" />
+              <div class="application-list-rigth">
+                <div class="application-list-title">{{item.appName}} <span v-if="item.articleId>0" @click="goArticleDetails(item)">点击阅读</span></div>
+                <div class="application-list-tips">游戏名称云手机使用教程</div>
+              </div>
+              <div class="application-list-btn" @click="pay(item)">购买云手机 <img width="12" src="@/assets/image/introductionCloudPhone/btn.png" /></div>
+
             </div>
-            <div class="application-list-btn" @click="pay(item)">购买云手机 <img width="12" src="@/assets/image/introductionCloudPhone/btn.png" /></div>
 
+            <div class="application-list-bottom">推荐机型：{{item.list?item.list.map(o=>o.phoneTypeStr).join('/'):''}}</div>
           </div>
 
-          <div class="application-list-bottom">推荐机型：{{item.list?item.list.map(o=>o.phoneTypeStr).join('/'):''}}</div>
         </div>
 
-      </div>
+        <div class="application-default" v-if="!appSeatchList.length && !isShow">
+          <img v-if="isShowApp" width="305" src="@/assets/image/introductionCloudPhone/default.png" />
 
-      <div class="application-default" v-if="!appSeatchList.length && !isShow">
-        <img v-if="isShowApp" width="305" src="@/assets/image/introductionCloudPhone/default.png" />
+          <img v-else width="305" src="@/assets/image/introductionCloudPhone/defaultWhite.png" />
+          <div>很遗憾，没有搜索到您想要的应用</div>
+        </div>
 
-        <img v-else width="305" src="@/assets/image/introductionCloudPhone/defaultWhite.png" />
-        <div>很遗憾，没有搜索到您想要的应用</div>
       </div>
-
-    </div>
-  </layout>
+    </layout>
+  </layoutBack>
 </template>
 
 <script>
+import layoutBack from '@/components/layout';
 import layout from './components/layout';
 import { fileKeyToUrl } from '@/plugins/file-center.js';
 import uni from '@/static/static/js/uni.webview.1.5.2';
@@ -74,12 +77,9 @@ export default {
       appSeatchList: [], //  应用数组
     };
   },
-  components: { layout },
+  components: { layout, layoutBack },
   created() {
     this.getSuggestApp()
-    if (this.$userAgent.isAndroid) {
-      window.native.goneBack()
-    }
   },
   watch: {
     searchText(value) {
@@ -90,7 +90,7 @@ export default {
   computed: {
     isShowApp() {
       // 是否是APP
-      // const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
+      const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
       const isAndroid = this.$userAgent.isAndroid;
       const isIos = this.$userAgent.isIos;
       const isWx = this.$userAgent.isWx;
@@ -98,15 +98,16 @@ export default {
       // 如果微信小程序环境的，也不显示头部
       // 如果是h5 就显示头部
       let bool = false;
-      bool = isAndroid || isIos ? true : false;
+      bool = isApp && (isAndroid || isIos) ? true : false;
       return bool;
     },
   },
   methods: {
     pay() {
-      if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
+      this.isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser
+      if (this.isApp && this.$userAgent.isAndroid) {
         window.native.startPurchase();
-      } else if (this.$userAgent.isSzx && this.$userAgent.isIos) {
+      } else if (this.isApp && this.$userAgent.isIos) {
         window.webkit.messageHandlers.startPurchase.postMessage({});
       } else if (this.$userAgent.isMiniProgram) {
         this.$wx.miniProgram.navigateTo({
@@ -156,7 +157,7 @@ export default {
     font-family: PingFangSC, PingFang SC;
     font-weight: 500;
     font-size: 18px;
-    color: #CFD1D4;
+    color: #cfd1d4;
     font-style: normal;
   }
   .introduction-tips {
@@ -238,6 +239,7 @@ export default {
     .application-list-img {
       width: 42px;
       margin-right: 8px;
+      border-radius: 12px;
     }
 
     .application-list-rigth {