iot-test-app/pages/mine/mine.vue

<template>
	<view class="myContent">
		<view class="header">
			<view class="myPhoto">
				<img src="https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
					alt="">
			</view>
			<text class="myInformation">{{userName}}</text>
		</view>

		<view class="middle-num">
			<u-cell-group>
				<!-- icon-style="color:red" -->
				<u-cell :border="false" icon="setting-fill" :value="value" title="项目选择" @click="projectChoose"
					:isLink="true"></u-cell>
				<!-- 		<u-cell icon="order" title="新增项目" @click="toAddProject" :isLink="true"></u-cell>
				<u-cell icon="list-dot" @click="toList" title="项目列表" :isLink="true"></u-cell> -->

			</u-cell-group>

		</view>
		<view class="exit">
			<u-cell-group>
				<u-cell @click="toUpload" icon="camera-fill" :isLink="true" title="上传人脸"></u-cell>
				<u-cell icon-style="color:#1296db" :border="false" @click="exit" icon="minus-people-fill" :isLink="true"
					title="退出登录"></u-cell>
			</u-cell-group>
		</view>
		<u-picker :show="show" :columns="columns" keyName='description' @confirm="confirm"
			@cancel="show=false"></u-picker>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: uni.getStorageSync('userName'),
				pic: uni.getStorageSync('face'),
				msg: {
					userId: uni.getStorageSync('userId'),
					pageNo: 1,
					pageSize: 100
				},

				value: '',
				columns: [
					[]
				],
				show: false,
				arr: []



			}
		},

		methods: {
			projectChoose() {
				this.getProjectList()
				this.show = true
				console.log('弹出');
			},
			confirm(e) {

				console.log('confirm', e.value[0])
				console.log(this.arr);

				let getWay = this.arr.filter((item) => {
					return item.name == e.value[0]
				})
				console.log(getWay, '过滤');
				uni.setStorageSync('testProjectId', getWay[0].id)
				uni.setStorageSync('gatewayDeviceId', getWay[0].gatewayDeviceId)
				// uni.setStorageSync('testProjectId', e.value[0].id)
				this.value = getWay[0].description
				this.show = false
			},




			selectClick(index) {
				console.log(index)
			},
			choose() {
				this.show3 = true
				console.log('我弹出来了');

			},
			toUpload() {
				uni.navigateTo({
					url: "/pages/upload-face/upload-face"
				})
			},
			toList() {
				uni.navigateTo({
					url: "/pages/project-list/project-list"
				})
			},
			exit() {
				uni.showModal({
					title: '温馨提示',
					content: '确定要退出吗？',
					success: res => {
						if (res.confirm) {
							uni.removeStorageSync('Token')
							uni.removeStorageSync('userId')
							uni.removeStorageSync('testProjectId')
							uni.redirectTo({
								url: "/pages/login/login"
							})
						}
					}
				})

			},
			toAddProject() {
				uni.navigateTo({
					url: "/pages/add-project/add-project"
				})
			},
			async getProjectList() {
				uni.showLoading({
					title: "正在请求中"
				})
				const {
					data: res
				} = await uni.$http.post('/api/v1/test/testProject/queryByCondition', this.msg)
				console.log(res);
				uni.hideLoading()
				if (res.code == 200) {
					if (res.data.records.length == 0) {
						this.$u.toast(`未检测到测试项目`)
					} else {
						let filter = []
						res.data.records.forEach((item) => {
							filter.push(item.description)
						})
						this.columns[0] = filter
						this.arr = res.data.records
					}
					let filter = []
					res.data.records.forEach((item) => {
						filter.push(item.description)
					})
					this.columns[0] = filter
					this.arr = res.data.records

				} else {
					this.$u.toast(`请求失败`)
				}

			}


		},

		onLoad(options) {
			// const {
			// 	page
			// } = options
			// if (page == upload) {
			// 	uni.navigateTo({
			// 		url: '/pages/mine/mine',
			// 		success: () => {
			// 			uni.navigateBack()
			// 		}
			// 	})
			// }

		}
	}
</script>

<style lang="scss">
	page {
		background: #eaeaea;
	}

	.myContent {
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	.header {
		flex-direction: row;
		display: flex;
		height: 200rpx;
	}

	.headbgImage {
		height: 25%;
		width: 100%;
		position: absolute;
		z-index: 1;
	}

	.myPhoto {
		height: 140rpx;
		width: 140rpx;
		position: absolute;
		z-index: 2;
		margin-left: 3%;
		margin-top: 3%;

		border-radius: 50%;

		img {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}

	.myInformation {
		position: absolute;
		z-index: 2;
		margin-left: 25%;
		margin-top: 9%;
	}

	.exit {
		margin-top: 50px;
		background: white;
		width: 100%;
		// margin-left: 20rpx;
		height: 176rpx;
		// border-radius: 10px;
	}

	.middle-num {
		position: absolute;
		z-index: 2;
		display: flex;
		flex-wrap: nowrap;
		background: white;
		width: 100%;
		// margin-left: 20rpx;
		height: 93rpx;
		// border-radius: 10px;
		margin-top: -16rpx;
	}

	.popup {
		height: 700rpx;
		width: 100vw;
		// width: calc(100vw - 40rpx);
		// margin: 0 20rpx;

		.title {
			padding: 20rpx;
			text-align: center;
		}
	}
</style>