Merge branch 'develop' of Software/android-cloud-H5 into master

pages/introductionCloudPhone/index.vue

@@ -6,7 +6,7 @@
           推荐云手机
         </div>
 
-        <div class="introduction-tips">
+        <div class="introduction-tips" :style="{color: isShowApp ? '#EDEEF0' : '#0A132B' }">
           请搜索您在云手机内希望使用的应用！
         </div>
 
@@ -53,10 +53,25 @@
         </div>
 
         <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 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 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>
 
       </div>
@@ -81,6 +96,16 @@ export default {
       isShow: true,
       applicationList: [], //  推荐应用数组
       appSeatchList: [], //  应用数组
+      emptyBtn: [{
+        name: '联系客服咨询',
+        key: 'customerService',
+        type: 0
+      },
+      {
+        name: '购买云手机试用',
+        key: 'purchaseCloudPhone',
+        type: 1
+      }]
     };
   },
   components: { layout, layoutBack },
@@ -101,7 +126,7 @@ export default {
   },
   watch: {
     searchText(value) {
-      if (!value)
+      if (!value) 
         this.isShow = true
     }
   },
@@ -154,14 +179,25 @@ export default {
     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
+        this.isShow = false
         this.appSeatchList.forEach(element => {
           element.img = fileKeyToUrl(element.imageId)
         });
       });
     },
+    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>
@@ -210,6 +246,7 @@ export default {
       font-size: 14px;
       color: #ffffff;
       flex: 1;
+      width: calc(100% - 16px - 60px);
     }
     div {
       font-family: PingFangSC, PingFang SC;
@@ -219,7 +256,6 @@ export default {
       line-height: 18px;
       text-align: left;
       font-style: normal;
-
       line-height: 37px;
       width: 60px;
       height: 34px;
@@ -229,7 +265,7 @@ export default {
       border-radius: 1px;
       // border-left: 1px solid #7e8495;
       // margin: 4px 4px 0 0;
-      margin: 0 4px;
+      margin: 0 4px 2px;
     }
   }
 
@@ -250,6 +286,7 @@ export default {
       background: #2c2c2d;
       border-radius: 14px;
       padding: 11px 0;
+      box-sizing: border-box;
     }
   }
 
@@ -353,7 +390,6 @@ export default {
     color: #999999;
     line-height: 18px;
     font-style: normal;
-    margin-top: 42px;
   }
 }
 
@@ -408,4 +444,78 @@ export default {
     }
   }
 }
+.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>