assess-app/page_subpack/personal_details/personal_details.vue

<template>
	<view class="total-page page-box size-28">
		<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"
					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>
	</view>
</template>

<script>
	import EnInput from "@/components/en-from/en-input/index.vue";
  import {getMemberInfo} from "@/api/user";

	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: {
      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>
	.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>