|
@@ -0,0 +1,388 @@
|
|
|
|
+<template>
|
|
|
|
+ <layoutBack :isGoBack='true'>
|
|
|
|
+ <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 ref="inputField" v-model="searchText" type="search" placeholder="请输入应用名" />
|
|
|
|
+ <div @click="search">搜索</div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ <div v-if="applicationList.length && isShow">
|
|
|
|
+ <div class="introduction-tips" style="margin-top: 24px;">
|
|
|
|
+ 以下推荐应用选您需要使用的应用
|
|
|
|
+ </div>
|
|
|
|
+ <div>
|
|
|
|
+ <div class="application">
|
|
|
|
+ <div v-for="(item,index) in applicationList" :key="index" @click="selectApplication(item)">
|
|
|
|
+ {{ item }}
|
|
|
|
+ </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>
|
|
|
|
+ <div class="application-list-btn" @click="pay(item)">购买云手机 <img width="12" src="@/assets/image/introductionCloudPhone/btn.png" /></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" />
|
|
|
|
+
|
|
|
|
+ <img v-else width="305" src="@/assets/image/introductionCloudPhone/defaultWhite.png" />
|
|
|
|
+ <div>很遗憾,没有搜索到您想要的应用</div>
|
|
|
|
+ </div>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ </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';
|
|
|
|
+export default {
|
|
|
|
+ auth: false,
|
|
|
|
+ name: 'introductionCloudPhone',
|
|
|
|
+ head: {
|
|
|
|
+ title: '推荐云手机',
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ searchText: '',
|
|
|
|
+ isShow: true,
|
|
|
|
+ applicationList: [], // 推荐应用数组
|
|
|
|
+ appSeatchList: [], // 应用数组
|
|
|
|
+ };
|
|
|
|
+ },
|
|
|
|
+ components: { layout, layoutBack },
|
|
|
|
+ created() {
|
|
|
|
+ this.getSuggestApp()
|
|
|
|
+
|
|
|
|
+ let _this = this
|
|
|
|
+ document.addEventListener('keydown', function (e) {
|
|
|
|
+ // 检查是否是搜索键(通常是“Enter”键)
|
|
|
|
+ if (e.keyCode === 13) { // Enter key
|
|
|
|
+ // 执行搜索操作
|
|
|
|
+ _this.search();
|
|
|
|
+
|
|
|
|
+ // 调用原生方法隐藏软键盘
|
|
|
|
+ _this.$refs.inputField.blur();
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ searchText(value) {
|
|
|
|
+ if (!value)
|
|
|
|
+ this.isShow = true
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ computed: {
|
|
|
|
+ isShowApp() {
|
|
|
|
+ // 是否是APP
|
|
|
|
+ const isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser;
|
|
|
|
+ const isAndroid = this.$userAgent.isAndroid;
|
|
|
|
+ const isIos = this.$userAgent.isIos;
|
|
|
|
+ const isWx = this.$userAgent.isWx;
|
|
|
|
+ // 如果是App并且是安卓,就不显示头部, ios显示
|
|
|
|
+ // 如果微信小程序环境的,也不显示头部
|
|
|
|
+ // 如果是h5 就显示头部
|
|
|
|
+ let bool = false;
|
|
|
|
+ bool = isApp && (isAndroid || isIos) ? true : false;
|
|
|
|
+ return bool;
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ pay() {
|
|
|
|
+ this.isApp = this.$userAgent.isSzx || this.$userAgent.isSzxBrowser
|
|
|
|
+ if (this.isApp && this.$userAgent.isAndroid) {
|
|
|
|
+ window.native.startPurchase();
|
|
|
|
+ } else if (this.isApp && this.$userAgent.isIos) {
|
|
|
|
+ window.webkit.messageHandlers.startPurchase.postMessage({});
|
|
|
|
+ } else if (this.$userAgent.isMiniProgram) {
|
|
|
|
+ this.$wx.miniProgram.navigateTo({
|
|
|
|
+ url: '/package/purchase/purchase',
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ uni.navigateTo({
|
|
|
|
+ url: '/package/purchase/purchase',
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ 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
|
|
|
|
+ this.appSeatchList.forEach(element => {
|
|
|
|
+ element.img = fileKeyToUrl(element.imageId)
|
|
|
|
+ });
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+};
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
+.introduction {
|
|
|
|
+ height: 100%;
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
+ .introduction-title {
|
|
|
|
+ margin-left: 10px;
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 18px;
|
|
|
|
+ color: #cfd1d4;
|
|
|
|
+ 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;
|
|
|
|
+ height: 42px;
|
|
|
|
+ width: 100%;
|
|
|
|
+ background: #2c2c2d;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ border: 1px solid #545660;
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ // padding: 12px 4px 4px 12px;
|
|
|
|
+ img {
|
|
|
|
+ margin: 12px 4px 12px 12px;
|
|
|
|
+ vertical-align: top;
|
|
|
|
+ width: 16px;
|
|
|
|
+ }
|
|
|
|
+ input {
|
|
|
|
+ // margin-top: 8px;
|
|
|
|
+ // vertical-align: top;
|
|
|
|
+ height: 42px;
|
|
|
|
+ line-height: 42px;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ flex: 1;
|
|
|
|
+ }
|
|
|
|
+ div {
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ line-height: 34px;
|
|
|
|
+ width: 60px;
|
|
|
|
+ height: 34px;
|
|
|
|
+ background: linear-gradient(90deg, #38aefc 0%, #3b7fff 100%);
|
|
|
|
+ float: right;
|
|
|
|
+ text-align: center;
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ // margin: 4px 4px 0 0;
|
|
|
|
+ margin: 0 4px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .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;
|
|
|
|
+ border-radius: 12px;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
+
|
|
|
|
+ .application-list-top {
|
|
|
|
+ padding: 16px;
|
|
|
|
+ }
|
|
|
|
+ .application-list-img {
|
|
|
|
+ width: 42px;
|
|
|
|
+ margin-right: 8px;
|
|
|
|
+ border-radius: 12px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .application-list-rigth {
|
|
|
|
+ display: inline-block;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ }
|
|
|
|
+ .application-list-title {
|
|
|
|
+ vertical-align: top;
|
|
|
|
+ font-weight: 500;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ font-style: normal;
|
|
|
|
+ margin-right: 4px;
|
|
|
|
+
|
|
|
|
+ span {
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 10px;
|
|
|
|
+ color: #3b7fff;
|
|
|
|
+ line-height: 14px;
|
|
|
|
+ text-align: left;
|
|
|
|
+ font-style: normal;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .application-list-tips {
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #999999;
|
|
|
|
+ line-height: 16px;
|
|
|
|
+ text-align: left;
|
|
|
|
+ font-style: normal;
|
|
|
|
+ margin-right: 4px;
|
|
|
|
+ }
|
|
|
|
+ .application-list-btn {
|
|
|
|
+ width: 82px;
|
|
|
|
+ height: 32px;
|
|
|
|
+ background: linear-gradient(90deg, #38aefc 0%, #3b7fff 100%);
|
|
|
|
+ border-radius: 8px;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ line-height: 32px;
|
|
|
|
+ padding: 0 0 0 8px;
|
|
|
|
+ float: right;
|
|
|
|
+ font-size: 10px;
|
|
|
|
+ img {
|
|
|
|
+ vertical-align: middle;
|
|
|
|
+ margin-top: -1px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .application-list-bottom {
|
|
|
|
+ padding: 12px;
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 14px;
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ line-height: 20px;
|
|
|
|
+ text-align: left;
|
|
|
|
+ font-style: normal;
|
|
|
|
+ background: #333333;
|
|
|
|
+ border-radius: 0px 0px 12px 12px;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .application-default {
|
|
|
|
+ width: 100%;
|
|
|
|
+ text-align: center;
|
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
|
+ font-weight: 400;
|
|
|
|
+ font-size: 12px;
|
|
|
|
+ color: #999999;
|
|
|
|
+ line-height: 18px;
|
|
|
|
+ font-style: normal;
|
|
|
|
+ margin-top: 42px;
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.introduction-white {
|
|
|
|
+ .introduction-title {
|
|
|
|
+ color: #0a132b;
|
|
|
|
+ }
|
|
|
|
+ .introduction-tips {
|
|
|
|
+ color: #0a132b;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .introduction-search {
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ border: 1px solid #ffffff;
|
|
|
|
+ input {
|
|
|
|
+ color: #0a132b;
|
|
|
|
+ }
|
|
|
|
+ div {
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .application {
|
|
|
|
+ & > div {
|
|
|
|
+ color: #0a132b;
|
|
|
|
+ background: #ffffff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .application-list {
|
|
|
|
+ background: #ffffff;
|
|
|
|
+
|
|
|
|
+ .application-list-title {
|
|
|
|
+ color: #0a132b;
|
|
|
|
+ span {
|
|
|
|
+ color: #3b7fff;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .application-list-tips {
|
|
|
|
+ color: #666666;
|
|
|
|
+ }
|
|
|
|
+ .application-list-btn {
|
|
|
|
+ background: linear-gradient(90deg, #38aefc 0%, #3b7fff 100%);
|
|
|
|
+ color: #ffffff;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .application-list-bottom {
|
|
|
|
+ color: #0a132b;
|
|
|
|
+ background: #edeef0;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</style>
|