pref: 优化app端下发命令弹窗

 <template>
 <template>
-
+	<view class="w-100 modal-content">
+		<view class="header-title">命令下发</view>
+		<view class="u-flex">
+			<text class="type-text">下发类型:</text>
+			<u-radio-group v-model="commandType" placement="row">
+				<u-radio activeColor="#3388FF" label="单向" name="OneWay"></u-radio>
+				<view style="margin: 0 20rpx;"></view>
+				<u-radio activeColor="#3388FF" label="双向" name="TwoWay"></u-radio>
+			</u-radio-group>
+		</view>
+		<view class="content-body">
+			<div class="u-flex u-row-between">
+				<u--textarea :placeholder="`请输入下发内容${isShowTCP?'(字符串格式)':'(json格式)'}`"
+					v-model="inputCommandVal" />
+				<u-icon v-if="!isShowTCP" @click="handleCopy(copyTextValue)" name="question-circle"
+					color="#2979ff" size="28" class="ml-10">
+				</u-icon>
+	
+			</div>
+		</view>
+		<view class="button-group">
+			<view>
+				<u-button :customStyle="{ color: '#333' }" color="#e3e3e5" shape="circle" text="取消"
+					@click="cancelCommand"></u-button>
+			</view>
+			<view>
+				<u-button color="#3388ff" shape="circle" text="确认" @click="confirmCommand"></u-button>
+			</view>
+		</view>
+	</view>
 </template>
 </template>
 
 
 <script>
 <script>
