ErectionPlatform/pages/user/user.vue

<template>
	<!-- 背景图 -->
	<image class="userbg" src="../../static/userbg.png" mode=""></image>


	<view class="main_user">
		<!-- 页面标题 -->
		<view class="title">个人中心</view>

		<!-- 用户信息 -->
		<view class="userInfo align-center">
			<view class="headPortrait">
				<image src="@/static/appIcon/favicon.png" mode=""></image>
			</view>

			<view class="title">
				<view class=" text-start" style="font-size: 1.25rem;">
					{{details.userInfo.name}}
				</view>

				<view class="mt20 text-start line" @click="handleChangeRole" style="font-size: 0.8rem;">
					{{details.userInfo.role_name}}
				</view>
			</view>
		</view>

		<!-- 控件 -->
		<scroll-view class="controlCenter" :style="{height: details.scrollheight}" @scrolltolower="()=>{}" scroll-y="true"
			@touchmove.stop>
			<block v-for="(item, index) in details.controlList" :key="item.label">
				<view class="flex-c-sb controlCenter_row" @click="item.clickFn()">
					<view class="flex-c-c">
						<image :src="item.icon" mode=""></image>

						<text class="fwb">{{item.label}}</text>
					</view>


					<u-icon name="arrow-right" color="#afb5be" size="36"></u-icon>
				</view>
			</block>

			<view class="button flex-c-c" @click="handleLoginOut">
				退出登录
			</view>
		</scroll-view>
	</view>

	<!-- 提示组件 -->
	<tiplist ref="tiplists"></tiplist>
	<tips ref="tip"></tips>

	<MyDrawer ref="drawerByLogin">
		<template #content>
			<picker-view v-if="details.visible" :indicator-style="details.indicatorStyle" :immediate-change="true"
				:value="details.value" @change="(e)=> details.value = e.detail.value" class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item, index) in details.roleChooseList" :key="index">
						{{ item.label }}
					</view>
				</picker-view-column>
			</picker-view>
		</template>
	</MyDrawer>
</template>

<script lang="ts" setup>
	import { reactive, ref, toRefs, nextTick } from "vue";
	import {
		onShow,
		onLoad,
		onHide,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import utils from '@/utils/utils.js'
	import { useStore } from 'vuex';

	const tiplists = ref(null)
	const tip = ref(null)
	// 选择角色
	const drawerByLogin = ref()

	const $store = useStore()

	let details = reactive({
		/** 滚动区页面高度 */
		scrollheight: '40vh',
		/** 控件列表 */
		controlList: [
			// 任务中心
			{
				label: '任务中心',
				icon: '../../static/renwu.png',
				isShow: true,
				clickFn() {
					uni.navigateTo({
						url: '/pagesUser/pages/InstallTaskList/InstallTaskList'
					})
				}
			},
			// 售后服务
			{
				label: '售后服务',
				icon: '../../static/shouhou.png',
				isShow: true,
				clickFn() {
					uni.navigateTo({
						url: '/pagesUser/pages/InstallAfterSalesTaskList/InstallAfterSalesTaskList'
					})
				}
			},
			// 待审核
			{
				label: '待审核',
				icon: '../../static/shenhe.png',
				isShow: true,
				clickFn() {
					uni.navigateTo({
						url: '/pagesUser/pages/ToBeReviewed/ToBeReviewed'
					})
				}
			},
			// 设置
			{
				label: '设置',
				icon: '../../static/shezhi.png',
				isShow: true,
				clickFn() { }
			},
			// 修改密码
			{
				label: '修改密码',
				icon: '../../static/xiugai.png',
				isShow: true,
				clickFn() {
					uni.navigateTo({
						url: '/pagesUser/pages/changePassword/changePassword'
					})
				}
			},
		],
		// 角色选择list
		roleChooseList: [],
		// 默认选择第一个
		value: [0],
		visible: false,
		/** picker行高度 */
		indicatorStyle: `height: 40px;`,
		userInfo: uni.getStorageSync('userInfo') || {}
	})
	onShow(async () => {
		await nextTick()
		details.scrollheight = await utils.getViewDistanceFormTop('.controlCenter')

	})

	// 下拉刷新
	onPullDownRefresh(() => {
		const timer = setTimeout(() => {
			// 关闭刷新动画
			uni.stopPullDownRefresh()
			clearTimeout(timer)
		}, 500)
	})


	/** 退出登录 */
	const handleLoginOut = () => {
		$store.commit('HANDLE_CLEAR_INFO')

		uni.reLaunch({
			url: '/pages/login/login'
		})
	}


	/** 关闭弹窗 */
	const hidePopUp = (node) => {
		details.visible = false
		node.value.details.showPopUp = false
	}

	/** 切换角色 */
	const handleChangeRole = () => {
		const userInfo = details.userInfo

		console.log('userInfo :>> ', userInfo);


		console.log('$store :>> ', $store);

		const { role } = details.userInfo

		const _roleArr = $store.state.roleList

		details.roleChooseList = []

		for (let i = 0; i < role.length; i++) {
			const value = role[i]

			for (let i = 0; i < _roleArr.length; i++) {
				const item = _roleArr[i]

				if (item.value !== (value + '')) continue
				details.roleChooseList.push(item)
				break
			}
		}

		details.visible = true
		drawerByLogin.value.setDetails({
			showPopUp: true,
			height: '50vh',
			success() {
				const _value = details.roleChooseList[details.value[0]]

				console.log('_value :>> ', _value);

				details.userInfo.role_code = _value.value
				details.userInfo.role_name = _value.label

				$store.commit('HANDLE_UPDATA_USERINFO', details.userInfo)
				$store.commit('HANDLE_UPDATE_ISLOGIN', true)

				hidePopUp(drawerByLogin)
			},
			close() {
				hidePopUp(drawerByLogin)
			}
		})
	}
</script>

<style lang="scss">
	@import url("@/utils/style/common.scss");

	// 背景
	.userbg {
		width: 100vw;
		position: absolute;
		top: 0;
		left: 0;
	}

	// 页面主容器
	.main_user {
		position: relative;
		z-index: 10;

		// 页面标题
		.title {
			text-align: center;
			color: #fff;
			padding: 60upx 0;
			font-weight: bold;

			.line {
				padding-bottom: 10upx;
				border-bottom: 1upx solid #fff;
			}
		}

		// 用户信息
		.userInfo {
			padding: 0 20upx;

			$imgWidth: 150upx;

			// 头像
			.headPortrait {
				background: #fff;
				width: $imgWidth;
				height: $imgWidth;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 40upx;

				image {
					width: $imgWidth;
					height: $imgWidth;
				}
			}
		}

		// 控件中心
		.controlCenter {
			margin-top: 60upx;
			padding: 40upx 20upx 0;
			background-color: #fff;
			min-height: 50vh;
			border-top-right-radius: 40upx;
			border-top-left-radius: 40upx;
			width: 100vw;
			box-sizing: border-box;

			.controlCenter_row {
				border-bottom: 2upx solid #eee;
				padding: 24upx 0;

				image {
					width: 48upx;
					height: 48upx;
					margin-right: 40upx;
				}
			}
		}

		// 退出按钮
		.button {
			height: 80upx;
			width: 80vw;
			color: #fff;
			background-color: var(--subjectColor);
			margin: 40upx auto 0;
			border-radius: 40upx;
		}
	}
</style>