123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286 |
- <!-- 推荐的动态路由 -->
- <template>
- <view class="recommend">
- <view class="multiple" id="nav" :style="{ top: top + 'px' }">
- <view
- class="item-food"
- v-for="(item, index) in itemFood"
- :key="item.id"
- @click="footStyle(index, item)"
- :class="{ itemstyle: footIndex == index }"
- >
- <text class="alarm"># {{ item.title }}</text>
- </view>
- </view>
- <div class="zhan" :style="{ marginTop: (top + 60) + 'px' }"></div>
- <view class="waterfall" :style="{ top: (top + 60) + 'px' }"> </view>
- <waterfall
-
- v-if="flowList.length > 0"
- ref="wfp"
- :colunmNumber="colunmNumber"
- :flowList="flowList"
- :columnGap="10"
- :status="status"
- ></waterfall>
- <loadMore v-if="flowList.length > 0" :status="status"></loadMore>
- <nodata v-else :config="{ top: 15, content: '暂无数据~' }"></nodata>
- <view class="release" @click="gotorelease()">
- <image :src="imgUrl+'/pen.png'" mode=""></image>
- <view class="item"> 发布 </view>
- </view>
- </view>
- </template>
- <script>
- let app = getApp()
- import waterfall from "../../../components/waterfall/waterfall";
- import nodata from "../../../components/noData/nodata";
- import loadMore from "../../../components/uni-load-more/uni-load-more";
- export default {
- data() {
- return {
- footIndex: -1, //点击切换food的样式,默认是第一个
- recommendIndex: 0, //点击切换头部样式,默认是第一个
- itemFood: [],
- colunmNumber: 2,
- index: 19,
- flowList: [
- ],
- page: 1,
- limit: 10,
- themeId: null, //主题id
- status: "more",
- imgUrl: this.$mConfig.staticUrl,
- top: 0
- };
- },
- props: {},
- comments: {
- waterfall,
- nodata,
- loadMore,
- },
- watch: {},
- created() {
- this.top = app.globalData.barHeight + 44
-
- },
- onReady() {
- const query = uni.createSelectorQuery().in(this)
- query.select('#nav').boundingClientRect(data => {
- console.log(data)
- console.log('元素高度')
- }).exec();
- },
- mounted() {
- this.getTheme();
- },
- onShow() {
- // this.getTheme();
- },
- methods: {
- isload() {
- this.page = 1;
- this.footIndex = -1;
- this.themeId = null;
- (this.flowList = []), this.getList();
- // this.itemFood=[],
- // this.getTheme()
- console.log('45445454')
- },
- loaderMore() {
- if (this.status == "more") {
- this.page++;
- this.getList(this.themeId);
- console.log('加载更多')
- }
- },
- getTheme() {
- this.$http.get("/opus/theme/list", this.params).then((res) => {
- if (res && res.code == 200) {
- this.itemFood=(res.list);
- if (res.list.length > 0) {
-
- // this.getList();
- }
- }
- });
- },
- gotorelease() {
- //跳转到发布页面
- let token = uni.getStorageSync("apiToken")
- if(!token){
- this.$mUtil.toast("请先登录")
-
- setTimeout(()=>{
- uni.navigateTo({
- url:"/pages/login/index"
- })
- },1000)
- }else{
- uni.navigateTo({
- url: "/pages/research/recommend/release",
- });
- }
- },
- getList(id) {
- this.$http
- .get("/opus/all-list", {
- themeId: id||"",
- page: this.page,
- limit: this.limit,
- })
- .then((res) => {
- if (res && res.code == 200) {
- this.flowList=(res.page.list);
- if (res.page.totalPage <= res.page.currPage) {
- this.status = "noMore";
- } else {
- this.status = "more";
- }
-
- }
- });
- },
- footStyle(index, item) {
- this.flowList=[]
- if(this.footIndex==index){
- this.footIndex = -1;
- this.themeId = null;
- this.page = 1;
- this.getList(this.themeId);
- }else{
- this.footIndex = index;
- this.themeId = item.id;
- this.page = 1;
- this.getList(this.themeId);
- }
-
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .release {
- background-color: #0B844A;
- width: 101rpx;
- height: 101rpx;
- border-radius: 999rpx;
- position: fixed;
- bottom: 259rpx;
- right: 30rpx;
- display: flex;
- align-items: center;
- flex-direction: column;
- image {
- width: 37rpx;
- height: 30rpx;
- margin-top: 15rpx;
- margin-bottom: 6rpx;
- }
- .item {
- color: #ffffff;
- font-weight: 400;
- font-size: 25rpx;
- }
- }
- .water-flow-box {
- background-color: #f5f5f5;
- border-radius: 40rpx;
- }
- .zhan {
- background-color: #ffffff;
- // height: 50rpx;
- position: relative;
- width: 100%;
- }
- .waterfall {
- background-color: #f5f5f5;
- border-radius: 40rpx;
- height: 100rpx;
- width: 100%;
- position: absolute;
- }
- .multiple {
- // margin-top: 150rpx;
- color: #999999;
- padding-left: 30rpx;
- background: #ffffff;
- display: flex;
- align-items: center;
- white-space: nowrap;
- overflow-x: auto;
- position: fixed;
- width: 100%;
- // height: 135rpx;
- z-index: 1;
- -webkit-overflow-scrolling: touch;
- .item-food {
- // padding-bottom: 30rpx;
- margin-right: 30rpx;
- box-sizing: border-box;
- // line-height: 50rpx;
- display: flex;
- font-size: 28rpx;
- font-weight: 500;
- height: 110rpx;
- line-height: 110rpx;
- .alarm {
- // padding-top: 32rpx;
- margin-right: 20rpx;
- display: block;
- }
- }
- .item-food:last-child{
- padding-right: 10rpx;
- }
- .itemstyle {
- border-bottom: 4rpx solid #0B844A;
- color: #0B844A;
- border-radius: 1rpx;
- font-size: 32rpx;
- font-weight: 700;
- }
- }
- .top {
- z-index: 1;
- width: 100%;
- height: 88rpx;
- position: fixed;
- background-color: #0B844A;
- display: flex;
- justify-content: center;
- align-items: center;
- color: rgba(255, 255, 255, 1);
- .recommend {
- padding-bottom: 24rpx;
- padding-top: 14rpx;
- font-size: 36rpx;
- font-weight: 500;
- margin-right: 104rpx;
- box-sizing: border-box;
- height: 86rpx;
- }
- .recommendtwo {
- border-bottom: 4rpx #ffffff solid;
- border-radius: 1rpx;
- }
- }
- .recommend {
- overflow: hidden;
- border-radius: 40rpx;
- }
- </style>
|