talent_map/uniapp/components/talents-list/talents-list.vue

<template>
    <mescroll-uni ref="mescrollRef" :top="positionTop" left="" @init="mescrollInit" @down="downCallback"
        @up="upCallback" :down="downOption" :up="upOption" style="left: 100px;">
        <view class="content">
            <!-- 列表 -->
            <view class="talents-item m-t-16" v-for="(item, index) in talentsList" :key="index">
                <!-- 人才 -->
                <router-link :to="{ path: '/pages/talents/detail', query: { id: item.id }}">
                    <view class="flex row-between flex-wrap">
                        <view class="flex flex-1">
                            <text
                                style="width: 12rpx;height: 12rpx;background: #DD4250;border-radius: 50%; margin-right: 20rpx;"></text>
                            <view class="bold">{{ item.title }}</view>
                            <view class=""><u-tag :text="item.module" type="error" size="mini" shape="circleRight" />
                            </view>
                        </view>
                        <view class="flex-none p-l-10 p-r-20 primary" v-if="item.position">
                            {{ item.position }}
                        </view>
                    </view>
                    <!-- 内容 -->
                    <view style="font-size: 24rpx;">
                        <view class="flex row-between m-t-16">
                            <view class="line-2 flex-1" v-if="item.chain">产业链：{{ item.chain }}</view>
                            <view class="flex" @tap.stop="makePhoneCall(item.tel)">
                                <u-icon name="phone-fill" color="#DD4250" size="28"></u-icon>
                                <view class="m-l-20">{{ phoneNumHide(item.tel) }}</view>
                            </view>
                        </view>
                        <view class="m-t-16" v-if="item.company">单位：{{ item.company }}</view>
                        <view class="m-t-16" v-if="item.module == 'base'">负责人：{{ item.principal }}</view>
                        <view class="m-t-16" v-if="item.module == 'pedigreeCompany'">法人：{{ item.principal }}</view>
                        <view class="m-t-16" v-if="item.module == 'firm'">秘书长：{{ item.principal }}</view>
                        <view class="m-t-16 line-2">
                            <text v-if="item.module == 'talent'">研究领域：</text>
                            <text v-else-if="item.module == 'base'">基地特色：</text>
                            <text v-else-if="item.module == 'university' || item.module == 'association'">研究方向：</text>
                            <text v-else-if="item.module == 'fund'">投资产业领域：</text>
                            <text v-else-if="item.module == 'pedigreeCompany'">主要产品：</text>
                            <text v-else-if="item.module == 'pedigree'">个人简介：</text>
                            <text v-else>简介：</text>
                            <text>{{ item.description }}</text>
                        </view>


                        <view class="flex m-t-16 p-t-16" style="border-top: 2rpx solid #DEDEDE;;">
                            <u-icon name="map-fill" color="#DD4250" size="28"></u-icon>
                            <view class="m-l-10">{{ item.city }}{{ item.address }}</view>
                        </view>
                    </view>
                </router-link>
            </view>
        </view>


        <loading-view v-if="showLoading" background-color="transparent" :size="50"></loading-view>
    </mescroll-uni>
</template>


<script>
    import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
    import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
    import {
        getTalentsList
    } from '@/api/app';
    export default {
        mixins: [MescrollMixin, MescrollMoreItemMixin],
        data() {
            return {
                statusBarHeight: 0,
                talentsList: [],
                downOption: {
                    // use: false,
                    auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
                },
                upOption: {
                    auto: true, // 不自动加载
                    noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
                    empty: {
                        icon: '/static/images/order_null.png',
                        tip: '暂无数据~', // 提示
                        fixed: true,
                        top: '100rpx'
                    }
                },
                showLoading: false,
                params_cid: this.cid,
                params_top: this.top,
                params_chain: this.chain
            };
        },
        props: {
            cid: {
                type: Number
            },
            chain: {
                type: String
            },
            top: {
                type: Number
            },
        },
        created() {
            uni.$on("refreshTalentsList", (params) => {
                this.params_cid = params.cid;
                this.params_chain = params.chain;
                this.params_top = params.top;
                console.log(params)
                this.refresh()
            })
            uni.getSystemInfo({
                success: (res) => {
                    this.statusBarHeight = res.statusBarHeight;
                }
            });

        },
        destroyed() {
            uni.$off("refreshTalentsList")
        },
        computed: {
            positionTop() {
                return this.top
                // return (this.statusBarHeight + 360)
            },
            phoneNumHide(tel) {
                return (tel) => {
                  return tel.substring(0, 3) + '****' + tel.substring(7);
                }
            },
        },
        methods: {
            refresh() {
                this.mescroll.resetUpScroll()
            },
            makePhoneCall(tel) {
                if (tel) {
                    uni.makePhoneCall({
                        phoneNumber: tel
                    });
                }
            },

            upCallback(page) {
                let pageNum = page.num; // 页码, 默认从1开始
                let pageSize = page.size; // 页长, 默认每页10条
                let {
                    params_cid,
                    params_chain
                } = this;
                getTalentsList({
                    page_size: pageSize,
                    page_no: pageNum,
                    cid: params_cid,
                    chain: params_chain
                }).then(({
                    data,
                    _meta
                }) => {
                    let curPageData = data;
                    let curPageLen = curPageData.length;
                    let hasNext = _meta.pageCount > _meta.currentPage;
                    if (page.num == 1) this.talentsList = [];
                    this.talentsList = this.talentsList.concat(curPageData);
                    this.mescroll.endSuccess(curPageLen, hasNext);
                })

            }
        },
    };
</script>
<style lang="scss" scoped>
    /deep/ .mescroll-uni-fixed {
        left: 250rpx !important;
    }

    .content {
        padding: 16rpx;
    }

    .u-search {
        padding: 0;
    }

    .talents-item {
        background: #FFFFFF;
        box-shadow: 0rpx 8rpx 16rpx 2rpx rgba(0, 0, 0, 0.03);
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        padding: 24rpx 16rpx;
        font-size: 28rpx;
    }

    .u-content {}
</style>