Case_Collection_System/code/h5/pages/phone/mine/index.vue

<template>
	<view class="mine-container">
		<!-- 面包屑 -->
		<custom-breadcrumb separator=">">
			<custom-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to" :switch="true">
				{{route.name}}
			</custom-breadcrumb-item>
		</custom-breadcrumb>
		<!-- 面包屑 -->
		<view class="content">
			<!--个人信息-->
			<view class="person-info flex">
				<image v-if="avatar" :src="avatar" class="cu-avatar xl round" mode="widthFix" />
				<view class="info flex flex-direction justify-between">
					<view>{{name}}</view>
					<view>{{ loginIdentity | loginIdentity}}</view>
				</view>
			</view>
			<!--个人信息-->
			<!-- 通知区域 -->
			<view class="message-content">
				<view class="flex justify-between align-center">
					<view class="message-title">通知</view>
					<view class="flex" @click="handleToMessage">
						<view class="message-all">全部</view>
						<u-icon name="arrow-right" style="margin-left: 8rpx;" size="12px"></u-icon>
					</view>
				</view>

				<view class="message-list">
					<view class="message-empty" v-if="!messageList || messageList.length == 0">
						没有任何消息哦
					</view>
					<view v-else @click="handleToMessage">
						<view class="message-item flex align-center" v-for="(item, index) in messageList.slice(0,4)" :key="index">
							<image mode="heightFix" v-if="item.businessStatus == '3'||item.businessStatus == '4'" src="@/static/images/notice_person.png"></image>
							<image v-else src="/static/images/message_case_icon.png"></image>
							<view style="margin-left: 8rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.messageContent}}</view>
							<view style="margin-left: 8rpx;flex: 1;text-align: start;white-space: nowrap;"
								:class="getClass(item.businessStatus)">{{item.businessStatus | status}}</view>
							<u-icon name="arrow-right" size="12px"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 通知区域 -->
			<view class="menu-list-content">
				<view class="menu-item" @click="toVolunteer">
					<image src="/static/images/volunteer.png"></image>
					<view class="menu-item-title">{{ loginIdentity == 0 ? '志愿者管理' : '医生管理' }}</view>
					<u-icon name="arrow-right" size="12px"></u-icon>
				</view>
				<view class="menu-item" @click="handleToSetting">
					<image src="/static/images/faceback.png"></image>
					<view class="menu-item-title">意见反馈</view>
					<u-icon name="arrow-right" size="12px"></u-icon>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import {
		getMessageList,
	} from '@/api/my/my.js'
	var elementIcon = document.getElementsByClassName('uni-tabbar__icon')
	export default {
		data() {
			return {
				name: '',
				loginIdentity: '',
				routes: [{
					to: "/pages/phone/mine/index",
					name: "个人中心",
				}, ],
				messageList: [],
			}
		},
		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
		},
		filters: {
			status(type) {
				let tempStr = '未知'
				switch (type) {
					case '0':
						tempStr = '审核通过'
						break
					case '1':
						tempStr = '审核未通过'
						break
					case '2':
						tempStr = '已美化'
						break
					case '3':
						tempStr = '完成绑定'
						break
					case '4':
						tempStr = '解除绑定'
						break
					case '5':
						tempStr = '已点评'
						break
					case '6':
						tempStr = '解析申请通过'
						break
					case '7':
						tempStr = '解析申请未通过'
						break
					case '8':
						tempStr = '解析完成'
						break
				}
				return tempStr
			},
			loginIdentity(type){
				//0医生 1志愿者 2专家
				if(type === '0'){
					return '医生'
				}else if(type === '1'){
					return '志愿者'
				}else if(type === '2'){
					return '专家'
				}else{
					return '未知'
				}
			}
		},
		onLoad() {
			this.name = this.$store.state.user.nickName
			this.loginIdentity = this.$store.state.user.loginIdentity
			this.getMessageList()
		},
		onShow() {
			elementIcon[0].className = 'uni-tabbar__icon '
			elementIcon[2].className = 'uni-tabbar__icon icons-tabbar-custom'
			this.getMessageList()
		},
		methods: {
			getMessageList() {
				getMessageList().then(res => {
					if (res.code == 200) {
						this.messageList = res.data
					}
				})
			},
			getClass(type) {
				//0审核通过 1审核未通过 2已美化 3完成绑定 4解除绑定
				if (type == 0) {
					return 'color_green'
				} else if (type == 1) {
					return 'color_red'
				} else if (type == 1) {
					return 'blue'
				}
			},
			handleToSetting() {
				// this.$tab.navigateTo('/pages/phone/mine/setting/index')
				this.$tab.navigateTo('/pages/phone/mine/faceback/index')
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			handleToMessage() {
				if (!this.messageList || this.messageList.length == 0) {
					return
				}
				uni.navigateTo({
					url: '/pages/phone/mine/message/index'
				})
				// this.$tab.navigateTo('/pages/phone/mine/message/index')
			},
			handleItemClick(){

			},
			// 去志愿者管理页面
			toVolunteer(){
				uni.navigateTo({
					url: '/pages/phone/mine/volunteer/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F7F8FA;
	}

	.mine-container {
		width: 100%;
		height: 100%;

		.content {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			padding: 60rpx 32rpx;

			.person-info {
				height: 128rpx;

				.info {
					padding: 14rpx 32rpx;

					view:nth-child(1) {
						font-size: 40rpx;
						font-weight: 600;
						color: #1D2129;
					}

					view:nth-child(2) {
						font-size: 28rpx;
						font-weight: 400;
						color: #86909C;
					}
				}
			}

			.message-content {
				background: #fff;
				padding: 24rpx;
				border-radius: 16rpx;
				margin-top: 32rpx;

				.message-title {
					color: #1D2129;
					font-size: 32rpx;
					font-weight: 600;
				}

				.message-all {
					color: #86909C;
					font-size: 26rpx;
				}

				.message-list {
					min-height: 84rpx;
					box-sizing: border-box;
					padding: 8rpx 20rpx;
					border-radius: 12rpx;
					background: #F7F8FA;
					margin-top: 16rpx;

					.message-empty {
						text-align: center;
						line-height: 84rpx;
						color: #4E5969;
						font-size: 28rpx;
					}

					.message-item {
						box-sizing: border-box;
						padding: 12rpx 0px;
						//height: 68rpx;
						font-size: 28rpx;
						color: #4E5969;

						image {
							width: 28rpx;
							height: 28rpx;
						}
					}
				}
			}

			.menu-list-content {
				margin-top: 32rpx;

				.menu-item {
					width: 100%;
					height: 112rpx;
					box-sizing: border-box;
					padding: 24rpx 0rpx;
					display: flex;
					align-items: center;

					image {
						width: 64rpx;
						height: 64rpx;
					}

					.menu-item-title {
						flex: 1;
						text-align: start;
						font-size: 30rpx;
						color: #1D2129;
						font-weight: 600;
					}


				}
			}

		}

		.color_green {
			color: #00B42A;
		}

		.color_red {
			color: #F53F3F;
		}

		.color_blue {
			color: #FB7299;
		}

		/deep/ .uni-popup{
			z-index: 1000;
		}

	}
</style>