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

<template>
	<view class="btn-control1"
		:style="{ 'background-color': backColor,'marginTop':marginTop+'px','marginBottom':marginBottom+'px' }">

		<view class="text" :style="{ 'color': nameColor}">
			<span>{{templateName}}</span>
			<view class="tab" v-if="value.isReadonly === 1">
				<image style="width: 16px;height: 16px;" src="/static/read.png"></image>
			</view>
		</view>

		<view class="content">
			<u-switch :disabled="value.isReadonly === 1? true: false" v-if="model === 1" :activeColor="btnColor"
				:activeValue="1" :inactiveValue="0" :size="18" v-model="switchValue" @change="change"></u-switch>
			<u-button v-else size="mini" :plain="true" :text="switchText" :color="btnColor" @click="change"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		render
	} from 'vue';

	export default {
		name: "btnControl1",
		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)'
			},
			btnColor: {
				type: String,
				default: 'rgba(66, 134, 222, 1)'
			},
			templateName: {
				type: String,
				default: "开关控制1"
			},
			model: {
				type: Number,
				default: 1
			},
			value: {
				type: Object,
				require: true
			},
			device: {
				type: Object,
				require: true
			}
		},
		data() {
			return {
				switchValue: 1,
				switchText: "关闭"
			};
		},
		created() {
			this.init()
		},
		watch: {
			value: {
				handler(newVal) {
					this.switchValue = this.value.value !== null ? this.value.value : 0
					this.fetchText(this.switchValue)
				},
				deep: true
			}
		},
		methods: {
			init() {
				this.switchValue = this.value.value !== null ? this.value.value : 0
				this.fetchText(this.switchValue)
			},
			change() {
				console.log("开始改变")
				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;
				}
				if (this.model !== 1) {
					this.switchValue = this.switchValue === 0 ? this.switchValue = 1 : this.switchValue = 0
					this.fetchText(this.switchValue)

					//let item = this.value
				}
				const value = this.switchValue;
				const item = this.value
				//console.log("即将传递的值",value)
				this.$emit('send-Service', value, item)
			},
			fetchText(switchValue) {
				switch (switchValue) {
					case 0:
						this.switchText = this.value.falseText
						break
					case 1:
						this.switchText = this.value.trueText
						break
				}
			}
		}
	}
</script>

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



		.text {
			// display: flex;
			// align-items: center;
			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;
			}
		}

		.content {
			font-size: 70rpx;
		}
	}
</style>