besiweb/pages/my/index.vue

<template>
	<view class="uni-main">
		<view class="uni-header">
			<view class="uni-header-nav">
				<text class="uni-header-title">个人中心</text>
				<text class="uni-header-setting">
					<navigator url="/pages/my/setting"><img src="../../static/my/addwork_setting_white.png" width="24"></navigator>
				</text>
			</view>
			<view v-if="userInfo.id" class="uni-header-info online">
				<navigator url="/pages/my/setting">
					<text class="uni-member-logo"><img :src="userInfo.avatar? userInfo.avatar : '../../static/my/avatar.png'" alt=""></text>
					<view class="uni-member-info">
						<view class="uni-row_text"><text v-text="userInfo.nickname"></text><text v-if="userInfo.yigong_status==1">(义工)</text><text v-else-if="userInfo.master_status==1">({{userInfo.mtype==1?'法师':'居士'}})</text><img :src="userInfo.gender==1? '../../static/my/icon_male.png' : '../../static/my/icon_female.png'"
							 width="14"></view>
						<view class="uni-row_text"><img class="icon" src="../../static/my/location_user_bold_icon_white.png" width="18"><text
							 v-text="userInfo.city_name? userInfo.city_name : '未知'"></text></view>
						<view class="uni-row_text intro" v-text="userInfo.intro? userInfo.intro : '这个人很懒，什么也没留下！'"></view>
					</view>
					<text class="uni-member-qr">
						<img src="../../static/my/user_qr_code_white.png" width="30">
						<img src="../../static/my/turn_right_white.png" width="20">
					</text>
				</navigator>
				<view class="uni-member-join_vip">
					<navigator url=""><text><img src="../../static/my/vip_icon.png" width="16">加入会员</text></navigator>
				</view>
			</view>
			<view v-else class="uni-header-info">
				<text class="uni-member-logo"><img src="../../static/my/avatar.png" alt=""></text>
				<text class="uni-member-info">
					<navigator url="/pages/entry/login"><text>登陆/注册</text></navigator>
				</text>
			</view>

			<view v-if="userInfo.id" :class="userInfo.yigong_status==1? 'uni-nav yigong' : 'uni-nav'">
				<view class="uni-nav-item">
					<navigator url="">
						<text class="uni-nav-item_text num" v-text="userInfo.coupon? userInfo.coupon : 0">0</text>
						<text class="uni-nav-item_text">花灯券</text>
					</navigator>
				</view>
				<view class="uni-nav-item" v-if="userInfo.yigong_status==1">
					<navigator url="">
						<text class="uni-nav-item_text num" v-text="userInfo.salary? userInfo.salary : 0">0</text>
						<text class="uni-nav-item_text">工资</text>
					</navigator>
				</view>
				<view class="uni-nav-item">
					<navigator url="">
						<text class="uni-nav-item_text num" v-text="userInfo.score? userInfo.score : 0">0</text>
						<text class="uni-nav-item_text">积分</text>
					</navigator>
				</view>
				<view class="uni-nav-item">
					<navigator url="">
						<text class="uni-nav-item_text num" v-text="userInfo.merits_num? userInfo.merits_num : 0">0</text>
						<text class="uni-nav-item_text">功德值</text>
					</navigator>
				</view>
			</view>
		</view>
		<view class="uni-menu">
			<view class="uni-menu-list">
				<view class="uni-menu-list-item">
					<navigator url="/pages/my/card">
						<img class="uni-list-icon" src="../../static/my/wallet_user_icon.png" width="30">
						<text class="uni-list-text">我的券包</text>
						<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
						<text class="uni-list-text_mark">账户安全保障中</text>
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="/pages/my/collect">
						<img class="uni-list-icon" src="../../static/my/collection_success_icon.png" width="30">
						<text class="uni-list-text">我的收藏</text>
						<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="/pages/my/dynamic">
						<img class="uni-list-icon" src="../../static/my/bottom_image_dynamic_press.png" width="30">
						<text class="uni-list-text">我的动态</text>
						<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="/pages/index/gongdeng/myGongdeng?type=2">
						<img class="uni-list-icon" src="../../static/my/light_user_icon_theme.png" width="30">
						<text class="uni-list-text">我的供灯</text>
						<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="/pages/my/activity">
						<img class="uni-list-icon" src="../../static/my/my_active_icon.png" width="30">
						<text class="uni-list-text">我的活动</text>
						<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="/pages/my/card">
						<img class="uni-list-icon" src="../../static/my/blessing_card.png" width="30">
						<text class="uni-list-text">祝福贺卡</text>
						<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
				<view class="uni-menu-list-item" v-if="userInfo.yigong_status != 1">
					<navigator url="/pages/my/yigong">
						<img class="uni-list-icon" src="../../static/index/home_icon_wish.png" width="30">
						<text class="uni-list-text">申请义工</text>
						<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="/pages/my/setting">
						<img class="uni-list-icon" src="../../static/my/ren_zheng_user_icon_theme.png" width="30">
						<text class="uni-list-text">安全中心</text>
						<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="/pages/my/share">
						<img class="uni-list-icon" src="../../static/my/user_invited_friend.png" width="30">
						<text class="uni-list-text">邀请好友</text>
						<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="/pages/my/kefu">
						<img class="uni-list-icon" src="../../static/my/help_question_user_icon_theme.png" width="30">
						<text class="uni-list-text">帮助反馈</text>
						<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
				<view class="uni-menu-list-item">
					<navigator url="">
						<img class="uni-list-icon" src="../../static/my/online_customer.png" width="30">
						<text class="uni-list-text">在线客服</text>
						<img class="uni-list-icon_right" src="../../static/my/gx_input.png" alt="">
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
			}
		},
		onLoad() {

			this.getInfo()
		},
		methods: {
			// 跳转
			switchUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			getInfo() {
				let _uni = this
				this.$request.api('/api/member/info', {}).then(res => {
					console.log(res)
					if (res.success == true) {
						_uni.userInfo = res.data
					}
				}).catch(parmas => {
					console.log(432142)
				})
			}
		}
	}
