collect.html 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. {extend name="public/container"}
  2. {block name="title"}已收藏商品{/block}
  3. {block name="content"}
  4. <body style="background:#fff;">
  5. <div id="collect" class="user-collection-list">
  6. <section ref="bsDom">
  7. <div>
  8. <ul>
  9. <li class="border-1px" v-for="(item,index) in data.list" :class="{fail:item.is_fail == true}" v-cloak="">
  10. <a :href="productUrl(item)">
  11. <div class="picture"><img :src="item.image" /></div>
  12. <div class="info-content flex">
  13. <p class="pro-tit" v-text="item.store_name"></p>
  14. <p class="price">
  15. <span v-text="'¥'+item.price"></span>
  16. <span class="old-price">¥{{item.ot_price}}</span>
  17. </p>
  18. <p class="count">{{ item.is_fail == true ? '已失效' : '已售'+item.sales }}</p>
  19. </div>
  20. </a>
  21. <div class="collection-delete" @click="removeCollect(item,index)"></div>
  22. </li>
  23. </ul>
  24. <p style="background-color: #fff;" class="loading-line" v-show="loading == true"><i></i><span>正在加载中</span><i></i></p>
  25. <p style="background-color: #fff;" class="loading-line" v-show="loading == false && data.loaded == false" v-cloak=""><i></i><span>加载更多</span><i></i></p>
  26. <p style="background-color: #fff;" class="loading-line" v-show="loading == false && data.loaded == true" v-cloak=""><i></i><span>没有更多了</span><i></i></p>
  27. </div>
  28. </section>
  29. </div>
  30. <script>
  31. require(['vue','axios','better-scroll','helper','store'],function(Vue,axios,BScroll,$h,storeApi){
  32. new Vue({
  33. el:"#collect",
  34. data:{
  35. data:{
  36. first:0,
  37. limit:8,
  38. list:[],
  39. loaded:false,
  40. top:0
  41. },
  42. loading: false,
  43. scroll:null
  44. },
  45. methods:{
  46. removeCollect:function (product,index){
  47. var that = this;
  48. storeApi.removeCollectProduct(product.pid,function(){
  49. that.data.list.splice(index,1);
  50. });
  51. },
  52. productUrl:function(product){
  53. return product.is_fail == true ? 'javascript:void(0);' : $h.U({c:'store',a:'detail',p:{id:product.pid}});
  54. },
  55. getList:function(){
  56. if(this.loading) return ;
  57. var that = this,group = that.data;
  58. if(group.loaded) return ;
  59. this.loading = true;
  60. storeApi.getCollectProduct({
  61. first:group.first,
  62. limit:group.limit
  63. },function(res){
  64. var list = res.data.data;
  65. group.loaded = list.length < group.limit;
  66. group.first += list.length;
  67. group.list = group.list.concat(list);
  68. that.loading = false;
  69. that.$set(that,'data',group);
  70. that.$nextTick(function(){
  71. if(list.length) that.bScrollInit();
  72. that.scroll.finishPullUp();
  73. });
  74. },function(err){that.loading = false; return true;});
  75. },
  76. bScrollInit:function () {
  77. var that = this;
  78. if(this.scroll === null){
  79. this.$refs.bsDom.style.height = (document.documentElement.clientHeight)+'px';
  80. this.$refs.bsDom.style.overflow = 'hidden';
  81. this.scroll = new BScroll(this.$refs.bsDom,{click:true,probeType:1,cancelable:false,deceleration:0.005,snapThreshold:0.01});
  82. this.scroll.on('pullingUp',function(){
  83. that.loading == false && that.getList();
  84. })
  85. }else{
  86. this.scroll.refresh();
  87. }
  88. }
  89. },
  90. mounted:function(){
  91. this.bScrollInit();
  92. this.getList();
  93. }
  94. })
  95. })
  96. </script>
  97. {/block}