flinfo/dc-App/pages/my/my.vue

<template>
	<view class="container">
		<view class="top_">
			<view class="ds_" @click="goMe()">
				<view class="user_t">
					<image :src="baseUrl + userInfo.avatar" mode="aspectFill" v-if="userInfo.avatar"></image>
					<image src="http://47.94.122.58:83/userPhoto.png" mode="aspectFill" v-else></image>
				</view>
				<view class="ueser_right">
					<view class="user_title">
						<text>{{userInfo.userName || 'Name'}}</text>
					</view>
					<view class="user_emil">{{userInfo.email || "Email"}}</view>
				</view>
			</view>
		</view>
		<view class="box_">
			<view class="f_" @click="goMyRouter(1)">
				<view class="icon_">
					<image src="../../static/imgs/me1.png" mode=""></image>
				</view>
				<view class="">My Wallet</view>
			</view>
			<view class="f_" @click="goMyRouter(2)">
				<view class="icon_">
					<image src="../../static/imgs/me2.png" mode=""></image>
				</view>
				<view class="">History</view>
			</view>
			<view class="f_" @click="goMyRouter(5)">
				<view class="icon_">
					<image src="../../static/imgs/me2.png" mode=""></image>
				</view>
				<view class="">Contact Us</view>
			</view>
			<view class="f_" @click="goMyRouter(3)">
				<view class="icon_">
					<image src="../../static/imgs/me3.png" mode=""></image>
				</view>
				<view class="">Settings</view>
			</view>
			<view class="f_" @click="goMyRouter(4)">
				<view class="icon_">
					<image src="../../static/imgs/me4.png" mode=""></image>
				</view>
				<view class="">Log out</view>
			</view>
		</view>
		<!-- <tabbar :msg='msg'></tabbar> -->
	</view>
</template>

<script>
	import tabbar from '../../components/tabbar/tabbar.vue'
	import config from '@/config'
	import request from '../../utils/request'

	export default {
		data() {
			return {
				msg: "3",
				userInfo: {},
				show: false,
				status: 'loading',
				baseUrl: config.imagesUrl
			}
		},
		onShow() {
				this.getBaseInfo()
		},
		components: {
			tabbar
		},
		methods: {
			async getBaseInfo() {
				let res = await request({
					url: 'system/user/getUserBaseInfo',
					method: 'get',
				})
				if (res.code == 200) {
					this.userInfo = res.data
					console.log(this.baseUrl + this.userInfo.avatar);
					uni.setStorageSync('user_info', res.data);
				}

			},
			goMyRouter(num) {
				if (num == 1) {
					uni.navigateTo({
						url: '/pages/my/MyWallet'
					})
				}
				if (num == 2) {
					uni.navigateTo({
						url: '/pages/my/History'
					})
				}
				if (num == 3) {
					uni.navigateTo({
						url: '/pages/my/Settings'
					})
				}
				if (num == 4) {
					uni.showModal({
						title: 'Are you sure you want to exit?',
						success: function(res) {
							if (res.confirm) {
								uni.reLaunch({
									url: '/pages/login/login'
								})
							} else if (res.cancel) {
								console.log('Cancelled');
							}
						}
					});
				}
        if (num == 5) {
          uni.navigateTo({
            url: '/pages/my/Contact'
          })
        }
			},
			goback() {
				uni.navigateBack()
			},
			goMe() {
				uni.navigateTo({
					url: '/pages/my/PersonalCenter'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		height: 100vh;
		background: #f8f8f8;
	}

	.top_ {
		width: 100%;
		height: 210px;
		box-sizing: border-box;
		padding-top: 44px;
		background: url('../../static/imgs/loginback.png') no-repeat;
		background-size: 100% 100%;
		background-color: #32714f;

	}

	.ds_ {
		width: 90%;
		margin: 15px auto;
		display: flex;
		align-items: center;
		color: #fff;

	}

	.user_t {
		width: 160rpx;
		height:160rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 15px;
		background: #f8f8f8;
		border: 2px solid #fff;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.user_title {
		word-break: break-all;word-wrap: break-word;

		overflow: hidden;
		text-overflow: ellipsis;
		white-space:wrap !important;
		font-weight: bold;
		font-size: 20px;
		color: #FFFFFF;
		margin-bottom: 10px;
		display: flex;
		flex-wrap: wrap;
	}

	.user_emil {
		font-weight: 500;
		font-size: 16px;
	}

	.box_ {
		width: 90%;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 15px;
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 15px auto;
	}

	.f_ {
		width: 25%;
		font-weight: 500;
		font-size: 23rpx;
		color: #333333;
		text-align: center;
	}

	.icon_ {
		width: 22px;
		height: 22px;
		margin: 0 auto;
		margin-bottom: 5px;

		image {
			width: 100%;
			height: 100%;

		}
	}
	.ueser_right{
		width:69%
	}
</style>