Bez popisu

serviceEvmFour.html 6.7KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta content="yes" name="apple-mobile-web-app-capable">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  7. <title>咨询详细活动</title>
  8. <link rel="stylesheet" href="../common/reset.css">
  9. <script type="text/javascript" src="../common/jquery-2.1.0.js"></script>
  10. <script type="text/javascript">
  11. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  12. window.onresize = function () {
  13. document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth/375) + "px";
  14. }
  15. </script>
  16. <style type="text/css">
  17. body{background: #fff;width:100%;min-height:100vh}
  18. .title{
  19. font-size: #000;font-size: 0.34rem;line-height: 0.35rem;text-align: center;padding-top: 0.5rem;
  20. font-weight: bold;
  21. }
  22. .title02{
  23. width: 1.63rem;height: 0.385rem;background: url(./img/serviceFour.jpg?v=1) no-repeat;background-size:100%;
  24. margin: 0.125rem auto 0;
  25. font-size: 0.18rem;
  26. text-align: center;
  27. line-height: 0.385rem;
  28. font-weight: bold;
  29. letter-spacing: 0.2em;
  30. }
  31. #evmImg{
  32. width: 1.41rem;height: 1.41rem;margin: 0.465rem auto 0;display: block;
  33. }
  34. #preservationEvm{
  35. width: 1.68rem;height: 0.425rem;border-radius: 0.425rem;border: 0.01rem solid #F8E504;color: #000000;
  36. font-size: 0.18rem;line-height: 0.425rem;display: block;margin: 0.03rem auto 0;background: transparent;
  37. }
  38. .copyDiv{
  39. width: 2.305rem;height: 0.38rem;background: #F5F5F5;border-radius: 0.05rem;display: flex;align-items: center;justify-content: space-between;overflow: hidden;margin: 0.46rem auto 0;
  40. }
  41. .copyDiv .copyText{
  42. color: #000000;font-size: 0.15rem;line-height: 0.235rem;padding-left: 0.11rem;
  43. }
  44. .copyDiv .copyButton{
  45. width: 0.62rem;background: #FED900;color: #000000;font-size: 0.15rem;text-align: center;line-height: 0.38rem;
  46. }
  47. .hint{
  48. text-align: center;font-size: 0.14rem;padding-top: 0.1rem;
  49. }
  50. #copy_1,#copy_2{
  51. position: absolute;
  52. left: -1000rem;
  53. }
  54. .alert-info {
  55. position: fixed;
  56. top: 1.74rem;
  57. right: 0;
  58. left: 0;
  59. bottom: 0;
  60. text-align: center;
  61. }
  62. .alert-info p {
  63. display: inline-block;
  64. height: 0.38rem;
  65. color: #fff;
  66. font-size: 0.14rem;
  67. line-height: 0.38rem;
  68. padding: 0 0.10rem;
  69. background-color: rgba(0, 0, 0, 0.7);
  70. border-radius: 5px;
  71. }
  72. .content{
  73. width: 100%;
  74. }
  75. .content img{
  76. width: 100%;
  77. }
  78. </style>
  79. </head>
  80. <body>
  81. <h3 class="title">咨询详细活动</h3>
  82. <div class="title02">添加微信</div>
  83. <img src="./img/serviceEvm02.png" id="evmImg" />
  84. <div class="hint">长按二维码保存到本地</div>
  85. <!-- <button id="preservationEvm" onclick="downloadIamge('#evmImg')">保存二维码</button> -->
  86. <div class="copyDiv">
  87. <div class="copyText">微信:<span id="wechatNumber">kuxuan1108</span></div>
  88. <div class="copyButton" onclick="copyEvent()">复制</div>
  89. </div>
  90. <input id="copy_1" type="text" readOnly="true" value=""/>
  91. <div id="copy_2"></div>
  92. <div class="alert-info" style="display: none;">
  93. <!-- tip提示,3s后消失 -->
  94. <p></p>
  95. </div>
  96. </body>
  97. </html>
  98. <script type="text/javascript">
  99. var qs = parseQueryString(window.location.href);
  100. $().ready(function () {
  101. // 调用方式
  102. // 参数一: 选择器,代表img标签
  103. // 参数二: 图片名称,可选
  104. // downloadIamge('canvas', '图片名称')
  105. if(isWeiXin()){
  106. $(".hint").html('长按识别二维码')
  107. }
  108. if(qs.wechart){
  109. $('#wechatNumber').html(qs.wechart)
  110. if(qs.wechart == 'M13910555321'){
  111. $("#evmImg").attr('src','./img/serviceEvm03.png')
  112. }
  113. if(qs.wechart == 'zhuaduoduo001'){
  114. $("#evmImg").attr('src','./img/serviceEvm04.png')
  115. }
  116. }
  117. })
  118. function copyEvent () {
  119. var data=$("#wechatNumber").html();
  120. copy_2.innerHTML = data;
  121. copy_1.value = data;
  122. if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
  123. //区分iPhone设备
  124. window.getSelection().removeAllRanges();//这段代码必须放在前面否则无效
  125. var Url2=document.getElementById("copy_2");//要复制文字的节点
  126. var range = document.createRange();
  127. // 选中需要复制的节点
  128. range.selectNode(Url2);
  129. // 执行选中元素
  130. window.getSelection().addRange(range);
  131. // 执行 copy 操作
  132. var successful = document.execCommand('copy');
  133. // 移除选中的元素
  134. window.getSelection().removeAllRanges();
  135. }else{
  136. var Url2=document.getElementById("copy_1");//要复制文字的节点
  137. Url2.select(); // 选择对象
  138. document.execCommand("Copy"); // 执行浏览器复制命令
  139. }
  140. showMsg('复制成功')
  141. }
  142. // function downloadIamge(selector, name) {
  143. // var image = new Image()
  144. // // 解决跨域 Canvas 污染问题
  145. // image.setAttribute('crossOrigin', 'anonymous')
  146. // image.onload = function () {
  147. // var canvas = document.createElement('canvas')
  148. // canvas.width = image.width
  149. // canvas.height = image.height
  150. // var context = canvas.getContext('2d')
  151. // context.drawImage(image, 0, 0, image.width, image.height)
  152. // var url = canvas.toDataURL('image/png')
  153. // // 生成一个a元素
  154. // var a = document.createElement('a')
  155. // // 创建一个单击事件
  156. // var event = new MouseEvent('click')
  157. // // 将a的download属性设置为我们想要下载的图片名称,若name不存在则使用‘下载图片名称’作为默认名称
  158. // a.download = name || '下载图片名称'
  159. // // 将生成的URL设置为a.href属性
  160. // a.href = url
  161. // // 触发a的单击事件
  162. // a.dispatchEvent(event)
  163. // }
  164. // image.src = document.querySelector(selector).src
  165. // }
  166. //提示弹框
  167. function showMsg(msg) {
  168. var msgBox = document.getElementsByClassName('alert-info')[0];
  169. msgBox.children[0].innerText = msg;
  170. msgBox.style.display="block";
  171. setTimeout(function() {
  172. msgBox.style.display="none";
  173. }, 1500);
  174. }
  175. function isWeiXin(){
  176. var ua = window.navigator.userAgent.toLowerCase();
  177. if(ua.match(/MicroMessenger/i) == 'micromessenger'){
  178. return true;
  179. }else{
  180. return false;
  181. }
  182. }
  183. //H5页面埋点
  184. function writeLogH5 (data) {
  185. $.ajax({
  186. type:'post',
  187. url:'/api/v2/channel/writeLogH5',
  188. dataType:'json',
  189. data:data,
  190. success:function (res) {
  191. }
  192. })
  193. }
  194. function parseQueryString(url) {
  195. var urlObj = {};
  196. var reg = /([^?=&]+)=([^?=&]+)/g;
  197. url.replace(reg, function($0, $1, $2) {
  198. urlObj[$1] = decodeURIComponent($2);
  199. })
  200. return urlObj;
  201. }
  202. </script>