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

<template>
	<view>
		<view class="text-display1"
			: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 class="tab" v-if="value.isReadonly === 1">
					<image style="width: 16px;height: 16px;" src="/static/read.png"></image>
				</view>
			</view>
			<view class="content">
				<text :style="{ 'color': statusColor}">{{textValue}}</text>
			</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 style="width: 100%;">
								<u--input :placeholder="$tt('common.PleaseIpt')" border="none" inputAlign="right"
									v-model="textValue"></u--input>
							</view>

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

		</view>
	</view>

</template>

<script>
	export default {
		name: "textDisplay1",
		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)'
			},
			statusColor: {
				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(7, 154, 217, 1)'
			},
			templateName: {
				type: String,
				default: '文字展示1'
			},

			value: {
				type: Object,
				require: true
			},
			device: {
				type: Object,
				require: true
			}

		},
		data() {
			return {
				textValue: "",
				show: false,
				icon:''
			};
		},
		created() {
			this.init()
		},
		watch: {
			value: {
				handler(newVal) {
					this.init()
				},
				deep: true
			}
		},
		methods: {
			init() {

				this.textValue = this.value.value !== null && this.value.value !== "" ? this.value.value : '--'
				this.icon = this.value.icon !== null && this.value.icon !== "" ? this.value.icon : 'edit-pen'
				
			},
			close() {
				this.textValue = this.value.value
				this.show = false
			},
			handleSendService() {

				const value = this.textValue;
				const item = this.value
				//console.log("即将传递的值",value)
				this.$emit('send-Service', value, item)
				this.show = false
			},
			open() {
				if (this.value.isReadonly === 1)
					return;
				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
			}
		}
	}
</script>

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


		.title {
			display: flex;
			align-items: center;
			max-width: 90%;

			.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;
			}

			.tab {
				position: absolute;
				top: 0;
				right: 0rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 40rpx;
				width: 40rpx;
			}
		}
	}

	.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>