景徳镇旅游微信小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

143 lines
2.6 KiB

8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
  1. <template>
  2. <scroll-view
  3. scroll-y="true"
  4. :style="{height: height}"
  5. @scrolltolower="loadMoreData">
  6. <view class="videoList">
  7. <view class="video-item" v-for="(item, index) in list" :key="index"
  8. @click="showVideo(item)">
  9. <view class="image">
  10. <image :src="item.videoImage" mode="aspectFill">
  11. </image>
  12. <view class="icon">
  13. <uv-icon size="35rpx" name="play-right-fill">
  14. </uv-icon>
  15. </view>
  16. </view>
  17. <view class="bottom">
  18. <view class="headImage">
  19. <!-- <image src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1msKSi.img" mode="aspectFill">
  20. </image> -->
  21. {{ item.videoTitle }}
  22. </view>
  23. <view class="like">
  24. <uv-icon size="45rpx" v-if="false" name="heart"></uv-icon>
  25. <uv-icon size="45rpx" color="#FF4340" v-else name="heart-fill"></uv-icon>
  26. {{ item.videoThumpup }}
  27. </view>
  28. </view>
  29. </view>
  30. </view>
  31. </scroll-view>
  32. </template>
  33. <script>
  34. export default {
  35. props : {
  36. height : {
  37. default : 'auto'
  38. }
  39. },
  40. data() {
  41. return {
  42. queryParams: {
  43. pageNo: 1,
  44. pageSize: 10,
  45. },
  46. total : 0,
  47. list : [],
  48. }
  49. },
  50. methods: {
  51. showVideo(item){
  52. this.$utils.hanldePreview
  53. },
  54. queryVideoList(){
  55. this.$api('queryVideoList', this.queryParams, res => {
  56. if(res.code == 200){
  57. this.list = res.result.records
  58. this.total = res.result.total
  59. }
  60. })
  61. },
  62. loadMoreData(){
  63. if(this.queryParams.pageSize < this.total){
  64. this.queryParams.pageSize += 10
  65. this.queryVideoList()
  66. }
  67. },
  68. }
  69. }
  70. </script>
  71. <style scoped lang="scss">
  72. .videoList {
  73. display: flex;
  74. flex-wrap: wrap;
  75. .video-item {
  76. margin: 20rpx;
  77. width: 335rpx;
  78. .image {
  79. position: relative;
  80. width: 100%;
  81. height: 420rpx;
  82. border-radius: 30rpx;
  83. overflow: hidden;
  84. image {
  85. width: 100%;
  86. height: 100%;
  87. }
  88. .icon {
  89. position: absolute;
  90. right: 30rpx;
  91. top: 30rpx;
  92. width: 60rpx;
  93. height: 60rpx;
  94. background-color: #ffffffaa;
  95. border-radius: 50%;
  96. display: flex;
  97. justify-content: center;
  98. align-items: center;
  99. }
  100. }
  101. .bottom {
  102. padding: 10rpx 0;
  103. font-size: 22rpx;
  104. display: flex;
  105. justify-content: space-between;
  106. .headImage {
  107. display: flex;
  108. align-items: center;
  109. image {
  110. width: 50rpx;
  111. height: 50rpx;
  112. border-radius: 50%;
  113. margin-right: 6rpx;
  114. }
  115. }
  116. .like {
  117. display: flex;
  118. align-items: center;
  119. }
  120. }
  121. }
  122. .showVideo{
  123. display: flex;
  124. justify-content: center;
  125. align-items: center;
  126. height: 100%;
  127. width: 1000%;
  128. video{
  129. // width: 100%;
  130. // height: 100%;
  131. }
  132. }
  133. }
  134. </style>