diff --git a/view/molistar/modules/roomShare/css/index.css b/view/molistar/modules/roomShare/css/index.css new file mode 100644 index 00000000..fbe1160e --- /dev/null +++ b/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; +} diff --git a/view/molistar/modules/roomShare/css/index.scss b/view/molistar/modules/roomShare/css/index.scss new file mode 100644 index 00000000..31254c4e --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/view/molistar/modules/roomShare/images/body-ar.png b/view/molistar/modules/roomShare/images/body-ar.png new file mode 100644 index 00000000..bff193d2 Binary files /dev/null and b/view/molistar/modules/roomShare/images/body-ar.png differ diff --git a/view/molistar/modules/roomShare/images/body-en.png b/view/molistar/modules/roomShare/images/body-en.png new file mode 100644 index 00000000..a7e7099f Binary files /dev/null and b/view/molistar/modules/roomShare/images/body-en.png differ diff --git a/view/molistar/modules/roomShare/images/body.png b/view/molistar/modules/roomShare/images/body.png new file mode 100644 index 00000000..3c039ce5 Binary files /dev/null and b/view/molistar/modules/roomShare/images/body.png differ diff --git a/view/molistar/modules/roomShare/images/but1.png b/view/molistar/modules/roomShare/images/but1.png new file mode 100644 index 00000000..300d74f9 Binary files /dev/null and b/view/molistar/modules/roomShare/images/but1.png differ diff --git a/view/molistar/modules/roomShare/images/but2.png b/view/molistar/modules/roomShare/images/but2.png new file mode 100644 index 00000000..6e47f9cd Binary files /dev/null and b/view/molistar/modules/roomShare/images/but2.png differ diff --git a/view/molistar/modules/roomShare/images/logo.png b/view/molistar/modules/roomShare/images/logo.png new file mode 100644 index 00000000..cbdc951a Binary files /dev/null and b/view/molistar/modules/roomShare/images/logo.png differ diff --git a/view/molistar/modules/roomShare/images/travel/back.png b/view/molistar/modules/roomShare/images/travel/back.png new file mode 100644 index 00000000..2b3812da Binary files /dev/null and b/view/molistar/modules/roomShare/images/travel/back.png differ diff --git a/view/molistar/modules/roomShare/images/ts.png b/view/molistar/modules/roomShare/images/ts.png new file mode 100644 index 00000000..540690d6 Binary files /dev/null and b/view/molistar/modules/roomShare/images/ts.png differ diff --git a/view/molistar/modules/roomShare/index.html b/view/molistar/modules/roomShare/index.html new file mode 100644 index 00000000..c4659748 --- /dev/null +++ b/view/molistar/modules/roomShare/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + +
+ +
+ +
+ + +
用户昵称
+
+
+
0000
+
+
+
+
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/view/molistar/modules/roomShare/js/index.js b/view/molistar/modules/roomShare/js/index.js new file mode 100644 index 00000000..5ff40c7f --- /dev/null +++ b/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` + } + } +}) \ No newline at end of file diff --git a/view/molistar/modules/roomShare/local/ar.js b/view/molistar/modules/roomShare/local/ar.js new file mode 100644 index 00000000..d75b7e21 --- /dev/null +++ b/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: `تم النسخ بنجاح`, + }, + +} \ No newline at end of file diff --git a/view/molistar/modules/roomShare/local/en.js b/view/molistar/modules/roomShare/local/en.js new file mode 100644 index 00000000..bc02153c --- /dev/null +++ b/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`, + }, +} \ No newline at end of file diff --git a/view/molistar/modules/roomShare/local/zh.js b/view/molistar/modules/roomShare/local/zh.js new file mode 100644 index 00000000..b1823f70 --- /dev/null +++ b/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: `複製成功`, + }, +} \ No newline at end of file