hospital-accompaniment-wechat/pages/tabBar/mine.vue

<template>
	<!-- :class="{noVip : noVip}" -->
	<view class="my-box">
		<!-- <u-navbar leftIcon=" " titleStyle="font-size:36rpx;line-height: 36rpx;font-weight:bold;"
			:bgColor="noVip ? '#fff' : '#FACA2E'" title="我的" placeholder="">
		</u-navbar> -->

		<view class="user-top-box">
			<view class="user-info-box">
				<view class="info-box-l">
					<view class="img-box">
						<u-avatar :src="userInfo.avatar || defaultImg" size="121rpx" mode="aspectFill"></u-avatar>
					</view>
					<view class="info-r">
						<span class="name" v-if="isLogin" @click="toUserInfo">{{userInfo.nickname || '-'}}</span>
						<span class="name" v-else @click="toLogin">登录/注册</span>
					</view>
				</view>

			</view>

		</view>

		<view class="func-box">
			<view class="func-item" @click="toPath('/pages/mine/patient/patient')">
				<view class="func-item-l">
					<image class="icon" src="/static/my/icon-01.png" mode="aspectFill"></image>
					<span class="name">就诊人信息</span>
				</view>
				<view class="func-item-r">
					<image class="icon" src="/static/my/right.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="func-item">
				<button open-type="contact" class="btn">
					<view class="func-item-l">
						<image class="icon" src="/static/my/icon-02.png" mode="aspectFill"></image>
						<span class="name">微信客服</span>

					</view>
					<view class="func-item-r">
						<image class="icon" src="/static/my/right.png" mode="aspectFill"></image>
					</view>
				</button>
			</view>
			<view class="func-item" @click="toPath('/pages/mine/helpCenter')">
				<view class="func-item-l">
					<image class="icon" src="/static/my/icon-03.png" mode="aspectFill"></image>
					<span class="name">帮助中心</span>
				</view>
				<view class="func-item-r">
					<image class="icon" src="/static/my/right.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="func-item" @click="toPath('/pages/mine/agreement?type=user_protocol')">
				<view class="func-item-l">
					<image class="icon" src="/static/my/icon-04.png" mode="aspectFill"></image>
					<span class="name">用户协议</span>
				</view>
				<view class="func-item-r">
					<image class="icon" src="/static/my/right.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<!-- 护工端和管理端 -->
		<view class="platform-box">
			<view class="platform-item" @click="toPath('/pages/workbench/caregiver', 'hugong')" v-if="userInfo.workerId">
				<image class="platform-img" src="/static/my/icon-04.png" mode="aspectFill"></image>
				<span class="platform-name">护工工作台</span>
			</view>
			<view class="platform-item" @click="toPath('/pages/workbench/manager', 'guanli')" v-if="userInfo.teacherId">
				<image class="platform-img" src="/static/my/icon-03.png" mode="aspectFill"></image>
				<span class="platform-name">管理老师工作台</span>
			</view>
		</view>
		<view class="logout-btn" v-if="isLogin">
			<span class="btn" @click="logOut">退出登录</span>
		</view>
	</view>
</template>

