diff --git a/view/molistar/modules/mengxin/css/index.css b/view/molistar/modules/mengxin/css/index.css new file mode 100644 index 0000000..1568d0a --- /dev/null +++ b/view/molistar/modules/mengxin/css/index.css @@ -0,0 +1,176 @@ +html, +body { + width: 100%; + height: 100%; + background: linear-gradient(180deg, #DBF6FE 10%, #F9F7F8 40%); + box-sizing: border-box; + padding-top: 1.06667rem; +} + +.back { + height: 0.58667rem; + line-height: 0.58667rem; + position: fixed; + left: 0; + top: 1.53333rem; + 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; +} + +.title { + width: 9.04rem; + display: flex; + justify-content: space-between; + box-sizing: border-box; + padding: 0 0rem 0 0.66667rem; + position: fixed; + left: 50%; + transform: translateX(-50%); + top: 1.6rem; +} + +.title div { + color: #222222; + font-size: 0.42667rem; + font-weight: bold; + position: relative; +} + +.title div i { + width: 0.53333rem; + height: 0.06667rem; + border-radius: 0.06667rem; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 0rem; + background: linear-gradient(135deg, #AE87FF 54%, #FF5CE1 100%); +} + +.title .d2 { + width: 1.86667rem; + height: 0.66667rem; + line-height: 0.66667rem; + border-radius: 0.66667rem; + background: #fff; + text-align: center; +} + +.title .d2 span { + vertical-align: middle; + display: inline-block; + color: #9296A5; + font-size: 0.34667rem; +} + +.title .d2 img { + width: 0.4rem; + height: 0.4rem; + vertical-align: middle; + display: inline-block; +} + +ul { + width: 9.04rem; + height: 18.5rem; + margin: 0.66667rem auto 0; + overflow-y: scroll; +} + +ul::-webkit-scrollbar { + display: none; +} + +ul li { + width: 100%; + height: 2.13333rem; + overflow: hidden; + background: #fff; + border-radius: 0.32rem; + margin-bottom: 0.26667rem; +} + +ul li .tx { + width: 1.70667rem; + height: 1.70667rem; + border-radius: 50%; + float: left; + margin-top: 0.21333rem; + margin-left: 0.13333rem; + margin-right: 0.26667rem; +} + +ul li .user { + float: left; +} + +ul li .user .nick { + width: 2rem; + color: #1D1D1D; + font-weight: 600; + margin-top: 0.6rem; + font-size: 0.37333rem; + height: 0.4rem; + margin-bottom: 0.26667rem; + white-space: nowrap; +} + +ul li .user .nick i { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-style: normal; + display: inline-block; + vertical-align: middle; +} + +ul li .user .nick img { + display: inline-block; + width: 0.26667rem; + height: 0.26667rem; + margin-left: 0.13333rem; + vertical-align: middle; +} + +ul li .user .nick .img { + width: 0.34667rem; + height: 0.34667rem; + display: inline-block; +} + +ul li .user .lastLoginRegion { + color: #C2C3D3; + font-size: 0.34667rem; +} + +ul li .right { + width: 2.13333rem; + height: 0.8rem; + line-height: 0.8rem; + border-radius: 0.8rem; + float: right; + text-align: center; + margin-right: 0.26667rem; + margin-top: 0.64rem; + background: linear-gradient(135deg, #B7F2FF 0%, #D5C1FF 54%, #FDACF1 100%); + color: #ac1295; +} + +ul .null { + height: 2.13333rem; + line-height: 2.13333rem; + text-align: center; + color: #C4C6D5; + font-size: 0.34667rem; +} diff --git a/view/molistar/modules/mengxin/css/index.scss b/view/molistar/modules/mengxin/css/index.scss new file mode 100644 index 0000000..fbb2640 --- /dev/null +++ b/view/molistar/modules/mengxin/css/index.scss @@ -0,0 +1,199 @@ +@function px2rem($px) { + @return $px / 75+rem; +} + +html, +body { + width: 100%; + height: 100%; + // background: #F8F8FB; + background: linear-gradient(180deg, #DBF6FE 10%, #F9F7F8 40%); + box-sizing: border-box; + padding-top: px2rem(80); +} + +.back { + // width: 100%; + height: px2rem(44); + line-height: px2rem(44); + position: fixed; + left: 0; + top: px2rem(115); + 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); + } +} + +.title { + width: px2rem(678); + display: flex; + justify-content: space-between; + // margin: px2rem(120) auto 0; + box-sizing: border-box; + padding: 0 px2rem(0) 0 px2rem(50); + position: fixed; + left: 50%; + transform: translateX(-50%); + top: px2rem(120); + + div { + color: #222222; + font-size: px2rem(32); + font-weight: bold; + position: relative; + + i { + width: px2rem(40); + height: px2rem(5); + border-radius: px2rem(5); + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: px2rem(0); + background: linear-gradient(135deg, #AE87FF 54%, #FF5CE1 100%); + ; + } + } + + .d2 { + width: px2rem(140); + height: px2rem(50); + line-height: px2rem(50); + border-radius: px2rem(50); + background: #fff; + text-align: center; + + span { + vertical-align: middle; + display: inline-block; + color: #9296A5; + font-size: px2rem(26); + } + + img { + width: px2rem(30); + height: px2rem(30); + vertical-align: middle; + display: inline-block; + } + } +} + +ul { + width: px2rem(678); + height: 18.5rem; + // background: pink; + margin: px2rem(50) auto 0; + overflow-y: scroll; + + &::-webkit-scrollbar { + display: none; + } + + li { + width: 100%; + height: px2rem(160); + overflow: hidden; + background: #fff; + border-radius: px2rem(24); + margin-bottom: px2rem(20); + + .tx { + width: px2rem(128); + height: px2rem(128); + border-radius: 50%; + float: left; + margin-top: px2rem(16); + margin-left: px2rem(10); + margin-right: px2rem(20); + } + + .user { + float: left; + + .nick { + width: 2rem; + color: #1D1D1D; + font-weight: 600; + margin-top: px2rem(45); + font-size: px2rem(28); + height: px2rem(30); + margin-bottom: px2rem(20); + white-space: nowrap; + i { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-style: normal; + display: inline-block; + vertical-align: middle; + } + + img { + display: inline-block; + width: px2rem(20); + height: px2rem(20); + margin-left: px2rem(10); + vertical-align: middle; + } + + .img { + width: px2rem(26); + height: px2rem(26); + display: inline-block; + } + } + + .lastLoginRegion { + color: #C2C3D3; + font-size: px2rem(26); + } + } + + .right { + width: px2rem(160); + height: px2rem(60); + line-height: px2rem(60); + border-radius: px2rem(60); + float: right; + text-align: center; + margin-right: px2rem(20); + margin-top: px2rem(48); + background: linear-gradient(135deg, #B7F2FF 0%, #D5C1FF 54%, #FDACF1 100%); + color: #ac1295; + + + // span { + // display: inline-block; + // color: #A2A7B8; + // font-size: px2rem(24); + // } + + // img { + // vertical-align: middle; + // width: px2rem(26); + // height: px2rem(26); + // display: inline-block; + // margin-left: px2rem(10); + // } + } + } + + .null { + height: px2rem(160); + line-height: px2rem(160); + text-align: center; + color: #C4C6D5; + font-size: px2rem(26); + } +} \ No newline at end of file diff --git a/view/molistar/modules/mengxin/images/1.png b/view/molistar/modules/mengxin/images/1.png new file mode 100644 index 0000000..02eadcb Binary files /dev/null and b/view/molistar/modules/mengxin/images/1.png differ diff --git a/view/molistar/modules/mengxin/images/2.png b/view/molistar/modules/mengxin/images/2.png new file mode 100644 index 0000000..cb2eb05 Binary files /dev/null and b/view/molistar/modules/mengxin/images/2.png differ diff --git a/view/molistar/modules/mengxin/images/384.png b/view/molistar/modules/mengxin/images/384.png new file mode 100644 index 0000000..7b29a36 Binary files /dev/null and b/view/molistar/modules/mengxin/images/384.png differ diff --git a/view/molistar/modules/mengxin/images/money.png b/view/molistar/modules/mengxin/images/money.png new file mode 100644 index 0000000..e8e4160 Binary files /dev/null and b/view/molistar/modules/mengxin/images/money.png differ diff --git a/view/molistar/modules/mengxin/images/refresh.png b/view/molistar/modules/mengxin/images/refresh.png new file mode 100644 index 0000000..8d2062c Binary files /dev/null and b/view/molistar/modules/mengxin/images/refresh.png differ diff --git a/view/molistar/modules/mengxin/images/travel/back.png b/view/molistar/modules/mengxin/images/travel/back.png new file mode 100644 index 0000000..25e87a9 Binary files /dev/null and b/view/molistar/modules/mengxin/images/travel/back.png differ diff --git a/view/molistar/modules/mengxin/images/travel/backB.png b/view/molistar/modules/mengxin/images/travel/backB.png new file mode 100644 index 0000000..92e190c Binary files /dev/null and b/view/molistar/modules/mengxin/images/travel/backB.png differ diff --git a/view/molistar/modules/mengxin/index.html b/view/molistar/modules/mengxin/index.html new file mode 100644 index 0000000..fa5e864 --- /dev/null +++ b/view/molistar/modules/mengxin/index.html @@ -0,0 +1,44 @@ + + + + + + + 萌新推薦 + + + + + + +
+ +
+ +
+
萌新推薦
+
+ 刷新 +
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/view/molistar/modules/mengxin/js/index.js b/view/molistar/modules/mengxin/js/index.js new file mode 100644 index 0000000..a6280a1 --- /dev/null +++ b/view/molistar/modules/mengxin/js/index.js @@ -0,0 +1,133 @@ +let urlPrefix = getUrlPrefix() +let browser = checkVersion() +let env = EnvCheck(); +if (env == 'test') { + new VConsole(); +} +// 封裝layer消息提醒框 +let layerIndex +const showLoading = (content = '加載中...') => { + layer.open({ + type: 2, + shadeClose: false, + content, + success(e) { + layerIndex = $(e).attr('index') + } + }) +} +const hideLoading = (index) => { + layer.close(index) +} +const toastMsg = (content = '操作完成', time = 2) => { + layer.open({ + content, + time, + skin: 'msg' + }) +} +var pageNum = 1; +var isLock = true; +// 初始化函數 +$(function () { + getInfoFromClient(); + setTimeout(function () { + // 頁面全屏 + if (browser.app) { + if (browser.android) { + window.androidJsObj.initShowNav(false) + } else { + window.webkit.messageHandlers.initShowNav.postMessage(0) + } + }; + // 頂部返回事件 + $('.back img').click(() => { + if (browser.android) { + window.androidJsObj.closeWebView() + } else { + window.webkit.messageHandlers.closeWebView.postMessage(null) + } + }); + list(); + }, 100) +}) +function list() { + showLoading() + networkRequest({ + type: 'get', + url: urlPrefix + '/newUser/page', + data: { + pageNum, + pageSize: 10, + }, + success(res) { + if (res.code === 200) { + var str = ''; + if (res.data.length == 0) { + isLock = false; + if (pageNum == 1) { + str += `
  • 暫無數據~
    • + ` + } + } else { + res.data.forEach(res => { + str += ` +
  • + +
    +

    ${res.nick}

    + 地區: ${res.region} +
    +
    私信TA
    +
    • + ` + }) + isLock = true; + } + $("ul").append(str); + } else { + isLock = true; + toastMsg(res.message) + } + hideLoading(layerIndex) + }, + error(err) { + isLock = true; + hideLoading(layerIndex) + toastMsg("網絡錯誤，請退出重進") + } + }) +} +// 刷新按鈕 +$('.title .d2').click(function () { + pageNum = 1; + isLock = true; + $('ul li').remove(); + list(); +}) +// 點擊列表打開信息頁 +$('ul').on('click', 'li', function () { + var uid = $(this).attr('uid'); + if (browser.ios) { + window.webkit.messageHandlers.openPersonPage.postMessage(uid); + setTimeout(function () { lock = true; }, 200) + } else if (browser.android) { + if (androidJsObj && typeof androidJsObj === 'object') { + window.androidJsObj.openPersonPage(uid); + } + } +}) +// 滾動監聽 +$('ul').scroll(function () { + let scrollTop = $(this).scrollTop() + let scrollHeight = $('ul')[0].scrollHeight + let ulHeight = $(this).innerHeight() + if (scrollTop + ulHeight + 100 >= scrollHeight) { + if (isLock) { + // 請求下一頁 + pageNum = pageNum + 1; + list() + isLock = false; + } + } +}) \ No newline at end of file diff --git a/view/molistar/modules/newRank/js/index.js b/view/molistar/modules/newRank/js/index.js index 7506ce1..733922e 100644 --- a/view/molistar/modules/newRank/js/index.js +++ b/view/molistar/modules/newRank/js/index.js @@ -178,7 +178,7 @@ function listRank() { notListTo3.forEach((res, i) => { str += `
  • -
    ${i + 1}
    +
    ${i + 4}
    ${res.name}