|
|
@@ -1,471 +0,0 @@
|
|
|
-<!doctype html>
|
|
|
-<html>
|
|
|
-
|
|
|
- <head>
|
|
|
- <meta charset="utf-8">
|
|
|
- <title></title>
|
|
|
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
|
|
|
- <link href="css/mui.css" rel="stylesheet" />
|
|
|
- <script src="js/mui.js"></script>
|
|
|
- <script type="text/javascript">
|
|
|
- mui.init()
|
|
|
- (function flexible (window, document) {
|
|
|
- let docEl = document.documentElement
|
|
|
- let dpr = window.devicePixelRatio || 1
|
|
|
-
|
|
|
- // adjust body font size
|
|
|
- function setBodyFontSize () {
|
|
|
- if (document.body) {
|
|
|
- document.body.style.fontSize = (12 * dpr) + 'px'
|
|
|
- } else {
|
|
|
- document.addEventListener('DOMContentLoaded', setBodyFontSize)
|
|
|
- }
|
|
|
- }
|
|
|
- setBodyFontSize()
|
|
|
-
|
|
|
- // set 1rem = viewWidth / 10
|
|
|
- function setRemUnit () {
|
|
|
- let rem = docEl.clientWidth / 375
|
|
|
- docEl.style.fontSize = rem + 'px'
|
|
|
- }
|
|
|
-
|
|
|
- setRemUnit()
|
|
|
-
|
|
|
- // reset rem unit on page resize
|
|
|
- window.addEventListener('resize', setRemUnit)
|
|
|
- window.addEventListener('pageshow', function(e) {
|
|
|
- if (e.persisted) {
|
|
|
- setRemUnit()
|
|
|
- }
|
|
|
- })
|
|
|
-
|
|
|
- // detect 0.5px supports
|
|
|
- if (dpr >= 2) {
|
|
|
- let fakeBody = document.createElement('body')
|
|
|
- let testElement = document.createElement('div')
|
|
|
- testElement.style.border = '.5px solid transparent'
|
|
|
- fakeBody.appendChild(testElement)
|
|
|
- docEl.appendChild(fakeBody)
|
|
|
- if (testElement.offsetHeight === 1) {
|
|
|
- docEl.classList.add('hairlines')
|
|
|
- }
|
|
|
- docEl.removeChild(fakeBody)
|
|
|
- }
|
|
|
- }(window, document));
|
|
|
- (function() {
|
|
|
- if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') {
|
|
|
- handleFontSize()
|
|
|
- } else {
|
|
|
- if (document.addEventListener) {
|
|
|
- document.addEventListener('WeixinJSBridgeReady', handleFontSize, false)
|
|
|
- } else if (document.attachEvent) {
|
|
|
- document.attachEvent('onWeixinJSBridgeReady', handleFontSize)
|
|
|
- }
|
|
|
- }
|
|
|
- function handleFontSize () {
|
|
|
- // 设置网页字体为默认大小
|
|
|
- WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 })
|
|
|
- // 重写设置网页字体大小的事件
|
|
|
- WeixinJSBridge.on('menu:setfont', function() {
|
|
|
- WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize': 0 })
|
|
|
- })
|
|
|
- }
|
|
|
- })()
|
|
|
- </script>
|
|
|
- </head>
|
|
|
- <style>
|
|
|
- .bg_content {
|
|
|
- height: calc(100vh + 44rem);
|
|
|
- width: 100vw;
|
|
|
- background: url('./img/blessing.png');
|
|
|
- background-size: cover;
|
|
|
- margin-top: -44rem;
|
|
|
- }
|
|
|
- .show_box{
|
|
|
- position: absolute;
|
|
|
- top: 198rem;
|
|
|
- //background: #FFFFFF;
|
|
|
- left: 15rem;
|
|
|
- right: 15rem;
|
|
|
- height: 290rem;
|
|
|
- }
|
|
|
- .show_box .show_item{
|
|
|
- width: 20rem;
|
|
|
- height: 20rem;
|
|
|
- position: relative;
|
|
|
- top: 15rem;
|
|
|
- left: 15rem;
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .show_box .show_item.add_animation_item{
|
|
|
- display: block;
|
|
|
- animation: hiddenAvatarItem 0.8s ease-out 2.3s forwards
|
|
|
- }
|
|
|
- .show_box .show_item .avatar_box{
|
|
|
- width: 20rem;
|
|
|
- height: 20rem;
|
|
|
- border-radius: 15rem;
|
|
|
- overflow: hidden;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- z-index: 2;
|
|
|
- transform: scale(1);
|
|
|
- }
|
|
|
- .show_box .show_item.add_animation_item .avatar_box{
|
|
|
- animation: showAvatarItem 0.3s ease-out 2s forwards;
|
|
|
- }
|
|
|
- .show_box .show_item .avatar_box .avatar{
|
|
|
- width: 20rem;
|
|
|
- height: 20rem;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
- .show_box .show_item .info_box{
|
|
|
- position: absolute;
|
|
|
- top: -15rem;
|
|
|
- left: -15rem;
|
|
|
- z-index: 1;
|
|
|
- background: rgba(255,255,255,0.8);
|
|
|
- border-radius: 15rem;
|
|
|
- border: 1rem solid #FFFFFF;
|
|
|
- width: 240rem;
|
|
|
- padding: 15rem;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .show_box .show_item.add_animation_item .info_box{
|
|
|
- animation: hiddenItem 0.3s ease-out 2s forwards;
|
|
|
- }
|
|
|
- .show_box .show_item.show_img_item .info_box{
|
|
|
- top: -175rem;
|
|
|
- left: -15rem;
|
|
|
- }
|
|
|
- .show_box .show_item.show_img_item.add_animation_item .info_box{
|
|
|
- animation: hiddenImgItem 0.3s ease-out 2s forwards;
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes showItem {
|
|
|
- 0% {
|
|
|
- opacity: 0;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- }
|
|
|
- @keyframes showAvatarItem {
|
|
|
- 0% {
|
|
|
- transform: scale(1);
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: scale(1.5);
|
|
|
- }
|
|
|
- }
|
|
|
- @keyframes hiddenAvatarItem {
|
|
|
- 0% {
|
|
|
- transform: scale(1.5);
|
|
|
- opacity: 1;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: scale(1.5);
|
|
|
- opacity: 0;
|
|
|
- top: 135rem;
|
|
|
- left: 172rem;
|
|
|
- }
|
|
|
- }
|
|
|
- @keyframes hiddenItem {
|
|
|
- 0% {
|
|
|
- transform: scale(1);
|
|
|
- top: -15rem;
|
|
|
- left: -15rem;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: scale(0);
|
|
|
- left:-110rem;
|
|
|
- top: -30rem;
|
|
|
- }
|
|
|
- }
|
|
|
- @keyframes hiddenImgItem {
|
|
|
- 0% {
|
|
|
- transform: scale(1);
|
|
|
- top: -175rem;
|
|
|
- left: -15rem;
|
|
|
- }
|
|
|
- 100% {
|
|
|
- transform: scale(0);
|
|
|
- left:-110rem;
|
|
|
- top: -115rem;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .show_box .show_item .info_box .img_box{
|
|
|
- width: 210rem;
|
|
|
- height: 150rem;
|
|
|
- border-radius: 15rem;
|
|
|
- overflow: hidden;
|
|
|
- margin-bottom: 10rem;
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .show_box .show_item.show_img_item .info_box .img_box{
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .show_box .show_item .info_box .img_box .info_img{
|
|
|
- width: 210rem;
|
|
|
- height: 150rem;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
- .show_box .show_item .info_box .info_text{
|
|
|
-
|
|
|
- }
|
|
|
- .show_box .show_item .info_box .info_text .info_name{
|
|
|
- font-weight: 500;
|
|
|
- font-size: 14rem;
|
|
|
- color: #222222;
|
|
|
- line-height: 20rem;
|
|
|
- padding-left: 25rem;
|
|
|
- margin-bottom: 5rem;
|
|
|
- }
|
|
|
- .show_box .show_item .info_box .info_text .info_dsc{
|
|
|
- font-weight: 400;
|
|
|
- font-size: 12rem;
|
|
|
- color: #222222;
|
|
|
- line-height: 17rem;
|
|
|
- }
|
|
|
- .send_btn {
|
|
|
- width: 100%;
|
|
|
- position: fixed;
|
|
|
- bottom: 0rem;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- }
|
|
|
- .dialog_text {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
|
|
|
- z-index: 1000; /* 确保遮罩层在顶部 */
|
|
|
- transition: opacity 0.5s ease; /* 可选：添加透明度过渡效果 */
|
|
|
- display: none;
|
|
|
- }
|
|
|
- .dialog-body {
|
|
|
- width: 100%;
|
|
|
- height: 100vh;
|
|
|
- z-index: 1001; /* 确保遮罩层在顶部 */
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .text_bg {
|
|
|
- background: url('./img/dialog-text.png');
|
|
|
- background-size: cover;
|
|
|
- width: 100vw;
|
|
|
- height: 368rem;
|
|
|
- }
|
|
|
- .close-text {
|
|
|
- width: 24rem;
|
|
|
- height: 24rem;
|
|
|
- float: right;
|
|
|
- margin-right: 25rem;
|
|
|
- margin-top: 25rem;
|
|
|
- }
|
|
|
- .textarea_style {
|
|
|
- background-color: rgba(255, 255, 255, 0);
|
|
|
- border: unset;
|
|
|
- height: 180rem;
|
|
|
- padding: 0 35rem;
|
|
|
- width: 100%;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
- .photo-btn {
|
|
|
- width: 80rem;
|
|
|
- height: 80rem;
|
|
|
- margin-top: 18rem;
|
|
|
- margin-left: 35rem;
|
|
|
- }
|
|
|
- .send_text {
|
|
|
- width: 225rem;
|
|
|
- height: 52rem;
|
|
|
- background: linear-gradient( 134deg, #FAFF77 0%, #8EFF3B 100%);
|
|
|
- border-radius: 30rem;
|
|
|
- border: 2rem solid #FFFFFF;
|
|
|
- font-weight: 800;
|
|
|
- font-size: 16px;
|
|
|
- color: #222222;
|
|
|
- margin-top: 15rem;
|
|
|
- }
|
|
|
- </style>
|
|
|
- <body>
|
|
|
- <div class="bg_content">
|
|
|
- <div class="show_box">
|
|
|
- <div id="showItem" class="show_item">
|
|
|
- <div class="avatar_box">
|
|
|
- <img id="avatar" class="avatar" src="./img/prize-bg.png"/>
|
|
|
- </div>
|
|
|
- <div class="info_box">
|
|
|
- <div class="img_box">
|
|
|
- <img id="infoImg" class="info_img" src="./img/lottery-bg.png"/>
|
|
|
- </div>
|
|
|
- <div class="info_text">
|
|
|
- <div id="infoName" class="info_name">不爱吃甜：</div>
|
|
|
- <div id="infoDsc" class="info_dsc">不爱吃甜不爱吃甜不爱吃甜不爱吃甜不爱吃甜不爱吃甜</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <img class="send_btn" id="sendBtn" src="./img/send-btn.png" mode="widthFix" />
|
|
|
- </div>
|
|
|
- <div id="dialogText" class="dialog_text">
|
|
|
- <div class="dialog-body">
|
|
|
- <div class="text_bg">
|
|
|
- <img class="close-text" id="closeText" src="./img/close-text.png" mode="widthFix" />
|
|
|
- <textarea class="textarea_style" id="textarea"></textarea>
|
|
|
- <img class="photo-btn" id="photoBtn" src="./img/photo-btn.png" mode="widthFix" />
|
|
|
- <input type="file" id="uploadfile" onchange="uploadFile()" />
|
|
|
- </div>
|
|
|
- <button class="send_text" onclick="handleSendText">发送</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <script>
|
|
|
- window.onload = function() {
|
|
|
- // 获取腾讯COS对象存储的实例对象
|
|
|
- getCosObj();
|
|
|
- let uploaInput =document.getElementById("uploadfile");
|
|
|
- let div;
|
|
|
- // 当用户上传时触发事件
|
|
|
- uploaInput.onchange=function(){
|
|
|
- readFile(this);
|
|
|
- }
|
|
|
- //处理图片并添加都dom中的函数
|
|
|
- let readFile=function(obj){
|
|
|
- // 获取input里面的文件组
|
|
|
- let fileList=obj.files;
|
|
|
- //对文件组进行遍历，可以到控制台打印出fileList去看看
|
|
|
- for(let i=0;i<fileList.length;i++){
|
|
|
-
|
|
|
- var formData = new FormData();
|
|
|
- formData.append('path', fileList[i].name)
|
|
|
- formData.append('file', fileList[i])
|
|
|
- let url = credentials.serverDomain+ '/open/v1/file/upload'
|
|
|
- mui.ajax(url, {
|
|
|
- data: formData,
|
|
|
- processData: false,
|
|
|
- contentType: false,
|
|
|
- type:'post',//HTTP请求类型
|
|
|
- headers: {
|
|
|
- 'bucket': credentials.bucket,
|
|
|
- 'Authorization': credentials.authorization,
|
|
|
- 'secretId': credentials.secretId,
|
|
|
- },
|
|
|
- success:function(res){
|
|
|
- console.log('res', res.data);
|
|
|
- },
|
|
|
- error:function(error){
|
|
|
- //异常处理；
|
|
|
- console.log(error);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
- function fileToArrayBuffer(file) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- const reader = new FileReader();
|
|
|
-
|
|
|
- reader.onload = function() {
|
|
|
- resolve(reader.result); // reader.result 现在是 ArrayBuffer
|
|
|
- };
|
|
|
-
|
|
|
- reader.onerror = function(error) {
|
|
|
- reject(error);
|
|
|
- };
|
|
|
-
|
|
|
- // 读取文件内容为 ArrayBuffer
|
|
|
- reader.readAsArrayBuffer(file);
|
|
|
- });
|
|
|
- };
|
|
|
- let credentials = {
|
|
|
- bucket: '',
|
|
|
- Authorization: '',
|
|
|
- secretId: '',
|
|
|
- serverDomain: ''
|
|
|
- };
|
|
|
- function getCosObj() {
|
|
|
- mui.ajax('http://test.wefanbot.com:18998/scrm/v1/oss/p/getAuthorization',{
|
|
|
- data:{
|
|
|
- },
|
|
|
- dataType:'json',//服务器返回json格式数据
|
|
|
- type:'post',//HTTP请求类型
|
|
|
- headers:{'Content-Type':'application/json'},
|
|
|
- success:function(res){
|
|
|
- credentials = res.data.info
|
|
|
- // 用正则将this.credentials.serverDomain链接中的协议与当前域名的协议保持一致
|
|
|
- credentials.serverDomain = credentials.serverDomain.replace(/https:|http:/g, document.location.protocol)
|
|
|
- console.log('credentials2', credentials);
|
|
|
- },
|
|
|
- error:function(error){
|
|
|
- //异常处理；
|
|
|
- console.log(error);
|
|
|
- }
|
|
|
- });
|
|
|
- };
|
|
|
- function handleSendText() {
|
|
|
- let textareaResult = document.getElementById("textarea").value;
|
|
|
- mui.ajax('http://test.wefanbot.com:18998/scrm/v1/oss/m/getAuthorization', {
|
|
|
- data:{
|
|
|
- mpClientId: '',
|
|
|
- openId: '',
|
|
|
- content: textareaResult,
|
|
|
- imgList: '',
|
|
|
- },
|
|
|
- dataType:'json',//服务器返回json格式数据
|
|
|
- type:'post',//HTTP请求类型
|
|
|
- headers:{'Content-Type':'application/json'},
|
|
|
- success:function(res){
|
|
|
- },
|
|
|
- error:function(error){
|
|
|
- //异常处理；
|
|
|
- console.log(error);
|
|
|
- }
|
|
|
- });
|
|
|
- };
|
|
|
- document.getElementById('sendBtn').addEventListener('click', function() {
|
|
|
- document.getElementById('dialogText').style.display = 'block';
|
|
|
- });
|
|
|
- document.getElementById('closeText').addEventListener('click', function() {
|
|
|
- document.getElementById('dialogText').style.display = 'none';
|
|
|
- });
|
|
|
- </script>
|
|
|
- </body>
|
|
|
- <script type="text/javascript">
|
|
|
- function getRandomArbitrary(min, max) {
|
|
|
- return Math.floor(Math.random() * (max - min) + min);
|
|
|
- }
|
|
|
- function showItem(type){
|
|
|
- var showItem = document.getElementById('showItem')
|
|
|
- var infoName = document.getElementById('infoName')
|
|
|
- var infoDsc = document.getElementById('infoDsc')
|
|
|
- var avatar = document.getElementById('avatar')
|
|
|
- avatar.src = ""
|
|
|
- infoName.innerText = '455'
|
|
|
- infoDsc.innerText = '455'
|
|
|
- var X = getRandomArbitrary(15,125)
|
|
|
- if(type===1){//无图片
|
|
|
- showItem.classList.remove("show_img_item")
|
|
|
- var Y = getRandomArbitrary(15,157)
|
|
|
- }
|
|
|
- if(type===2){//有图片
|
|
|
- showItem.classList.add("show_img_item")
|
|
|
- var infoImg = document.getElementById('infoImg')
|
|
|
- infoImg.src = ""
|
|
|
- var Y = getRandomArbitrary(175,208)
|
|
|
- }
|
|
|
- showItem.style.cssText = `top: ${Y}rem; left: ${X}rem;`
|
|
|
- showItem.classList.add("add_animation_item")
|
|
|
- setTimeout(()=>{
|
|
|
- showItem.classList.remove("add_animation_item")
|
|
|
- },3500)
|
|
|
- }
|
|
|
- showItem(2)
|
|
|
- </script>
|
|
|
-</html>X
|
