gshow.html 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984
  1. <extend name="Public:mogubase" />
  2. <block name="content">
  3. <script src="__PUBLIC__/js/jquery/jquery-2.0.3.min.js"></script>
  4. <link rel="stylesheet" type="text/css" href="__PUBLIC__/mogu/index.css-62d47ac4.css" />
  5. <link rel="stylesheet" href="__PUBLIC__/mogu/index.css-ef2aebcd.css" />
  6. <script src="__PUBLIC__/pinduoduo/js/clocktime.js"></script>
  7. <script>
  8. (function(){
  9. /**
  10. * 初始化页面Rem
  11. * @param {int} [size=100] 写在less里的size值,例如 @size: 100; width: 750rem/@size;
  12. */
  13. var initRem = function (size) {
  14. size = +size || 100;
  15. console.log(size);
  16. var documentElement = window.document.documentElement;
  17. var width = Math.min(documentElement.clientWidth, 750);
  18. documentElement.style.fontSize = width / (750 / size) + "px";
  19. console.log(size);
  20. }
  21. initRem(50);
  22. $(window).resize(function() { initRem(50); });
  23. })()
  24. </script>
  25. <script src="__PUBLIC__/pinduoduo/js/TouchSlide.1.1.js"></script>
  26. <script>
  27. $(function(){
  28. <?php if(!empty($goods_image)){ ?>
  29. TouchSlide({
  30. slideCell:"#focus",
  31. titCell:".hd ul", //开启自动分页 autoPage:true ,此时设置 titCell 为导航元素包裹层
  32. mainCell:".tempWrap ul",
  33. delayTime:200,
  34. interTime:5000,
  35. autoPlay:true,
  36. effect:"leftLoop",
  37. autoPage:true, //自动分页
  38. switchLoad:"_src"
  39. });
  40. <?php } ?>
  41. })
  42. </script>
  43. <style>
  44. .graphic-list img{width:100%;}
  45. .focus .hd {
  46. width: 100%;
  47. height: 11px;
  48. position: absolute;
  49. z-index: 1;
  50. bottom: 5px;
  51. text-align: center;
  52. }
  53. .focus .hd ul {
  54. display: inline-block;
  55. height: 5px;
  56. padding: 3px 5px;
  57. -webkit-border-radius: 5px;
  58. -moz-border-radius: 5px;
  59. border-radius: 5px;
  60. font-size: 0;
  61. vertical-align: top;
  62. }
  63. .focus .hd ul li {
  64. display: inline-block;
  65. width: 5px;
  66. height: 5px;
  67. -webkit-border-radius: 5px;
  68. -moz-border-radius: 5px;
  69. border-radius: 5px;
  70. background: #8C8C8C;
  71. margin: 0 5px;
  72. vertical-align: top;
  73. overflow: hidden;
  74. }
  75. .focus .hd ul .on {
  76. background: #FE6C9C;
  77. }
  78. .focus .bd li img{width:100%;}
  79. .primary-info .info-price .pintuan strong {font-size: 0.88rem;}
  80. </style>
  81. <div id="main" >
  82. <header id="M_headBar" class="ui-head-bar"></header>
  83. <div id="views">
  84. <div id="DetailPrimary">
  85. <!-- 商品详情-首屏 -->
  86. <div class="detail-wrap detail-primary">
  87. <!-- 导航条 -->
  88. <div class="primary-navbar clearfix hide">
  89. <a href="javascript:void(history.back());" class="back icon-uniE809"></a>
  90. <a href="/x6/cart/list?sfrom=http%3A%2F%2Fm.meilishuo.com%2Fwap%2Fdetail%2F1klkeo0%3Fptp%3Dm1._mf80_1067_11248.0.43.DXaWEP3" class="cart icon-uniE810"></a>
  91. </div>
  92. <!-- 图片轮播 -->
  93. <div class="primary-swiper">
  94. <div id="focus" class="focus goods-focus ect-padding-lr ect-margin-tb" >
  95. <div class="hd focus_title">
  96. <ul>
  97. <?php
  98. $i =1;
  99. foreach ($goods_image as $image) { ?>
  100. <li <?php if($i == 1){ ?>class="on" <?php } ?>>1</li>
  101. <?php $i++; }?>
  102. </ul>
  103. </div>
  104. <div class="bd">
  105. <div class="tempWrap" style="overflow:hidden; position:relative;">
  106. <ul style="">
  107. <?php
  108. foreach ($goods_image as $image) { ?>
  109. <li>
  110. <img _src="<?php echo C('SITE_URL').$image['thumb'];?>">
  111. </li>
  112. <?php } ?>
  113. </ul>
  114. </div>
  115. </div>
  116. </div>
  117. </div>
  118. <!-- 基本信息 -->
  119. <div class="primary-info">
  120. <div class="info-title break">
  121. <span>{$goods.name}</span>
  122. </div>
  123. <!-- 价格 -->
  124. <div class="info-price flex J_InfoPrice">
  125. <?php if($goods['type'] == 'integral'){ ?>
  126. <span class="flex">
  127. <span class="now">{$goods.score}积分</span>
  128. <span class="market">¥{$goods.price}</span>
  129. <!-- 价格后面的标志 -->
  130. </span>
  131. <?php }else if($goods['type'] == 'pintuan'){ ?>
  132. <span class="flex">
  133. <span class="now">&yen;{$pin_info.pin_price}</span>
  134. <span class="market">¥{$goods.price}</span>
  135. </span>
  136. <?php if($voucher_id >0){ ?>
  137. <span class="pintuan" style="color: #f69;">券后价:<strong>¥{$pin_info.quan_pin_price}</strong></span>
  138. <?php } ?>
  139. <?php }else{ ?>
  140. <span class="flex">
  141. <span class="now">&yen;{$goods.danprice}</span>
  142. <span class="market">¥{$goods.price}</span>
  143. <!-- 价格后面的标志 -->
  144. </span>
  145. <?php if($voucher_id >0){ ?>
  146. <span class="pintuan">券后价:{$goods.quan_danprice}</span>
  147. <?php } ?>
  148. <?php } ?>
  149. <?php if($goods['type'] == 'pintuan'){ ?>
  150. <span class="pintuan">已团{$goods.seller_count}件 · {$goods_price_arr.pin_count}人团</span>
  151. <?php } ?>
  152. </div>
  153. <!-- 其他(如存在商品banner 或 非大促时,不显示上边框) -->
  154. <div class="info-other info-other-notopbor" style="display:none;">
  155. <span class="item">销量{$goods['seller_count']}</span>
  156. <span class="item">收藏294人</span>
  157. <span class="item">72小时发货</span>
  158. <span class="item">广东 佛山</span>
  159. </div>
  160. <?php if(!empty($goods['tag'])){ ?>
  161. <div class="services-container">
  162. <div class="info-services" id="J_Services">
  163. <div class="flex service-list">
  164. <?php if(!empty($goods['tag'])){ ?>
  165. <div class="td2_info" style="position:relative;">
  166. <?php
  167. $tags = $goods['tag'];
  168. ?>
  169. <?php
  170. if(!empty($tags)){
  171. $i = 1;
  172. foreach($tags as $val){
  173. if($i >4)
  174. break;
  175. ?>
  176. <span class="service-item"> <img class="service-icon" src="__PUBLIC__/mogu/image/upload_ie4tkmbtgqztomjqhezdambqgqyde_44x44.png" /> <span class="service-name"><?php echo $val; ?></span> </span>
  177. <?php $i++; } ?>
  178. <?php } ?>
  179. </div>
  180. <?php } ?>
  181. </div>
  182. <img class="service-arrow" src="https://s10.mogucdn.com/mlcdn/c45406/170711_701e7hcfi1j9fe76hgd560bj28d87_14x22.png" alt="" />
  183. </div>
  184. </div>
  185. <?php } ?>
  186. <?php if(!empty($fujin_tuan['list'])){ ?>
  187. <style>
  188. .detail-wrap2 {
  189. overflow: hidden;
  190. max-width: 15rem;
  191. margin: 0 auto;
  192. background: #fff;
  193. }
  194. .detail-join .join-top {
  195. height: .2rem;
  196. background: #f2f5f8;
  197. }
  198. .detail-join .join-info .join-title {
  199. padding: 0 .4rem;
  200. height: 1.8rem;
  201. line-height: 1.8rem;
  202. font-size: .56rem;
  203. color: #333;
  204. }
  205. .detail-join .join-info .join-list .join-list-item {
  206. display: -webkit-box;
  207. display: -webkit-flex;
  208. display: -moz-box;
  209. display: -ms-flexbox;
  210. display: flex;
  211. padding: 0 .4rem;
  212. -webkit-box-align: center;
  213. -webkit-align-items: center;
  214. -moz-box-align: center;
  215. -ms-flex-align: center;
  216. align-items: center;
  217. height: 2.4rem;
  218. border-bottom: 1px solid #f2f5f8;
  219. }
  220. .detail-join .join-info .join-list .join-list-item img {
  221. width: 1.6rem;
  222. height: 1.6rem;
  223. border-radius: 50%;
  224. }
  225. .detail-join .join-info .join-list .join-list-item .tuan-content {
  226. width: 9rem;
  227. padding-left: .32rem;
  228. }
  229. .detail-join .join-info .join-list .join-list-item .tuan-content .user-name {
  230. font-size: .56rem;
  231. }
  232. .detail-join .join-info .join-list .join-list-item .tuan-info {
  233. color: #999;
  234. font-size: .48rem;
  235. }
  236. .detail-join .join-info .join-list .join-list-item .tuan-join {
  237. font-size: .56rem;
  238. color: #fff;
  239. width: 3.6rem;
  240. height: 1.2rem;
  241. line-height: 1.2rem;
  242. text-align: center;
  243. border-radius: 1.2rem;
  244. background: #f69;
  245. }
  246. </style>
  247. <div class="detail-wrap2 detail-join">
  248. <div class="join-top"></div>
  249. <div class="join-info">
  250. <div class="join-title">
  251. 该商品正在开团
  252. </div>
  253. <ul class="join-list">
  254. <?php $j=0; foreach($fujin_tuan['list'] as $tuan){ ?>
  255. <li class="join-list-item">
  256. <img src="<?php echo $tuan['avatar']; ?>" />
  257. <div class="tuan-content">
  258. <div class="user-name">
  259. <?php echo $tuan['name']; ?>
  260. </div>
  261. <div class="tuan-info">
  262. <span class="tuan-left">还差<?php echo $tuan['re_need_count']; ?>人</span>
  263. <span class="tuan-time"><span class="J_TuanCountDown clock-on clock_div" endtime="<?php echo date('m/d/Y H:i:s', $tuan['end_time']);?>">22:18:01</span></span>
  264. </div>
  265. </div> <a class="tuan-join" href="<?php echo $tuan['url']; ?>">去参团</a>
  266. </li>
  267. <?php } ?>
  268. </ul>
  269. </div>
  270. </div>
  271. <script>
  272. $(function(){
  273. lxfEndtime();
  274. })
  275. </script>
  276. <?php } ?>
  277. </div>
  278. <!-- 下载和单品活动资源位 -->
  279. <div class="primary-promotions-container"></div>
  280. <!-- 其他 -->
  281. <div style="display:none">
  282. </div>
  283. </div>
  284. </div>
  285. <!-- 商品详情-店铺 -->
  286. <div class="detail-wrap detail-shop" id="DetailShop">
  287. <!-- 顶部 -->
  288. <div class="shop-top"></div>
  289. <!-- 信息 -->
  290. </div>
  291. <div id="recommend-primary-container" style="display:none;">
  292. <!-- 商品详情-为你推荐 -->
  293. <div class=" detail-wrap detail-recommend-primary">
  294. <!-- 顶部 -->
  295. <div class="recommend-top"></div>
  296. <div class="recommend-head">
  297. 为你推荐
  298. </div>
  299. <div class="recommend-goods">
  300. <div class="swiper-recommend-container swiper-container-horizontal">
  301. <div class="swiper-wrapper">
  302. <div class="swiper-slide swiper-slide-active" style="width: 608px; margin-right: 6.848px;">
  303. </div>
  304. </div>
  305. <div class="swiper-pagination swiper-pagination-clickable">
  306. <span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
  307. <span class="swiper-pagination-bullet"></span>
  308. <span class="swiper-pagination-bullet"></span>
  309. <span class="swiper-pagination-bullet"></span>
  310. </div>
  311. </div>
  312. </div>
  313. </div>
  314. </div>
  315. <!-- 商品详情-标签页 -->
  316. <div class="detail-wrap detail-tabpanel">
  317. <!-- 顶部 -->
  318. <div class="tabpanel-top"></div>
  319. <!-- 占位 -->
  320. <div class="tabpanel-occupying" id="TabpanelOccupying">
  321. <!-- 标签 -->
  322. <nav class="tabpanel-tabs center">
  323. <li class="tab-item active"> <span><a href="#PanelGraphic">图文详情</a></span> <i></i> </li>
  324. <li class="tab-item"> <span><a href="#PanelRates">评价({$order_comment_count})</a></span> <i></i> </li>
  325. <li class="tab-item"> <span class="shop-hot"><a href="#PanelRecommend">热卖推荐</a></span> <i></i> </li>
  326. </nav>
  327. </div>
  328. <!-- 面板 -->
  329. <div class="tabpanel-panels" id="TabpanelPanels">
  330. <!-- 图文详情 -->
  331. <div class="panel-item" id="PanelGraphic">
  332. <!-- 商品详情-图文详情 -->
  333. <div class="detail-graphic">
  334. <!-- 图文列表 -->
  335. <div class="graphic-list">
  336. <?php echo htmlspecialchars_decode($goods['description']); ?>
  337. </div>
  338. </div>
  339. </div>
  340. <!-- 商品参数 -->
  341. <!-- 商品评价 -->
  342. <div class="panel-item" id="PanelRates">
  343. <div class="detail-wrap detail-rates">
  344. <!-- 顶部 -->
  345. <?php if($order_comment_count <= 0){ ?>
  346. <div class="rates-top"></div>
  347. <p class="empty">暂无评价</p>
  348. <?php }else{ ?>
  349. <div class="rates-head plr30">
  350. <a class="title" href="{:U('goods/comment', array('id' => $goods['goods_id']) )}">购买评价
  351. <span class="more">更多<i class="arrow"></i></span>
  352. </a>
  353. </div>
  354. <div class="rates-list plr30">
  355. <?php foreach($comment_list as $comment){ ?>
  356. <div class="rate-item">
  357. <div class="rate-user">
  358. <span class="user-info">
  359. <img class="avatar" src="<?php echo $comment['avatar']; ?> ">
  360. <span class="name"><?php echo $comment['name']; ?></span>
  361. </span>
  362. </div>
  363. <div class="rate-cont">
  364. <?php echo $comment['content']; ?>
  365. </div>
  366. <div class="rate-attr">
  367. <span class="time"><?php echo date('Y-m-d', $comment['add_time']); ?></span>
  368. <span class="sku"><?php echo $comment['option_str']; ?></span>
  369. </div>
  370. <?php if(!empty($comment['images'])) { ?>
  371. <div class="rate-imgs show-img">
  372. <?php foreach($comment['images'] as $img){ ?>
  373. <a href="{:U('goods/comment', array('id' => $goods['goods_id']) )}" class="item">
  374. <img src="<?php echo $img; ?>" >
  375. </a>
  376. <?php } ?>
  377. </div>
  378. <?php } ?>
  379. </div>
  380. <?php } ?>
  381. </div>
  382. <?php } ?>
  383. </div>
  384. <!-- 大图 -->
  385. <div class="big-imgs-wrap" id="J_BigImgsWrap"></div>
  386. </div>
  387. <!-- 热卖推荐 -->
  388. <div class="panel-item" id="PanelRecommend">
  389. <!-- 商品详情-热卖推荐 -->
  390. <div class="detail-recommend">
  391. <!-- 顶部 -->
  392. <div class="recommend-top"></div>
  393. <!-- 标题 -->
  394. <div class="recommend-head plr30">
  395. <span class="title">热卖推荐</span>
  396. </div>
  397. <div class="recommend-goods">
  398. <div class="hot-list">
  399. <ul class="clearfix">
  400. {~W('Product/related_goods_list',array('goods_id' => $goods['goods_id']))}
  401. </ul>
  402. </div>
  403. </div>
  404. </div>
  405. </div>
  406. </div>
  407. </div>
  408. <!-- 商品详情-底部占位 -->
  409. <div class="detail-occupying"></div>
  410. <!-- 普通详情页footbar -->
  411. <!-- 商品详情-工具条 -->
  412. <div class="detail-wrap detail-footbar" id="DetailFootbar">
  413. <div class="footbar-shop" onclick="location.href='{:U('Index/index')}';">
  414. <i class="icon"></i>
  415. <span class="text">首页</span>
  416. </div>
  417. <div class="footbar-im" onclick="location.href='{:U('Seller/kefu_seller', array('store_id' => $seller_info['s_id'],'goods_id' => $goods['goods_id']) )}';" >
  418. <i class="icon"></i>
  419. <span class="text">客服</span>
  420. </div>
  421. <!-- 喜欢 -->
  422. <div class="footbar-fav <?php if($fav_like){ ?>footbar-faved<?php } ?>" id="favorite">
  423. <i class="icon"></i>
  424. <span class="text">收藏</span>
  425. </div>
  426. <!-- 购买 -->
  427. <?php if($goods['type'] == 'pintuan'){ ?>
  428. <div class="footbar-buy">
  429. <div class="table-inner buy-cart" id="J_buy-single">
  430. <div class="li16 footbar-buy-price">¥{$goods.danprice}</div>
  431. <div class="li16 footbar-buy-text">单独购买</div>
  432. </div>
  433. <div class="table-inner buy-now" id="J_buy-tuan">
  434. <div class="li16 footbar-buy-price">¥{$pin_info.pin_price}</div>
  435. <div class="li16 footbar-buy-text">立即拼团</div>
  436. </div>
  437. </div>
  438. <?php }elseif($goods['type'] == 'lottery'){ ?>
  439. <?php
  440. if($lottery_info['end_time'] <= time() )
  441. {
  442. ?>
  443. <?php if($lottery_info['is_open_lottery'] == 1){ ?>
  444. <div class="footbar-buy w752" onclick="location.href='{:U('Goods/lotteryinfo', array('goods_id' => $goods['goods_id']))}';">
  445. <div class="table-inner buy-now" >
  446. <div class="table-inner"> <div class="fz-18">查看开奖结果</div> </div>
  447. </div>
  448. </div>
  449. <?php }else{?>
  450. <div class="footbar-buy w752">
  451. <div class="table-inner buy-now" >
  452. <div class="table-inner"> <div class="fz-18">等待开奖</div> </div>
  453. </div>
  454. </div>
  455. <?php } ?>
  456. <?php }else{ ?>
  457. <div class="footbar-buy w752">
  458. <div class="table-inner buy-now" id="J_buy-tuan">
  459. <div class="li16 footbar-buy-price">¥{$pin_info.pin_price}</div>
  460. <div class="li16 footbar-buy-text">立即开团参与抽奖</div>
  461. </div>
  462. </div>
  463. <?php } ?>
  464. <?php }elseif($goods['type'] == 'integral'){ ?>
  465. <div class="footbar-buy">
  466. <?php if($member_info['score'] >= $goods['score']){ ?>
  467. <div class="table-inner buy-now" style="width:7.52rem;" id="J_buy-tuan">
  468. <div class="li16 footbar-buy-price">{$goods.score}积分</div>
  469. <div class="li16 footbar-buy-text">立即兑换</div>
  470. </div>
  471. <?php }else { ?>
  472. <div class="table-inner buy-now" style="width:7.52rem;background-color:#a3a1a1;" >
  473. <div class="li16 footbar-buy-price">{$goods.score}积分</div>
  474. <div class="li16 footbar-buy-text" >积分不足</div>
  475. </div>
  476. <?php } ?>
  477. </div>
  478. <?php }else{ ?>
  479. <div class="footbar-buy" >
  480. <span class="buy-cart" id="J_buy-single">加入购物车</span>
  481. <span class="buy-now" id="J_buy-singledel">购买</span>
  482. </div>
  483. <?php } ?>
  484. </div>
  485. <style>
  486. .w752 {
  487. width: 7.52rem;
  488. }
  489. .w752 .buy-now {
  490. width: 7.52rem;
  491. }
  492. .li16{line-height: .6rem;font-size: .56rem;padding-top: 0.4rem;}
  493. </style>
  494. <div class="confirm-315-noReasonRefound J-confirm">
  495. <div class="confirm-content">
  496. <div class="confirm-text">
  497. <span>此商品不支持7天无理由退货</span>
  498. <span>请知晓哦</span>
  499. </div>
  500. <div class="confirm-btn">
  501. <span class="confirm-btn-cancel" id="J-confirm-cancel">取消</span>
  502. <span class="confirm-btn-confirm" id="J-confirm-ok">继续购买</span>
  503. </div>
  504. </div>
  505. </div>
  506. <section id="J_GoodsSku" class="goods-sku" style="visibility: hidden;">
  507. <div class="content">
  508. <div class="sku-title">
  509. <div class="sku-title-img">
  510. <img src="<?php echo resize($goods['image'], 320, 480); ?>" alt="" id="J_sku-img" />
  511. </div>
  512. <div class="sku-title-desc">
  513. <span class="sku-title-text">{$goods.name}</span>
  514. <span class="sku-title-price">
  515. <span class="price" id="J_sku-price">&yen;{$goods.danprice}</span><?php if($goods['type'] == 'integral'){ ?>积分 <?php } ?>
  516. <span class="sku-stock">库存<span class="stock">{$goods.quantity}</span>件</span>
  517. </span>
  518. <span class="sku-title-addon texts"></span>
  519. </div>
  520. <span class="close">╳</span>
  521. </div>
  522. <div class="scroll">
  523. <div class="sku-list">
  524. <?php $ck_option_option_arr = array();
  525. foreach($options['list'] as $option){ ?>
  526. <dl class="style clearfix">
  527. <dt>
  528. <?php echo $option['name']; ?>:
  529. </dt>
  530. <dd>
  531. <ol class="J_StyleList style-list clearfix J_sku-list" >
  532. <?php $i =0; foreach($option['option_value'] as $option_value){ ?>
  533. <li class="sku-item <?php if($i==0){ ?>c <?php $ck_option_option_arr[] = $option_value['option_value_id']; } ?>" data-id="<?php echo $option_value['option_value_id']; ?>" title="<?php echo $option_value['name']; ?>"> <?php echo $option_value['name']; ?></li>
  534. <?php $i++; } ?>
  535. </ol>
  536. </dd>
  537. </dl>
  538. <?php } ?>
  539. </div>
  540. <div class="sku-num">
  541. <p class="title">数量:</p>
  542. <div class="clearfix">
  543. <div class="sku-counter">
  544. <span class="num-reduce num-disable ">
  545. <b class="reduce-icon J_amount-minus minus">-</b> </span>
  546. <em class="num-input J_amount amount">1</em>
  547. <span class="num-add"> <b class="add-icon J_amount-plus plus">+</b> </span>
  548. </div>
  549. </div>
  550. </div>
  551. </div>
  552. <div class="action_all" id="dan_buy">
  553. <div class="action" style="float:left;width:50%;">
  554. <span class="confirm" style="background-color:#ffe817;color:#000;" id="J_sku-seleted-car">加入购物车</span>
  555. </div>
  556. <div class="action" style="float:left;width:50%;">
  557. <span class="confirm" style="background-color:#f69;" id="J_sku-seleted-derbuy">立即购买</span>
  558. </div>
  559. <div style="clear:both;"></div>
  560. </div>
  561. <div class="action" id="pin_buy" style="display:none;">
  562. <span class="confirm" style="background-color:#f69;" id="J_sku-seleted-pin">立即购买</span>
  563. </div>
  564. </div>
  565. </section>
  566. <div id="M_Mask" style="display:none;" class="ui-mask"></div>
  567. <div class="detail-plus" id="DetailPlus">
  568. <a href="{:U('Cart/show_cart_goods')}" class="cart">
  569. <i class="cart-num" id="cart-num" >{$total}</i>
  570. </a>
  571. <a class="gotop" href="#" style="display: block;"></a>
  572. </div>
  573. </div>
  574. </div>
  575. <div class="popup-mask" style="display: none;position: fixed; width: 100%;height: auto;top: 50%;z-index: 999999999; background: rgba(0, 0, 0, 0);">
  576. <div class="popup-main" style=" max-width: 50%; height: auto;margin: auto;background-color: rgba(0,0,0,.8);color: #f0f0f0;font-size: 16px;padding: 10px;text-align: center;border-radius: 5px;box-shadow: 0 0 24px -1px #383838; background: rgba(41, 49, 61, 0.701961);">
  577. <div class="popup-content"><div style="color:#fff;font-size:0.6rem;margin:0"></div>
  578. </div>
  579. </div>
  580. </div>
  581. {~W('Share/common_goods_share',array($goods['goods_id']))}
  582. <include file="Widget:pin_notify" />
  583. <style>
  584. .pin_tips_container{
  585. height: 1.2rem;
  586. }
  587. .pin_tips_user_pic{
  588. height: 1.12rem;
  589. width: 1.12rem;
  590. }
  591. .pin_tips_info{
  592. line-height: 1.2rem;
  593. }
  594. </style>
  595. <include file="Public:foot_lazy" />
  596. <script>
  597. var buy_type = 'dan';
  598. var voucher_id = "<?php echo $voucher_id; ?>";
  599. var singledel = 0;
  600. var pin_price = "{$pin_info.pin_price}";
  601. var pin_id = "{$pin_id}";
  602. <?php if(!empty($options['list'])){ ?>
  603. var has_option = true;
  604. var ck_opton_val_id = "<?php echo implode('_',$ck_option_option_arr); ?>";
  605. var goods_option_value_arr= {};
  606. <?php foreach($goods_option_mult_value_ref as $key =>$mult_vl){ ?>
  607. goods_option_value_arr['<?php echo $key; ?>'] ={pin_price:<?php echo $mult_vl['pin_price']; ?>,price:<?php echo $mult_vl['dan_price']; ?>,quantity:<?php echo $mult_vl['quantity']; ?>,image:"<?php echo $mult_vl['image']; ?>",rela_goodsoption_valueid:"<?php echo $mult_vl['rela_goodsoption_valueid']; ?>"};
  608. <?php } ?>
  609. <?php }else{ ?>
  610. var has_option = false;
  611. <?php } ?>
  612. var goods_id = {$goods.goods_id};
  613. function show_mask(title)
  614. {
  615. $('.popup-content div').html(title);
  616. $('.popup-mask').fadeIn(1500,function(){
  617. $('.popup-mask').fadeOut(1500);
  618. })
  619. }
  620. function change_sku_price()
  621. {
  622. var ck_pot = [];
  623. var ck_html_arr = [];
  624. $('.J_sku-list .c').each(function(){
  625. ck_pot.push($(this).attr('data-id'));
  626. ck_html_arr.push( $(this).html() );
  627. })
  628. if(ck_pot.length <=0)
  629. {
  630. return false;
  631. }
  632. var ck_opt_str = ck_pot.join('_');
  633. if(goods_option_value_arr[ck_opt_str] == undefined)
  634. {
  635. ck_pot = ck_pot.reverse();
  636. ck_opt_str = ck_pot.join('_');
  637. }
  638. var ck_html_str = ck_html_arr.join(' ');
  639. var option_obj = goods_option_value_arr[ck_opt_str];
  640. var J_amount = parseInt( $('.J_amount').html());
  641. if(J_amount >option_obj.quantity){
  642. J_amount =option_obj.quantity;
  643. $('.J_amount').html(J_amount);
  644. }
  645. if(buy_type == 'dan'){
  646. $('.stock').html(option_obj.quantity);
  647. $('#J_sku-price').html( (option_obj.price * J_amount).toFixed(2));
  648. } else {
  649. $('#J_sku-price').html( (option_obj.pin_price * J_amount).toFixed(2) );
  650. }
  651. $('#J_sku-img').attr('src', option_obj.image);
  652. $('.texts').html('已选 '+ck_html_str);
  653. }
  654. function get_choose_sku()
  655. {
  656. var ck_pot = [];
  657. var ck_html_arr = [];
  658. $('.J_sku-list .c').each(function(){
  659. ck_pot.push($(this).attr('data-id'));
  660. ck_html_arr.push( $(this).html() );
  661. })
  662. if(ck_pot.length <=0)
  663. {
  664. return false;
  665. }
  666. var ck_opt_str = ck_pot.join('_');
  667. if(goods_option_value_arr[ck_opt_str] == undefined)
  668. {
  669. ck_pot = ck_pot.reverse();
  670. ck_opt_str = ck_pot.join('_');
  671. }
  672. var ck_html_str = ck_html_arr.join(' ');
  673. var option_obj = goods_option_value_arr[ck_opt_str];
  674. return option_obj;
  675. }
  676. //提交购物车
  677. function submit_cart()
  678. {
  679. var sku_str = '';
  680. var quantity = 1;
  681. //goods_id Cart/add
  682. var option_obj = get_choose_sku();
  683. //rela_goodsoption_valueid
  684. quantity = parseInt( $('.J_amount').html());
  685. if(has_option)
  686. {
  687. sku_str = option_obj.rela_goodsoption_valueid
  688. }
  689. $.ajax({
  690. url:"{:U('Cart/add')}",
  691. type:'post',
  692. data:{goods_id:goods_id,quantity:quantity,sku_str:sku_str,buy_type:buy_type,pin_id:pin_id,singledel:singledel},
  693. dataType:'json',
  694. success:function(ret){
  695. if(ret.code == 1){
  696. //单独加入购物车成功
  697. $('#J_GoodsSku').css('visibility','hidden');
  698. $('#cart-num').html(ret.total);
  699. show_mask('加入购物车成功');
  700. $("#M_Mask").hide();
  701. if(singledel == 1){
  702. location.href = "{:U('Cart/checkout', array('singledel' =>1, 'voucher_id' => $voucher_id))}";
  703. return false;
  704. }
  705. }else if(ret.code ==2){
  706. //活动购物加入购物车成功
  707. location.href = "{:U('Cart/checkout',array('buy_type'=>'pin' , 'voucher_id' => $voucher_id))}";
  708. }
  709. else if(ret.code ==3)
  710. {
  711. show_mask(ret.msg);
  712. }
  713. else if(ret.code ==0){
  714. //错误 可能需要跳转
  715. if(ret.url !=''){
  716. location.href = ret.url;
  717. return false;
  718. }else {
  719. show_mask(ret.msg);
  720. }
  721. }
  722. }
  723. })
  724. }
  725. $(function(){
  726. $('.tabpanel-tabs .tab-item').click(function(){
  727. $(this).addClass('active').siblings().removeClass('active');
  728. })
  729. $('#J_sku-seleted-car').click(function(){
  730. singledel = 0;
  731. submit_cart();
  732. })
  733. $('#J_sku-seleted-derbuy').click(function(){
  734. singledel =1;
  735. submit_cart();
  736. })
  737. $('#J_sku-seleted-pin').click(function(){
  738. submit_cart();
  739. })
  740. $('#J_sku-seleted').click(function(){
  741. submit_cart();
  742. })
  743. $('.J_amount-plus').click(function(){
  744. var option_obj = get_choose_sku();
  745. var J_amount = parseInt( $('.J_amount').html());
  746. if(option_obj.quantity <=J_amount){
  747. J_amount = option_obj.quantity
  748. }else{
  749. J_amount = J_amount +1;
  750. }
  751. $('.J_amount').html(J_amount);
  752. change_sku_price();
  753. })
  754. $('.J_amount-minus').click(function(){
  755. var J_amount = parseInt( $('.J_amount').html());
  756. if(J_amount == 1){
  757. return false;
  758. }else if(J_amount >1){
  759. J_amount = J_amount -1;
  760. $('.J_amount').html(J_amount);
  761. change_sku_price();
  762. }
  763. })
  764. $('#J_sku-closed').click(function(){
  765. $('#J_sku-masks').hide();
  766. })
  767. $('#J_buy-tuan').click(function(){
  768. $('#pin_buy').show();
  769. $('#dan_buy').hide();
  770. buy_type = 'pin';
  771. $('#J_sku-price').html( pin_price);
  772. if(has_option)
  773. {
  774. change_sku_price();
  775. $('#J_GoodsSku').css('visibility','visible');
  776. } else {
  777. submit_cart();
  778. }
  779. })
  780. $('.sku-item').click(function(){
  781. $(this).addClass('c').siblings().removeClass('c');
  782. change_sku_price();
  783. })
  784. $('#J_buy-singledel').click(function(){
  785. buy_type = 'dan';
  786. singledel = 1;
  787. $('#pin_buy').hide();
  788. $('#dan_buy').show();
  789. if(has_option)
  790. {
  791. $("#M_Mask").show();
  792. change_sku_price();
  793. $('#J_GoodsSku').css('visibility','visible');
  794. //todo dire to
  795. //location.href = "{:U('Cart/checkout')}";
  796. return false;
  797. } else {
  798. submit_cart();
  799. }
  800. })
  801. $('.close').click(function(){
  802. $('#J_GoodsSku').css('visibility','hidden');
  803. $("#M_Mask").hide();
  804. })
  805. $('#J_buy-single').click(function(){
  806. buy_type = 'dan';
  807. singledel = 0;
  808. //pin_buy
  809. $('#pin_buy').hide();
  810. $('#dan_buy').show();
  811. // if(has_option)
  812. //{
  813. $("#M_Mask").show();
  814. change_sku_price();
  815. $('#J_GoodsSku').css('visibility','visible');
  816. //} else {
  817. // submit_cart();
  818. //}
  819. })
  820. $('#J_shop-collect').click(function(){
  821. $.ajax({
  822. url:'{:U("User/fav_storetoggle")}',
  823. type:'get',
  824. data:{store_id:<?php echo $seller_info['s_id']; ?>},
  825. dataType:'json',
  826. success:function(ret){
  827. if(ret.code == 1){
  828. $('#J_shop-collect').removeClass('marked');
  829. } else if(ret.code ==2){
  830. show_mask('收藏成功');
  831. $('#J_shop-collect').addClass('marked');
  832. return false;
  833. }
  834. }
  835. })
  836. })
  837. $('#favorite').click(function(){
  838. $.ajax({
  839. url:'{:U("User/fav_toggle")}',
  840. type:'get',
  841. data:{goods_id:goods_id},
  842. dataType:'json',
  843. success:function(ret){
  844. if(ret.code == 1){
  845. $('#favorite').removeClass('footbar-faved');
  846. } else if(ret.code ==2){
  847. $('#favorite').addClass('footbar-faved');
  848. show_mask('收藏成功');
  849. // location.href = ret.url;
  850. return false;
  851. } else if(ret.code ==0){
  852. show_mask(ret.msg);
  853. return false;
  854. }
  855. }
  856. })
  857. })
  858. })
  859. </script>
  860. </block>