list.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template>
  2. <view class="page">
  3. <view class="p-content" >
  4. <singleList ref="listRef" url="goods.list" :sendData="reqData" @reqEnd="searchEnd">
  5. <template v-slot:items="{list}">
  6. <proItem :info="item" v-for="(item,i) in list" :key="i" />
  7. <empty v-if="sRes && sRes==='empty'"/>
  8. </template>
  9. </singleList>
  10. </view>
  11. </view>
  12. </template>
  13. <script>
  14. import proItem from './components/pro-item.vue'
  15. export default {
  16. components:{
  17. proItem
  18. },
  19. data() {
  20. return {
  21. // keyword:'',
  22. // search_lishi:[],
  23. reqData:{}, //请求数据
  24. sRes:'', //搜索结果 empty,noMore
  25. };
  26. },
  27. onLoad(e) {
  28. this.id = e.id;
  29. let name = e.name;
  30. uni.setNavigationBarTitle({
  31. title: name
  32. })
  33. },
  34. onShow(){ //这里一进来就查询之前留下的搜索内容 别忘了退出登录的时候删掉
  35. this.$nextTick(()=>{
  36. this.reqData = {goods_cate_id:this.id}
  37. // this.$refs.listRef.getList(true);
  38. })
  39. },
  40. onReachBottom() {
  41. this.$refs.listRef.getList();
  42. },
  43. methods:{
  44. searchEnd({loadingType,pageOneRes}){
  45. if(loadingType === 'noMore' && pageOneRes && pageOneRes.length === 0){
  46. this.sRes='empty';
  47. }else{
  48. this.sRes=loadingType;
  49. }
  50. },
  51. },
  52. }
  53. </script>
  54. <style lang="scss">
  55. page{
  56. background-color: #f8f8f8;
  57. }
  58. .page{
  59. padding: 30rpx;
  60. }
  61. .p-bar{
  62. .bar {
  63. flex: 1 1 auto;
  64. border-radius: 32rpx;
  65. height: 64rpx;
  66. border: solid 2rpx #92b99c;
  67. padding: 0 20rpx;
  68. }
  69. .image_5 {
  70. flex-shrink: 0;
  71. width: 31rpx;
  72. height: 31rpx;
  73. }
  74. .inpt {
  75. margin-left: 17rpx;
  76. height: 60rpx;
  77. line-height: 60rpx;
  78. color: #333;
  79. font-size: 28rpx;
  80. font-family: PingFang;
  81. letter-spacing: 1.12rpx;
  82. }
  83. .image_6 {
  84. margin-bottom: 3rpx;
  85. width: 28rpx;
  86. height: 28rpx;
  87. }
  88. .text_3 {
  89. margin-left: 28rpx;
  90. margin-right: 4rpx;
  91. align-self: center;
  92. color: #92b99c;
  93. font-size: 28rpx;
  94. font-family: PingFang;
  95. line-height: 27rpx;
  96. letter-spacing: 1.12rpx;
  97. }
  98. }
  99. .p-history{
  100. padding-top: 10rpx;
  101. .title{
  102. height: 90rpx;
  103. line-height: 90rpx;
  104. font-size: 32rpx;
  105. font-family: PingFang SC;
  106. font-weight: bold;
  107. color: #333333;
  108. }
  109. .item-wrap{
  110. flex-wrap: wrap;
  111. }
  112. .item{
  113. height: 54rpx;
  114. line-height: 54rpx;
  115. padding: 0 20rpx;
  116. background: #ECEFED;
  117. border-radius: 27px;
  118. margin-right: 24rpx;
  119. margin-bottom: 24rpx;
  120. font-size: 24rpx;
  121. font-family: PingFang SC;
  122. font-weight: 500;
  123. color: #333333;
  124. }
  125. }
  126. .p-content{
  127. }
  128. </style>