推荐云机缺省页

pages/introductionCloudPhone/index.vue

@@ -6,7 +6,7 @@
           推荐云手机
         </div>
 
-        <div class="introduction-tips">
+        <div class="introduction-tips"  :style="{color: isShowApp ? '#EDEEF0' : '#0A132B' }">
           请搜索您在云手机内希望使用的应用！
         </div>
 
@@ -16,21 +16,27 @@
           <div style="width: 1px;height: 20px;background: #7E8495;border-radius: 1px;"></div>
           <div @click="search">搜索</div>
         </div>
-
-        <div v-if="applicationList.length && isShow">
-          <div class="introduction-tips" style="margin-top: 24px;">
-            以下推荐应用选您需要使用的应用
+        <div v-if="!appSeatchList.length && isShow" class="empty">
+          <div class="empty-title">当前搜索结果为空，您可以通过下面两种方式在云手机安装APP（限安卓手机应用上传安装）</div>
+          <div class="empty-img">
+            <img :src="require(`@/assets/image/introductionCloudPhone/${isShowApp ? 'empty-tips-default' : 'empty-tips-defaultWhite'}.png`)" alt="">
           </div>
-          <div>
-            <div class="application">
-              <div v-for="(item,index) in applicationList" :key="index" @click="selectApplication(item)">
-                {{ item }}
+          <div class="empty-tips">
+              <div :style="{color: isShowApp ? '#EDEEF0' : '#0A132B' }">
+                温馨提示：
+              </div>
+              <div>
+                根据相关部门要求，违规APP将无法安装。请远离以上风险软件，谨防上当受骗。如果需要应用上报，请联系客服；也可以购买短期云手机，试用您未搜索到的应用。
               </div>
+          </div>
+          <div class="empty-btn" style="bottom: 24px; left: 16px;width: calc(100% - 32PX)">
+            <div v-for="item in emptyBtn" :key="item.key" @click="emptyBtnFun(item.type)" :class="{dark: isShowApp && !item.type}">
+              {{ item.name }}
             </div>
           </div>
         </div>
 
