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>