family-education/education_uni/components/my-userinfo/my-userinfo.vue

<template>
	<view>
		<uni-card :title="userinfo.alias" :sub-title="userinfo.uid" :thumbnail="userinfo.avatar" @click="toMyDetail"></uni-card>
		<uni-list>
			<uni-list-item :show-extra-icon="true" showArrow :extra-icon="OfficialAccountextraIcon" title="关注公众号" link="navigateTo" @click="toOfficialAccount"/>
			<uni-list-item :show-extra-icon="true" showArrow :extra-icon="MyShareextraIcon" title="分享与返现" link="navigateTo" @click="toMyShare"/>
			<uni-list-item :show-extra-icon="true" showArrow :extra-icon="MyOrderextraIcon" title="订单" link="navigateTo" @click="toMyOrder"/>
			<uni-section title="邀请" titleColor="#2BAFF8" type="line">
				<uni-list>
					<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon1" title="发出的邀请" link="navigateTo" @click="sendInvitation"/>
					<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon1" title="收到的邀请" link="navigateTo" @click="receivedInvitation"/>
				</uni-list>
			</uni-section>
			<uni-section title="教员" titleColor="#FB748F" type="line">
				<uni-list>
					<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon2" title="教员认证" link="navigateTo" @click="authorize"/>
					<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon2" title="发布新的课程" link="navigateTo" @click="toCoursePublish"/>
					<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon2" title="已发布的课程" link="navigateTo" @click="coursePublished"/>
					<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon2" title="已收藏的课程" link="navigateTo" @click="collectCourses"/>
				</uni-list>
			</uni-section>
			<uni-section title="学员" titleColor="#4cd964" type="line">
				<uni-list>
					<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon3" title="发布新的需求" link="navigateTo" @click="toNeedPublis"/>
					<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon3" title="已发布的需求" link="navigateTo" @click="Published"/>
					<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon3" title="已收藏的需求" link="navigateTo" @click="collectStuNeeds"/>
				</uni-list>
			</uni-section>
			<uni-section title="投诉与建议" titleColor="#7E7AF8" type="line">
				<uni-list>
					<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon4" title="我的建议" link="navigateTo" @click="toMySuggestion"/>
					<uni-list-item :show-extra-icon="true" showArrow :extra-icon="extraIcon4" title="我的投诉" link="navigateTo" @click="toMyComplaint"/>
				</uni-list>
			</uni-section>
			<uni-list-item v-if="isAdmin" :show-extra-icon="true" showArrow :extra-icon="extraIcon5" title="管理员专用" link="navigateTo" @click="toManager"/>
		</uni-list>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	
	export default {
		name:"my-userinfo",
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		computed: {
			...mapState('m_user', ['userinfo'])
		},
		data() {
			return {
				isAdmin: false,
				OfficialAccountextraIcon: {
					color: '#2BAFF8',
					size: '22',
					type: 'star-filled'
				},
				MyShareextraIcon: {
					color: '#FB748F',
					size: '22',
					type: 'pyq'
				},
				MyOrderextraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'fire-filled'
				},
				extraIcon1: {
					color: '#2BAFF8',
					size: '22',
					type: 'email-filled'
				},
				extraIcon2: {
					color: '#FB748F',
					size: '22',
					type: 'auth-filled'
				},
				extraIcon3: {
					color: '#4cd964',
					size: '22',
					type: 'staff-filled'
				},
				// 投诉与建议
				extraIcon4: {
					color: '#7E7AF8',
					size: '22',
					type: 'help-filled'
				},
				extraIcon5: {
					color: '#F1D302',
					size: '22',
					type: 'eye-filled'
				}
			}
		},
		created() {
			this.isAdmin = this.userinfo.isAdmin === 1 ? true : false
		},
		methods: {
			toMyDetail() {
				uni.navigateTo({
					url: '/subpkg/my/user/my_user_detail'
				})
			},
			toOfficialAccount(){
				uni.navigateTo({
					url:'/subpkg/my/official_account/my_official_account'
				})
			},
			toMyShare(){
				uni.navigateTo({
					url: '/subpkg/my/share/my_share'
				})
			},
			toMyOrder() {
				uni.navigateTo({
					url: '/subpkg/my/order/my_order'
				})
			},
			sendInvitation() {
				uni.navigateTo({
					url: '/subpkg/my/invitation/my_invitation_send'
				})
			},
			receivedInvitation() {
				uni.navigateTo({
					url: '/subpkg/my/invitation/my_invitation_receive'
				})
			},
			collectStuNeeds() {
				uni.navigateTo({
					url: '/subpkg/student/require/student_require_my_collect'
				})
			},
			collectCourses() {
				uni.navigateTo({
					url: '/subpkg/teacher/course/teacher_course_my_collect'
				})
			},
			authorize() {
				uni.navigateTo({
					url: '/subpkg/teacher/authentication/teacher_authentication'
				})
			},
			toCoursePublish() {
				uni.navigateTo({
					url: '/subpkg/teacher/course/teacher_course_add'
				})
			},
			coursePublished() {
				uni.navigateTo({
					url: '/subpkg/teacher/course/teacher_course_my_publish'
				})
			},
			toNeedPublis() {
				uni.navigateTo({
					url: '/subpkg/student/require/student_require_add'
				})
			},
			Published() {
				uni.navigateTo({
					url: '/subpkg/student/require/student_require_my_publish'
				})
			},
			toMySuggestion() {
				uni.navigateTo({
					url: '/subpkg/my/suggestion/my_suggestion'
				})
			},
			toMyComplaint() {
				uni.navigateTo({
					url: '/subpkg/my/complaint/my_complaint'
				})
			},
			toManager() {
				uni.navigateTo({
					url:'/subpkg/manager/manager',
				})
			}
		}
	}
</script>

<!-- 设置页面背景 -->
<style lang="scss">
	page{
		height: 100%;
		// background-color: #FFF;
	}
</style>

<style lang="scss" scoped>
// 用户头像
::v-deep .uni-card--border {
	height: 240rpx;
}

::v-deep .uni-card .uni-card__header .uni-card__header-avatar {
	height: 200rpx;
	width: 200rpx;
}

::v-deep .uni-card .uni-card__header .uni-card__header-avatar .uni-card__header-avatar-image {
	height: 200rpx !important;
	width: 200rpx !important;
}

::v-deep .uni-card .uni-card__header .uni-card__header-content .uni-card__header-content-title {
	font-size: 60rpx !important;
}

::v-deep .uni-card .uni-card__header .uni-card__header-extra .uni-card__header-extra-text {
	font-size: 60rpx !important;
}

::v-deep .uni-list-item {
	font-size: 20px !important;
	height: 50px;
}
</style>