shanxian-work-app/pages/manage/userDetail.vue

<template>
	<view class="user-detail">
		<view class="user-detail-message">
			<view class=""><text>姓名：{{user.username}}</text></view>
			<view class=""><text>手机号：{{user.mobile}}</text></view>
			<view class=""><text>校区：{{user.area}}</text></view>
		</view>
		<view class="user-account">
			<view class="account-left">余额：</view>
			<view class="account-right">{{user.wallet_money}}</view>
		</view>
		<view class="user-account">
			<view class="account-left">押金金额：</view>
			<view class="account-right">{{user.deposit}}</view>
		</view>
		<view class="user-account" @click="tap">
			<view class="account-left">历史订单：</view>
			<view class="account-right">
				<image src="../../static/img/right-arrow.png" mode=""></image></text>
			</view>
			
		</view>
		<view class="user-account">
			<view class="account-left">备注：</view>
			<input type="text" value="" class="user-detai-beizhu" :value="user.remark" @input="getText" />
			<view class="user-detail-bt" @click="operate">
				完成
			</view>
		
		</view>
	</view>
</template>

<script>
	var app = getApp()
	export default {
		data() {
			return {
				userId: '', //用户id
				user: [],
				isDisabled: false, //备注是否修改
				textVal: '', //输入框内容
			}
		},
		onLoad(options) {
			uni.showLoading({
				title: '加载中...',

			})
			this.userId = options.id
			app.request('user/detail?user_id=' + options.id, '', 'GET').then(res => {
				uni.hideLoading();
				console.log(res.data)

				this.user = res.data

				if (res.data.remark) {

					this.isDisabled = true

				}
			})
			console.log(options, '这是上个页面传过来的数据')
		},
		methods: {
			//跳转订单历史页面
			tap: function() {
				uni.navigateTo({
					url: '/pages/manage/historyOrder?id=' + this.userId,
				})
			},
			operate: function() {
				// let that = this;
				if (this.textVal=='') {
					uni.showToast({
						title: '请填写备注~',
						icon: 'none'
					})
					return;
				} else {
					uni.showLoading({
						title: '加载中...',
					})
					let data = {
						remark: this.textVal
					}
					console.log(123445)
					app.request('user/updateRemark/' + this.userId, data, 'PUT').then(res => {
						uni.hideLoading();
						if (res.statusCode == 200) {
							uni.showToast({
								title: '提交成功~',
								icon: 'none'
							})
							this.isDisabled = true
						}
					})
				}
			},
			getText(e) {
				this.textVal = e.detail.value
			},
		}
	}
</script>

<style>
	page {
		background-color: #f1f1f1;
	}

	.user-detail {
		padding: 20rpx 30rpx;
	}

	.user-detail-message {
		font-size: 24rpx;
		line-height: 50rpx;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		padding: 20rpx;
	}

	.user-account {
		margin-top: 20rpx;
		padding: 0 20rpx;
		height: 88rpx;
		font-size: 28rpx;
		line-height: 88rpx;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		display: flex;
	}

	.account-left {
		flex: 1;

	}

	.account-right {

		text-align: right;
		flex: 1;
	}

	.account-right image {
		margin-top: 30rpx;
		height: 30rpx;
		width: 40rpx;
	}

	.user-detai-beizhu {
		display: inline-block;
		flex: 0 0 50%;
		margin-right:60upx;
		vertical-align: top;
		border-radius: 30rpx;
		margin-top: 20upx;
		padding-left: 20upx;
		border: solid 1px #d1d1d1;
	}

	.user-detail-bt {
		display: inline-block;
		margin-top: 30rpx;
		float: right;
	/* 	flex: 1; */
		height: 38rpx;
		line-height: 38rpx;
		width: 80rpx;
		text-align: center;
		font-size: 22rpx;
		border-radius: 30rpx;
		background-color: #18D5B9;
		color: #FFFFFF;
	}
</style>