<script>
	import {
		UserInfo
	} from "@/utils/tools.js"
	export default {
		data() {
			return {
				defaultImg: require('@/static/default-head-photo.png'),
				// defaultImg: this.getImgSrc('shop/pro.jpg'),
				// more3: this.getImgSrc('my/more_3.png'),
				userInfo: {},

				funcList: [
					// {
					// 	icon: this.getImgSrc('my/icon-1.png'),
					// 	name: '会员礼包',
					// },
					// {
					// 	icon: this.getImgSrc('my/icon-2.png'),
					// 	name: '会员折扣',
					// },
					// {
					// 	icon: this.getImgSrc('my/icon-3.png'),
					// 	name: '极速派单',
					// },
					// {
					// 	icon: this.getImgSrc('my/icon-4.png'),
					// 	name: '专属客服',
					// },
				],
				// bgImg: this.getImgSrc('my/bg-b.png'),
				// bgImg2: this.getImgSrc('my/bg-s.png'),
				// bgImg3: this.getImgSrc('my/w-bg.png'),
				noVip: false,
				isWork: false,
				accountBalance: '',
				isLogin: false,
				// text: '无头像'
			};
		},
		onLoad() {
			// if (this.$util.getStorageKey('accessToken')) {
			// 	this.isLogin = true;
			// }
			// uni.$on('login', () => {
			// 	this.isLogin = false;
			// 	this.init();
			// })
		},
		onUnload() {
			// 移除监听事件  
			uni.$off('login');
		},
		onShow() {
			this.$nextTick(() => {
				this.init();
			})
		},
		methods: {
			//初始化
			init() {
				this.getUser();
				// this.getStoreUserInfo();
			},

			toPath(path,type) {
				uni.setStorageSync('patientType', 'mine')
				uni.navigateTo({
					url: path
				})
				if(type){
					uni.setStorageSync('roleType', type)
				}
			},

			toLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},

			logOut() {
				uni.showModal({
					title: '提示',
					content: '确认是否退出？',
					success: (e) => {
						if (e.confirm) {
							uni.showLoading({
								title: '退出中'
							});
							uni.removeStorageSync('apiToken')
							uni.removeStorageSync('USER_INFO')
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/tabBar/index'
								})
							}, 1000);
						}
					}
				});
			},

			toPage(path) {
				if (!path) {
					uni.$u.toast('暂未开放,敬请期待');
					return
				}
				if (path == '/pages/address/list') {
					this.$util.setStorageKey('addressType', 'my')
				}
				uni.navigateTo({
					url: path
				})
			},

			toMember() {
				uni.navigateTo({
					url: '/pages/user/member'
				})
			},

			toApply() {
				uni.switchTab({
					url: '/pages/tabBar/case'
				})
			},
			toOrderList(item) {
				if (item.value != '100') {
					uni.navigateTo({
						url: `/pages/mineOrders/list?type=${item.value}`
					})
				} else {
					uni.$u.toast('暂未开放,敬请期待');
				}
			},

			toAllOrder() {
				uni.navigateTo({
					url: '/pages/mineOrders/list'
				})
			},

			toUserInfo() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/user/info'
					})
				} else {
					uni.navigateTo({
						url: '/pages/login/quickLogin'
					})
				}
			},

			onPullDownRefresh() {
				console.log('下拉刷新回调函数');
				this.init();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},

			//查询门店账户余额
			// getStoreUserInfo() {
			// 	let that = this;
			// 	that.$http
			// 		.get(`/api/storeUserAccount/info/${that.$util.getStorageKey('storeInfo').id}`)
			// 		.then((res) => {
			// 			let data = res.data;
			// 			if (data) {
			// 				this.accountBalance = data.accountBalance;
			// 			}
			// 		})
			// 		.catch((err) => {});
			// },

			// 获取用户信息
			async getUser() {
				UserInfo().then(res => {
					this.userInfo = res;
					if (this.userInfo) {
						this.isLogin = true;
					} else {
						this.isLogin = false;
					}
				}).finally(() => {
					uni.stopPullDownRefresh();
				})
				// this.noVip = this.userInfo.type == 0 ? true : false;
			},

			// 跳转会员
			jumpMember() {
				uni.navigateTo({
					url: '/pages/handleMember/memberPage',
				});
			},
			//去充值页面
			toVoucher() {
				uni.navigateTo({
					url: '/pages/voucherCenter/voucher',
				});
			},

			//下拉刷新回调函数
			onPullDownRefresh() {
				// wx.setStorageSync('isChangeBanner', true);
				this.init();
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},

		},
	};
</script>

<style lang="scss" scoped>
	.my-box {
		display: flex;
		flex-direction: column;
		background-color: #fff;
		min-height: 100%;
		overflow: hidden;
		padding: 0 30rpx;

		.user-top-box {
			display: flex;
			flex-direction: column;
			padding: 50rpx 0;
			// background-color: #046EB8;

			.user-info-box {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.info-box-l {
					display: flex;
					align-items: center;

					.info-r {
						display: flex;
						flex-direction: column;
						margin-left: 25rpx;

						.name {
							display: inline-flex;
							font-size: 36rpx;
							// margin-top: 21rpx;
							height: 36rpx;
							line-height: 36rpx;
							justify-content: center;
							font-weight: bold;
							// background-color: #FFF9D9;
							// color: #B16E55;
							// border-radius: 50rpx;
						}
					}
				}

				.info-box-r {
					display: flex;
					align-items: center;
					border-top-left-radius: 50rpx;
					border-bottom-left-radius: 50rpx;
					// background-color: #055B96;
					height: 60rpx;
					padding-left: 40rpx;

					.txt {
						font-size: 26rpx;
						// font-weight: bold;
					}

					image {
						width: 25rpx;
						height: 25rpx;
						margin: 0 20rpx
					}
				}
			}

		}

		.func-box {
			padding: 30rpx 0;
			box-shadow: 0rpx 0rpx 20rpx #f1f1f1;
			border-radius: 20rpx;

			.func-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 0 20rpx;
				height: 100rpx;
				border-bottom: 1rpx solid #F1F1F1;

				&:last-child {
					border-bottom: none;
				}

				.func-item-l {
					display: flex;
					align-items: center;

					.icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}

					.name {
						font-size: 30rpx;
					}
				}

				.func-item-r {
					display: flex;
					align-items: center;

					.icon {
						width: 14rpx;
						height: 22rpx;
					}
				}

				button {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					border: none;
					margin: 0;
					padding: 0;
					outline: none;
					border-radius: 0;
					background-color: transparent;
					line-height: normal;
					font-size: 30rpx;
					color: #1a1a1a;
				}

				button::after {
					border: none;
				}
			}
		}

		.platform-box {
			display: flex;
			flex-direction: column;
			margin-top: 40rpx;

			.platform-item {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 40rpx 0;
				border-radius: 20rpx;
				box-shadow: 0rpx 0rpx 20rpx #f1f1f1;
				margin-bottom: 30rpx;

				.platform-img {
					width: 70rpx;
					height: 70rpx;
					margin-right: 20rpx;

				}

				.platform-name {
					font-size: 36rpx;
					color: #1a1a1a;
					font-weight: bold;
				}
			}


		}

		.logout-btn {
			.btn {
				display: block;
				width: 690rpx;
				height: 91rpx;
				line-height: 91rpx;
				color: #FF0F0F;
				font-size: 32rpx;
				border-radius: 45rpx;
				margin: 0 auto;
				margin-top: 63rpx;
				border: 1rpx solid #FF0000;
				text-align: center;
			}
		}
	}
</style>