H5_QiCaiYao/page_salesman_index/userCenter/userInfo.vue

<template>
	<page-meta :page-style="themeColor"></page-meta>
	<div class="view">
		<div class="card">
			<div class="row1" style="margin: 10rpx 0rpx !important;">
				<div class="left" >
					用户头像
				</div>
				
					<div class="right" @click="Upiend">
						<div class="avatar">	
							<image :src="$util.img(list.headimg)" mode="aspectFill"></image>
						</div>
					</div>
				
			</div>
			<u-line></u-line>
			
				<!-- {{list.realname}} -->
			<div class="row">
				<div class="left">
					姓名
				</div>
				<div class="right">
					<u-input v-model="name" placeholder="请输入姓名" border="none" inputAlign="right"></u-input>
				</div>
			</div>
			<u-line></u-line>
			<div class="row">
				<div class="left">
					邮箱
				</div>
				<div class="right">
					<u-input v-model="postbox" placeholder="请输入邮箱" border="none" inputAlign="right"></u-input>
				</div>
			</div>
			<u-line></u-line>
			<div class="row">
				<div class="left">
					联系电话
				</div>
				<div class="right">
					<u-input v-model="telephone" maxlength="11" placeholder="请输入电话号码" border="none" inputAlign="right"></u-input>
				</div>
			</div>
			<u-line></u-line>
			<div class="row">
				<div class="left">
					账号
				</div>
				<div class="right" style="color: #ccc;">
					{{list.username}}
				</div>
			</div>
			<u-line></u-line>
			<div class="row">
				<div class="left">
					职位
				</div>
				<div class="right"  style="color: #ccc;">
					{{list.position_name}}
				</div>
			</div>
			<u-line></u-line>
			<div class="row">
				<div class="left">
					部门
				</div>
				<div class="right" style="color: #ccc;">
					{{list.depart_name}}<!-- <u-input v-model="form.sex" placeholder="请输入电话号码" border="none" inputAlign="right"></u-input> -->
				</div>
			</div>
			<u-line></u-line>
			<div class="row">
				<div class="left">
					邀请码
				</div>
				<div class="right" style="color: #ccc;">
					{{list.invite_code}}<!-- <u-input v-model="form.sex" placeholder="请输入电话号码" border="none" inputAlign="right"></u-input> -->
				</div>
			</div>
		</div>
		<div class="confirm" @click="define">确定</div>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				name:'',//姓名
				postbox:'',//邮箱
				telephone:'',//电话
				show: false,
				list:[],
				position_id:'',//部门id
				img:'',//图片地址
				uid:''
			}
		},
		onShow() {
			this.$api.sendRequest({
				url: '/api/salasman/info',
				data: {},
				success: res => {
					console.log(res.data,'业务员信息');
					this.list=res.data
					//姓名
					this.name=res.data.realname
					//邮箱
					this.postbox=res.data.email
					//联系电话
					this.telephone=res.data.tel
					//业务员id
					this.uid=res.data.uid
				}
			})
		},
		methods: {
			Upiend(type,size=1){
					this.$util.upload(size,{
						 path:'headimg'
					},res=>{
						console.log(res,'res');
						this.img=res[0]
						this.list.headimg=res[0]
					})
				
			},
			//保存
			define(){
				this.$api.sendRequest({
					url:`/api/salasman/editMyInfo`,
					data:{
						uid:this.uid,//业务员id
						realname:this.name,//姓名
						tel:this.telephone,//联系方式
						email:this.postbox,//邮箱
						headimg:this.img//头像
					},
					success:res=>{
						this.$util.showToast({
							title: '修改成功'
						});
						setTimeout(()=>{
							uni.navigateTo({
								url: '/page_salesman_index/index/index'
							})
						},500)
					}
				})
			},
			toAccountDetail() {
				uni.navigateTo({
					url: '/pages_tool/member/account_info'
				})
			}
			
		}
	}
</script>  

<style scoped lang="scss">
	.view {
		padding: 30rpx;
		.confirm{
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			width: calc(100% - 64rpx);
			color: #fff;
			position: fixed;
			bottom: 32rpx;
			text-align: center;
			line-height: 80rpx;
			text-align: center;
			height: 80rpx;
			background: #21BBF3;
			border-radius: 40rpx;
		}
		.card {
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 10rpx 30rpx;
			
			.row1 {
				padding: 10rpx 0 10rpx 0;
				display: flex;
				.left {
					align-self: center;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #333333;
				}
				.right{
					align-self: center;
					flex: 1;
					text-align: right;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #333333;
					.avatar {
						display: flex;
						justify-content: flex-end;
						margin: 6rpx 0;
						image{
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}
					}
					
				}
			}
			.row {
				padding: 30rpx 0 30rpx 0;
				display: flex;
				.left {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #333333;
				}
				.right{
					flex: 1;
					text-align: right;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #333333;
				}
				
			}
		}
		.btn_group {
			width: calc(100% - 60rpx);
			height: 202rpx;
			background: #FFFFFF;
			border-radius: 24rpx;

			
			position: absolute;
			left: 30rpx;
			bottom: 194rpx;
			.btn {
				height: 100rpx;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				color: $base-color;
			}
		}
		.cancel {
			width: calc(100% - 60rpx);
			height: 100rpx;
			position: absolute;
			left: 30rpx;
			bottom: 70rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: $base-color;
		}
	}
</style>