rtliveCompany/pages_user/userInfo.vue

<template>
	<view class="container">
		<view class="content">
			<view class="summary-section ">
				<view class="summary-header">
					<view class="summary-indicator"></view>
					<text class="summary-title">基础信息</text>
				</view>
				<view class="list">
					<view class="info-item" @click="toChangePassword">
						<view class="label">头像</view>
						<view class="right">
							<image class="img" src="/static/image/my_heads_icon.png" mode=""></image>
							<image class="icon" src="/static/image/icon_my_more.png" mode=""></image>
						</view>
					</view>
					<view class="info-item" @click="toChangePassword">
						<view class="label">姓名</view>
						<view class="right">
							<text class="txt">王小明</text>
						</view>
					</view>
					<view class="info-item" @click="toChangePassword">
						<view class="label">性别</view>
						<view class="right">
							<text class="txt">男</text>
							<image class="icon" src="/static/image/icon_my_more.png" mode=""></image>
						</view>
					</view>
				</view>

				<view class="summary-header">
					<view class="summary-indicator"></view>
					<text class="summary-title">岗位信息</text>
				</view>
				<view class="list">
					<view class="info-item" @click="toChangePassword">
						<view class="label">部门</view>
						<view class="right">
							<text class="txt ash">请选择部门</text>
							<image class="icon" src="/static/image/icon_my_more.png" mode=""></image>
						</view>
					</view>
					<view class="info-item" @click="toChangePassword">
						<view class="label">岗位</view>
						<view class="right">
							<text class="txt ">办公室主任</text>
							<image class="icon" src="/static/image/icon_my_more.png" mode=""></image>
						</view>
					</view>
					<view class="info-item" @click="toChangePassword">
						<view class="label">产品</view>
						<view class="right">
							<text class="txt ">301、201</text>
							<image class="icon" src="/static/image/icon_my_more.png" mode=""></image>
						</view>
					</view>
					<view class="info-item" @click="toChangePassword">
						<view class="label">直属上级</view>
						<view class="right">
							<text class="txt ash">请选择</text>
							<image class="icon" src="/static/image/icon_my_more.png" mode=""></image>
						</view>
					</view>

					<view class="form-section">
						<view class="form-label">
							<text>证明材料</text>
							<text class="tip">工作证、OA信息截图、个人名片等</text>
						</view>
						<view class="upload-cover" @click="chooseCoverImage">
							<image v-if="formData.coverImage" :src="formData.coverImage" mode="aspectFill"></image>
							<image v-if="formData.coverImage" class="del" @click="del"  src="/static/image/icon_img_delete.png"
								mode="aspectFill"></image>
							<view v-else class="upload-placeholder">
								<image class="icon" src="/static/image/icon_camera.png" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					coverImage: '/static/image/icon_camera.png',
				},

			}
		},
		computed: {

		},
		watch: {

		},
		onLoad() {

		},
		onReachBottom() {},
		methods: {
			chooseCoverImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async (res) => {
						try {
							uni.showLoading({
								title: '上传中...'
							})
							const uploadRes = await uploadFile({
								file: res.tempFilePaths[0],
								type: 'cover'
							})
							uni.hideLoading()
							if (uploadRes.code === 200 && uploadRes.data) {
								this.formData.coverImage = uploadRes.data.url
							}
						} catch (e) {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '上传失败'
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #ffffff;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;

		.content {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 2;

			.title {
				font-weight: 600;
				font-size: 36rpx;
				color: #333333;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;

			}

			.summary-section {
				padding: 32rpx 24rpx;
				display: flex;
				flex-direction: column;

				.summary-header {
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;

					.summary-indicator {
						width: 6rpx;
						height: 32rpx;
						background: #388BFF;
						border-radius: 40rpx;
						margin-right: 16rpx;
					}

					.summary-title {
						font-size: 36rpx;
						font-weight: bold;
						color: #333;
					}
				}
			}

			.list {
				margin-bottom: 40rpx;

				.info-item {
					height: 104upx;
					padding: 0 30upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F5F6FA;

					&:last-child {
						border-bottom: none;
					}

					.label {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #0F1826;
					}

					.right {
						display: flex;
						align-items: center;
						justify-content: center;

						.txt {
							font-size: 28rpx;
							color: #333333;
							margin-right: 8rpx;
						}

						.ash {
							color: #C8C9CC;
						}

						.img {
							width: 62rpx;
							height: 62rpx;
							border-radius: 50%;
							margin-right: 6rpx;
						}

						.icon {
							width: 36rpx;
							height: 36rpx;
						}
					}
				}

				.form-section {
					background: #fff;
					border-radius: 16rpx;
					padding: 24rpx;
					margin-bottom: 24rpx;

					.form-label {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #333;

						.tip {
							font-size: 24rpx;
							color: #999999;
							margin-left: 24rpx;
						}

					}

					.form-tips {
						font-size: 24rpx;
						color: #999;
						margin-bottom: 16rpx;
					}

					.form-input-wrapper {
						position: relative;

						.form-input {
							width: 100%;
							min-height: 120rpx;
							padding: 16rpx;
							background: #f5f5f5;
							border-radius: 8rpx;
							font-size: 28rpx;
							color: #333;
						}

						.char-count {
							position: absolute;
							right: 16rpx;
							bottom: 16rpx;
							font-size: 24rpx;
							color: #999;
						}
					}

					.form-select {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 80rpx;
						padding: 0 24rpx;
						background: #f5f5f5;
						border-radius: 8rpx;
						font-size: 28rpx;
						color: #333;

						.placeholder {
							color: #999;
						}

						.arrow-right {
							font-size: 24rpx;
							color: #999;
						}
					}

					.upload-cover {
						width: 160rpx;
						height: 160rpx;
						border-radius: 16rpx;
						background: #F7F8FA;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 24rpx;
						position: relative;

						.del {
							position: absolute;
							right: 0;
							top: 0;
							width: 28rpx;
							height: 28rpx;
						}

						image {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}

						.upload-placeholder {
							.icon {
								width: 48rpx;
								height: 48rpx;
							}
						}
					}

					.attachment-list {
						.attachment-item {
							display: flex;
							align-items: center;
							padding: 16rpx;
							background: #f5f5f5;
							border-radius: 8rpx;
							margin-bottom: 16rpx;

							.attachment-icon {
								font-size: 32rpx;
								margin-right: 16rpx;
							}

							.attachment-info {
								flex: 1;
								display: flex;
								flex-direction: column;

								.attachment-name {
									font-size: 28rpx;
									color: #333;
									margin-bottom: 4rpx;
								}

								.attachment-size {
									font-size: 24rpx;
									color: #999;
								}
							}

							.attachment-delete {
								font-size: 40rpx;
								color: #999;
								width: 40rpx;
								height: 40rpx;
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}

						.add-attachment {
							display: flex;
							align-items: center;
							justify-content: center;
							padding: 24rpx;
							background: #E3F2FD;
							border-radius: 8rpx;
							font-size: 28rpx;
							color: #388BFF;

							.add-icon {
								font-size: 32rpx;
								margin-right: 8rpx;
							}
						}
					}
				}

			}
		}
	}
</style>