-        <div style="margin-top: 24px;" v-if="appSeatchList.length && !isShow">
+        <div class="application" 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="" />
@@ -79,13 +85,22 @@ export default {
     return {
       searchText: '',
       isShow: true,
-      applicationList: [], //  推荐应用数组
       appSeatchList: [], //  应用数组
+      emptyBtn: [{
+        name: '联系客服咨询',
+        key: 'customerService',
+        type: 0
+      },
+      {
+        name: '购买云手机试用',
+        key: 'purchaseCloudPhone',
+        type: 1
+      }]
+
     };
   },
   components: { layout, layoutBack },
   created() {
-    this.getSuggestApp()
 
     let _this = this
     document.addEventListener('keydown', function (e) {
@@ -101,8 +116,10 @@ export default {
   },
   watch: {
     searchText(value) {
-      if (!value)
+      if (!value) {
         this.isShow = true
+        this.appSeatchList = []
+      }
     }
   },
   computed: {
@@ -140,20 +157,12 @@ export default {
     goArticleDetails(item) {
       this.$router.push({ path: '/introductionCloudPhone/articleDetails?token=needToken', query: { id: item.articleId } })
     },
-    getSuggestApp() {
-      this.$axios.$post('/public/v1/market/getSuggestApp', {
-        pageNum: 1, pageSize: -1
-      }).then((res) => {
-        this.applicationList = res.data
-      });
-    },
     selectApplication(name) {
       this.searchText = name
       this.search()
     },
     search() {
       if (!this.searchText) return
-      this.appSeatchList.slice(0, this.appSeatchList.length)
       this.isShow = false
       this.$axios.$post('/public/v1/market/clientSearchSuggestApp', { pageSize: 100, pageNum: 1, appName: this.searchText }).then((res) => {
         this.appSeatchList = res.data.list
@@ -162,6 +171,17 @@ export default {
         });
       });
     },
+    emptyBtnFun(type) {
+      if(type) {
+        this.pay()
+        return 
+      }
+      let url = `/introductionCloudPhone/onlineService?token=${this.$route.query.token}`
+      if(this.$route.query.isWeixin) {
+        url+= '&isWeixin=1'
+      }
+      this.$router.push(url)
+    }
   },
 };
 </script>
@@ -179,13 +199,6 @@ export default {
     font-style: normal;
     margin-bottom: 24px;
   }
-  .introduction-tips {
-    font-family: PingFangSC, PingFang SC;
-    font-weight: bold;
-    font-size: 14px;
-    color: #fefefe;
-    font-style: normal;
-  }
 
   .introduction-search {
     margin-top: 16px;
@@ -211,17 +224,15 @@ export default {
       color: #ffffff;
       flex: 1;
     }
-    div {
+    div:last-child {
       font-family: PingFangSC, PingFang SC;
       font-weight: 500;
       font-size: 14px;
       color: #3b7fff;
-      line-height: 18px;
+      line-height: 35px;
       text-align: left;
       font-style: normal;
-
-      line-height: 37px;
-      width: 60px;
+      padding: 0 15px;
       height: 34px;
       // background: linear-gradient(90deg, #38aefc 0%, #3b7fff 100%);
       float: right;
@@ -233,26 +244,6 @@ export default {
     }
   }
 
-  .application {
-    padding: 0 16px;
-    margin-top: 24px;
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(3, 1fr);
-    & > div {
-      font-family: PingFangSC, PingFang SC;
-      font-weight: 400;
-      font-size: 14px;
-      color: #ffffff;
-      line-height: 20px;
-      text-align: center;
-      font-style: normal;
-      background: #2c2c2d;
-      border-radius: 14px;
-      padding: 11px 0;
-    }
-  }
-
   .application-list {
     width: 100%;
     background: #2c2c2d;
@@ -361,9 +352,6 @@ export default {
   .introduction-title {
     color: #0a132b;
   }
-  .introduction-tips {
-    color: #0a132b;
-  }
 
   .introduction-search {
     background: #ffffff;
@@ -376,12 +364,6 @@ export default {
     }
   }
 
-  .application {
-    & > div {
-      color: #0a132b;
-      background: #ffffff;
-    }
-  }
 
   .application-list {
     background: #ffffff;
@@ -408,4 +390,83 @@ export default {
     }
   }
 }
+.application{
+  margin-top: 16px;
+  flex: 1;
+  overflow-y: auto;
+}
+.empty{
+  margin-top: 16px;
+  .empty-title{
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 12px;
+    color: #959799;
+    line-height: 16px;
+    text-align: left;
+    font-style: normal;
+  }
+
+  .empty-img{
+    height: 348px;
+    margin-top: 24px;
+    padding-left: 20px;
+    &>img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .empty-tips{
+    margin-top: 24px;
+    padding-bottom: 68px;
+    &>div:first-child{
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+      text-align: left;
+      font-style: normal;
+    }
+    &>div:last-child{
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 12px;
+      color: #959799;
+      line-height: 16px;
+      text-align: left;
+      font-style: normal;
+    }
+  }
+
+  .empty-btn{
+    position: fixed;
+    display: grid;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 16px;
+    color: #3B7FFF;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    font-style: normal;
+    display: grid;
+    grid-gap: 14px;
+    grid-template-columns: repeat(2, 1fr);
+    &>div:first-child{
+      border-radius: 8px;
+      border: 1px solid #3B7FFF;
+      color: #3B7FFF;
+      background: #f2f4f7;
+      &.dark{
+        background: #1C1C1E;
+      }
+    }
+    &>div:last-child{
+      color: #FFFFFF;
+      background: #3B7FFF;
+      border-radius: 8px;
+    }
+  }
+}
 </style>

pages/introductionCloudPhone/onlineService.vue

@@ -0,0 +1,31 @@
+<template>
+    <layout>
+        <iframe :src="url" frameborder="0" width="100%" height="100%"></iframe>
+    </layout>
+</template>
+
+<script>
+import layout from '@/components/layout';
+export default {
+    name: 'onlineService',
+    components: {
+        layout,
+    },
+    data() {
+        return {
+            url: ''
+        };
+    },
+    created() {
+        let url = `${location.origin}/h5/customer-service?autoopen=true&token=${this.$route.query.token}`
+        if(this.$route.query.isWeixin) {
+            url+= '&isWeixin=1'
+        }
+        this.url = url
+    },
+    mounted() {
+    }
+};
+</script>
+
+<style></style>