talent_map/uniapp/pages/user/user.vue

<template>
    <view>
        <!-- 头部 -->
        <view class="user" :style="[background]"></view><!-- end 头部 -->
        <view class="header">
            <view class="user-info">
                <!-- 用户信息 -->
                <view class="flex row-between w-full">
                    <view class="flex-1 lg">
                        <view class="line-2" v-if="userInfo.nickname">{{userInfo.nickname}} </view>
                        <router-link to="/pages/login/login" class="line-2" v-else>请登录</router-link>
                        <view class="m-t-20 flex">{{userInfo.tel}}</view>
                    </view>
                    <block>
                        <image class="avatar flex-none" mode="widthFix" :src="userInfo.avatar" v-if="userInfo.avatar" />
                        <image class="avatar flex-none" :src="'/static/images/portrait_empty.png'" v-else />
                    </block>
                </view>
                <!-- 分割线 -->
                <view class="m-t-20 m-b-20 user-line"></view>
                <!-- 统计 -->
                <view class="flex row-around w-full user-count">
                    <view class="flex-1 flex flex-col col-center" v-for="(item, index) in userInfo.count" :key="index"
                        @tap="menuJump(item)">
                        <view class="lg primary">{{ item.count }}</view>
                        <view>{{ item.title }}</view>
                    </view>
                </view>

            </view>


        </view>

        <!-- 列表 -->
        <view class="user-opts" v-if="userInfo.nickname">
            <router-link :to="'/pages/user/footprint'" class="flex row-between col-center w-full">
                <image mode="widthFix" src="/static/images/ico_footprint.png"></image>
                <view class="flex-1 m-l-24">我的足迹</view>
                <u-icon name="arrow-right" color="#ABABAB" size="28"></u-icon>
            </router-link>
            <!-- 分割线 -->
            <view class="m-t-16 m-b-16 user-line"></view>
            <router-link :to="'/pages/user/company'" class="flex row-between col-center w-full">
                <image mode="widthFix" src="/static/images/ico_company.png"></image>
                <view class="flex-1 m-l-24">企业反馈</view>
                <u-icon name="arrow-right" color="#ABABAB" size="28"></u-icon>
            </router-link>
            <!-- 分割线 -->
            <view class="m-t-16 m-b-16 user-line"></view>
            <router-link :to="'/pages/feedback/feedback'" class="flex row-between col-center w-full">
                <image mode="widthFix" src="/static/images/ico_feedback.png"></image>
                <view class="flex-1 m-l-24">意见反馈</view>
                <u-icon name="arrow-right" color="#ABABAB" size="28"></u-icon>
            </router-link>
        </view>

        <!-- 退出 -->

        <view class="footer flex row-center" v-if="userInfo.nickname">
            <view class="user-logout flex col-center row-center white w-full" @tap="logout">
                <u-icon name="arrow-rightward" size="28"></u-icon>
                <view class="m-l-24">退出登录</view>
            </view>
        </view>
        <view v-else>
            <u-empty mode="permission" margin-top="180" icon-size="600" 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>
        <u-tabbar :list="tabarList"></u-tabbar>
    </view>
</template>

<script>
    import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp";
    import {
        mapGetters,
        mapActions,
        mapMutations
    } from 'vuex'
    import {
        authLogout
    } from '@/api/app';
    import {
        menuJump
    } from '@/utils/tools'
    import Cache from '@/utils/cache'
    const app = getApp()
    export default {
        mixins: [MescrollCompMixin],
        data() {
            return {
                navBg: 0,
            };
        },

        onLoad(options) {

            //配置referrer，防止图片403拒绝
            const oMeta = document.createElement('meta');
            oMeta.name = "referrer";
            oMeta.content = "no-referrer"
            document.getElementsByTagName('head')[0].appendChild(oMeta);
            this.setTabarList({
                type: 'map'
            })
        },

        onShow() {
            this.getUser();
        },
        onPullDownRefresh() {
            this.getConfig();
            this.getUser();
            setTimeout(function() {
                uni.stopPullDownRefresh();
            }, 500);
        },
        onPageScroll(e) {
            const top = uni.upx2px(100)
            const {
                scrollTop
            } = e
            let percent = scrollTop / top > 1 ? 1 : scrollTop / top
            this.navBg = percent
        },
        methods: {
            ...mapMutations(["setTabarList"]),
            ...mapActions(['getConfig', 'getUser']),
            logout() {
                authLogout().then(res => {
                    if (res.code == 1) {
                        this.$store.commit("logout");
                        this.$toast({
                            title: '退出成功'
                        })
                        setTimeout(() => {
                            this.$Router.replaceAll('/pages/launch/launch')
                        }, 500)
                    }
                })
            },
            menuJump(item) {
                menuJump(item)
            },
        },
        computed: {
            ...mapGetters(['userInfo', 'appConfig', 'tabarList']),
            background() {
                const {
                    mobile_user_bg
                } = this.appConfig
                console.log(mobile_user_bg)
                return mobile_user_bg ? {
                    'background-image': `url(${mobile_user_bg})`
                } : {
                    'background-image': 'url(/static/images/bg.png)'
                }
            },
        }
    };
</script>
<style lang="scss" scoped>
    page {
        background: $-color-white;
    }

    .user {
        // background-image: #F7F7F7;
        background-size: 100% auto;
        background-repeat: no-repeat;
        height: 424rpx;
    }

    .header {
        margin-top: -424rpx;
        padding: 182rpx 28rpx 0;

        .user-info {
            background: #FFFFFF;
            box-shadow: 0px 5px 10px 1px rgba(0, 0, 0, 0.08);
            border-radius: 8px 8px 8px 8px;
            padding: 40rpx;

            .avatar {
                height: 176rpx;
                width: 176rpx;
                border-radius: 50%;
                overflow: hidden;
                margin-top: -200rpx;
            }



            .user-count {
                color: #5D5D5D;
            }
        }

    }

    .user-line {
        border-bottom: $-solid-border;
    }

    .user-opts {
        padding: 50rpx;

        image {
            width: 70rpx;
            height: 70rpx;
        }
    }

    .footer {
        position: fixed;
        bottom: 134rpx;
        width: 100%;

        .user-logout {
            margin-left: 176rpx;
            margin-right: 176rpx;
            margin-bottom: 36rpx;
            height: 68rpx;
            background: #DD4250;
            box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(243, 113, 113, 0.39);
            border-radius: 12rpx 12rpx 12rpx 12rpx;
            opacity: 1;
            border: 2rpx solid #DD4250;
        }
    }

    .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>