top.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. <!-- 推荐的动态路由 -->
  2. <template>
  3. <view class="recommend">
  4. <view class="multiple" id="nav" :style="{ top: top + 'px' }">
  5. <view
  6. class="item-food"
  7. v-for="(item, index) in itemFood"
  8. :key="item.id"
  9. @click="footStyle(index, item)"
  10. :class="{ itemstyle: footIndex == index }"
  11. >
  12. <text class="alarm"># {{ item.title }}</text>
  13. </view>
  14. </view>
  15. <div class="zhan" :style="{ marginTop: (top + 60) + 'px' }"></div>
  16. <view class="waterfall" :style="{ top: (top + 60) + 'px' }"> </view>
  17. <waterfall
  18. v-if="flowList.length > 0"
  19. ref="wfp"
  20. :colunmNumber="colunmNumber"
  21. :flowList="flowList"
  22. :columnGap="10"
  23. :status="status"
  24. ></waterfall>
  25. <loadMore v-if="flowList.length > 0" :status="status"></loadMore>
  26. <nodata v-else :config="{ top: 15, content: '暂无数据~' }"></nodata>
  27. <view class="release" @click="gotorelease()">
  28. <image :src="imgUrl+'/pen.png'" mode=""></image>
  29. <view class="item"> 发布 </view>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. let app = getApp()
  35. import waterfall from "../../../components/waterfall/waterfall";
  36. import nodata from "../../../components/noData/nodata";
  37. import loadMore from "../../../components/uni-load-more/uni-load-more";
  38. export default {
  39. data() {
  40. return {
  41. footIndex: -1, //点击切换food的样式,默认是第一个
  42. recommendIndex: 0, //点击切换头部样式,默认是第一个
  43. itemFood: [],
  44. colunmNumber: 2,
  45. index: 19,
  46. flowList: [
  47. ],
  48. page: 1,
  49. limit: 10,
  50. themeId: null, //主题id
  51. status: "more",
  52. imgUrl: this.$mConfig.staticUrl,
  53. top: 0
  54. };
  55. },
  56. props: {},
  57. comments: {
  58. waterfall,
  59. nodata,
  60. loadMore,
  61. },
  62. watch: {},
  63. created() {
  64. this.top = app.globalData.barHeight + 44
  65. },
  66. onReady() {
  67. const query = uni.createSelectorQuery().in(this)
  68. query.select('#nav').boundingClientRect(data => {
  69. console.log(data)
  70. console.log('元素高度')
  71. }).exec();
  72. },
  73. mounted() {
  74. this.getTheme();
  75. },
  76. onShow() {
  77. // this.getTheme();
  78. },
  79. methods: {
  80. isload() {
  81. this.page = 1;
  82. this.footIndex = -1;
  83. this.themeId = null;
  84. (this.flowList = []), this.getList();
  85. // this.itemFood=[],
  86. // this.getTheme()
  87. console.log('45445454')
  88. },
  89. loaderMore() {
  90. if (this.status == "more") {
  91. this.page++;
  92. this.getList(this.themeId);
  93. console.log('加载更多')
  94. }
  95. },
  96. getTheme() {
  97. this.$http.get("/opus/theme/list", this.params).then((res) => {
  98. if (res && res.code == 200) {
  99. this.itemFood=(res.list);
  100. if (res.list.length > 0) {
  101. // this.getList();
  102. }
  103. }
  104. });
  105. },
  106. gotorelease() {
  107. //跳转到发布页面
  108. let token = uni.getStorageSync("apiToken")
  109. if(!token){
  110. this.$mUtil.toast("请先登录")
  111. setTimeout(()=>{
  112. uni.navigateTo({
  113. url:"/pages/login/index"
  114. })
  115. },1000)
  116. }else{
  117. uni.navigateTo({
  118. url: "/pages/research/recommend/release",
  119. });
  120. }
  121. },
  122. getList(id) {
  123. this.$http
  124. .get("/opus/all-list", {
  125. themeId: id||"",
  126. page: this.page,
  127. limit: this.limit,
  128. })
  129. .then((res) => {
  130. if (res && res.code == 200) {
  131. this.flowList=(res.page.list);
  132. if (res.page.totalPage <= res.page.currPage) {
  133. this.status = "noMore";
  134. } else {
  135. this.status = "more";
  136. }
  137. }
  138. });
  139. },
  140. footStyle(index, item) {
  141. this.flowList=[]
  142. if(this.footIndex==index){
  143. this.footIndex = -1;
  144. this.themeId = null;
  145. this.page = 1;
  146. this.getList(this.themeId);
  147. }else{
  148. this.footIndex = index;
  149. this.themeId = item.id;
  150. this.page = 1;
  151. this.getList(this.themeId);
  152. }
  153. },
  154. },
  155. };
  156. </script>
  157. <style lang="scss" scoped>
  158. .release {
  159. background-color: #0B844A;
  160. width: 101rpx;
  161. height: 101rpx;
  162. border-radius: 999rpx;
  163. position: fixed;
  164. bottom: 259rpx;
  165. right: 30rpx;
  166. display: flex;
  167. align-items: center;
  168. flex-direction: column;
  169. image {
  170. width: 37rpx;
  171. height: 30rpx;
  172. margin-top: 15rpx;
  173. margin-bottom: 6rpx;
  174. }
  175. .item {
  176. color: #ffffff;
  177. font-weight: 400;
  178. font-size: 25rpx;
  179. }
  180. }
  181. .water-flow-box {
  182. background-color: #f5f5f5;
  183. border-radius: 40rpx;
  184. }
  185. .zhan {
  186. background-color: #ffffff;
  187. // height: 50rpx;
  188. position: relative;
  189. width: 100%;
  190. }
  191. .waterfall {
  192. background-color: #f5f5f5;
  193. border-radius: 40rpx;
  194. height: 100rpx;
  195. width: 100%;
  196. position: absolute;
  197. }
  198. .multiple {
  199. // margin-top: 150rpx;
  200. color: #999999;
  201. padding-left: 30rpx;
  202. background: #ffffff;
  203. display: flex;
  204. align-items: center;
  205. white-space: nowrap;
  206. overflow-x: auto;
  207. position: fixed;
  208. width: 100%;
  209. // height: 135rpx;
  210. z-index: 1;
  211. -webkit-overflow-scrolling: touch;
  212. .item-food {
  213. // padding-bottom: 30rpx;
  214. margin-right: 30rpx;
  215. box-sizing: border-box;
  216. // line-height: 50rpx;
  217. display: flex;
  218. font-size: 28rpx;
  219. font-weight: 500;
  220. height: 110rpx;
  221. line-height: 110rpx;
  222. .alarm {
  223. // padding-top: 32rpx;
  224. margin-right: 20rpx;
  225. display: block;
  226. }
  227. }
  228. .item-food:last-child{
  229. padding-right: 10rpx;
  230. }
  231. .itemstyle {
  232. border-bottom: 4rpx solid #0B844A;
  233. color: #0B844A;
  234. border-radius: 1rpx;
  235. font-size: 32rpx;
  236. font-weight: 700;
  237. }
  238. }
  239. .top {
  240. z-index: 1;
  241. width: 100%;
  242. height: 88rpx;
  243. position: fixed;
  244. background-color: #0B844A;
  245. display: flex;
  246. justify-content: center;
  247. align-items: center;
  248. color: rgba(255, 255, 255, 1);
  249. .recommend {
  250. padding-bottom: 24rpx;
  251. padding-top: 14rpx;
  252. font-size: 36rpx;
  253. font-weight: 500;
  254. margin-right: 104rpx;
  255. box-sizing: border-box;
  256. height: 86rpx;
  257. }
  258. .recommendtwo {
  259. border-bottom: 4rpx #ffffff solid;
  260. border-radius: 1rpx;
  261. }
  262. }
  263. .recommend {
  264. overflow: hidden;
  265. border-radius: 40rpx;
  266. }
  267. </style>