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