ajy/code/ajyApp/pages/device/userManage/userManage.nvue

<template>
	<view class="page">
		<image class="content-bg" src="/static/device/devicebg.png" mode="scaleToFill"></image>
		<view class="pageContent">
			<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
			<view class="customHead">
				<view class="back-wrap" @click="goBack">
					<image src="/static/public/back.png" mode="aspectFill" class="backimg"></image>
				</view>
				<text class="customTitle">用户管理</text>
				<view class="plus" @click="addUser">
					<text class="plusTxt">+ 新增</text>
				</view>
			</view>
			<text class="tipTxt">最多可添加10个用户，点击卡片切换用户</text>
			<scroll-view class="userList" scroll-y="true">
				<view class="userCard" :class="{'curUserCard': item.id === currentUserId}" 
					v-for="(item, index) in userList" :key="item.id" @click="switchUser(item)">
					<view class="userInfo">
						<view class="avatarWrap">
							<text class="avatarTxt">{{item.name ? item.name.substring(0,1) : '用'}}</text>
						</view>
						<view class="infoDetail">
							<view class="nameRow">
								<text class="userName">{{item.name}}</text>
								<text class="userGender">{{item.gender === 1 ? '男' : '女'}}</text>
								<text class="userAge" v-if="item.age">{{item.age}}岁</text>
							</view>
							<view class="bodyRow">
								<text class="bodyTxt">肩高:{{item.shoulderHeight || '--'}}cm</text>
								<text class="bodyTxt">肩宽:{{item.shoulderWidth || '--'}}cm</text>
								<text class="bodyTxt">体重:{{item.weight || '--'}}kg</text>
							</view>
						</view>
					</view>
					<view class="cardBtns">
						<text class="editBtn" @click.stop="editUser(item)">编辑</text>
						<text class="deleteBtn" @click.stop="confirmDelete(item)">删除</text>
					</view>
					<view class="curTag" v-if="item.id === currentUserId">
						<text class="curTagTxt">当前</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 删除确认弹框 -->
		<customPopup :isShow="showDeletePopup" @closePop="showDeletePopup=false">
			<view class="deletePopContent">
				<text class="deleteTip">确定删除用户"{{deleteTarget ? deleteTarget.name : ''}}"？</text>
				<text class="deleteSub">删除后将无法恢复</text>
				<view class="deleteBtns">
					<view class="dBtn cancelBtn" @click="showDeletePopup=false">
						<text class="dBtnTxt">取消</text>
					</view>
					<view class="dBtn redBtn" @click="doDelete">
						<text class="dBtnTxt redTxt">确定删除</text>
					</view>
				</view>
			</view>
		</customPopup>

		<ay-toast ref="ayToast" />
	</view>
</template>

<script>
import customPopup from '@/components/customPopup/customPopup.nvue'
import ayToast from '@/components/ay-toast/ay-toast.nvue'

export default {
	components: {
		customPopup,
		ayToast
	},
	data() {
		return {
			statusBarHeight: 44,
			userList: [],
			currentUserId: '',
			showDeletePopup: false,
			deleteTarget: null
		}
	},
	onLoad() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
	},
	onShow() {
		this.loadUsers()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		/** 从本地存储加载用户列表 */
		loadUsers() {
			const list = uni.getStorageSync('user_manage_list') || []
			this.userList = list
			this.currentUserId = uni.getStorageSync('current_manage_user_id') || ''
			// 如果没有当前用户且列表不为空，默认选中第一个
			if (!this.currentUserId && list.length > 0) {
				this.currentUserId = list[0].id
				uni.setStorageSync('current_manage_user_id', this.currentUserId)
			}
		},
		/** 切换用户 */
		switchUser(item) {
			this.currentUserId = item.id
			uni.setStorageSync('current_manage_user_id', item.id)
			uni.setStorageSync('current_manage_user', item)
			this.$refs.ayToast.success('已切换至用户：' + item.name)
			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		},
		/** 新增用户 */
		addUser() {
			if (this.userList.length >= 10) {
				this.$refs.ayToast.error('最多可添加10个用户，请先删除其他用户')
				return
			}
			uni.navigateTo({
				url: '/pages/device/bodyParams/bodyParams?mode=add'
			})
		},
		/** 编辑用户 */
		editUser(item) {
			uni.navigateTo({
				url: '/pages/device/bodyParams/bodyParams?mode=edit&userId=' + item.id
			})
		},
		/** 确认删除 */
		confirmDelete(item) {
			if (this.userList.length <= 1) {
				this.$refs.ayToast.error('至少保留一个用户')
				return
			}
			this.deleteTarget = item
			this.showDeletePopup = true
		},
		/** 执行删除 */
		doDelete() {
			if (!this.deleteTarget) return
			const id = this.deleteTarget.id
			this.userList = this.userList.filter(u => u.id !== id)
			uni.setStorageSync('user_manage_list', this.userList)
			// 如果删除的是当前用户，切换到第一个
			if (this.currentUserId === id && this.userList.length > 0) {
				this.currentUserId = this.userList[0].id
				uni.setStorageSync('current_manage_user_id', this.currentUserId)
				uni.setStorageSync('current_manage_user', this.userList[0])
			}
			this.showDeletePopup = false
			this.deleteTarget = null
			this.$refs.ayToast.success('删除成功')
		}
	}
}
</script>

