dev/dcp-app-gate/pages/resourceSharing/resourceRecommend.vue

<template>
    <view class="rf-category" style="position: relative;">
        <!--搜索导航栏-->
        <!--<view class="icoStyle">
            <view class="leftArrow" @tap="back">
                <u-icon name="arrow-left" color="#fff" size="36"></u-icon>
            </view>
            <rf-search-bar @search="navToSearch" icon="iconkuaijiecaidan" />
        </view>-->
        <view class="icoStyle">
            <view style="width:90%;height:99upx">
                <rf-search-bar2 @search="" icon="iconkuaijiecaidan"
                                style="z-index: 99;" />
            </view>
        </view>
        <u-toast ref="uToast"/>
        <view style="width: 100%;">
            <view style="width: 100%;">
                <view v-for="(item,index) in recommendList" style="width: 100%;height: 280upx;margin-bottom: 20upx;padding: 30upx;background-color: white;" @click="toDetaile(item.entityId)">
                    <view style="width: 270upx;height: 220upx;float: left;">
                        <image v-if="item.researchResourcesMedia!='null'&&item.researchResourcesMedia!=null&&item.researchResourcesMedia!=''&&item.researchResourcesMedia!=undefined"
                               :src="'https://www.geidcp.com//api/file/pub/'+item.researchResourcesMedia" mode="" style="width: 100%;height: 100%;"></image>
                        <image v-else src="@/static/img/resourceSharing/lavle.png" mode="" style="width: 100%;height: 100%;"></image>
                    </view>
                    <view style="width: 390upx;height: 100%;float: left;margin-left: 30upx;position: relative;">
                        <view>
                            <text style="font-size: 30upx; color: #0B0B11;" class="twoLine">
                                {{item.name}}
                            </text>
                        </view>
                        <view>
                            <text style="font-size: 20upx; color: #666666;" class="twoLine">
                                {{item.affiliatedUnitName}}
                            </text>
                        </view>
                        <view style="margin-top: 13upx;">
                            <text style="font-size: 26upx; padding: 0 13upx; border: 2px solid #1777FE;
											display: inline-block;border-radius: 32upx;color: #1777FE;">
                                {{item.researchResourcesType}}
                            </text>
                        </view>
                        <view style="position: absolute;bottom: 0;width: 100%;height: 35upx;color: #666;">
                            <view style="float: left;height: 100%">
                                <text style="font-size: 28upx;">{{item.createDate}}</text>
                            </view>
                            <view style="float: right;">
                                <view style="float: left;font-size: 28upx;font-weight: 400;">
                                    <u-icon name="heart" color="#848485" size="28" style="margin-right: 6upx"></u-icon>
                                    <text style="color: #666;">
                                        {{item.num=='null'?'0':item.num}}
                                    </text>
                                </view>
                                <!--<view style="float: left;font-size: 28upx;font-weight: 400;margin-left: 70upx;">
                                    <u-icon name="arrow-right" color="#848485" size="28" style="margin-right: 6upx"></u-icon>
                                    <text style="color: #666;">
                                        888
                                    </text>
                                </view>-->
                            </view>
                            <view style="clear: both;"></view>
                        </view>
                    </view>
                    <view style="clear: both;"></view>
                </view>
                <view style="margin-top: 20rpx;">
                    <u-loadmore :status="status" :load-text="loadText" />
                </view>
            </view>
        </view>
        <rf-back-top :scrollTop="scrollTop"></rf-back-top>
    </view>
</template>

