tangdehang
/
android-cloud-H5


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>云手机</title>
    <!-- 告诉 IE 浏览器使用最新的渲染引擎（Edge 模式）来渲染页面，而不是使用旧的兼容模式。这可以确保页面在 IE 浏览器中以最佳方式显示。 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 强制页面在移动设备上以竖屏模式显示 portrait 表示页面只能以竖屏模式显示 -->
    <meta name="x5-orientation" content="portrait" />
    <!-- 与 x5-orientation 类似，用于指定页面的方向 -->
    <meta name="screen-orientation" content="portrait" />
    <!-- 控制页面在移动设备上的视口（viewport）行为 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no,viewport-fit=cover" />
    <!-- 允许网页应用以全屏模式运行 当用户将网页添加到主屏幕后，点击图标打开时，页面会以全屏模式显示，隐藏浏览器的地址栏和导航栏。适用于将网页应用伪装成原生应用的场景-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 控制页面在 iOS 设备上的全屏模式和状态栏颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- 禁止自动识别电话号码和邮箱地址 -->
    <meta name="format-detection" content="telphone=no, email=no" />
    <!-- 忽略页面中的数字识别为电话，忽略email识别 -->
    <!-- 启用360浏览器的极速模?(webkit) -->
    <meta name="renderer" content="webkit" />
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑? -->
    <meta name="HandheldFriendly" content="true" />
    <!-- 微软的老式浏览? -->
    <meta name="MobileOptimized" content="320" />
    <!-- 不能旋转，问题出在这 -->
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes" />
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true" />
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application" />
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app" />
    <!-- 禁用 Windows Phone 8 及更高版本中的灰色点击高亮 -->
    <meta name="msapplication-tap-highlight" content="no" />
    <link rel="stylesheet" href="./config/css/vant.css">
    <link rel="stylesheet" href="./css/WXtrialInterface.css">
    <!-- <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vConsole/3.12.1/vconsole.min.js"></script>
    <script>
        const vConsole = new VConsole();
    </script> -->
</head>

