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">{{userInfo.nickname}}</view>
						<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">
			<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">
			<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>
</template>

<script>
	import MescrollCompMixin from "@/components/mescroll-uni/mixins/mescroll-comp";
	import {
		mapGetters,
		mapActions
	} 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);

		},

		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: {
			...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']),
			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;
		}
	}
</style>