crm-app-vue3/pages/person/index.vue

<template>
	<view class="person_wrap">
		<template v-if="userInfo.userId">
			<view class="navbar-wrap">
				<view class="column" :class="{fixed : isFixedTop}" :style="{background: background}" id="navbar">
					<view class="left"></view>
					<view style="font-size:36rpx" class="center">我的</view>
					<view class="right" @click="handleSetting">
						<u-icon name="setting" color="#333"></u-icon>
					</view>
				</view>
				<!-- <view class="column" v-if="isFixedTop"></view> -->
			</view>
			<view class="header_wrap">
				<view class="header_top_wrap">
					<view class="header_info_left">
						<u-avatar :src="$avatar(userInfo.avatar)" size="100rpx"></u-avatar>
						<view class="info_wrap">
							<view class="info_top">
								<text class="follow_name">{{userInfo.userName}}</text>
								<u-switch v-model="onlineStatus" active-value='0' inactive-value='1' :loading="onlineLoading" @change="changeOnlineStatus"></u-switch>
								<text class="identity">{{ onlineStatus === '0' ? '上线' : '下线' }}</text>
							</view>
							<view class="info_bottom">
								<text>{{userInfo.phonenumber}}</text>
							</view>
						</view>
					</view>
					<view class="header_info_right"  @click="toPersonal">
						<u-icon name="arrow-right" color="#aaa"></u-icon>
					</view>
				</view>
				<view class="parson_menu_wrap">
					<view class="parson_menu_list">
						<navigator url="/pages/publicClue/index" open-type="switchTab" class="menu_item" hover-class="none">
							<image src="@/static/parson/icon-wf.png" mode=""></image>
							<text>销售公海</text>
						</navigator>
						<navigator url='/pages/message/index' open-type="navigate" class="menu_item" hover-class="none">
							<image src="@/static/parson/icon-myMessage.png" mode=""></image>
							<text>我的消息</text>
						</navigator>
						<navigator url='/pages/profile/index' open-type="navigate" class="menu_item" hover-class="none">
							<image src="@/static/parson/icon-mycase.png" mode=""></image>
							<text>个人资料</text>
						</navigator>
						<navigator url='/pages/privateClue/index' open-type="switchTab" class="menu_item" hover-class="none">
							<image src="@/static/parson/clue.png" mode=""></image>
							<text>销售线索</text>
						</navigator>
					</view>
				</view>
			</view>
			<view class="secondHalf">
				<option-list></option-list>
			</view>
		</template>
		<u-loading-page :loading="true" v-else></u-loading-page>
	</view>
</template>

<script>
	import optionList from "./option/index.vue"
	import permision from "@/js_sdk/wa-permission/permission.js";
	export default {
		components: {
			optionList
		},
		data() {
			return {
				onlineLoading : false,
				switchSystemShow: false,
				navbarInitTop: 0, //导航栏初始化距顶部的距离
				isFixedTop: true, //是否固定顶部
				background: "", // 为了实现渐变背景颜色
			};
		},
		computed: {
			userInfo(){
				return this.$store.state.user.userInfo;
			},
			onlineStatus : {
			  get(){
			    return this.$store.state.user.userInfo.onlineStatus;
			  },
			  set(val){
			    this.$store.commit("user/SET_USER_ONLINE_STATUS",val);
			  },
			},
			nickName(){
				return this.userInfo.nickName;
			},
			userName(){
				return this.userInfo.userName;
			},
			deptName(){
				return this.userInfo.newOrgName;
			},
			time(){
				return this.$dayjs().format("YYYY-MM-DD HH:mm:ss")
			},
			systemList(){
				return this.$store.state.user.systemList;
			},
			filterSystemList() {
				return this.systemList.filter(v => this.userInfo.subsystemList.some(u => v.value === u.systemCode));
			},
			currentSystem: {
				get() {
					return this.$store.getters.system.value
				},
				set(val) {
					const system = this.systemList.find(v => v.value === val);
					// 如果有没保存的催记直接清掉
					this.$store.commit("follow/SET_FORM", {});
					this.$store.commit("follow/SET_PARAMS", {});

					this.$store.commit("user/SET_SYSTEM", system);
					this.$store.commit("user/SET_BELONGSYSTEM", {
						code: val,
						callback: (flag) => {
							if (flag) {
								setTimeout(() => {
									// 定时器可加可不加 
									uni.reLaunch({
										url: "/pages/person/index",
										success: () => {
											uni.$u.toast("切换成功,当前为" + system.text);
										}
									})
								}, 300)
							} else {
								this.$store.commit("user/SET_TOKEN", "");
								this.$store.commit("user/SET_USERINFO", {});
								uni.reLaunch({
									url: "/pages/login/index",
									success() {
										uni.$u.toast("请检查您是否有该系统权限");
									}
								})
							}
						}
					})
				},
			},
		},
		methods: {
			changeOnlineStatus(val){
				this.onlineLoading = true;
				uni.$u.api.changeOnlineStatus({ userId: this.$store.state.user.userInfo.userId, onlineStatus : val });
				this.onlineLoading = false;
			},
			handleTest(){
				uni.navigateTo({
					url: "/pages/demo/demo"
				})
			},
			// 确认选择系统事件
			handleSystemConfirm() {

			},
			// 取消选择系统事件
			handleSystemCancel() {

			},
			// 点击打开选择系统
			handleSwitchSystem() {
				this.$refs.switch.showModal();
			},
			onPullDownRefresh() {
				uni.stopPullDownRefresh();
				this.$store.dispatch("user/getUserInfo");
			},
			toPersonal() {
				uni.navigateTo({
					url: "/pages/profile/index"
				})
			},
			handleSetting() {
				uni.navigateTo({
					url: "/pages/setting/index"
				})
			},
			registerFun() {
				if(!this.$store.state.app.callSystem){
					this.$store.dispatch("app/getExtensionByUserId", {
						userId: this.$store.state.user.userInfo.userId
					}).then((res) => {
						Promise.all([permision.requestAndroidPermission("android.permission.RECORD_AUDIO"),permision.requestAndroidPermission('android.permission.MODIFY_AUDIO_SETTINGS')]).then(result=>{
							const flag = result.every(v=>v == 1);
							if(flag){
								this.$store.dispatch("app/createWv");
							}
						})
					});
				}
			},
		},
		mounted() {
			if (this.navbarInitTop == 0) {
				const query = uni.createSelectorQuery().in(this);
				//获取节点距离顶部的距离
				query.select("#navbar").boundingClientRect(function(rect) {
					if (rect && rect.top > 0) {
						var navbarInitTop = parseInt(rect.top);
						this.navbarInitTop = navbarInitTop;
					}
				}).exec();
			}
			if(this.$store.state.user.token){
				this.$store.dispatch("user/getUserInfo");
			}else{
				uni.navigateTo({
					url: "/pages/login/index"
				})
			}
		},
		/**
		 * 监听页面滑动事件
		 */
		onPageScroll: function(e) {
			var scrollTop = parseInt(e.scrollTop); //滚动条距离顶部高度
			this.background = `rgba(255, 255, 255,${scrollTop / (scrollTop + 60)})`;
			//判断'滚动条'滚动的距离 和 '元素在初始时'距顶部的距离进行判断
			var isSatisfy = scrollTop >= this.navbarInitTop ? true : false;
			//为了防止不停的setData, 这儿做了一个等式判断。 只有处于吸顶的临界值才会不相等
			if (this.isFixedTop === isSatisfy) {
				return false;
			}
			this.isFixedTop = isSatisfy;
		}
	};
