workorder-front/pages/index/center.vue

<template>
	<view class="page">

		<view class="backimg">
			<view class="head-portrait">
				<image :src="userInfo.image" mode="aspectFill"></image>
			</view>
			<view class="id">
				<view class="">
					{{ userInfo.name }}
				</view>
				<view class="">
					{{ userInfo.roleName }}
				</view>
			</view>
		</view>

		<view class="box">
			<view class="index" 
			@click="$utils.navigateTo('/pages_order/order/memberList')">
				<view class="indus">
					<view class="horn">
						<uv-icon name="account-fill" size="30rpx"></uv-icon>
					</view>
					<view class="words">
						成员列表
					</view>
				</view>
				<view class="arrow">
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			<view class="index" @click="$utils.navigateTo('/pages_order/order/ModifyMembers?id=' + userInfo.id)">
				<view class="indus">
					<view class="horn">
						<uv-icon name="lock-fill" size="30rpx"></uv-icon>
					</view>
					<view class="words">
						修改个人信息
					</view>
				</view>
				<view class="arrow">
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			<view class="index" @click="$utils.navigateTo('/pages_order/order/FavoriteList')">
				<view class="indus">
					<view class="horn">
						<uv-icon name="star-fill" size="30rpx"></uv-icon>
					</view>
					<view class="words">
						收藏列表
					</view>
				</view>
				<view class="arrow">
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			<view class="index" @click="$utils.navigateTo('/pages_order/order/HelpCenter')">
				<view class="indus">
					<view class="horn">
						<uv-icon name="question-circle-fill" size="30rpx"></uv-icon>
					</view>
					<view class="words">
						帮助中心
					</view>
				</view>
				<view class="arrow">
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			<view class="index" @click="$utils.navigateTo('/pages_order/order/PrivacyAgreement')">
				<view class="indus">
					<view class="horn">
						<uv-icon name="info-circle-fill" size="30rpx"></uv-icon>
					</view>
					<view class="words">
						隐私协议
					</view>
				</view>
				<view class="arrow">
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
			<view class="index" @click="$store.commit('logout')">
				<view class="indus">
					<view class="horn">
						<uv-icon name="info-circle-fill" size="30rpx"></uv-icon>
					</view>
					<view class="words">
						退出登录
					</view>
				</view>
				<view class="arrow">
					<uv-icon name="arrow-right"></uv-icon>
				</view>
			</view>
		</view>

		<tabber select="1" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import { mapState } from 'vuex'
	export default {
		components: {
			tabber,
		},
		computed: {
			...mapState(['userInfo']),
		},
		data() {
			return {}
		},
		onShow() {
			this.$store.commit('getUserInfo')
		},
		methods: {
		}
	}
</script>

<style scoped lang="scss">
	.page {
		.backimg {

			padding: 0rpx 100rpx;
			height: 600rpx;
			width: 100%;
			background-color: rgb(51, 184, 234);

			display: flex;

			align-items: center;

			.head-portrait {
				height: 150rpx;
				width: 150rpx;
				image{
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}

			.id {
				color: #fff;
				margin: 0rpx 20rpx;
				line-height: 50rpx;
			}

		}

		.box {
			margin-top: 30rpx;
			.index {
				padding: 30rpx 0;
				margin: 0 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #ccc;
				.indus {
					display: flex;

					.words {
						margin: 0rpx 5rpx;
						font-size: 27rpx;
						opacity: 0.8;
					}

					.horn {
						margin: 5rpx 10rpx;
					}
				}

				.arrow {
					padding: 8rpx;
				}

			}
		}



	}
</style>