<body @touchmove.prevent @mousemove.prevent>
    <div id="app" v-cloak>
        <!-- 计时卡计时 -->
        <div class="pfi flex timing" v-if="timingVisible" v-cloak>
            <div>{{countdownTime}}</div>
            <img class="wh22" src="../static/img/close.png" alt="" @click="handlecountdownTimeClose" />
        </div>

        <!-- 悬浮框 -->
        <div class="levitated-sphere" :style="levitatedSpherePositionData" v-cloak
            @click="onSphere">
            <img src="../static/img/xuanfu_icon.png" alt=""
                @mousedown.prevent="onSphereDown"
                @mouseup.prevent.stop="onSphereUp"
                @touchmove.prevent="touchmoveLevitatedSphere"
                @mousemove.prevent="touchmoveLevitatedSphere"
                @touchend="touchendLevitatedSphere"
                @mouseup="touchendLevitatedSphere"
                @mouseleave="touchendLevitatedSphere">
        </div>

        <div class="layout" :style="{height: height + 'px'}" v-cloak  @touchmove.prevent @mousemove.prevent>
            <!-- 云机位置 -->
            <div class="layout-view" v-cloak @touchmove.prevent @mousemove.prevent>
                <video ref="rtcMediaPlayer" :style="rtcMediaPlayerStyle" width="100%" height="100%" autoplay
                    webkit-playsinline="true" playsinline x-webkit-airplay="allow" x5-video-player-type="h5"
                    x5-video-player-fullscreen="true" x5-video-orientation="portraint" id="playerVideo"
                    class="videoRotate" :controls="false"
                    @touchmove.prevent="(event) => {engine.touchClick(event, 2)}"
                    @mousemove.prevent="(event) => {engine.touchClick(event, 2)}"
                    @touchstart.prevent="(event) => {engine.touchClick(event, 0)}"
                    @mousedown.prevent="(event) => {engine.touchClick(event, 0)}"
                    @mouseup.prevent="touchendRtcMediaPlayer"
                    @mouseleave.prevent="touchendRtcMediaPlayer"
                    @touchend.prevent="touchendRtcMediaPlayer"
                    v-show="isShowVideo">
                    当前浏览器暂不支持、请使用谷歌浏览器或前往双子星客户端使用</video>
            </div>
            <!-- 底部按钮 -->
            <div class="layout-footer" v-cloak @touchmove.prevent @mousemove.prevent>
                <template v-for="item in footerBtn">
                    <img :src="item.img" alt="" @click="footerBtnFun(item.key)">
                </template>
            </div>

            <!-- 右侧弹框 -->
            <van-popup v-model="levitatedSphereVisible" position="right" class="levitated-sphere-drawer"
                overlay-class="levitated-sphere-overlay" v-cloak>
                <div class="flex-column">
                    <div class="flex-column-container">
                        <div>
                            <div v-for="item in definitionList" :key="item.key"
                                :class="['tc drawer-item mb-15', {active: definitionValue === item.value}]"
                                @click.prevent="definitionFun(item.value)">
                                {{item.name}}
                            </div>
                            <!-- <div class="tc drawer-item mb-15" @click.prevent="resolutionRatio">
                                分辨率
                            </div> -->
                            <div class="tc drawer-item mb-15" @click.prevent="volumeControl(24)">
                                音量 +
                            </div>
                            <div class="tc drawer-item" @click.prevent="volumeControl(25)">
                                音量 -
                            </div>
                        </div>
                    </div>
                    <div class="exit">
                        <template v-for="(item, index) in exitList">
                            <div :key="item.key" :class="['tc', {'mb-15': index !== exitList.length - 1}, item.key]"
                                @click.prevent="exitFun(item.key)">
                                <img :src="item.img" alt="">
                                <div class="drawer-item">
                                    {{item.name}}
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </van-popup>

            <!-- 分辨率 -->
            <van-dialog v-model="resolutionRatioVisible" :show-confirm-button="false" class="resolution-ratio-modal"
                v-cloak>
                <div>
                    <div>
                        <div class="flex-jub resolution-ratio-btn">
                            <div @click="resolutionRatioVisible = false">取消</div>
                            <div @click="confirmResolution">确定</div>
                        </div>
                        <div class="resolution-ratio-list">
                            <div v-for="(item, index) in resolutionRatioList" :key="item"
                                :class="{active:  phoneSize.dpi === item.dpi}" @click="phoneSize = item">
                                <div class="tc">
                                    {{item.width}} x {{item.height}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-dialog>

            <!-- 粘贴板 -->
            <van-dialog v-model="pasteVersionVisible" :show-confirm-button="false" class="paste-version-modal" v-cloak>
                <template v-if="pasteVersionList.length">
                    <div class="tc paste-version-title pre">
                        <span class="pab">粘贴版</span>
                        <span class="pab paste-version-clear" @click="deletePasteVersion()">
                            清空
                        </span>
                    </div>
                    <div class="paste-version-list">
                        <div v-for="(item,index) in pasteVersionList" :key="item"
                            :class="[{'mb-5': index!==pasteVersionList.length - 1}]">
                            <van-swipe-cell>
                                <div :class="`copy-value-${index}, ellipsis`" @click="copyPasteVersiontext">
                                    {{item.content}}
                                </div>
                                <template #right>
                                    <div class="paste-version-delete" @click="deletePasteVersion(item.id)">
                                        删除
                                    </div>
                                </template>
                            </van-swipe-cell>
                        </div>
                    </div>
                </template>
                <template v-else>
                    <div class="paste-version-empty flex-center-all h100">
                        <div>
                            <img src="./img/jianqieban_pic@2x.png" alt="">
                            <div class="tc">
                                剪贴板为空
                            </div>
                        </div>
                    </div>
                </template>
                <img class="pab paste-version-close" src="./img/guanbi_icon@2x.png" alt=""
                    @click="pasteVersionVisible = false" />
            </van-dialog>

            <!-- 增加复制粘贴板 -->
            <van-dialog v-model="copyTextVisible" class="copy-text-modal" confirm-button-text="确定" show-cancel-button
                confirm-button-color="#3cc51f" v-cloak :before-close="beforeCloseCopy">
                <div class="tc">
                    读取剪贴板失败
                </div>
                <div>
                    <van-field v-model="copyTextValue" placeholder="请输入复制到剪切板的内容" />
                </div>
            </van-dialog>


            <!-- 计费规则  -->
            <van-dialog v-model="billingRulesVisible" :show-confirm-button="false" class="billing-rules-modal" v-cloak>
                <div class="tc">
                    <img class="billing-rules-img" src="./img/countdown.png" />
                </div>
                <div class="tc billing-rules-title">
                    计费规则
                </div>
                <div class="tc">进入云机开始计时，点击退出并下机停止计时。点击退出云机仍处于计时状态。</div>
                <div class="tc billing-rules-tips">云机时长剩余：<span class="billing-rules-time">{{countdownTime}}</span>
                </div>
                <div class="billing-rules-btn" @click="getRecommend">我知道了</div>
            </van-dialog>

            <!-- 应用推荐 -->
            <van-dialog v-model="applyRecommendVisible" :show-confirm-button="false" class="apply-recommend-modal"
                v-cloak>
                <div>
                    <div class="tc apply-recommend-title">
                        应用推荐
                    </div>
                    <div class="apply-recommend-list">
                        <div v-for="(item, index) in recommendList" :key="item.id"
                            :class="['flex w100', {'mt-16': index !== 0}]">
                            <div class="left flex-align-c">
                                <img :src="item.imageUrl" alt="">
                                <div>
                                    <div class="title ellipsis">{{item.filename}}</div>
                                    <div class="download-num">有{{item.installNum}}个人下载</div>
                                </div>
                            </div>
                            <div class="right flex-align-c" @click="downAndInstallApk(item)">
                                <div>
                                    下载
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="apply-recommend-btn tc" @click="getRecommend">
                        换一批
                    </div>
                </div>
                <img class="apply-recommend-close pab" src="./img/close.png" alt=""
                    @click="applyRecommendVisible = false" />
            </van-dialog>

            <!-- 超过指定触碰时间的弹窗提示 -->
            <van-dialog v-model="noOperationSetTimeoutTimeVisible" title="提示" show-cancel-button
                message="由于您长时间未操作，将自动断开视频链接（不影响云手机内应用运行）" :confirm-button-text="confirmButtonText"
                confirm-button-color="#3cc51f" cancel-button-text="继续操作" @cancel="noOperationSetTimeout('cancel')"
                @confirm="noOperationSetTimeout('cancel'), exit(), noOperationSetTimeoutTimeVisible = false" v-cloak>
            </van-dialog>
        </div>
    </div>
</body>
<script src="./config/js/jweixin.js"></script>
<script src="./config/js/clipboard.js"></script>
<script type="text/javascript" src="../static/js/uni.webview.1.5.2.js"></script>
<script src="./config/js/vue.js"></script>
<script src="./config/js/vant.js"></script>
<script src="./config/js/axios.js"></script>
<script src="./config/js/rtcEngine.min.js"></script>
<script src="../static/lib/qs.js"></script>
<script type="module" src="./js/WXtrialInterface.js"></script>

</html>