talent_map/uniapp/pages/index/index.vue

<template>

    <view>
        <!-- 头部背景和搜索 -->
        <view>
            <image :src="appConfig.mobile_top_bg" class="top-image" id="top-image" mode="widthFix" @load="topImageLoad">
            </image>
        </view>
        <!-- 搜索 -->
        <router-link to="/pages/search/search" style="position: absolute; width: 100%; padding: 0 98rpx;height: 70rpx;"
            :style="{top: top + 'rpx'}">
            <u-search wrap-bg-color="transparent" bg-color="#ffffff" :disabled="false" :height="62" shape="square"
                :show-action="false"></u-search>
        </router-link>
        <!-- 分类树 -->
        <view class="content bg-body" v-if="userInfo.nickname && userInfo.chain">
            <cate-two></cate-two>
        </view>
        <view v-else>
            <u-empty mode="permission" icon-size="500" text="请使用企业身份登录"
                src="/static/images/permission.png">
                <router-link to="/pages/login/login" slot="bottom"
                    class="flex row-center user-login white m-t-16 p-t-16 p-b-16 p-l-50 p-r-50">
                    点击登录
                </router-link>
            </u-empty>
        </view>

        <!-- 意见反馈按钮 -->
        <router-link :to="'/pages/feedback/feedback'"
            style="width: 200rpx; height: 200rpx; position: fixed; right: 0; bottom: 100rpx; display: none;">
            <image src="/static/images/icon_feedback.png" style="width: 100%; height: 100%;"></image>
        </router-link>

		<!-- 组件 产业链 -->
		<chain v-model="showChainPopup" @change="handleChain"></chain>

        <u-tabbar :list="tabarList"></u-tabbar>

    </view>

</template>

<script>
    import {
        mapGetters,
        mapActions,
        mapMutations
    } from 'vuex'
    import {
        pxToRpx
    } from '@/utils/tools'
	import Chain from "./components/chain.vue"
    const app = getApp()
    const homeItem = {
        name: '首页'
    }
    export default {
		components: {
			Chain
		},
        data() {
            return {
                keyword: '',
                top: 172,
				showChainPopup: false
            }
        },
        onLoad() {
            uni.setStorageSync('TABBAR_TYPE', 'map');
            this.setTabarList({
                type: 'map'
            })
        },
        onShow() {
            // this.getHomeFun();
           this.getUser().then(() => {
			   if (this.userInfo.nickname && !this.userInfo.chain) {
				   this.showChainPopup = true
			   }
           })
        },
        onHide() {},
        onPullDownRefresh() {
            this.getUser().then(() => {
                uni.stopPullDownRefresh();
            })
        },
        methods: {
            ...mapMutations(["setTabarList"]),
            ...mapActions(['getUser']),
            topImageLoad(e) {
                setTimeout(() => {
                    uni.createSelectorQuery().in(this).select('#top-image').boundingClientRect(data => {
                        console.log("得到布局位置信息" + JSON.stringify(data));
                        this.top = pxToRpx(data.height) - 100
                    }).exec();
                }, 30)
            },
            searchTalents() {
                let {
                    keyword
                } = this;
                if (!keyword) {
                    this.$toast({
                        title: '请输入关键字'
                    })
                    return;
                }
                uni.navigateTo({
                    url: '/pages/talents/talents?keyword=' + this.keyword
                })
            },
			handleChain(chain) {
				this.getUser().then(() => {
				    uni.stopPullDownRefresh();
				})
			},
        },
        computed: {
            ...mapGetters(['userInfo', 'appConfig', 'tabarList']),
        }
    }
</script>

<style lang="scss">
    page {
        padding: 0;
    }

    .top-image {
        width: 100%;
    }

    .index-header {
        background-color: #E8B175;
        color: #fff;

        .header-text {
            min-height: 100rpx;
            text-align: justify;
        }

        .header-border {
            border-top: 1px dashed #fff;

        }
    }

    .class-list {
        background-color: #fff;
        color: $-color-primary;

        .class-list-item {
            padding: 30rpx;

            .item-img {
                width: 50rpx;
                height: 50rpx;
                // padding: 9rpx;
                // background-color: #E8B175;
                border-radius: 8rpx;

                image {
                    width: 100%;
                }
            }
        }
    }

    .count {
        border-bottom: $-solid-border;
    }

    .user-login {
        background: #DD4250;
        box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(243, 113, 113, 0.39);
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        border: 2rpx solid #DD4250;
    }
</style>