assess-app/page_subpack/personal_details/personal_details.vue

<template>
	<view class="total-page page-box size-28 task-bg">
		<Nav :type="1" :genre="2" :title="title" :is_fixed="true">
			<view class="m-30 m-b20">
				<view class="row-justify-sb sys-background-fff  center p-30 bor-bottom-1" @click="setUploading(true)"
					style="border-radius: 20rpx 20rpx 0 0;" hover-class="is-hovers">
					<text class="size-28 text-color-666">头像</text>
					<view class="row-c">
						<image class="wh-80 r-100 m-r10" :src="memberData.head_img" mode=""></image>
						<uni-icons type="forward" size="20" color="#999999"></uni-icons>
					</view>
				</view>
				<view class="row-justify-sb sys-background-fff bor-bottom-1 center p-30" hover-class="is-hover_pass"
					@click="onSetMessage(4,'修改昵称')">
					<text class="size-28 text-color-666">昵称</text>
					<view class="row-c line-34">
						<text class="text-color-12">{{memberData.nickname}}</text>
						<uni-icons type="forward" size="16" color="#999999"></uni-icons>
					</view>
				</view>
				<view class="row-justify-sb sys-background-fff bor-bottom-1 center p-30" hover-class="is-hover_pass"
					@click="onSetMessage(5,'修改姓名')">
					<text class="size-28 text-color-666">姓名</text>
					<view class="row-c line-34">
						<text class="text-color-12">{{memberData.name}}</text>
						<uni-icons type="forward" size="16" color="#999999"></uni-icons>
					</view>
				</view>
				<view class="row-justify-sb sys-background-fff center p-30" style="border-radius: 0 0 20rpx 20rpx;"
					hover-class="is-hover_pass" @click="onSetMessage(3,'修改手机号')">
					<text class="size-28 text-color-666">手机号</text>
					<view class="row-c line-34">
						<text class="text-color-12">{{memberData.phone}}</text>
						<uni-icons type="forward" size="16" color="#999999"></uni-icons>
					</view>
				</view>
			</view>
			<view class=" m-lr30 r-20">
				<view class="row-justify-sb sys-background-fff center p-30 r-20" hover-class="is-hover_pass"
					@click="onSetMessage(2,'修改密码')">
					<text class="size-28 text-color-666">密码</text>
					<view class="row-c line-34">
						<text class="text-color-12">去修改</text>
						<uni-icons type="forward" size="16" color="#999999"></uni-icons>
					</view>
				</view>
			</view>
		</Nav>
		<uni-popup ref="popup" type="bottom">
			<view class="popup-block">
				<view class="popup-row" @click="camera(1)">拍照</view>
				<view class="popup-row" @click="camera(2)">从手机里面选择</view>
				<view class="popup-row" @click="setUploading(false)">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import EnInput from "@/components/en-from/en-input/index.vue";
	import {
		getMemberInfo,
		updateMemberInfo
	} from "@/api/user";
	import txUploadFile from "@/service/txOssSts";
	import tools from "@/service/tools";

	export default {
		components: {
			EnInput
		},
		data() {
			return {
				id: 0,
				title: '',
				phoneShake: false,
				memberData: {
					'head_img': "",
					'name': "",
					'nickname': "",
					'phone': "",
					'position_name': "",
				}
			}
		},
		onLoad(options) {
			// this.id = options.id
			// this.title = options.title
			// this.getMemberInfo()
			// uni.$on('updateMemberInfo', () => {
			// 	this.getMemberInfo()
			// })
		},
		methods: {
			camera(sourceType) {
				console.log('chooseMedia接口调试-------------')
				uni.chooseMedia({
					mediaType: 'image',
					count: 1, //默认9
					sizeType: "compressed",
					sourceType: [sourceType === 1 ? 'camera' : 'album'],
					success: (res) => {
						console.log(res)
						if (res.tempFiles.length > 0) {
							txUploadFile(res.tempFiles[0].tempFilePath).then((data) => {
								if (!data) {
									tools.error('图片上传失败')
								} else {
									this.memberData.head_img = data.Location;
									updateMemberInfo({
										'head_img': this.memberData.head_img
									}).then((res) => {
										if (res.code === 1) {
											uni.$emit('updateMemberInfo')
										} else {
											tools.error(res.msg)
										}
									})
									this.setUploading(false);
								}

							})
						} else {
							tools.error("请选择上传的图片")
						}
					},
				});
			},
			setUploading(showImg) {
				if (showImg) {
					this.$refs.popup.open("bottom");
				} else {
					this.$refs.popup.close();
				}
			},
			getMemberInfo() {
				getMemberInfo({
					'type': 2
				}).then((res) => {
					if (res.code === 1) {
						this.memberData = res.data;
					}
				})
			},
			onSubmit() {
				this.phoneShake = true
				setTimeout(() => {
					this.phoneShake = false
					this.passwordShake = false
					this.codedShake = false
				}, 500)
			},
			getVerifiedCode() {},
			onSetMessage(id, name) {
				uni.navigateTo({
					url: `/page_subpack/system_setting/system_setting?id=${id}&title=${name}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/wh-common";

	.is-hovers {
		background-color: #e5e5e5e5;
	}

	.is-hover_pass {
		background-color: #e5e5e5e5;
	}

	.input-text {
		display: block;
		width: 120rpx;
		text-align: right;
	}

	.input-item {
		height: 96rpx;
		padding: 28rpx 40rpx;
		box-sizing: border-box;

		.login-input {
			width: 100%;
		}
	}

	.input-item:last-child {
		margin-top: 30rpx;
	}

	.input-send {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.login-input {
			width: calc(100% - 140rpx);
		}

		.login-send {
			width: 140rpx;
			text-align: center;
		}
	}

	.input-but {
		margin-top: 40rpx;
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
	}
</style>