order_pink.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. {extend name="public/container"}
  2. {block name="head_top"}
  3. <script type="text/javascript" src="{__PLUG_PATH}jquery.downCount.js"></script>
  4. <script type="text/javascript" src="{__WAP_PATH}crmeb/js/car-model.js"></script>
  5. <style>
  6. .pk-box .pt-info .pt-state .pt-state-info{width: initial; text-align: center;}
  7. </style>
  8. {/block}
  9. {block name="title"}{$store_combination.title}{/block}
  10. {block name="content"}
  11. <body style="background-color:#f5f5f5;">
  12. <!-- 拼客 -->
  13. <section class="pk-box" id="store_detail">
  14. <div class="comfirm-wrapper">
  15. <ul class="product_list">
  16. <li>
  17. <div class="goods-img pk-list-img"><img src="{$store_combination.image}"></div>
  18. <div class="goods-info pk-list-info">
  19. <div class="goods-detail">
  20. <p class="name">{$store_combination.title}</p>
  21. <p class="pk-list-all"><em>{$pinkT.people}</em>人团·已团<em>{$store_combination.sales}</em>件</p>
  22. <p class="carnum pk-list-carnum">
  23. <span class="price">¥<em>{$pinkT.price}</em><span class="discount">拼团劲省<i><?php echo floatval($store_combination['product_price']-$pinkT['price']);?></i>元</span></span>
  24. </p>
  25. </div>
  26. </div>
  27. </li>
  28. </ul>
  29. </div>
  30. <!-- 拼客人数 -->
  31. <div class="pk-number">
  32. <div class="pk-number-box">
  33. <ul>
  34. <li>
  35. <img src="{$pinkT.avatar}"/>
  36. <div class="name">团长</div>
  37. </li>
  38. {volist name="pinkAll" id="vo"}
  39. <li><img src="{$vo.avatar}"/></li>
  40. {/volist}
  41. <?php for ($i=1;$i<=$count;$i++){?>
  42. <li class="unknown"></li>
  43. <?php }?>
  44. </ul>
  45. </div>
  46. <div class="pk-number-con">
  47. {if condition="$pinkBool eq 1 && $userBool"}
  48. <div class="pk-buy"><a href="{:Url('orderPinkOld',['uni'=>$current_pink_order])}">查看订单</a></div>
  49. <div class="pt-info">
  50. <div class="pt-state pt-success">
  51. <div class="pt-state-info">拼团成功</div>
  52. <span>商家正在努力发货,请耐心等待</span>
  53. </div>
  54. </div>
  55. {elseif condition="$pinkBool eq 1 && !$userBool"}
  56. <div class="pk-buy"><a href="{:Url('store/combination')}">返回拼团列表</a></div>
  57. <div class="pt-info">
  58. <div class="pt-state pt-success">
  59. <div class="pt-state-info">拼团已完成</div>
  60. <span>请您参加别的拼团</span>
  61. </div>
  62. </div>
  63. {elseif condition="$pinkBool eq 2 && $userBool"}
  64. <div class="pk-buy"><a href="{:Url('orderPinkOld',['uni'=>$current_pink_order])}">查看订单</a></div>
  65. <div class="pt-info">
  66. <div class="pt-state pt-error">
  67. <div class="pt-state-info">拼团时间已到</div>
  68. <span>退款中</span>
  69. </div>
  70. </div>
  71. {elseif condition="$pinkBool eq 3"}
  72. <div class="pk-buy"><a href="{:Url('store/combination')}">返回拼团列表</a></div>
  73. <div class="pt-info">
  74. <div class="pt-state pt-error">
  75. <div class="pt-state-info">拼团已结束</div>
  76. <span>请您参加别的拼团</span>
  77. </div>
  78. </div>
  79. {elseif condition="$pinkBool eq 6"}
  80. <div class="pk-buy"><a href="{:Url('store/combination')}">返回拼团列表</a></div>
  81. <div class="pt-info">
  82. <div class="pt-state pt-error">
  83. <div class="pt-state-info">拼团人数已满</div>
  84. <span>等待订单状态</span>
  85. </div>
  86. </div>
  87. {elseif condition="$pinkBool eq 2 && !$userBool"}
  88. <div class="pk-buy"><a href="{:Url('store/combination')}">返回拼团列表</a></div>
  89. <div class="pt-info">
  90. <div class="pt-state pt-error">
  91. <div class="pt-state-info">拼团已结束</div>
  92. <span>请您参加别的拼团</span>
  93. </div>
  94. </div>
  95. {elseif condition="!$pinkBool && !$userBool"}
  96. <div class="pk-number-con-number">仅剩<em>{$count}</em>个名额</div>
  97. <div class="pk-number-con-time" v-pre>
  98. 剩余
  99. <div style="height: .1rem"></div>
  100. <div class="count-time" data-time="{$pinkT.stop_time|date='Y/m/d H:i:s',###}">
  101. <span class="hours">00</span>
  102. :
  103. <span class="minutes">00</span>
  104. :
  105. <span class="seconds">00</span>
  106. </div>
  107. </div>
  108. <div class="pk-buy"><a href="javascript:void(0);" @click="goBuy" >一键参团</a></div>
  109. <div class="pt-info">
  110. <div class="pt-state pt-success">
  111. <div class="pt-state-info">正在拼团中...</div>
  112. <!-- <span>参加拼团</span>-->
  113. </div>
  114. </div>
  115. {elseif condition="!$pinkBool && $userBool"}
  116. <div class="pk-number-con-number">仅剩<em>{$count}</em>个名额</div>
  117. <div class="pk-number-con-time" v-pre>
  118. 剩余
  119. <div style="height: .1rem"></div>
  120. <div class="count-time" data-time="{$pinkT.stop_time|date='Y/m/d H:i:s',###}">
  121. <span class="hours">00</span>
  122. :
  123. <span class="minutes">00</span>
  124. :
  125. <span class="seconds">00</span>
  126. </div>
  127. </div>
  128. <div class="pk-buy shares-btn" @click="sharesBtn"><a href="javascript:void(0);">邀请好友</a></div>
  129. <div class="shares-model" style="display: none;"><img style="position: fixed;left: 0;top: 0;width: 100%;height: 100%;" src="{__WAP_PATH}crmeb/images/share-info.png"></div>
  130. <div class="pt-info">
  131. <div class="pt-state pt-success">
  132. <div class="pt-state-info">正在拼团中...</div>
  133. <span></span>
  134. </div>
  135. </div>
  136. {/if}
  137. </div>
  138. </div>
  139. <div class="model-bg"></div>
  140. <div class="template-pro-list">
  141. <div class="pro-title like-title"><i class="like-line"></i><span>你可能还喜欢</span><i class="like-line right"></i></div>
  142. <div class="item-box">
  143. <ul class="flex">
  144. {volist name="store_combination_host" id="vo"}
  145. <li>
  146. <a href="{:Url('Store/combination_detail',array('id'=>$vo['id']))}">
  147. <div class="picture"><img src="{$vo.image}" /></div>
  148. <div class="pro-content">
  149. <div class="pro-name">{$vo.title}</div>
  150. <div class="pro-infos">
  151. <span class="price">¥{$vo.price}</span>
  152. <span class="count fr">已拼{$vo.sales}单</span>
  153. </div>
  154. </div>
  155. </a>
  156. </li>
  157. {/volist}
  158. </ul>
  159. </div>
  160. </div>
  161. <shortcut></shortcut>
  162. </section>
  163. <script>
  164. $(document).ready(function() {
  165. $('.shares-btn').on('click', function(){
  166. $('.shares-model').css('display', 'block');
  167. $('.shares-model').on('click' , function(){
  168. $(this).css('display', 'none');
  169. });
  170. });
  171. $('.shares-model').on('touchmove',function(e){
  172. e.preventDefault();
  173. })
  174. $('.count-time').downCount({
  175. date: $('.count-time').attr('data-time'),
  176. offset: +8
  177. });
  178. });
  179. </script>
  180. <script type="text/javascript">
  181. window.$product = <?php unset($storeInfo['description']); echo json_encode($storeInfo);?>;
  182. window.$pinkT = <?php echo json_encode($pinkT);?>;
  183. (function ($) {
  184. requirejs(['vue', 'axios', 'helper', 'store', '{__WAP_PATH}zsff/js/shortcut.js'], function (Vue, axios, $h, storeApi){
  185. new Vue({
  186. el: "#store_detail",
  187. data: {
  188. product: $product,
  189. pinkT: $pinkT,
  190. productValue: {},
  191. productCardInfo: {},
  192. status: {like: false, collect: false},
  193. cartNum: 1
  194. },
  195. methods: {
  196. sharesBtn:function () {
  197. $('.shares-model').css('display', 'block');
  198. $('.shares-model').on('click' , function(){
  199. $(this).css('display', 'none');
  200. });
  201. },
  202. goBuy: function () {
  203. that = this;
  204. storeApi.goBuy({
  205. cartNum: that.cartNum,
  206. productId: this.product.product_id,
  207. combinationId: this.product.id
  208. }, function (cartId) {
  209. location.href = $h.U({
  210. c: 'store',
  211. a: 'combination_order',
  212. q: 'cartId='+cartId+'&pinkId='+that.pinkT.id
  213. });
  214. });
  215. },
  216. setProductCardInfo: function (info) {
  217. info || (info = {});
  218. this.$set(this, 'productCardInfo', {
  219. image: info.image !== undefined ? info.image : this.product.image,
  220. price: info.price !== undefined ? info.price : this.product.price,
  221. stock: info.stock !== undefined ? info.stock : this.product.stock
  222. });
  223. },
  224. pushMsg: function (msg, fn) {
  225. $h.pushMsg(msg, fn)
  226. },
  227. init: function () {
  228. $('.count-time').downCount({
  229. date: $('.count-time').attr('data-time'),
  230. offset: +8
  231. });
  232. },
  233. getCartNum: function () {
  234. var that = this;
  235. storeApi.getCartNum(function (cartNum) {
  236. that.cartNum = cartNum;
  237. });
  238. }
  239. },
  240. mounted: function () {
  241. var wxApi = mapleWx($jssdk(), function () {
  242. this.onMenuShareAll({
  243. title: $product.store_name,
  244. desc: $product.store_name,
  245. imgUrl: location.origin + $product.image,
  246. link: location.href
  247. });
  248. });
  249. this.getCartNum();
  250. this.init();
  251. this.setProductCardInfo();
  252. }
  253. });
  254. });
  255. })($);
  256. </script>
  257. </body>
  258. {/block}