qw.html 8.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. <html>
  2. <head>
  3. <title>鲸致生活-管家</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  6. <script>
  7. window.onerror = e => {
  8. console.error(e)
  9. alert('发生错误' + e)
  10. }
  11. </script>
  12. <!-- weui 样式 -->
  13. <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css">
  14. </link>
  15. <!-- 调试用的移动端 console -->
  16. <script src="../service/js/jquery-1.7.2.min.js"></script>
  17. <!-- 公众号 JSSDK -->
  18. <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  19. <!-- 云开发 Web SDK -->
  20. <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>
  21. <script>
  22. function docReady(fn) {
  23. if (document.readyState === 'complete' || document.readyState === 'interactive') {
  24. fn()
  25. } else {
  26. document.addEventListener('DOMContentLoaded', fn);
  27. }
  28. }
  29. docReady(async function () {
  30. var ua = navigator.userAgent.toLowerCase()
  31. var isWXWork = ua.match(/wxwork/i) == 'wxwork'
  32. var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
  33. var isMobile = false
  34. var isDesktop = false
  35. if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
  36. isMobile = true
  37. } else {
  38. isDesktop = true
  39. }
  40. if (isWeixin) {
  41. console.info('微信浏览器')
  42. var containerEl = document.getElementById('wechat-web-container')
  43. containerEl.classList.remove('hidden')
  44. containerEl.classList.add('full', 'wechat-web-container')
  45. var launchBtn = document.getElementById('launch-btn')
  46. var cp = getQueryString('cp');//企业微信帐号we_user
  47. var mobile = getQueryString('mobile');//客户手机号 用来生成活码备注
  48. if(cp==null) cp="qrcode";
  49. if(mobile==null) mobile="mobile";
  50. launchBtn.setAttribute("path", "/pages/ucenter/wx/join?cp=" + cp+"&mobile="+mobile);
  51. launchBtn.addEventListener('ready', function (e) {
  52. console.log('开放标签 ready')
  53. //alert('开放标签 ready')
  54. })
  55. launchBtn.addEventListener('launch', function (e) {
  56. console.log('开放标签 success')
  57. //alert('开放标签 success')
  58. })
  59. launchBtn.addEventListener('error', function (e) {
  60. console.log('开放标签 fail', e.detail)
  61. //alert(e.detail)
  62. })
  63. wx.config({
  64. //debug: true, // 调试时可开启
  65. appId: 'wxf0a77f9993d8b60d', // <!-- replace -->
  66. timestamp: 0, // 必填,填任意数字即可
  67. nonceStr: 'nonceStr', // 必填,填任意非空字符串即可
  68. signature: 'signature', // 必填,填任意非空字符串即可
  69. jsApiList: ['chooseImage'], // 必填,随意一个接口即可
  70. openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
  71. })
  72. } else if (isDesktop) {
  73. // 在 pc 上则给提示引导到手机端打开
  74. var containerEl = document.getElementById('desktop-web-container')
  75. containerEl.classList.remove('hidden')
  76. containerEl.classList.add('full', 'desktop-web-container')
  77. } else {
  78. console.info('手机浏览器')
  79. var containerEl = document.getElementById('public-web-container')
  80. containerEl.classList.remove('hidden')
  81. containerEl.classList.add('full', 'public-web-container')
  82. var c = new cloud.Cloud({
  83. // 必填,表示是未登录模式
  84. identityless: true,
  85. // 资源方 AppID
  86. resourceAppid: 'wxf0a77f9993d8b60d', // <!-- replace -->
  87. // 资源方环境 ID
  88. resourceEnv: 'zhaijieshi-3guecm78383ca692', // <!-- replace -->
  89. })
  90. await c.init()
  91. window.c = c
  92. var buttonEl = document.getElementById('public-web-jump-button')
  93. var buttonLoadingEl = document.getElementById('public-web-jump-button-loading')
  94. try {
  95. // await openWeapp(() => {
  96. // buttonEl.classList.remove('weui-btn_loading')
  97. // buttonLoadingEl.classList.add('hidden')
  98. // })
  99. } catch (e) {
  100. buttonEl.classList.remove('weui-btn_loading')
  101. buttonLoadingEl.classList.add('hidden')
  102. throw e
  103. }
  104. }
  105. })
  106. async function openWeapp(onBeforeJump) {
  107. var cp = getQueryString('cp');
  108. if(cp==null) cp="qrcode"
  109. var mobile = getQueryString('mobile');//客户手机号 用来生成活码备注
  110. if(mobile==null) mobile="mobile";
  111. var c = window.c
  112. const res = await c.callFunction({
  113. name: 'public',
  114. data: {
  115. action: 'getOpenWxJoin',
  116. path: '/pages/ucenter/wx/join',
  117. query: 'cp=' + cp+'&mobile='+mobile //不能进行encodeURIComponent编码,
  118. },
  119. })
  120. console.warn(res)
  121. if (onBeforeJump) {
  122. onBeforeJump()
  123. }
  124. location.href = res.result.openlink
  125. }
  126. //获取url参数
  127. function getQueryString(name) {
  128. var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  129. var r = window.location.search.substr(1).match(reg);
  130. if (r != null) {
  131. return unescape(r[2]);
  132. }
  133. return '';
  134. }
  135. </script>
  136. <style>
  137. .hidden {
  138. display: none;
  139. }
  140. .full {
  141. /* position: absolute;
  142. bottom: 40%;
  143. top: 0;
  144. bottom: 0;
  145. left: 0;
  146. right: 0;*/
  147. margin-top: 30px;
  148. }
  149. .public-web-container {
  150. display: flex;
  151. flex-direction: column;
  152. align-items: center;
  153. }
  154. /* .public-web-container p {
  155. position: absolute;
  156. top: 40%;
  157. } */
  158. .public-web-container a {
  159. /*position: absolute;
  160. bottom: 40%; */
  161. margin-top: 30px;
  162. }
  163. .wechat-web-container {
  164. display: flex;
  165. flex-direction: column;
  166. align-items: center;
  167. }
  168. /* .wechat-web-container p {
  169. position: absolute;
  170. top: 40%;
  171. } */
  172. .wechat-web-container wx-open-launch-weapp {
  173. display: flex;
  174. flex-direction: column;
  175. align-items: center;
  176. margin: 0px auto;
  177. height: 60px;
  178. }
  179. .desktop-web-container {
  180. display: flex;
  181. flex-direction: column;
  182. align-items: center;
  183. }
  184. /* .desktop-web-container p {
  185. position: absolute;
  186. top: 40%;
  187. } */
  188. .top {
  189. height: -160px;
  190. background-color: white;
  191. text-align: center;
  192. width: 100%;
  193. }
  194. </style>
  195. </head>
  196. <body style="text-align: center;" >
  197. <img src="../dy/img/bk-cycle.png" style="height: 45%;width: 100%;"/>
  198. <img src="../dy/img/cp-logo.png" style="width: 20%;margin-top: -9%;"/>
  199. <div class="page full">
  200. <!--------------------------- 手机浏览器----------------------------------------------------------->
  201. <div id="public-web-container" class="hidden">
  202. <a id="public-web-jump-button" href="javascript:void(0)" style="width:225px;background-color: #00B9FF;color: white;border-radius: 40px;border: 1px solid #09afff;height: 35px;
  203. line-height: 35px;box-sizing: unset;font-size: 19px;"
  204. class="weui-btn weui-btn_primary weui-btn_loading" onclick="openWeapp()">
  205. 点击预约服务
  206. </a>
  207. <span style="margin-top: 20px;">1V1专属管家</span>
  208. </div>
  209. <!--------------------------- 微信浏览器----------------------------------------------------------->
  210. <div id="wechat-web-container" class="hidden">
  211. <!-- <p class="">点击以下按钮打开 “鲸致生活商城”</p> replace -->
  212. <!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
  213. <wx-open-launch-weapp id="launch-btn" username="gh_e9b9499458d9" path="/pages/ucenter/wx/join">
  214. <template>
  215. <style>
  216. .btn {
  217. width: 184px;
  218. height: 45px;
  219. text-align: center;
  220. font-size: 17px;
  221. display: block;
  222. margin: 0 auto;
  223. padding: 8px 24px;
  224. border-radius: 40px;
  225. border: 1px solid #09afff;
  226. background-color: white;
  227. color:#09afff;
  228. }
  229. </style>
  230. <button class="btn">点击预约服务</button>
  231. </template>
  232. </wx-open-launch-weapp>
  233. </div>
  234. <!-- pc端打开提醒 -->
  235. <div id="desktop-web-container" class="hidden">
  236. <!-- <div class="top">
  237. <img src="../auto/img/logo.png" width="160px" />
  238. </div> -->
  239. <p class="" style="margin-top: 30px;">请在手机打开网页链接</p>
  240. </div>
  241. </div>
  242. </body>
  243. </html>