materialAppletApp/pages/User/user.vue

<template>
	<!-- <view class="content">
        <view class="btn-row">
            <button type="default" @tap="bindLogout">退出登录</button>
        </view>
    </view> -->
	<view class="page-fill">
		<view class="header">
			<image src="../../static/icons/CpoxxFw_-5-AFyVyAABLIH8xBTw233.png" class="face"></image>

			<view class="info-wapper">
				<view class="nickname">
					用户名:{{name}}
				</view>
			</view>
			<view>
				<button type="default" @tap="bindLogout" class="settings">退出</button>
			</view>
		</view>
		<view v-if="show">
			<view v-for="(list,index) in listName" :key="index" class="body">
				<view class="input-two">
					<input :id=list.id type="text" class="input" @focus="setStyle()" @blur="setStyle2()" :value=list.name @input="getValue" />
					<p id="p2" class="p2" :style="{display:showOrNo}">如:广东省广州市xx广场301型x号机</p>
				</view>
				<view class="">
					<button type="primary" @click="updata()" class="button">
						<p class="p">更改</p>
					</button>
				</view>

			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				name: '',
				show: false,
				listName: [],
				value: null,
				id: null,
				showOrNo: null
			};
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 800);
		},
		onShow() {
			uni.startPullDownRefresh();
			var me = this;
			var name = uni.getStorageSync("name");
			me.name = name;
			var listName = uni.getStorageSync("listName");
			me.listName = listName;
			var adminId = listName[0].adminId;
			if (adminId != '1' && adminId != null) {
				me.show = true;
			}
		},
		onLoad() {

		},

		computed: {},
		methods: {
			bindLogout() {
				uni.reLaunch({
					url: '/pages/Login/Login',
				});
			},
			setStyle() {
				this.showOrNo = "block";
			},
			setStyle2() {
				this.showOrNo = "none";
			},
			updata() {

				var id = this.id;
				var value = this.value;
				if (value != null && value != '') {
					uni.request({
						url: 'http://127.0.0.1:8090/TEquipment/updateName',
						data: {
							id: id,
							name: value
						},
						dataType: 'json',
						method: "POST",
						success: (res) => {
							uni.showModal({
								title: '提示',
								content: '名称:' + value + res.data.message,
							});
						}
					});
				}
			},
			getValue: function(event) {
				// 绕过v-model 获取input输入框的值  
				var value = event.target.value;
				var id = event.target.id;
				this.value = value;
				this.id = id;
			}
		}
	}
</script>

<style>
	.page-fill {
		width: 100%;
		height: 100%;
	}

	.header {
		padding: 60upx 30upx 40upx 30upx;
		background-color: #ffd655;
		background: url(../../static/icons/CpoxxFwu_1OAYFAIAAAzO_Q1tPg693.png) repeat;

		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.face {
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
		flex-shrink: 0;
	}

	.info-wapper {
		width: 60%;
		margin-left: 40upx;
		display: flex;
		flex-direction: column;
	}

	.nickname {
		color: #6a5018;
		font-size: 12px;
		font-weight: bold;
		padding: 30upx 0upx 0upx 0upx;
	}

	.set-wapper {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		width: 15%;
	}

	.settings {
		width: 160upx;
		height: 110upx;
	}

	.button {
		padding: 10upx 10upx 10upx 0upx;
		width: 80upx;
		height: 60upx;
	}

	.input {
		padding: 10upx 10upx 10upx 0upx;
		background-color: #EEEEEE;
		width: 550upx;
		height: 50upx;
	}

	.body {
		background-color: #D9D9D9;
		padding: 10upx 10upx 10upx 10upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.input-two {
		width: 600upx;
		height: 100upx;
	}

	.p {
		width: 80upx;
		height: 50upx;
	}

	.p2 {
		color: #DD524D;
		display: none;
		width: 600upx;
		height: 50upx;
		border: 1px;
	}
</style>