<style>
.page {
	flex: 1;
	position: relative;
}
.content-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 750rpx;
	height: 2000px;
}
.pageContent {
	flex: 1;
	background-image: linear-gradient(to bottom, rgba(56,149,136,1), rgba(56,149,136,0.5));
}
.status-bar {
	background-color: rgba(0,0,0,0);
}
.customHead {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 88rpx;
	padding-left: 30rpx;
	padding-right: 30rpx;
}
.back-wrap {
	width: 50rpx;
	height: 50rpx;
	justify-content: center;
	align-items: center;
}
.backimg {
	width: 50rpx;
	height: 50rpx;
}
.customTitle {
	font-weight: bold;
	font-size: 32rpx;
	color: #FFFFFF;
}
.plus {
	padding-left: 16rpx;
	padding-right: 16rpx;
	padding-top: 8rpx;
	padding-bottom: 8rpx;
	background-color: rgba(255,255,255,0.2);
	border-radius: 24rpx;
}
.plusTxt {
	font-size: 26rpx;
	color: #FFFFFF;
}
.tipTxt {
	font-size: 24rpx;
	color: rgba(255,255,255,0.7);
	margin-left: 38rpx;
	margin-top: 10rpx;
	margin-bottom: 20rpx;
}
.userList {
	flex: 1;
	padding-left: 30rpx;
	padding-right: 30rpx;
}
.userCard {
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 24rpx;
	position: relative;
	overflow: hidden;
}
.curUserCard {
	border-width: 2px;
	border-style: solid;
	border-color: #389588;
}
.userInfo {
	flex-direction: row;
	align-items: center;
}
.avatarWrap {
	width: 80rpx;
	height: 80rpx;
	border-radius: 80rpx;
	background-color: #389588;
	justify-content: center;
	align-items: center;
	margin-right: 20rpx;
}
.avatarTxt {
	font-size: 32rpx;
	color: #FFFFFF;
	font-weight: bold;
}
.infoDetail {
	flex: 1;
}
.nameRow {
	flex-direction: row;
	align-items: center;
	margin-bottom: 8rpx;
}
.userName {
	font-size: 30rpx;
	color: #333333;
	font-weight: bold;
	margin-right: 16rpx;
}
.userGender {
	font-size: 24rpx;
	color: #9BA5B7;
	margin-right: 12rpx;
}
.userAge {
	font-size: 24rpx;
	color: #9BA5B7;
}
.bodyRow {
	flex-direction: row;
}
.bodyTxt {
	font-size: 24rpx;
	color: #9BA5B7;
	margin-right: 20rpx;
}
.cardBtns {
	flex-direction: row;
	justify-content: flex-end;
	margin-top: 20rpx;
}
.editBtn {
	font-size: 26rpx;
	color: #389588;
	padding-left: 24rpx;
	padding-right: 24rpx;
	padding-top: 10rpx;
	padding-bottom: 10rpx;
	border-radius: 24rpx;
	background-color: #F0F8F7;
	margin-right: 20rpx;
}
.deleteBtn {
	font-size: 26rpx;
	color: #F65252;
	padding-left: 24rpx;
	padding-right: 24rpx;
	padding-top: 10rpx;
	padding-bottom: 10rpx;
	border-radius: 24rpx;
	background-color: #FFF2F2;
}
.curTag {
	position: absolute;
	right: 0;
	top: 0;
	background-color: #389588;
	padding-left: 16rpx;
	padding-right: 16rpx;
	padding-top: 4rpx;
	padding-bottom: 4rpx;
	border-bottom-left-radius: 12rpx;
}
.curTagTxt {
	font-size: 20rpx;
	color: #FFFFFF;
}
/* 删除弹框 */
.deletePopContent {
	align-items: center;
	padding-top: 20rpx;
}
.deleteTip {
	font-size: 32rpx;
	color: #333333;
	font-weight: bold;
	margin-bottom: 16rpx;
}
.deleteSub {
	font-size: 26rpx;
	color: #9BA5B7;
	margin-bottom: 40rpx;
}
.deleteBtns {
	flex-direction: row;
	justify-content: center;
}
.dBtn {
	width: 260rpx;
	height: 80rpx;
	border-radius: 40rpx;
	justify-content: center;
	align-items: center;
	margin-left: 20rpx;
	margin-right: 20rpx;
}
.cancelBtn {
	background-color: #F3F3F3;
}
.redBtn {
	background-color: #F65252;
}
.dBtnTxt {
	font-size: 28rpx;
	color: #545F71;
}
.redTxt {
	color: #FFFFFF;
}
</style>