</script>
<style>
	.watermarkCans {
		width: 250rpx;
		height: 250rpx;
		position: absolute;
		z-index: -1;
	}
</style>
<style lang="scss" scoped>
	.switchSysytemSelect {
		height: 0rpx;
		overflow: hidden;
	}

	.switchSysytemBtn {
		width: 630rpx;
		margin: auto;
		margin-top: 60rpx;

		::v-deep .u-button {
			border-radius: 100rpx;
		}
	}

	.person_wrap {
		background-size: cover;
		background-repeat: no-repeat;
		// padding: 0 30rpx;
		position: relative;
		height: 100vh;

		.header_wrap {
			box-sizing: border-box;
			background: url("@/static/parson/parson_background.png");
			background-size: cover;
			width: 750rpx;
			// position: absolute;
			// top: 0;
			// left: 0;
			padding: 170rpx 30rpx 0 30rpx;

			.header_top_wrap {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.header_info_left {
					display: flex;
					align-items: center;

					// image {
					// 	width: 100rpx;
					// 	height: 100rpx;
					// 	margin-right: 30rpx;
					// 	border-radius: 50%;
					// }

					.info_wrap {
						margin-left: 20rpx;

						.info_top {
							margin-bottom: 20rpx;
							display: flex;
							align-items: center;

							.follow_name {
								font-size: 32rpx;
								color: #202020;
								font-weight: bold;
								margin-right: 20rpx;
							}

							.identity {
								display: inline-block;
								width: 100rpx;
								line-height: 36rpx;
								background: #ffffff;
								border-radius: 18px;
								text-align: center;
								font-size: 22rpx;
								color: #666666;
								margin-left: 10px;
							}
						}

						.info_bottom {
							text {
								font-size: 28rpx;
								color: #666666;
							}
						}
					}
				}

				.header_info_right {
					::v-deep .u-icon__icon {
						font-size: 30rpx !important;
					}
				}
			}

			.parson_menu_wrap {
				background: #ffffff;
				border-radius: 20px;
				box-shadow: 0px 4px 20px 0px rgba(16, 140, 255, 0.10);
				margin-top: 58rpx;

				.parson_menu_list {
					display: flex;
					padding: 40rpx 0;

					.menu_item {
						width: 33%;
						display: flex;
						flex-direction: column;
						align-items: center;

						image {
							width: 48rpx;
							height: 48rpx;
							margin-bottom: 24rpx;
						}

						text {
							font-size: 28rpx;
							color: #202020;
						}
					}
				}
			}

		}

		.secondHalf {
			padding: 0 30rpx;
		}

		.box {
			height: 200vh;
		}
	}

	.navbar-wrap {
		width: 750rpx;

		.left {
			width: 70rpx;
		}

		.right {
			margin-right: 30rpx;

			::v-deep .u-icon__icon {
				font-size: 40rpx !important;
			}
		}

	}

	.navbar-wrap .column {
		box-sizing: border-box;
		padding-top: 60rpx;
		width: 750rpx;
		height: 170rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: transparent;
		top: 0;
		left: 0;
		z-index: 100;
	}

	.navbar-wrap .column.fixed {
		width: 750rpx;
		position: fixed;
	}

	.navbar-wrap .column .center {
		text-align: center;
		font-size: 36rpx;
		color: #333333;
		letter-spacing: 1px;
		position: relative;
	}
</style>