shenzeeUniApp/packageA/pages/user/equipmentName.vue

<template>
	<view class="">
		<view class="xiugai">
			{{$t('equipmentname.title')}}
		</view>
		<view v-for="(list,index) in equipmentList" :key="index" class="body">
			<view class="input-two">
				<input :id=list.id type="text" class="input" @focus="setStyle()" @blur="setStyle2()" :value="list.name==null? list.clientId:list.name" @input="getValue" />
				<p id="p2" class="p2" :style="{display:showOrNo}">如:粤A张先生1</p>
			</view>
			<view class="button2">
				<button type="primary" @click="updata1()" class="button">
					<p class="p">{{$t('equipmentname.updata')}}</p>
				</button>
			</view>
		
		</view>
		<view v-if="btnShow" class="button-container">
			<button v-if="upBtn" class="left-button" :disabled="isLoading" @click="previousPage">{{$t('equipmentStatusList.previousPage')}}</button>
			<button v-if="nextBtn" class="right-button" :disabled="isLoading" @click="nextPage">{{$t('equipmentStatusList.nextPage')}}</button>
		</view>
	</view>
</template>

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

		data() {
			return {
				name: '',
				show: false,
				listName: [],
				equipmentList: [],
				value: null,
				id: null,
				parm: {
					name: null,
					id: null
				},
				showOrNo: null,
				avatarUrl: null,
				weixinUp: false,
				weixinDown: true,
				btnShow:false, // 按钮显示
				upBtn:false, // 上一页按钮
				nextBtn:true, // 下一页按钮
				equipmentTotal:0, // 设备总数
				isLoading: false, //是否加载中
			};
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 800);
		},
		onShow() {
			uni.setNavigationBarTitle({title: this.$t('equipmentname.title')});
			// uni.startPullDownRefresh();
			this.globalUser = uni.getStorageSync("globalUser");
			this.globalUser.offset = 0;
			this.globalUser.limit = 10;
			var token = uni.getStorageSync("token");
			if (token.length > 1) {
				this.getEquipmentListData();
				this.upBtn = false;
				this.nextBtn = true;
			} else {
				uni.reLaunch({
					url: '../Login/Login',
				});
			}
			// var me = this;
			// var name = uni.getStorageSync("name");
			// me.name = name;
			// var listName = uni.getStorageSync("listName");
			// me.listName = listName;
			// if (listName != '' && listName != null) {
			// 	var adminId = listName[0].adminId;
			// 	if (adminId != '1' && adminId != null) {
			// 		me.show = true;
			// 	}
			// }
			// var newparm = uni.getStorageSync("newparm");
			// if (newparm.toString().length > 1) {
			// 	if (newparm.avatarUrl.length > 1) {
			// 		this.avatarUrl = newparm.avatarUrl;
			// 		this.weixinUp = true;
			// 		this.weixinDown = false;
			// 	}
			// }
	
		},
		onLoad() {
	
		},
		methods: {
			setStyle() {
				this.showOrNo = "block";
			},
			setStyle2() {
				this.showOrNo = "none";
			},
			getValue: function(event) {
				// 绕过v-model 获取input输入框的值  
				var value = event.target.value;
				var id = event.target.id;
				this.value = value;
				this.id = id;
				this.parm.name = value;
				this.parm.id = id;
			},
			getEquipmentListData() {
				this.isLoading = true;
				this.getEquipmentListByUser(this.globalUser)
					.then(data => {
						this.equipmentList = data[0].equipmentList;
						this.equipmentTotal = data[0].equipmentTotal;
						if(this.equipmentTotal > this.globalUser.limit) {
							this.btnShow = true;
						}
						console.log(this.equipmentList);
						this.isLoading = false;
					}, _ => void uni.stopPullDownRefresh());
			},
			// 更改按钮显示状态
			changeBtnshow() {
				if(this.globalUser.offset != 0) {
					this.upBtn = true;
				} else {
					this.upBtn = false;
				}
				if(this.globalUser.offset + this.globalUser.limit < this.equipmentTotal) {
					this.nextBtn = true;
				} else {
					this.nextBtn = false;
				}
			},
			// 点击上一页
			previousPage() {
				this.globalUser.offset = this.globalUser.offset - this.globalUser.limit;
				this.getEquipmentListData();
				this.changeBtnshow();
			},
			// 点击下一页
			nextPage() {
				this.globalUser.offset = this.globalUser.offset + this.globalUser.limit;
				this.getEquipmentListData();
				this.changeBtnshow();
			},
			...mapActions('chart', ['updata', 'getEquipmentListByUser']),
			updata1() {
				if (this.parm.id != null) {
					this.updata(this.parm)
						.then(res => {
							uni.showModal({
								title: '提示',
								content: '名称:' + this.parm.name + res.message,
							});
						}, _ => void uni.stopPullDownRefresh());
				}
	
	
			}
		}
	}