</script>

<style>
	.uni-main {
		width: 100%;
		height: 100%;
		background-color: #f6f7f5;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		padding-bottom: 120rpx;
	}

	.uni-header {
		min-height: 480rpx;
		background: url('../../static/my/user_center_bg.png') no-repeat 100%/100%;
	}

	.uni-header-nav {
		padding: 60rpx 20rpx 26rpx;
	}

	.uni-header-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #ffffff;
	}

	.uni-header-setting {
		float: right;
	}

	.uni-header-nav img {
		vertical-align: middle;
	}

	.uni-header-info {
		width: calc(100% - 40rpx);
		margin: 10rpx 20rpx;
		display: inline-block;
		position: relative;
	}

	.uni-member-info {
		display: inline-block;
		font-size: 36rpx;
		color: #fff;

	}

	.uni-header-info.online .uni-member-info {
		font-size: 32rpx;
	}

	.uni-member-logo {
		width: 124rpx;
		height: 124rpx;
		display: inline-block;
		vertical-align: middle;
		margin-right: 30rpx;
	}

	.uni-header-info.online .uni-member-logo {
		vertical-align: top;
	}

	.uni-member-logo img {
		width: 100%;
		height: 100%;
		border-radius: 100%;
	}

	.uni-row_text {
		margin-bottom: 6rpx;
	}

	.uni-row_text.intro {
		font-size: 28rpx;
		max-width: 360rpx;
		white-space: nowrap;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		display: inline-block;
	}

	.uni-row_text .icon {
		vertical-align: top;
		margin-right: 10rpx;
	}

	.uni-member-join_vip {
		position: absolute;
		right: 10rpx;
		bottom: 8rpx;
		background-color: #FFFFFF;
		padding: 4rpx 6rpx;
		border-radius: 8rpx;
		color: #f88000;
		box-shadow: 0rpx 2rpx 2rpx 2rpx #666;
	}

	.uni-member-join_vip img {
		margin-right: 8rpx;
		vertical-align: middle;
	}

	.uni-nav {
		margin: 20rpx 20rpx 10rpx;
	}

	.uni-nav .uni-nav-item {
		width: 33.3%;
		display: inline-block;
		text-align: center;
		color: #FFFFFF;
		font-size: 36rpx;
	}
	
	.uni-nav.yigong .uni-nav-item { 
		width: 25%;
	}

	.uni-nav-item_text.num {
		/* font-size: 38rpx; */
	}

	.uni-nav-item_text {
		text-align: center;
		display: block;
	}

	.uni-member-qr {
		float: right;
		margin-right: 10rpx;
	}

	.uni-member-qr img {
		vertical-align: middle;
	}

	.uni-menu {
		width: 100%;
		position: relative;

	}

	.uni-menu-list {
		width: 100%;
		position: relative;
		top: -40rpx;
	}

	.uni-menu-list-item {
		background-color: #FFFFFF;
		width: calc(100% - 40rpx);
		padding: 20rpx 20rpx;
		margin: 0 auto;
		border-radius: 10rpx;
		font-size: 36rpx;
		margin-bottom: 20rpx;
	}

	.uni-menu-list-item img {
		vertical-align: middle;
		margin-right: 10rpx;
	}

	.uni-list-text_mark {
		margin-right: 20rpx;
		color: #46bb6c;
		float: right;
		font-size: 32rpx;
		line-height: 40rpx;
		margin-top: 10rpx;
	}

	.uni-menu-list-item .uni-list-icon {
		margin-right: 20rpx;
	}

	.uni-menu-list-item .uni-list-icon_right {
		float: right;
		width: 50rpx;
		margin-top: 4rpx;
		vertical-align: middle;
	}
</style>