<script>
    import rfSearchBar from '@/components/rf-search-bar';
    import rfSearchBar2 from '@/components/rf-search-bar-xiangmu';

    export default {
        data() {
            return {
                recommendList:[],
                pageNo:0,
                totalPage:1,
                status: 'loading',
                isLoading: true,
                loadText: {
                    loading: this.$i18n.locale == 'zh'? '加载中': 'Loading',
                    nomore: this.$i18n.locale == 'zh'? '没有更多数据了': 'No more'
                },
                // 字典
                classify1:'',
                classify2:'',
                // 返回顶部
                scrollTop: 0,
            }
        },
        components: { rfSearchBar,rfSearchBar2 },
        async onShow() {
            await this.initData();
            await this.getDict();
            await this.getRecommend();
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        onReachBottom() {  //页面拉到底部加载
            if(this.isLoading) {
                this.getRecommend();
            }
        },
        watch:{
           /* recommendList(val){
                this.$refs.uToast.show({
                    title: `${this.i18n('resourceRecommended')}${this.recommendList.length}${this.i18n('resourceRecommended2')}`,
                    position: "top",
                    icon: false,
                })
            }, */
        },
        methods: {
            async initData(){
                this.recommendList = [];
                this.pageNo = 0;
                this.totalPage = 1;
                this.status =  'loading';
                this.isLoading =  true;
                this.loadText =  {
                    loading: this.$i18n.locale == 'zh'? '加载中' : 'Loading',
                    nomore: this.$i18n.locale == 'zh'? '没有更多数据了' : 'No more'
                };
                // 字典
                this.classify1 = '';
                this.classify2 = '';
                // 返回顶部
                this.scrollTop =  0;
            },
            navToSearch(){},
            toDetaile(entityId){
                this.$mRouter.push({
                    route: `/pages/resourceSharing/resourceDetails?entityId=${entityId}`,
                });
            },
            async getDict(){
                const res = await this.$myRequest({
                    url: '/sys/sysDicts',
                    data: {
                        type:this.$i18n.locale=="zh"?'RESEARCH_RESULT_TYPE_DICT,RESEARCH_RESOURCE_TYPE_DICT':'RESEARCH_RESULT_TYPE_DICT_EN,RESEARCH_RESOURCE_TYPE_DICT_EN',
                    }
                });
                if (res.data) {
                    let both={
                        label:this.$t('common.All'),
                        value:null
                    };
                    this.classify1=res.data[0];
                    this.classify2=res.data[1];
                    this.classify1.unshift(both);
                    this.classify2.unshift(both);
                }
            },
            async getRecommend(){
                const that = this;
                let params = {
                    pageNo: '',
                    pageSize: 50,
                    language: this.$i18n.locale.toUpperCase(),
                    status: 0,
                    descStatus: 0,
                    effective:'Y',
                };
                if( this.pageNo >= this.totalPage){
                    this.isLoading = false;
                    this.status = 'nomore';
                }else{
                    this.isLoading = true;
                    this.pageNo++;
                    params.pageNo = this.pageNo;
                    const res = await this.$myRequest({
                        url: '/resourceshare/baseResearchResourcesViews/',
                        data: {
                            ...params
                        }
                    })
                    if (res.data) {
                        let data = res.data.baseResearchResourcesViews;
                        data.forEach((i) => {
                            i.createDate = i.createDate ? this.formatDate(i.createDate, "YYYY-MM-DD") : "";
                            if (i.researchResourcesMedia){
                                i.researchResourcesMedia = i.researchResourcesMedia.split(',')
                                i.researchResourcesMedia = i.researchResourcesMedia[0]
                            }
                        })
                        for (let i=0;i<data.length;i++){
                            for (let o=0;o<that.classify2.length;o++){
                                if (data[i].researchResourcesType == that.classify2[o].value){
                                    data[i].researchResourcesType = that.classify2[o].label;
                                }
                            }
                        }
                        that.recommendList = [...that.recommendList,...data]
                        that.totalPage = res.data.page.totalPage;
                        if(that.totalPage == 1){
                            this.isLoading = false;
                            this.status = 'nomore';
                        }
                    }
                }
            },
            back() {
                uni.navigateBack();
            },
            //中英文切换
            i18n (data) {
                return this.$t('common.'+data);
            },
        }
    }
</script>

<style lang="scss" scoped>
    .rf-category {
        background-color: #F3F4F5;
        /*  #ifdef  APP-PLUS  */
        margin-top: calc(20upx + var(--status-bar-height));
        /*  #endif  */
        .icoStyle {
            display: flex;
            .leftArrow {
                position: absolute;
                left: 4upx;
                top: calc(30upx + var(--status-bar-height));;
                z-index: 9999;
            }
        }
        .oneLine{
            /* 隐藏溢出元素 */
            overflow: hidden;
            /* 单行显示 */
            white-space: nowrap;
            /* 溢出显示省略号 */
            text-overflow: ellipsis;
        }
        .twoLine{
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .threeLine{
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .wrap {
            display: flex;
            flex-direction: column;
            height: calc(100vh - var(--window-top));
            width: 100%;
        }
        .swiper-box {
            flex: 1;
        }
        .swiper-item {
            height: 100%;
        }
        .item-box {
            margin-bottom: 50rpx;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .item-box .item {
            border: 1px solid $u-type-primary;
            color: $u-type-primary;
            padding: 8rpx 40rpx;
            border-radius: 100rpx;
            margin-top: 30rpx;
        }

        .recommendScroll{
            overflow: hidden;
            white-space: nowrap; // 滚动必须加的属性
            width: 100%;
            height: 210upx;
            margin: 0 auto;
        }
        .recommendScroll .item{
            width: 400upx;
            height: 210upx;
            border: 1px solid #979797;
            display: inline-block;
            vertical-align: top;
        }
    }
</style>
<style>
    /deep/ .u-position-top{
        width: 70%;
    }
</style>