</script>

<style>


	.settings {
		width: 100upx;
		height: 64upx;
		border-radius: 10upx;
		background: #D6101F;
		/* padding-right: 50upx; */
		/* padding-top: 5upx; */
		text-align: center;
		margin: 0 auto;
	}
	
	.p3 {
		/* #ifdef H5 */
		top: -13%;
		/* #endif */
		font-size: 32upx;
		color: #FFFFFF;
		font-weight: bold;
		width: 100upx;
		height: 64upx;
		/* #ifndef H5 */
		padding-top: 3upx;
		/* #endif */
		position: absolute;
		/* 水平居中 */
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	
	.centerY {
		position: absolute;
		top: 50%;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	
	.button2 {
		padding-right: 60upx;
		padding-top: 2upx;
	}
	
	.button {
		/* padding: 5upx 10upx 10upx 0upx; */
		width: 120upx;
		height: 60upx;
		border-radius: 10upx;
	}
	
	.p {
		/* #ifdef H5 */
		top: -13%;
		/* #endif */
		width: 80upx;
		height: 60upx;
		font-size: 30upx;
		/* #ifndef H5 */
		padding-top: 3upx;
		/* #endif */
	
		position: absolute;
		/* 水平居中 */
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	
	.input {
		/* padding: 10upx 20upx 10upx 0upx; */
		padding-left: 20upx;
		padding-top: 10upx;
		background-color: #FFFFFF;
		width: 500upx;
		height: 50upx;
		box-shadow: 0upx 0upx 20upx #D3D3D3;
		border-radius: 5upx;
	}
	
	.xiugai {
		width: 92%;
		border-left: 20upx;
		border-left: 10upx solid #206DC3;
		padding-left: 10upx;
		height: 38upx;
		padding-bottom: 20upx;
		font-family: "PingFang-SC-Bold";
		font-weight: bold;
		margin: auto;
		font-size: 32upx;
		color: #363D44;
	}
	
	.xiugai2 {
		width: 100%;
		height: 80upx;
		font-family: "PingFang-SC-Bold";
		font-weight: bold;
		margin: auto;
		font-size: 50upx;
		color: #363D44;
		position: fixed;
		bottom: 0;
	}
	
	.xiugai3 {
		height: 80upx;
		font-family: "PingFang-SC-Bold";
		font-weight: bold;
		margin: auto;
		font-size: 40upx;
		color: #363D44;
	
	}
	
	.body {
		background-color: #FFFFFF;
		padding: 10upx 10upx 10upx 10upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	
	.input-two {
		width: 600upx;
		height: 100upx;
		padding-left: 30upx;
	}
	
	.p2 {
		color: #DD524D;
		display: none;
		width: 600upx;
		height: 50upx;
		border: 1px;
	}
	.button-container {
	  display: flex;
	}
	
	.left-button,
	.right-button {
	  flex: 1;
	}
</style>