shenzeeUniApp/packageA/pages/remote/volume.vue

<template>
	<view>
		<view class="search">
			<view class="search-title">
				{{$t('dosugar.equipmentClientID')}}
			</view>
			<view class="search-input">
				<input type="text" :placeholder="$t('dosugar.placeholder')" v-model="searchClientId" />
			</view>
			<view class="search-button">
				<button type="primary" size="mini" class="" @click="search()">
					<p class="">{{$t('dosugar.search')}}</P>
				</button>
			</view>
		</view>
		<view class="td-right">
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						{{$t('dosugar.chooseEquipment')}}
					</view>
					<view class="uni-list-cell-db" style="overflow: hidden;text-overflow: ellipsis;">
						<picker @change="changeEquipment" :value="index" :range="equipmentNameList">
							<view class="uni-input">{{equipmentNameList[index]}}</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-title">{{$t('volume.volu')}}</view>
		<view>
			<slider :value="volume" @change="sliderChange" min="0" max="15" show-value />
		</view>
		<view class="tr">
			<button type="primary" formType="submit" @click="update()" class="button">
				<p class="p1">{{$t('flowers.submit')}}</p>
			</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				index: null,
				equipmentName: null,
				equimentType: null,
				equipmentId: null,
				equipmentNameList: [],
				globalUser: null,
				show: true,
				volume:0,
				searchClientId: null
			}
		},
		onShow() {
			var token = uni.getStorageSync("token");
			this.globalUser = uni.getStorageSync("globalUser");
			uni.setNavigationBarTitle({
				title: this.$t('remoteList.volume')
			});
			if (token.length > 1) {
				this.getEquipmentListData();
				// this.getParam();
			} else {
				uni.reLaunch({
					url: '../Login/Login',
				});
			}

		},
		methods: {
			...mapActions('chart', ['getParameters', 'updateParameters', 'getEquipmentListByUser','updata']),
			getEquipmentListData() {
				this.getEquipmentListByUser(this.globalUser)
					.then(data => {
						// this.merchantList = data;
						var listName = data[0].equipmentList;
						var equipmentNameList = [];
						for (var i = 0; i < listName.length; i++) {
							equipmentNameList.push(this.$t('common.name') + listName[i].name + ' , '+ this.$t('common.ID') + listName[i].clientId.substring(
								listName[i].clientId.length - 6, listName[i].clientId.length));
						}
						this.equipmentNameList = equipmentNameList;
						var listId = data[0].id;
						if (listId != null && listId != '1') {
							uni.setStorageSync("listName", listName);
						}
						uni.stopPullDownRefresh();
					}, _ => void uni.stopPullDownRefresh());
			},
			search() {
				var clientId = this.searchClientId;
				var list = uni.getStorageSync("listName");
				var n = 0;
				for (var i = 0; i < list.length; i++) {
					var code = list[i].clientId.substring(list[i].clientId.length - 6, list[i].clientId.length);
					if (code == clientId) {
						n++;
						this.index = i;
						var id = list[i].id;
						this.equipmentId = id;
						this.clientId = list[i].clientId;
						this.volume = list[i].volume;
						break;
					}
				}
				if (n == 0) {
					uni.showModal({
						title: "提示",
						content: "找不到该机器",
						success: (res) => {

						}
					})
				}
			},
			sliderChange(e) {
				this.volume = e.detail.value;
				// console.log('音量发生变化：' + this.volume)
			},
			//改变机器
			changeEquipment: function(e) {
				this.searchClientId = null;
				this.index = e.target.value;
				var list = uni.getStorageSync("listName");
				this.equipmentId = list[e.target.value].id;
				this.clientId = list[e.target.value].clientId;
				this.volume = list[e.target.value].volume;
			},
			update() {
				uni.showModal({
					title: "提示",
					content: "是否修改音量？",
					success: (res) => {
						if (res.confirm) {
							const param = {};
							param['id'] = this.equipmentId;
							param['volume'] = this.volume;
							if (param != null) {
								this.updata(param)
									.then(res => {
										uni.showModal({
											title: '提示',
											content: res.message,
										});
									}, _ => void uni.stopPullDownRefresh());
							}
						} else if (res.cancel) {
							
						}
					}
				})
			},
		}
	}
</script>

<style>
	.search {
		width: 100%;
		padding-top: 30upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}

	.search-title {
		width: 28%;
		text-align: center;
		font-size: 26upx;
		font-family: "PingFang-SC-Bold";
	}

	.search-input{
		width: 48%;
		height: 25px;
		text-align: center;
		font-size: 26upx;
		/* font-family: "PingFang-SC-Bold"; */
		box-shadow: 0upx 0upx 20upx #D3D3D3;
		border-radius: 5upx;
	}
	.search-button{
		width: 20%;
		padding-left: 10px;
		padding-bottom: 5px;
		text-align: center;
		height: 60upx;
		text-align: left;
	}

	.line {
		height: 50upx;
	}

	.line2 {
		height: 10upx;
	}

	.body {
		background-color: #FFFFFF;
		width: 700upx;
		padding: 10upx 10upx 10upx 10upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		font-size: 32upx;
	}
	.tr {
		padding-top: 15upx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		font-size: 48upx;
		font-family: "PingFang-SC-Bold";
		position: fixed;
		bottom: 100upx;
		width: 100%;
	}
	.p1 {
		font-size: 48upx;
	}
	.p {
		width: 350upx;
		text-align: right;
	}

	.input {
		width: 200upx;
		box-shadow: 0upx 0upx 20upx #D3D3D3;
		border-radius: 5upx;
		text-align: center;
	}
	.button {
		margin: auto;
		width: 60%;
		height: 100upx;
	}

	.p2 {
		font-size: 30upx;
		/* #ifndef H5 */
		padding-top: 3upx;
		/* #endif */
		position: absolute;
		/* 水平居中 */
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.uni-title{
		padding-left: 20upx;
		font-size: 26upx;
		font-family: "PingFang-SC-Bold";
	}
		
</style>