workorder-front/pages_order/order/ModifyMembers.vue

<template>
	<!-- 修改成员 -->
	<view class="page">
		<navbar title="修改成员" leftClick @leftClick="$utils.navigateBack" />

		<view class="box">
			<view class="ChangeheadPortrait">
				
				<view 
				@click="upload"
				class="headPortrait">
					
					<!-- 如果有，就显示数据的头像 -->
					<!-- <image 
					v-if="detail.image"
					:src="detail.image" 
					mode=""></image> -->
					
					<!-- 如果没有就显示默认的 -->
					<!-- <image 
					v-else
					src="/pages_order/static/auth/headImage.png" 
					mode=""></image> -->
					
					<image
					:src="detail.image || '/pages_order/static/auth/headImage.png'" 
					mode="aspectFill"></image>
				</view>

			</view>

			<view class="ChangeAccountpassword">
				<view class="ChangeName">
					员工账号：
					<uv-input placeholder="请输入员工账号" 
					v-model="detail.name"
					border="bottom"></uv-input>
					<!-- <view class="Bo">
						<uv-icon name="edit-pen" size="60"></uv-icon>
					</view> -->
				</view>
				<view class="Changepassword">
					员工密码：
					<uv-input placeholder="请输入员工密码" 
					v-model="detail.password"
					border="bottom"></uv-input>
					<!-- <view class="Bo">
						<uv-icon name="edit-pen" size="60"></uv-icon>
					</view> -->
				</view>
			</view>

			<view class="uni-color-btn"
			@click="submit"
			style="width: 70%;">
				保存
			</view>
		</view>

	</view>
</template>

<script >
	export default {
		data() {
			return {
				id : 0,
				detail : {
				},
			}
		},
		onLoad(args) {
			this.id = args.id
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			upload(){
				this.$Oss.ossUploadImage({
					success : url => {
						console.log(url);
						this.detail.image = url
					}
				})
			},
			getDetail(title){
				this.$api('queryUserById', {
					userId : this.id
				}, res =>{
					if(res.code == 200){
						this.detail = res.result
					}
				})
			},
			submit(){
				
				// 效验数据合法性
				if(this.$utils
				.verificationAll(this.detail, {
					image : '请上传员工头像',
					name : '请输入员工账号',
					password : '请输入员工密码',
				})){
					return
				}
				
				// 保存数据
				this.$api('updateUser', {
					id : this.detail.id,
					image : this.detail.image,
					name : this.detail.name,
					password : this.detail.password,
					roleId : this.detail.roleId,
				}, res =>{
					if(res.code == 200){
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
						
						// 延时1秒，返回到上一个页面
						setTimeout(uni.navigateBack, 1000, -1)
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		.box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			justify-content: space-around;
			height: 1300rpx;

			.ChangeheadPortrait {
				display: flex;
				align-items: center;
				.headPortrait {
					height: 150rpx;
					width: 150rpx;
					image{
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			}

			.ChangeAccountpassword {
				.ChangeName {
					display: flex;
					align-items: center;
					margin: 25rpx 0rpx;
					font-size: 35rpx;

					.Bo {
						margin-right: 50rpx;
					}
				}

				.Changepassword {
					display: flex;
					align-items: center;
					font-size: 35rpx;

					.Bo {
						margin-right: 50rpx;
					}
				}

			}

		}
	}
</style>