WZC2/fe/PDA/mycomponents/common/comMessage.vue

<template>
	<!-- @maskClick="afterClose()" -->
	<uni-popup ref="popupMessage" style="width: 100%; height:100%;" :maskClick='false'>
		<view class="messagePopup center" @touchmove.stop.prevent="clear">
			<scroll-view style="" scroll-y="true" @touchmove.stop.prevent="clear">
				<view class="center" @touchmove.stop.prevent="clear" style="width: 230px;min-height: 100px; ">
					<view style="margin-left: 15px;margin-right: 15px; ">
						{{content}}
					</view>
				</view>
			</scroll-view>

			<view v-if="type=='confirm' || type=='rescan' " class="uni-flex uni-row">
				<view class="flex-item">
					<button @click="cancel()" plain="true" class="messageButton">{{cancelText}}</button>
				</view>
				<view class="flex-item">
					<button @click="confirm()" plain="true" class="messageButton"
						style="color: #007AFF;">{{confirmText}}</button>
					<!-- 					<button @click="confirm()" plain="true" class="messageButton"
						style="color: #007AFF;">{{confirmText}}({{seconds}}s)</button> -->
				</view>
			</view>
			<view v-else-if="type=='commit' || type=='autoClose'">
				<button @click="closeMessage()" plain="true" class="messageButton">关闭({{seconds}}s)</button>
			</view>
			<view v-else>
				<button @click="closeMessage()" plain="true" class="messageButton">关闭</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {
		showErrorMsg,
		scanErrorAudio,
		vibrate
	} from '@/common/basic.js';
	export default {
		data() {
			return {
				content: '',
				cancelText: '否',
				confirmText: '是',
				type: 'basic', //basic默认消息，commitMessage:提交成功的消息
				timer: null,
				seconds: 3,
				confirmResult: true
			}
		},
		created() {

		},
		methods: {
			showMessage(content) {
				this.openMessage(content, 'basic');
				// this.startTimer();
				vibrate();
			},

			//显示提交成功
			showCommitSuccess() {
				this.openMessage('提交成功', 'commit');
				this.startTimer();
			},

			//扫描消息
			showScanMessage(content) {
				this.openMessage(content, 'scan');
				scanErrorAudio(); //播放语音
			},

			//显示是否的确认消息
			showConfirmMessage(content) {
				this.openMessage(content, 'confirm');
			},

			//重新扫描提示
			showRescanMessage(content) {
				this.openMessage(content, 'rescan');
			},

			//显示自动关闭的消息
			showAutoCloseMessge(content) {
				this.openMessage(content, 'autoClose');
				this.startTimer();
				vibrate();
			},

			//显示是否的确认消息
			showOkCanceConfirmMessage(content) {
				this.cancelText = '取消';
				this.confirmText = '确定';
				this.openMessage(content, 'confirm');
			},

			openMessage(content, type) {
				this.content = content;
				this.type = type;
				this.$refs['popupMessage'].open("center");

			},

			closeMessage() {
				this.confirmResult = false;
				clearInterval(this.timer) //清空timer
				this.$refs['popupMessage'].close();
				this.afterClose();
			},

			maskClick() {
				this.afterClose();
			},

			confirm() {
				this.confirmResult = true;
				this.closeMessage();
			},

			cancel() {
				this.closeMessage();
			},

			//关闭
			afterClose() {
				if (this.type == 'basic') {
					this.$emit("afterClose");
				} else if (this.type == 'commit') {
					this.$emit("afterCloseCommitMessage"); //关闭提交成功消息后返回任务列表
				} else if (this.type == 'scan') {
					this.$emit("afterCloseScanMessage"); //关闭扫描消息后继续扫描
				} else if (this.type == 'rescan') {
					this.$emit("afterRescanMessage", this.confirmResult);
				}
			},

			startTimer() {
				this.seconds = 3;
				clearInterval(this.timer)
				this.timer = setInterval(() => {
					this.seconds--
					// console.log("倒计时时间", this.seconds);
					if (this.seconds <= 0) {
						this.timeUp()
						return
					}
				}, 1000)
			},

			timeUp() {
				// clearInterval(this.timer)
				console.log('时间到')
				this.closeMessage();
			},

			clear() {
				return;
			},
		}
	}
</script>

<!-- 	background-color: #fff; -->
<style scoped lang="scss">
	.center {
		flex: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		white-space: pre-wrap;
		word-wrap: break-word;
		// align-items: center;
	}

	.flex-item {
		width: 50%;
		text-align: center;
	}

	.messageButton {
		border-color: #F8F8F8;
	}

	.messagePopup {
		background-color: #fff;
		border-radius: 5px;
	}

	/deep/ .uni-input-input {
		font-size: 20px;
		height: 46px;
	}
</style>