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 @click="handleAvatarClick" :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>
								<!-- 只有当showRoleSwitch为true时才显示切换权限按钮 -->
								<view class="identity" v-if="$store.state.user.showRoleSwitch" @click="handleSwitchRole">切换权限</view>
							</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" v-if="isCrmRole">
					<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/order/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="cards_wrap">
				<cards></cards>
			</view>
		</template>
		<u-loading-page :loading="true" v-else></u-loading-page>
		<u-picker :show="showSwitchRole" :columns="columns" keyName="label" :defaultIndex="defaultIndex" @confirm="confirmSwitchRole" @cancel="showSwitchRole = false"></u-picker>
	</view>
</template>

<script>
import cards from "./cards/index.vue"
// import optionList from "./option/index.vue"
import permision from "@/js_sdk/wa-permission/permission.js";
import { getRoles } from '@/utils/util.js'
export default {
	components: {
		// optionList,
		cards
	},
	data() {
		return {
			onlineLoading: false,
			switchSystemShow: false,
			navbarInitTop: 0, //导航栏初始化距顶部的距离
			isFixedTop: true, //是否固定顶部
			background: "", // 为了实现渐变背景颜色
			showSwitchRole: false,
			columns: [],
			defaultIndex: [this.$store.state.user.currentRoleIndex],
			isHaveCRM: false,
			isHaveSalesman: false,
			isHaveWarehouse: false,
		};
	},
	computed: {
		isCrmRole(){
			return getRoles().some(v => v.includes('CRM'))
		},
		userInfo() {
			return this.$store.state.user.userInfo;
		},
		onlineStatus: {
			get() {
				const val = this.$store.state.user.userInfo.onlineStatus;
				// u-switch 要求 v-model 的值必须等于 activeValue 或 inactiveValue
				// 这里统一返回字符串 '0' 或 '1'，避免初始为 null/undefined 时的告警
				if (val === '0' || val === 0) return '0';
				if (val === '1' || val === 1) return '1';
				return '1';
			},
			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: {
		handleSwitchRole(){
			this.columns = [];
			let roles = this.$store.state.user.availableRoles;
			let roleOptions = [];
			
			const hasAdminRole = roles.some(role => role.includes('admin'));
			const hasCrmRole = roles.some(role => role.includes('CRM'));
			const hasWAREandSALE = roles.some(role => role.includes('WAREandSALE'));
			if(hasAdminRole || (hasCrmRole && hasWAREandSALE) ){//管理员、crm+仓库、crm+销售、仓库+销售
				roleOptions.push(
					{ label: 'CRM权限', value: 'CRM' },
					{ label: '仓库和销售权限', value: 'WAREandSALE' },
				);
			}else if(hasCrmRole){//只有crm	
				roleOptions.push(
					{ label: 'CRM权限', value: 'CRM' },
				);
			}else if(hasWAREandSALE){//只有仓库或销售
				roleOptions.push(
					{ label: '仓库和销售权限', value: 'WAREandSALE' },
				);
			}
			
			this.columns = [roleOptions];
			this.showSwitchRole = true;
		},
		confirmSwitchRole(e) {
			this.showSwitchRole = false;
			this.$store.commit('user/SET_CURRENT_ROLE_INDEX', e.indexs[0]);
			setTimeout(()=>{
				this.$store.commit('user/SWITCH_ROLE', e.value[0]);
			},50)
		},
		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");
						}
					})
				});
			}
		},
		handleAvatarClick() {
			//跳转个人资料
			uni.navigateTo({
				url: "/pages/profile/index"
			})
		}
	},
	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;
				}
			}
		}

		.cards_wrap {
			padding: 0 30rpx 0 30rpx;
		}

		.box {
			height: 200vh;
		}

		.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>