FastBee/APP/pagesA/home/device/drag/components/numControl1.vue

<template>
	<view>
		<view class="num-control1"
			:style="{ 'background-color': backColor,'marginTop':marginTop+'px','marginBottom':marginBottom+'px' }"
			@click="open()">
			<view class="title">
				<view v-if="showIcon" class="icon" :style="{ 'background-color': iconBackColor }">
					<u-icon :name="icon" :color="iconColor"></u-icon>
				</view>
				<view class="text" :style="{ 'color': nameColor}">{{templateName}}</view>
			</view>
			<view class="content">
				<span :style="{ 'color': numColor}">{{numValue}}</span>
				<span :style="{ 'color': numColor}">{{unit}}</span>
			</view>


		</view>
		<view class="other">
			<u-popup :show="show" :round="5" mode="bottom" bgColor="#eef3f7" @close="close">
				<view class="issue-popup">
					<view class="nav">
						<text @click="close">{{$tt('common.cancel')}}</text>
						<text @click="handleSendService">{{$tt('common.confirm')}}</text>
					</view>
					<u--form labelPosition="left" label-width="100px">
						<u-form-item :label="`${value.templateName}：`">

							<view class="with-range">
								<u--input v-model="numValue" inputAlign="right" :placeholder="$tt('common.PleaseIpt')"
									@input="justNumber(value, $event)" type="number" border="none"></u--input>
								<text v-if="unit && unit != 'un' && unit != '/'">
									{{unit}}
								</text>
								<text> ({{ value.min }} ~ {{ value.max }})</text>
							</view>

						</u-form-item>
					</u--form>
				</view>
			</u-popup>

		</view>
	</view>

</template>

<script>
	export default {
		name: "numControl1",
		props: {
			marginTop: {
				type: Number,
				default: 0
			},
			marginBottom: {
				type: Number,
				default: 0
			},
			backColor: {
				type: String,
				default: 'rgba(255, 255, 255, 1)'
			},
			nameColor: {
				type: String,
				default: 'rgba(51, 51, 51, 1)'
			},
			numColor: {
				type: String,
				default: 'rgba(51, 51, 51, 1)'
			},
			showIcon: {
				type: Boolean,
				default: true
			},
			iconColor: {
				type: String,
				default: 'rgba(255, 255, 255, 1)'
			},
			iconBackColor: {
				type: String,
				default: 'rgba(255, 153, 0, 1)'
			},
			templateName: {
				type: String,
				default: '数值控制1'
			},
			num: {
				type: Number,
				default: 0
			},
			value: {
				type: Object,
				require: true
			},
			device: {
				type: Object,
				require: true
			}

		},
		created() {
			this.initValue()
		},
		data() {
			return {
				numValue: null,
				unit: '',
				show: false,
				isCanSend: false,
				icon:''

			};
		},
		watch: {
			value: {
				handler(newVal) {
					this.initValue()
				},
				deep: true
			}
		},
		methods: {
			initValue() {
				this.numValue = this.value.value!==null? this.value.value : '--';
				this.unit = this.value.unit;
				this.icon = this.value.icon !== null && this.value.icon !== "" ? this.value.icon : 'edit-pen';
			},
			open() {
				let title = '';
				if (this.device.status !== 3 && this.device.isShadow !== 1) {
					this.switchValue = this.value.value !== null ? this.value.value : 0
					if (this.device.status === 1) {
						title = this.$tt('variable.041-8');
					} else if (this.device.status === 2) {
						title = this.$tt('variable.041-9');
					} else {
						title = this.$tt('variable.041-10');
					}
					uni.$u.toast(title);
					return;
				}
				this.show = true

			},
			close(){
				this.numValue = this.value.value
				this.show = false
			},
			handleSendService() {
				if (!this.isCanSend) {
					uni.showToast({
						title: "请输入正确范围内容",
						icon: 'none'
					})
					return;
				}


				const value = this.numValue;
				const item = this.value
				this.$emit('send-Service', value, item)
				this.show = false
			},
			// 判断输入是否超过范围
			justNumber(item, val) {
				if (item.max < val || item.min > val) {
					this.isCanSend = false
				} else {
					this.isCanSend = true
				}
				this.$forceUpdate()
			},

		}
	}
</script>

<style lang="scss" scoped>
	.num-control1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		// border-radius: 20rpx;
		height: 90rpx;

		.title {
			display: flex;
			align-items: center;

			.icon {
				width: 70rpx;
				height: 70rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 100%;
				margin-right: 20rpx;
			}

			.text {
				font-size: 30rpx;
				min-width: 80rpx;
				max-width: 240rpx;
				max-height: 80rpx;
				overflow: hidden;
			}
		}
	}

	.other {
		.issue-popup {
			padding: 20rpx;
			margin-bottom: 100rpx;

			.nav {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				margin-bottom: 34rpx;
			}

			.with-range {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 10px;
			}

			::v-deep .u-form {
				background: #ffffff;
				padding: 0 20rpx;
				border-radius: 16rpx;
			}

			.model-popup {
				margin-bottom: 100rpx;
				padding: 10rpx 0;

				.cell-group-wrap {
					background: #eef3f7;

					.cell-wrap {
						text-align: center;
						background: #fff;
						padding: 5rpx 0;
						border-bottom: 1rpx solid #f8f8f8;

						&:last-child {
							margin-top: 15rpx;
						}
					}
				}
			}
		}
	}
</style>