新增房间分享

view/molistar/modules/roomShare/css/index.css

@@ -0,0 +1,134 @@
+html,
+body {
+  width: 100%;
+  background: #030608;
+}
+
+.back {
+  width: 100%;
+  height: 0.58667rem;
+  line-height: 0.58667rem;
+  position: fixed;
+  left: 0;
+  top: 0.93333rem;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 0.50667rem;
+  font-weight: bold;
+  z-index: 10;
+}
+
+.back img {
+  width: 0.58667rem;
+  height: 0.58667rem;
+  position: absolute;
+  left: 0.24rem;
+  top: 0rem;
+}
+
+.box {
+  width: 10rem;
+  height: 19.94667rem;
+  background: url(../images/body.png) no-repeat;
+  background-size: 100% 100%;
+  margin: 0 auto 0;
+  position: relative;
+}
+
+.box .ts {
+  width: 5.37333rem;
+  height: 5.12rem;
+  position: absolute;
+  left: 50%;
+  top: 6.14667rem;
+  transform: translateX(-50%);
+  z-index: 2;
+}
+
+.box .tx {
+  width: 3.06667rem;
+  height: 3.06667rem;
+  border-radius: 50%;
+  position: absolute;
+  left: 50%;
+  top: 7.1rem;
+  transform: translateX(-50%);
+}
+
+.box .nick {
+  width: 5.37333rem;
+  position: absolute;
+  left: 50%;
+  top: 11.78667rem;
+  transform: translateX(-50%);
+  color: #fff;
+  text-align: center;
+  font-size: 0.48rem;
+  font-weight: bold;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.box .roomId {
+  width: 8.14667rem;
+  height: 1.2rem;
+  line-height: 1.2rem;
+  color: #fff;
+  font-size: 0.48rem;
+  font-weight: bold;
+  background: url(../images/but1.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  left: 50%;
+  top: 12.72rem;
+  transform: translateX(-50%);
+}
+
+.box .roomId .left {
+  color: #fff;
+  font-size: 0.4rem;
+  font-weight: 500;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0.58667rem;
+}
+
+.box .roomId .id {
+  width: 3rem;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 0;
+  height: 100%;
+  text-align: center;
+}
+
+.box .roomId .copys {
+  width: 2rem;
+  height: 100%;
+  color: #fff;
+  font-size: 0.4rem;
+  font-weight: 500;
+  position: absolute;
+  top: 0;
+  right: 0rem;
+  text-align: center;
+}
+
+.box .but {
+  width: 8.01333rem;
+  height: 1.06667rem;
+  line-height: 1.06667rem;
+  color: #fff;
+  font-size: 0.42667rem;
+  font-weight: 500;
+  background: url(../images/but2.png) no-repeat;
+  background-size: 100% 100%;
+  position: absolute;
+  left: 50%;
+  top: 15.05333rem;
+  transform: translateX(-50%);
+  text-align: center;
+}

view/molistar/modules/roomShare/css/index.scss

@@ -0,0 +1,139 @@
+@function px2rem($px) {
+    @return $px / 75+rem;
+}
+
+html,
+body {
+    width: 100%;
+    background: #030608;
+}
+
+
+.back {
+    width: 100%;
+    height: px2rem(44);
+    line-height: px2rem(44);
+    position: fixed;
+    left: 0;
+    top: px2rem(70);
+    text-align: center;
+    color: #FFFFFF;
+    font-size: px2rem(38);
+    font-weight: bold;
+    z-index: 10;
+
+    img {
+        width: px2rem(44);
+        height: px2rem(44);
+        position: absolute;
+        left: px2rem(18);
+        top: px2rem(0);
+    }
+}
+
+.box {
+    width: px2rem(750);
+    height: px2rem(1496);
+    background: url(../images/body.png) no-repeat;
+    background-size: 100% 100%;
+    margin: 0 auto 0;
+    position: relative;
+
+    .ts {
+        width: px2rem(403);
+        height: px2rem(384);
+        position: absolute;
+        left: 50%;
+        top: px2rem(461);
+        transform: translateX(-50%);
+        z-index: 2;
+    }
+
+    .tx {
+        width: px2rem(230);
+        height: px2rem(230);
+        border-radius: 50%;
+        position: absolute;
+        left: 50%;
+        top: 7.1rem;
+        transform: translateX(-50%);
+    }
+
+    .nick {
+        width: px2rem(403);
+        position: absolute;
+        left: 50%;
+        top: px2rem(884);
+        transform: translateX(-50%);
+        color: #fff;
+        text-align: center;
+        font-size: px2rem(36);
+        font-weight: bold;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+
+    .roomId {
+        width: px2rem(611);
+        height: px2rem(90);
+        line-height: px2rem(90);
+        color: #fff;
+        font-size: px2rem(36);
+        font-weight: bold;
+        background: url(../images/but1.png) no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        left: 50%;
+        top: px2rem(954);
+        transform: translateX(-50%);
+
+        .left {
+            color: #fff;
+            font-size: px2rem(30);
+            font-weight: 500;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: px2rem(44);
+        }
+
+        .id {
+            width: 3rem;
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            top: 0;
+            height: 100%;
+            text-align: center;
+        }
+
+        .copys {
+            width: 2rem;
+            height: 100%;
+            color: #fff;
+            font-size: px2rem(30);
+            font-weight: 500;
+            position: absolute;
+            top: 0;
+            right: px2rem(0);
+            text-align: center;
+        }
+    }
+
+    .but {
+        width: px2rem(601);
+        height: px2rem(80);
+        line-height: px2rem(80);
+        color: #fff;
+        font-size: px2rem(32);
+        font-weight: 500;
+        background: url(../images/but2.png) no-repeat;
+        background-size: 100% 100%;
+        position: absolute;
+        left: 50%;
+        top: px2rem(1129);
+        transform: translateX(-50%);
+        text-align: center;
+    }
+}

view/molistar/modules/roomShare/index.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title class="title"></title>
+    <!-- 分享 -->
+    <link rel="stylesheet" href="../../common/css/reset.css">
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+
+<body>
+    <!-- 頂部返回 -->
+    <div class="back">
+        <img src="./images/travel/back.png" alt="">
+    </div>
+    <!-- 容器 -->
+    <div class="box">
+        <img src="./images/ts.png" alt="" class="ts">
+        <img src="./images/logo.png" alt="" class="tx">
+        <div class="nick">用户昵称</div>
+        <div class="roomId">
+            <div class="left text1"></div>
+            <div class="id">0000</div>
+            <div class="copys text2" id="copy"></div>
+        </div>
+        <div class="but text3"></div>
+    </div>
+</body>
+
+</html>
+<script src="../../common/js/flexible.js"></script>
+<script src="../../common/js/jquery-3.2.1.min.js"></script>
+<script src="../../common/js/common2.js"></script>
+<script src="../../common/js/layer.js"></script>
+<script src="../../common/js/vconsole.min.js"></script>
+<script src="../../common/js/route-constant.js"></script>
+<script src="../../common/js/jquery.copy.min.js"></script>
+<script src="./local/en.js"></script>
+<script src="./local/zh.js"></script>
+<script src="./local/ar.js"></script>
+<script src="./js/index.js"></script>
+<script src="../../common/local/langHandler.js"></script>

view/molistar/modules/roomShare/js/index.js

@@ -0,0 +1,120 @@
+let urlPrefix = getUrlPrefix()
+let browser = checkVersion()
+let env = EnvCheck();
+if (env == 'test') {
+    new VConsole();
+}
+// 封裝layer消息提醒框
+let layerIndex
+var langReplace;
+var localLang;
+const showLoading = (content = langReplace(localLang.demoModule.layerIndex1)) => {
+    layer.open({
+        type: 2,
+        shadeClose: false,
+        content,
+        success(e) {
+            layerIndex = $(e).attr('index')
+        }
+    })
+}
+const hideLoading = (index) => {
+    layer.close(index)
+}
+const toastMsg = (content = langReplace(localLang.demoModule.layerIndex2), time = 2) => {
+    layer.open({
+        content,
+        time,
+        skin: 'msg'
+    })
+}
+var roomId;
+// 初始化函數
+$(function () {
+    getInfoFromClient();
+    fuzzyMatchUpdateQueryStringParameterFun(); // 判断语言
+    setTimeout(function () {
+        // 頁面全屏
+        if (browser.app) {
+            if (browser.android) {
+                window.androidJsObj.initShowNav(false)
+            } else {
+                window.webkit.messageHandlers.initShowNav.postMessage(0)
+            }
+            $('.back').show();
+        } else {
+            $('.back').hide();
+        };
+        // 頂部返回事件
+        $('.back').click(() => {
+            if (browser.android) {
+                window.androidJsObj.closeWebView()
+            } else {
+                window.webkit.messageHandlers.closeWebView.postMessage(null)
+            }
+        })
+        langReplace = window.lang.replace;
+        localLang = window.lang;
+        $.copy({
+            text: langReplace(localLang.demoModule.text4), //分享提示文案
+            copyUrl: roomId, //自定义复制
+            tipTime: 1000, //分享提示消失时间
+            copyId: "#copy" //复制按钮id
+        });
+        translateFun();
+    }, 100)
+})
+
+function translateFun() {
+    var langReplace = window.lang.replace;
+    var localLang = window.lang;
+    $('.title').text(langReplace(localLang.demoModule.title));
+    $('.text1').text(langReplace(localLang.demoModule.text1));
+    $('.text2').text(langReplace(localLang.demoModule.text2));
+    $('.text3').text(langReplace(localLang.demoModule.text3));
+    $('.box').attr("style", langReplace(localLang.demoModule.img))
+}
+// 接口
+function get() {
+    showLoading()
+    networkRequest({
+        type: 'get',
+        url: urlPrefix + '',
+        success(res) {
+            if (res.code === 200) {
+
+            } else {
+                toastMsg(res.message)
+            }
+            hideLoading(layerIndex)
+        },
+        error(err) {
+            hideLoading(layerIndex)
+            toastMsg(langReplace(localLang.demoModule.layerIndex3))
+        }
+    })
+}
+// 复制按钮
+$('.box .roomId .copys').click(function () {
+    $.copy({
+        text: langReplace(localLang.demoModule.text4), //分享提示文案
+        copyUrl: roomId, //自定义复制
+        tipTime: 1000, //分享提示消失时间
+        copyId: "#copy" //复制按钮id
+    });
+})
+
+// 进入直播间按钮
+$('.box .but').click(function () {
+    if (!browser.app) {
+        if (browser.ios) {
+            window.location.href = `https://cebg.t4m.cn/`
+            return
+        } else if (browser.android) {
+            timer = setTimeout(() => {
+                window.location.href = 'http://play.google.com/store/apps/details?id='
+            }, 3000)
+            window.location.href = `molistar://app/invite`
+        }
+    }
+})

view/molistar/modules/roomShare/local/ar.js

@@ -0,0 +1,16 @@
+// 阿拉伯
+langAr = {
+    // 模块
+    demoModule: {
+        img: 'background: url(./images/body-ar.png) no-repeat;background-size: 100% 100%;',
+        layerIndex1: `جار التحميل...`,
+        layerIndex2: `تم التحميل`,
+        layerIndex3: `خطأ في الشبكة، الرجاء الخروج وإعادة المحاولة`,
+        title: `مشاركة`,
+        text1: `معرف الغرفة`,
+        text2: `نسخ`,
+        text3: `الدخول إلى الغرفة المباشرة`,
+        text4: `تم النسخ بنجاح`,
+    },
+    
+}

view/molistar/modules/roomShare/local/en.js

@@ -0,0 +1,15 @@
+// 英文
+langEn = {
+    // 模块
+    demoModule: {
+        img: 'background: url(./images/body-en.png) no-repeat;background-size: 100% 100%;',
+        layerIndex1: `Loading...`,
+        layerIndex2: `Loaded`,
+        layerIndex3: `Network error, please exit and retry`,
+        title: `Share`,
+        text1: `Room ID`,
+        text2: `Copy`,
+        text3: `Enter live room`,
+        text4: `Copy successful`,
+    },
+}

view/molistar/modules/roomShare/local/zh.js

@@ -0,0 +1,15 @@
+// 中文
+langZh = {
+    // 模塊
+    demoModule: {
+        img: 'background: url(./images/body.png) no-repeat;background-size: 100% 100%;',
+        layerIndex1: `加載中...`,
+        layerIndex2: `加載完成`,
+        layerIndex3: `網絡錯誤，請退出重試`,
+        title: `分享`,
+        text1: `房間ID`,
+        text2: `複製`,
+        text3: `進入直播間`,
+        text4: `複製成功`,
+    },
+}