+	import {
+		useShowModal
+	} from '@/plugins/utils.js'
+
 	export default {
 	export default {
+		props: {
+			isShowTCP: Boolean
+		},
+		data() {
+			return {
+				current: 0,
+				commandType: 'OneWay',
+				inputCommandVal: '',
+				copyTextValue: {
+					"method": "methodThingskit",
+					"params": {
+						"pin": 7,
+						"value": 1
+					}
+				}
+			}
+		},
+		methods: {
+			cancelCommand() {
+				this.$emit('cancelCommand')
+			},
+			confirmCommand() {
+				this.$emit('confirmCommand', this.commandType, this.inputCommandVal)
+			},
+			handleCopy(value) {
+				useShowModal(JSON.stringify(value), '命令下发', '复制内容').then(res => {
+					uni.setClipboardData({
+						data: JSON.stringify(value),
+						success: () => {
+							uni.showToast({
+								title: '复制成功'
+							})
+						}
+					});
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.modal-content {
+		width: 720rpx;
+		padding: 0 30rpx;
+		background-color: white;
+
+		.header-title {
+			text-align: center;
+			font-weight: 700;
+			margin-bottom: 40rpx;
+		}
+
+		.type-text {
+			color: #333;
+			font-size: 14px;
+			font-weight: 700;
+			margin-right: 30rpx;
+		}
+
+		.content-body {
+			margin-top: 28rpx;
+			width: 100%;
+		}
+
+		.button-group {
+			display: flex;
+			margin-top: 40rpx;
+			justify-content: space-between;
 
 
+			view {
+				width: 300rpx;
+			}
+		}
 	}
 	}
-</script>
+</style>

@@ -6,23 +6,25 @@
 		<view class="basic-header">
 		<view class="basic-header">
 			<view class="u-flex">
 			<view class="u-flex">
 				<view class="pl-3">
 				<view class="pl-3">
-					<u-icon v-if="deviceDetail.deviceInfo.longitude !== ''" @click="handleClick" name="map-fill">
-					</u-icon>
+					<u-icon v-if="deviceDetail.deviceInfo.longitude !== ''" @click="handleClick" name="map-fill"></u-icon>
 				</view>
 				</view>
 				<view class="basic-text text-clip ml-2">
 				<view class="basic-text text-clip ml-2">
-					{{ deviceDetail.alias? deviceDetail.alias: deviceDetail.name }}
+					{{ deviceDetail.alias ? deviceDetail.alias : deviceDetail.name }}
 				</view>
 				</view>
-				<view class="basic-text-status  ml-2" :style="{ color: formatTextStatus(deviceDetail.deviceState)}">
+				<view class="basic-text-status ml-2" :style="{ color: formatTextStatus(deviceDetail.deviceState) }">
 					{{ deviceStatus }}
 					{{ deviceStatus }}
 				</view>
 				</view>
 			</view>
 			</view>
 			<!-- 命令下发 设备在线并且不是网关子设备 -->
 			<!-- 命令下发 设备在线并且不是网关子设备 -->
-			<view class="mr-2" v-if="deviceDetail.deviceState === 'ONLINE' && deviceDetail.deviceType !== 'SENSOR'">
+			<!-- v-if="deviceDetail.deviceState === 'ONLINE' && deviceDetail.deviceType !== 'SENSOR'" -->
+			<view class="mr-2">
 				<!-- #ifdef MP -->
 				<!-- #ifdef MP -->
 				<u-button type="primary" shape="circle" size="mini" text="下发命令" @click="handleMpShowModal" />
 				<u-button type="primary" shape="circle" size="mini" text="下发命令" @click="handleMpShowModal" />
 				<!-- #endif -->
 				<!-- #endif -->
 				<!-- #ifdef APP-PLUS -->
 				<!-- #ifdef APP-PLUS -->
-				<u-button type="primary" shape="circle" size="mini" text="下发命令" @click="handleAppShowModal" />
+				<view @tap="handleAppShowModal" data-target="Modal">
+					<text>下发命令</text>
+				</view>
 				<!-- #endif -->
 				<!-- #endif -->
 			</view>
 			</view>
 		</view>
 		</view>
@@ -60,201 +62,205 @@
 		</view>
 		</view>
 		<!-- 命令下发 -->
 		<!-- 命令下发 -->
 		<!-- #ifdef APP-PLUS -->
 		<!-- #ifdef APP-PLUS -->
-		<app-command-issuance></app-command-issuance>
+		<!-- 原生弹窗 -->
+		<view class="cu-modal" :class="modalName == 'Modal' ? 'show' : ''">
+			<view class="cu-dialog" style="padding: 300rpx 0 70rpx">
+				<app-command-issuance :isShowTCP="isShowTCP" @hideModal="hideMpModal" @cancelCommand="cancelCommand" @confirmCommand="confirmCommand"></app-command-issuance>
+			</view>
+		</view>
 		<!-- #endif -->
 		<!-- #endif -->
 		<!-- #ifdef MP -->
 		<!-- #ifdef MP -->
 		<!-- u-modal在app端弹窗层级无法覆盖 -->
 		<!-- u-modal在app端弹窗层级无法覆盖 -->
-		<mp-command-issuance :isShowTCP="isShowTCP" :showModal="mpShowModal" @hideModal="hideMpModal"
-			@cancelCommand="cancelCommand" @confirmCommand="confirmCommand"></mp-command-issuance>
+		<mp-command-issuance
+			:isShowTCP="isShowTCP"
+			:showModal="mpShowModal"
+			@hideModal="hideMpModal"
+			@cancelCommand="cancelCommand"
+			@confirmCommand="confirmCommand"
+		></mp-command-issuance>
 		<!-- #endif -->
 		<!-- #endif -->
 	</view>
 	</view>
 </template>
 </template>
 
 
 <script>
 <script>
-	import {
-		formatToDate
-	} from '@/plugins/utils.js';
-	import {
-		issueCommand
-	} from '../api/index.js';
-	import api from '@/api/index.js'
-	import mpCommandIssuance from './mp-command-issuance.vue'
-	import appCommandIssuance from './app-command-issuance.vue'
+import { formatToDate } from '@/plugins/utils.js';
+import { issueCommand } from '../api/index.js';
+import api from '@/api/index.js';
+import mpCommandIssuance from './mp-command-issuance.vue';
+import appCommandIssuance from './app-command-issuance.vue';
 
 
-	export default {
-		components: {
-			mpCommandIssuance,
-			appCommandIssuance,
+export default {
+	components: {
+		mpCommandIssuance,
+		appCommandIssuance
+	},
+	props: {
+		deviceDetail: {
+			type: Object,
+			default: () => ({})
+		}
+	},
+	data() {
+		return {
+			mpShowModal: false,
+			commandValue: {},
+			isShowTCP: false, //用于下发命令时判断是否是TCP/UDP
+			modalName: null
+		};
+	},
+	computed: {
+		deviceStatus() {
+			return this.deviceDetail.deviceState === 'INACTIVE' ? '待激活' : this.deviceDetail.deviceState === 'ONLINE' ? '在线' : '离线';
 		},
 		},
-		props: {
-			deviceDetail: {
-				type: Object,
-				default: () => ({})
-			}
+		deviceType() {
+			return this.deviceDetail.deviceType === 'DIRECT_CONNECTION'
+				? '直连设备'
+				: this.deviceDetail.deviceType === 'GATEWAY'
+				? '网关设备'
+				: this.deviceDetail.deviceType === 'SENSOR'
+				? '网关子设备'
+				: '';
+		},
+		alarmStatus() {
+			return this.deviceDetail.alarmStatus === '0' ? '否' : '是';
+		},
+		formatLastOnlineTime() {
+			return formatToDate(Number(this.deviceDetail.lastOnlineTime), 'YYYY-MM-DD HH:mm:ss');
+		}
+	},
+	onLoad() {
+		// 隐藏原生的tabbar
+		uni.hideTabBar();
+	},
+	methods: {
+		formatTextStatus(deviceState) {
+			return deviceState === 'INACTIVE' ? '#666' : deviceState === 'ONLINE' ? '#377DFF' : '#DE4437';
 		},
 		},
-		data() {
-			return {
-				mpShowModal: false,
-				appShowModal: false,
-				commandValue: {},
-				isShowTCP: false, //用于下发命令时判断是否是TCP/UDP
+		handleClick() {
+			const data = {
+				longitude: this.deviceDetail.deviceInfo.longitude || 0,
+				latitude: this.deviceDetail.deviceInfo.latitude || 0
 			};
 			};
+			uni.navigateTo({
+				url: '/device-subpackage/device-detail/device-position?data=' + JSON.stringify(data)
+			});
 		},
 		},
-		computed: {
-			deviceStatus() {
-				return this.deviceDetail.deviceState === 'INACTIVE' ? '待激活' : this.deviceDetail.deviceState === 'ONLINE' ?
-					'在线' : '离线'
-			},
-			deviceType() {
-				return this.deviceDetail.deviceType === 'DIRECT_CONNECTION' ?
-					'直连设备' :
-					this.deviceDetail.deviceType === 'GATEWAY' ?
-					'网关设备' :
-					this.deviceDetail.deviceType === 'SENSOR' ?
-					'网关子设备' :
-					'';
-			},
-			alarmStatus() {
-				return this.deviceDetail.alarmStatus === '0' ? '否' : '是';
-			},
-			formatLastOnlineTime() {
-				return formatToDate(Number(this.deviceDetail.lastOnlineTime), 'YYYY-MM-DD HH:mm:ss');
-			}
+		disabledScroll() {
+			return;
 		},
 		},
-		onLoad() {
-			// 隐藏原生的tabbar
-			uni.hideTabBar();
+		handleAppShowModal(e) {
+			this.modalName = e.currentTarget.dataset.target;
 		},
 		},
-		methods: {
-			formatTextStatus(deviceState) {
-				return deviceState === 'INACTIVE' ? '#666' : deviceState === 'ONLINE' ? '#377DFF' : '#DE4437'
-			},
-			handleClick() {
-				const data = {
-					longitude: this.deviceDetail.deviceInfo.longitude || 0,
-					latitude: this.deviceDetail.deviceInfo.latitude || 0
-				};
-				uni.navigateTo({
-					url: '/device-subpackage/device-detail/device-position?data=' + JSON.stringify(data)
-				});
-			},
-			disabledScroll() {
-				return;
-			},
-			handleAppShowModal() {
-				this.appShowModal = true
-				this.$refs.appCommandIssuanceRef.open()
-			},
-			handleMpShowModal() {
-				const {
-					transportType
-				} = this.deviceDetail.deviceProfile
-				this.isShowTCP = transportType == 'TCP' ? true : false
-				this.mpShowModal = true;
-			},
-			hideMpModal() {
-				this.mpShowModal = false;
-			},
-			hideAppModal() {
-				this.appShowModal = false
-			},
-			async confirmCommand(commandType, inputCommandVal) {
-				try {
-					if (this.isShowTCP) { //TCP的格式只能是字符串
-						const zg = /^[0-9a-zA-Z]*$/
-						if (!zg.test(inputCommandVal)) {
-							uni.$u.toast('输入的内容只能是字母和数字的组合')
-							return
-						}
-						this.commandValue.params = inputCommandVal
-					} else {
-						this.commandValue.params = JSON.parse(inputCommandVal);
+		handleMpShowModal() {
+			const { transportType } = this.deviceDetail.deviceProfile;
+			this.isShowTCP = transportType == 'TCP' ? true : false;
+			this.mpShowModal = true;
+		},
+		hideMpModal() {
+			this.mpShowModal = false;
+		},
+		hideAppModal() {
+			this.modalName = null;
+		},
+		async confirmCommand(commandType, inputCommandVal) {
+			try {
+				if (this.isShowTCP) {
+					//TCP的格式只能是字符串
+					const zg = /^[0-9a-zA-Z]*$/;
+					if (!zg.test(inputCommandVal)) {
+						uni.$u.toast('输入的内容只能是字母和数字的组合');
+						return;
 					}
 					}
-					if (!commandJsonValue) return uni.$u.toast('请输入下发内容~');
-					this.commandValue.persistent = true;
-					this.commandValue.additionalInfo = {
-						cmdType: 'API'
-					};
-					this.commandValue.method = 'methodThingskit';
-					this.commandValue.params = commandJsonValue
-					await api.deviceApi.issueCommand(commandType, this.deviceDetail.tbDeviceId, this.commandValue);
-					this.cancelCommand();
-					uni.$u.toast('下发成功~');
-				} catch (e) {
-					uni.$u.toast('下发失败~');
+					this.commandValue.params = inputCommandVal;
+				} else {
+					this.commandValue.params = JSON.parse(inputCommandVal);
 				}
 				}
-			},
-			cancelCommand() {
-				this.hideMpModal();
-				this.hideAppModal()
+				if (!commandJsonValue) return uni.$u.toast('请输入下发内容~');
+				this.commandValue.persistent = true;
+				this.commandValue.additionalInfo = {
+					cmdType: 'API'
+				};
+				this.commandValue.method = 'methodThingskit';
+				this.commandValue.params = commandJsonValue;
+				await api.deviceApi.issueCommand(commandType, this.deviceDetail.tbDeviceId, this.commandValue);
+				this.cancelCommand();
+				uni.$u.toast('下发成功~');
+			} catch (e) {
+				uni.$u.toast('下发失败~');
 			}
 			}
+		},
+		cancelCommand() {
+			this.hideMpModal();
+			this.hideAppModal();
 		}
 		}
-	};
+	}
+};
 </script>
 </script>
 
 
 <style lang="scss" scoped>
 <style lang="scss" scoped>
-	.basic-page {
-		padding: 0 30rpx;
+@import url('../static/modal.css');
+.basic-page {
+	padding: 0 30rpx;
 
 
-		.basic-header {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			height: 140rpx;
-			background-color: #fff;
-			border-radius: 20rpx;
+	.basic-header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: 140rpx;
+		background-color: #fff;
+		border-radius: 20rpx;
 
 
-			.basic-text {
-				width: 370rpx;
-			}
+		.basic-text {
+			width: 370rpx;
+		}
 
 
-			.cu-item {
-				background: #3388FF;
-				border-radius: 12px;
-				width: 120rpx;
-				height: 48rpx;
-				text-align: center;
-				line-height: 40rpx;
+		.cu-item {
+			background: #3388ff;
+			border-radius: 12px;
+			width: 120rpx;
+			height: 48rpx;
+			text-align: center;
+			line-height: 40rpx;
 
 
-				text {
-					font-size: 12px;
-					font-family: PingFangSC-Regular, PingFang SC;
-					font-weight: 400;
-					color: #FFFFFF;
-				}
+			text {
+				font-size: 12px;
+				font-family: PingFangSC-Regular, PingFang SC;
+				font-weight: 400;
+				color: #ffffff;
 			}
 			}
+		}
 
 
-			.basic-text-status {
-				font-size: 14px;
-			}
+		.basic-text-status {
+			font-size: 14px;
 		}
 		}
+	}
 
 
-		.detail {
-			background-color: #fff;
-			margin-top: 30rpx;
-			border-radius: 20rpx;
-			width: 690rpx;
+	.detail {
+		background-color: #fff;
+		margin-top: 30rpx;
+		border-radius: 20rpx;
+		width: 690rpx;
 
 
-			.detail-item {
-				padding: 30rpx;
-				display: flex;
-				align-items: center;
+		.detail-item {
+			padding: 30rpx;
+			display: flex;
+			align-items: center;
 
 
-				.detail-label {
-					color: #333;
-					font-size: 15px;
-				}
+			.detail-label {
+				color: #333;
+				font-size: 15px;
+			}
 
 
-				.detail-value {
-					color: #666;
-					font-size: 14px;
-					margin-left: 30rpx;
-				}
+			.detail-value {
+				color: #666;
+				font-size: 14px;
+				margin-left: 30rpx;
 			}
 			}
 		}
 		}
 	}
 	}
+}
 
 
-	/deep/ .u-modal__content {
-		padding: 30rpx 0 !important;
-	}
-</style>
+/deep/ .u-modal__content {
+	padding: 30rpx 0 !important;
+}
+</style>

+/* ==================
+模态窗口 采用colorsui的部分样式
+==================== */
+
 .cu-modal {
 .cu-modal {
 	position: fixed;
 	position: fixed;
 	top: 0;
 	top: 0;
@@ -18,7 +22,7 @@
 }
 }
 
 
 .cu-modal::before {
 .cu-modal::before {
-	content: "\200B";
+	content: '\200B';
 	display: inline-block;
 	display: inline-block;
 	height: 100%;
 	height: 100%;
 	vertical-align: middle;
 	vertical-align: middle;
@@ -89,8 +93,8 @@
 	transform: translateX(0%);
 	transform: translateX(0%);
 }
 }
 
 
-.cu-modal .cu-dialog>.cu-bar:first-child .action {
+.cu-modal .cu-dialog > .cu-bar:first-child .action {
 	min-width: 100rpx;
 	min-width: 100rpx;
 	margin-right: 0;
 	margin-right: 0;
 	min-height: 100rpx;
 	min-height: 100rpx;
-}
+}