pay_join_group.html 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>拼单详情</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes">
  8. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9. <link rel="stylesheet" type="text/css" href="css/mui.min.css" />
  10. <link rel="stylesheet" type="text/css" href="css/iconfont.css" />
  11. <link rel="stylesheet" type="text/css" href="css/style.css" />
  12. <style>
  13. .index-title {text-align: center;}
  14. .share-dalog{background: rgba(0,0,0,.7);position: fixed;left: 0;top: 0;right: 0;bottom: 0;width: 100%;height: 100%;z-index: 99;display: none;}
  15. .share-dalog img{width: 100%;}
  16. .ping-h1{text-align: center;font-size: 18px;padding: 10px 0 15px 0;}
  17. .ping-h1 .red{color: #ff5673;}
  18. .mui-content .my-btn-ping{border-radius: 50px;display: block;width: 70%;margin: 15px auto;font-size: 16px;background: #ff5673;color: #fff;border: 0;padding: 12px 12px;}
  19. .mui-content .my-btn-ping:active{background: #fc4e67 !important;}
  20. .btn-details{border-radius: 50px;display: block;width: 70%;margin: 15px auto;font-size: 16px;padding: 12px 12px;border: 1px solid #ff5673;color: #ff5673;}
  21. .btn-details:active{background: #f0f0f0;background: transparent !important;color: #ff5673 !important;}
  22. .userHeader{border-radius: 50%;}
  23. .myicon-pin{background: #eba85e;color: #fff;border-radius: 25px;font-size: 12px;position: absolute;left: 0;top: 2px;line-height: 1.2;display: block;padding: 2px 5px;}
  24. .no-after:after,
  25. .no-after:before,
  26. .no-after .mui-table-view-cell:after {
  27. display: none;
  28. }
  29. .no-after .mui-table-view-cell.mui-active {
  30. background: #fff;
  31. }
  32. .pro-list .mui-media-body {
  33. font-size: 14px;
  34. }
  35. .my-table-order tr td:last-child {
  36. padding-right: 0;
  37. }
  38. .my-table-order {
  39. font-size: 12px;
  40. }
  41. .cl-red {
  42. color: #ec6276;
  43. }
  44. .wh-120 {
  45. width: 130px !important;
  46. max-width: 130px !important;
  47. height: 130px !important;
  48. line-height: 130px;
  49. margin-top: 0;
  50. overflow: hidden;
  51. margin-right: 10px;
  52. }
  53. .wh-120 img {
  54. width: 100%;
  55. }
  56. .my-table-order .btn-ping {
  57. background: #ec6276;
  58. border: 0;
  59. border-radius: 50px;
  60. color: #fff;
  61. min-width: 70px;
  62. text-align: center;
  63. }
  64. .my-table-order .btn-qiang {
  65. background: #ec6276;
  66. border: 0;
  67. border-radius: 50px;
  68. color: #fff;
  69. min-width: 70px;
  70. text-align: center;
  71. }
  72. .my-table-order h4 {
  73. margin: 0;
  74. font-size: 16px;
  75. font-weight: 500;
  76. }
  77. .my-table-order h6 {
  78. margin: 0;
  79. color: #999;
  80. }
  81. .my-table-order .yf {
  82. padding-bottom: 15px;
  83. }
  84. .time-out {
  85. color: #ec6276;
  86. margin-left: 10px;
  87. }
  88. .qixi {
  89. border: 1px solid #5ecddf;
  90. border-radius: 30px;
  91. color: #5ecddf;
  92. background: transparent;
  93. display: block;
  94. width: 70px;
  95. padding: 0;
  96. line-height: 1.5;
  97. text-align: center;
  98. }
  99. .mui-col-xs-4 img {
  100. width: 100%;
  101. padding: 0 3%;
  102. }
  103. .mui-col-xs-4:first-child img {
  104. padding-right: 6%;
  105. padding-left: 0;
  106. }
  107. .mui-col-xs-4:last-child img {
  108. padding-left: 6%;
  109. padding-right: 0;
  110. }
  111. .mui-col-xs-4 a s {
  112. color: #999;
  113. margin-left: 10px;
  114. }
  115. .mui-col-xs-4 .content {
  116. padding-right: 5%;
  117. }
  118. .mui-table-view>.mui-table-view-cell {
  119. padding: 11px 13px;
  120. }
  121. .mui-table-view>.mui-table-view-cell>a.mui-active{background: #fff;}
  122. .mui-table-view-striped>.mui-table-view-cell {
  123. padding: 5px 12px;
  124. }
  125. </style>
  126. <script>
  127. // 屏蔽分享
  128. window.hiddenAllWechatMenu = true;
  129. </script>
  130. </head>
  131. <body style="background: #fff;">
  132. <div class="loading-bg">
  133. <div class="mui-loading">
  134. <div class="mui-spinner">
  135. </div>
  136. &nbsp;&nbsp;加载中...
  137. </div>
  138. </div>
  139. <!--<nav class="mui-bar mui-bar-tab" id="footer-bar">
  140. <a class="mui-tab-item" >
  141. <div class="iconfont icon-shouye"></div>
  142. <span class="mui-tab-label">首页</span>
  143. </a>
  144. <a class="mui-tab-item">
  145. <div class="iconfont icon-gouwuche"><span class="mui-badge">0</span></div>
  146. <span class="mui-tab-label">购物车</span>
  147. </a>
  148. <a class="mui-tab-item">
  149. <div class="iconfont icon-dingdan"></div>
  150. <span class="mui-tab-label">订单</span>
  151. </a>
  152. <a class="mui-tab-item">
  153. <div class="iconfont icon-wode"></div>
  154. <span class="mui-tab-label">我的</span>
  155. </a>
  156. </nav>-->
  157. <!--<header class="mui-bar mui-bar-nav header">
  158. <div class="go-index go_index">
  159. <img src="images/logo.png" />
  160. </div>
  161. </header>-->
  162. <div class="mui-content" style="background: #fff;">
  163. <div style="padding: 30px 0 10px 0;">
  164. <div class="mui-table">
  165. <div class="mui-table-cell mui-col-xs-3 table-middle">
  166. </div>
  167. <div class="mui-table-cell mui-col-xs-3 mui-text-left">
  168. <img class="userHeader" width="80%" src="images/2019072918.jpg" />
  169. <span class="myicon-pin">拼主</span>
  170. </div>
  171. <div class="mui-table-cell mui-col-xs-3 mui-text-right">
  172. <img width="80%" src="images/2019072918.jpg" />
  173. </div>
  174. <div class="mui-table-cell mui-col-xs-3 table-middle">
  175. </div>
  176. </div>
  177. </div>
  178. <div class="ping-h1">还差<span class="red" id="count">0</span>人,<span id="dsc">快来和我一起拼单吧</span></div>
  179. <div>
  180. <button type="button" class="mui-btn my-btn-ping">参与好友拼单</button>
  181. </div>
  182. <div>
  183. <button type="button" class="mui-btn btn-details">查看产品详情</button>
  184. </div>
  185. <div class="index-title">
  186. <strong>更多产品</strong>
  187. </div>
  188. <ul class="mui-table-view no-after list-1" style="padding-bottom: 50px;">
  189. <li class="mui-table-view-cell">
  190. <a proid="66" colorid="49" class="go_chanpin_details">
  191. <table class="my-table-order">
  192. <tr>
  193. <td rowspan="5">
  194. <div class="wh-120"><img src="images/2019072902.png"></div>
  195. </td>
  196. <td><span class="qixi">七夕专享</span></td>
  197. </tr>
  198. <tr>
  199. <td colspan="2">
  200. <h4>WaterO桌面净水机(制氢)</h4></td>
  201. </tr>
  202. <tr>
  203. <td colspan="2" class="yf">
  204. <h6>健康饮水·升级二合一</h6></td>
  205. </tr>
  206. <tr>
  207. <td>
  208. <h6><s>原价:¥3599</s></h6></td>
  209. <td rowspan="2" class="mui-text-right">
  210. <a class="mui-btn btn-ping">拼单</a>
  211. </td>
  212. </tr>
  213. <tr>
  214. <td colspan="2" class="cl-red">拼单价:¥2799</td>
  215. </tr>
  216. </table>
  217. </a>
  218. </li>
  219. <li class="mui-table-view-cell">
  220. <a proid="71" colorid="55" class="go_chanpin_details">
  221. <table class="my-table-order">
  222. <tr>
  223. <td rowspan="5">
  224. <div class="wh-120"><img src="images/2019072903.png"></div>
  225. </td>
  226. <td><span class="qixi">七夕专享</span></td>
  227. </tr>
  228. <tr>
  229. <td colspan="2">
  230. <h4>Aiberle桌面净水机(WB-2)</h4></td>
  231. </tr>
  232. <tr>
  233. <td colspan="2" class="yf">
  234. <h6>RO反渗透、红点奖团队设计</h6></td>
  235. </tr>
  236. <tr>
  237. <td>
  238. <h6><s>原价:¥1999</s></h6></td>
  239. <td rowspan="2" class="mui-text-right">
  240. <a class="mui-btn btn-ping">拼单</a>
  241. </td>
  242. </tr>
  243. <tr>
  244. <td colspan="2" class="cl-red">拼单价:¥1799</td>
  245. </tr>
  246. </table>
  247. </a>
  248. </li>
  249. <li class="mui-table-view-cell">
  250. <a proid="71" colorid="55" class="go_chanpin_details">
  251. <table class="my-table-order">
  252. <tr>
  253. <td rowspan="5">
  254. <div class="wh-120"><img src="images/2019072904.png"></div>
  255. </td>
  256. <td><span class="qixi">七夕专享</span></td>
  257. </tr>
  258. <tr>
  259. <td colspan="2">
  260. <h4>Aiberle净水花洒</h4></td>
  261. </tr>
  262. <tr>
  263. <td colspan="2" class="yf">
  264. <h6>内置活性炭棒+能量石滤盒</h6></td>
  265. </tr>
  266. <tr>
  267. <td>
  268. <h6><s>原价:¥399</s></h6></td>
  269. <td rowspan="2" class="mui-text-right">
  270. <a class="mui-btn btn-ping">拼单</a>
  271. </td>
  272. </tr>
  273. <tr>
  274. <td colspan="2" class="cl-red">拼单价:¥269</td>
  275. </tr>
  276. </table>
  277. </a>
  278. </li>
  279. </ul>
  280. </div>
  281. <div class="share-dalog">
  282. <img src="images/share.png" />
  283. </div>
  284. <script src="js/mui.min.js"></script>
  285. <script src="js/jquery-2.1.1.min.js"></script>
  286. <script src="js/main.js"></script>
  287. <script src="js/page/wechat-utils-1.0.js"></script>
  288. </body>
  289. <script>
  290. var isSpell=getParam('isSpell'),openid=getParam('openid'),orderId=getParam('orderId'),productId=getParam('productId'),colorId=getParam('colorId');
  291. var str=location.href; //取得整个地址栏
  292. var num=str.indexOf("?")
  293. str=str.substr(num+1); //取得所有参数
  294. $(document).ready(function(){
  295. $.ajax(base_path + '/user/member?dates=' + new Date().getTime(), {
  296. data:{
  297. openId:openid
  298. },
  299. dataType: 'json',
  300. type: 'post',
  301. timeout: 15000,
  302. xhrFields: {
  303. withCredentials: true
  304. },
  305. crossDomain: true,
  306. success: function(dt) {
  307. if(dt.isRedirect) {
  308. location.href = dt.redirectURL;
  309. } else {
  310. var data = dt.data;
  311. if(dt.status) {
  312. if(typeof(data.userHead) != "undefined"){
  313. if(data.userHead != null && data.userHead != '') {
  314. $(".userHeader").attr('src',data.userHead)
  315. }
  316. }
  317. document.querySelector('.loading-bg').style.display = 'none'
  318. } else {
  319. }
  320. }
  321. },
  322. error: function(xhr, type, errorThrown) {
  323. console.log(xhr)
  324. }
  325. });
  326. $.ajax(path + '/watero/callback/getOrderByOrderId', {
  327. data: {
  328. orderId:orderId
  329. },
  330. dataType: 'json',
  331. type: 'get',
  332. timeout: 15000,
  333. xhrFields: {
  334. withCredentials: true
  335. },
  336. crossDomain: true,
  337. success: function(dt) {
  338. console.log(dt)
  339. if(dt!=1){
  340. $("#count").text('0');
  341. $('.my-btn-ping').text('我要发起拼单');
  342. $('#dsc').text('好友已完成拼单');
  343. $(document).on('tap', '.my-btn-ping,.btn-details', function() {
  344. location.href='chanpin_details.html?productId='+productId+'&colorId='+colorId;
  345. });
  346. }else{
  347. $("#count").text('1');
  348. $(document).on('tap', '.my-btn-ping,.btn-details', function() {
  349. location.href='chanpin_details.html?'+str
  350. });
  351. }
  352. },
  353. error: function(xhr, type, errorThrown) {
  354. console.log(xhr)
  355. }
  356. });
  357. document.querySelector('.loading-bg').style.display = 'none'
  358. });
  359. </script>
  360. </html>