店播抖音版小程序

onLive.vue 2.5KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <view>
  3. <view class="screenBox">
  4. <view class="screenItem" @click="classifyFlag=true">全部分类<i class='iconfont icon-down_icon'></i></view>
  5. <view class="screenItem">当前在线人数排序<i class='iconfont icon-down_icon'></i></view>
  6. </view>
  7. <scroll-view class="rank_container" scroll-y :style="'height:calc(100vh - '+ height+'rpx)'">
  8. <view class="rank_live_plate">
  9. <view class="live_plate">
  10. <view class="live_cover">
  11. <image src="" mode="widthFix" class="liveImg"></image>
  12. </view>
  13. <view class="live_info">
  14. <view class="liveName">等待交警大队积极</view>
  15. <view class="user_box">
  16. <image src="" mode="" class="userImg"></image>
  17. <view class="userName">静静地斤斤计较简介简单</view>
  18. </view>
  19. </view>
  20. <view class="live_time">开播时间:</view>
  21. </view>
  22. <view class="live_data_plate">
  23. <view class="data_plate_item">
  24. <view class="data_name_box">
  25. <text>当前在线人数</text>
  26. <image src="../../static/img/zuori_icon@2x.png" mode=""></image>
  27. </view>
  28. <view class="data">88888</view>
  29. </view>
  30. </view>
  31. </view>
  32. </scroll-view>
  33. <classify @close='classifyFlag=false' v-if="classifyFlag" @getData='getChoiceData'></classify>
  34. </view>
  35. </template>
  36. <script>
  37. import classify from "@/components/classify.vue"
  38. export default {
  39. props: ['height'],
  40. components: {
  41. classify
  42. },
  43. data() {
  44. return {
  45. classifyFlag: false,
  46. total: 0,
  47. page: 1,
  48. pages: 0,
  49. pagesize: 20,
  50. infoList: []
  51. }
  52. },
  53. mounted() {
  54. this.init(1)
  55. },
  56. methods: {
  57. getChoiceData(data) {
  58. console.log(data, '分类数据')
  59. },
  60. init(page) {
  61. this.page = page ? page : this.page;
  62. this.infoList = []
  63. this.$req(this.$api.onlive, 'get', {
  64. page: page,
  65. page_size: this.pagesize,
  66. keywords: '',
  67. // category_id: this.categoryObj.category_id,
  68. // sort: this.sort_type,
  69. sort_method: 'desc'
  70. }, (res) => {
  71. var res = res.data
  72. if (res && res.errno == 0) {
  73. var data = res.rst
  74. this.total = data.pageInfo.total
  75. this.pages = data.pageInfo.pages
  76. this.infoList = data.data
  77. console.log(this.infoList)
  78. } else if (res.errno != 4001) {
  79. this.$message({
  80. message: res.err,
  81. type: "warning"
  82. })
  83. }
  84. }, (err) => {})
  85. }
  86. }
  87. }
  88. </script>
  89. <style scoped lang="scss">
  90. @import '@/common/css/rank.scss'
  91. </style>