jp-youdian-Inspection/pages/team/teamInfo.vue

<template>
	<view>
		<u-navbar title="成员信息" title-color="#101010">
			
			 
		</u-navbar>
		<view class="list">
			<view class="item">
				<view class="name">
					头像

				</view>
				<view class="value">

					<view class="goto " >
						<view class="photo">

							<img class="img" :src="addInfo.image" v-if="addInfo.image" alt="">
						</view>

					</view>

				</view>
			</view>


			<view class="item">
				<view class="name">
					成员姓名

				</view>
				<view class="value">
					{{addInfo.name}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					登录手机号

				</view>
				<view class="value">
					{{addInfo.phone}}
				</view>
			</view>
			<view class="item">
				<view class="name">
					岗位

				</view>
				<view class="value">
					{{addInfo.roleName}}
				</view>
			</view>


		</view>
		
		<view class="list">
			<view class="item">
				<view class="name">
					场站关联管理

		
				</view>
				<view class="value" @click="gotoUrl('/pages/team/stationMy?id='+id)" >
		
					<span class="totalPage">{{totalPage}}</span>
					<u-icon name="arrow-right" size="24" color="#BBBBBB" ></u-icon>
					
		
				</view>
			</view>
		</view>
		


		<view class="floating-button">
			<view class="button button2" @click="del" v-if="isMy">
			 删除信息
			</view>
			
			<view class="button button1" @click="submit">

				修改用户信息
			</view>

		</view>

	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagesTeam.js'

	export default {
		data() {
			return {
				id:"",
				codeList: [],
				roleId: "",
				roleName:"",
				totalPage:0,
				addInfo: {
					image: "",
					roleName: "XJ"
				},
				isMy:true,
				
			};
		},
		onLoad(op) {
			if(op.id){
				this.id=op.id
				
			}
			if(this.jphelp.getPersonInfo().id==this.id){
				this.isMy=false
			}
			
			
		},
		onShow() {
			this.getInfo()
			this.getteamUserStation()
		},
		methods: {
			del() {
			
				uni.showModal({
					title:"提示",
					content: "请确认是否删除用户",
				
					success: (res1) => {
						if (res1.confirm) {
							this.delApi()
						} else if (res1.cancel) {
							//('用户点击取消');
						}
					}
				})
				
				
			},
			delApi() {
			
				API.delUser({
					id:this.id
				}).then((res) => {
			
					uni.showModal({
						title: '提示',
						showCancel: false,
						content: "操作成功",
						success: res1 => {
							if (res1.confirm) {
								uni.navigateBack()
							} else if (res1.cancel) {
								//('用户点击取消');
							}
						}
					})
			
				}).catch(error => {
			
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			
			}
			,
			getteamUserStation() {
			
				API.teamUserStation({
					id:this.id
				}).then((res) => {
			
					this.totalPage=res.data.recordsTotal
			
				}).catch(error => {
			
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			
			},
			getInfo() {

				API.teamUser({
					id:this.id
				}).then((res) => {

					this.addInfo=res.data.user
					// this.findByCatalogName({
					// 	catalogName: '巡检角色'
					// }, "codeList")

				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})

			},
			findByCatalogName(obj, listName) {

				API.findByCatalogName(obj).then((res) => {

					var arr = res.data.dataDictionaryList

					this.codeList = arr
					
					this.codeList.forEach(item=>{
						
						if(this.addInfo.role==item.value){
							this.roleName=item.name
						}
					})

				}).catch(error => {

					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})

			},
			uploadPhoto() {
				let _self = this;

				const crop = {
					quality: 100,
					width: 600,
					height: 600,
					resize: true
				};

				// 上传图片
				uni.chooseImage({
					count: 1,
					crop,
					success: async (res) => {
						//(res);
						let tempFile = res.tempFiles[0];

						var filePath = res.tempFilePaths[0]

						let fileData = await new Promise((callback) => {
							uni.navigateTo({
								url: '/pages/myTab/cropImage?path=' + filePath +
									`&options=${JSON.stringify(crop)}`,
								animationType: "fade-in",
								events: {
									success: url => {
										callback(url)
									}
								}
							});
						})

						this.saveRecordConfirmMethod(fileData);




					}
				});
			},
			saveRecordConfirmMethod(fileData) {

				var token = this.jphelp.getToken()

				uni.uploadFile({
					url: process.jphelp.BASE_URL + "uploadPicture", //仅为示例，非真实的接口地址
					filePath: fileData,
					header: {
						'Authorization': token,
						//'Content-Type': 'multipart/form-data',
						'X-Requested-With': 'XMLHttpRequest',
						//	'content-type': 'multipart/form-data'
					},
					name: 'photoFile',
					formData: {
						subFolder: "headimg"
					},
					success: (uploadFileRes) => {


						var obj = JSON.parse(uploadFileRes.data)
						//.log(obj);
						//this.src = obj.data;

						this.addInfo.image = obj.data;
						this.$forceUpdate()
						//this.updatePersonInformation();
						// uni.hideLoading();
					}
				});
			},
			submit() {
				uni.navigateTo({
					url:"/pages/team/teamAdd?id="+this.id
				})

			},
		}
	}
</script>

<style lang="scss">
	.totalPage{
		padding: 0 36rpx;
		margin-right: 16rpx;
		line-height: 40rpx;
		border-radius: 50px;
		background-color: rgba(22,119,255,1);
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		text-align: center;
	}
	.jpmain {
		padding-bottom: 120rpx;
	}

	.list {
		background-color: rgba(255, 255, 255, 1);

		margin: 20rpx 0;

		.item:not(:last-child) {
			border-bottom: 2rpx solid rgba(232, 232, 232, 1);
		}

		.item {
			padding: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.name {
				width: 40%;
				font-size: 32rpx;
				color: #777777;

				span {
					color: red
				}

				white-space: pre;
			}

			.value {
				font-size: 32rpx;
				width: 60%;
				display: flex;
				
				    justify-content: flex-end;

				input::placeholder {
					color: #AAAAAA;
				}

				.img {
					width: 40rpx;
					height: 40rpx;

				}

				.textarea {
					background-color: rgba(241, 242, 245, 1);
					width: 100%;
					border-radius: 8rpx;
				}

			}
		}

		.item-plus {
			flex-direction: column;

			.value,
			.name {
				width: 100%;
			}

			.name {
				padding-bottom: 32rpx;
			}
		}
	}

	.floating-button {
		z-index: 999;
		position: fixed;
		bottom: 0;

		width: 100%;
		display: flex;
		height: 120rpx;
	
		    justify-content: space-around;
		background-color: rgba(255, 255, 255, 1);

		.button {
			margin-top: 24rpx;
			border-radius: 50px;
			height: 80rpx;
			width: 80%;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 12rpx;

			background-color: rgba(22, 119, 255, 1);
			color: rgba(255, 255, 255, 1);
			font-size: 32rpx;
		}
		.button2{
			width: 35%;
			background-color: rgba(222,225,228,1);
			color: rgba(51,51,51,1);
		}
		.button1{
			width: 60%;
		}
	}

	.goto {
		display: flex;
		align-items: center;
		color: rgba(119, 119, 119, 1);
		width: 100%;
		justify-content: end;

		.photo {
			border-radius: 50px;
			background-color: rgba(229, 229, 229, 1);
			height: 80rpx;
			width: 80rpx;
			overflow: hidden;

			.img {
				width: 100% !important;
				height: 100% !important;
			}
		}

	}
	
	.radiolist{
		.radioitem{
			padding: 24rpx;
			display: flex;
			width: 300%;
			align-items: center;
			justify-content: space-between;
		}
		.radioitem:not(:last-child) {
			border-bottom: 2rpx solid rgba(232, 232, 232, 1);
		}
	}
	.rightslot{
		
		margin-right: 16rpx;
		color: red;
	}
	   
</style>