shanxian-work-app/component/load-toast/load-toast.vue

<template>
	<view>
		<view v-if="showLoading2" :style="{top:topPadding+'px'}" class="load-container">
			<image class="load-image" src="./img/loading.png"></image>
		</view>
		<view v-if="showSelect" class="pop-container">
			<view class="delay-con">
				<view class="delay-title row-center">
					{{selectTip}}
				</view>
				<view class="delay-content column-center">
					<text>{{selectContent}}</text>
				</view>
				<view class="delay-bottom row-center">
					<view class="delay-view" data-state="cancel" @click="hiddeenSelectDialog" style="border-right:1px solid #d6d6d6">{{cancelText}}</view>
					<view class="delay-view" data-state="confirm" @click="hiddeenSelectDialog">{{confirmText}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let systemInfo, selectCallBack, confirmCallback;
	import {
		selectLabel
	} from '../../static/js/config.js'
	export default {
		name: 'loadToast',
		ready: function() {
			let that = this;
			that.initData();
		},
		data() {
			return {
				showTitleCon: false,
				showBackBtn: false,
				titleName: '',
				statusBarHeight: 0,
				showLoading2: false,
				toastContent: '',
				topPadding: 0,
				showSelect: false,
				isCenter: true,
				selectTip: '',
				selectContent: '',
				confirmText: '',
				cancelText: '',
				dialogContent: '',
				confirmText: ''
			}
		},
		methods: {
			showDialog: function(params, callBack) {
				let that = this;
				confirmCallback = callBack;
				that.dialogContent = params.content != undefined ? params.content : '';
				that.confirmText = params.confirmText != undefined ? params.confirmText : selectLabel[systemInfo.lang][
					'confirmText'
				];
			},
			hiddenDialog: function(e) {
				let that = this;
				if (confirmCallback != undefined)
					confirmCallback();
			},
			initData: function() {
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						console.log(res, 'system');
						if (res.errMsg === 'getSystemInfo:ok') {
							that.statusBarHeight = res.statusBarHeight;
							that.topPadding = res.statusBarHeight + 45
							res.lang = res.language.indexOf('zh') !== -1 ? 'zh' : 'en';
							systemInfo = res;
							that.selectTip = selectLabel[systemInfo.lang]['selectTip'];
							that.confirmText = selectLabel[systemInfo.lang]['confirmText']
						}
					},
				});
			},
			/* 展示选择对话框
			 */
			showSelectDailog: function(params, callBack) {
				let that = this;
				that.showSelect = true;
				that.isCenter = params.isCenter != undefined ? params.isCenter : true;
				that.selectTip = params.selectTip != undefined ? params.selectTip : selectLabel[systemInfo.lang]['selectTip'];
				that.selectContent = params.selectContent != undefined ? params.selectContent : selectLabel[systemInfo.lang][
					'content'
				];
				that.confirmText = params.confirmText != undefined ? params.confirmText : selectLabel[systemInfo.lang][
					'confirmText'
				];
				that.cancelText = params.cancelText != undefined ? params.cancelText : selectLabel[systemInfo.lang]['cancelText'];
				selectCallBack = callBack;
			},

			hiddeenSelectDialog: function(e) {
				let that = this;
				that.showSelect = false;
				selectCallBack(e.currentTarget.dataset.state);
			}
		}
	}
</script>

<style>
	.load-container {
		pointer-events: auto;
		color: #000;
		font-size: 20px;
		z-index: 9999;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.load-image {
		width: 50px;
		height: 50px;
		animation: loading-rotate 1s linear infinite;
	}

	@keyframes loading-rotate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.pop-container {
		pointer-events: auto;
		color: #000;
		font-size: 20px;
		z-index: 9999;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.row-center {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.delay-con {
		width: 80%;
		border-radius: 25rpx;
		background: white;
		font-size: 32rpx;
		margin-bottom: 100rpx;
		-webkit-animation: fadeleftIn .4s;
		animation: fadeleftIn .4s;
		-webkit-animation-name: popIn;
		animation-name: popIn;
	}


	.delay-title {
		padding-top: 30rpx;
		padding-bottom: 20rpx;
	}

	.column-center {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.delay-content {
		padding-bottom: 30rpx;
		line-height: 45rpx;
		text-align: center;
		padding-left: 20px;
		padding-right: 20px;
	}

	.delay-bottom {
		width: 100%;
		border-top: 1px solid #d6d6d6;
		color: #027bfe;
	}

	.delay-view {
		width: 50%;
		padding-top: 25rpx;
		padding-bottom: 25rpx;
		text-align: center;
	}

	.toast-con {
		position: absolute;
		z-index: 9999;
		left: 0;
		top: 200px;
		width: calc(100% - 100px);
		padding-top: 15px;
		padding-bottom: 15px;
		margin-left: 50px;
		margin-right: 50px;
		border-radius: 10px;
		background: rgba(0, 0, 0, 0.8);
		color: white;
		text-align: center;
		font-size: 15px;
		-webkit-animation: fadelogIn .2s;
		animation: fadelogIn .2s;
	}

	@-webkit-keyframes popIn {
		0% {
			-webkit-transform: scale3d(0, 0, 0);
			transform: scale3d(0.5, 0.5, 0.5);
			opacity: 0;
		}

		50% {
			-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
			animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
		}

		100% {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
			-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
			animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
			opacity: 1;
		}
	}

	@keyframes popIn {
		0% {
			-webkit-transform: scale3d(0, 0, 0);
			transform: scale3d(0.5, 0.5, 0.5);
			opacity: 0;
		}

		50% {
			-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
			animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
		}

		100% {
			-webkit-transform: scale3d(1, 1, 1);
			transform: scale3d(1, 1, 1);
			-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
			animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
			opacity: 1;
		}
	}

	@keyframes fadelogIn {
		0% {
			-webkit-transform: translate3d(0, 100%, 0);
			-webkit-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);
		}

		100% {
			-webkit-transform: none;
			transform: none;
		}
	}

	@-webkit-keyframes fadelogIn {
		0% {
			-webkit-transform: translate3d(0, 100%, 0);
		}

		100% {
			-webkit-transform: none;
		}
	}

	.top-con {
		background: linear-gradient(to right, #57bce8, #275fd0);
		width: 100%;
		color: white;
		position: relative;
	}

	.top-view {
		height: 45px;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
		font-size: 16px;
	}

	.top-view-img {
		position: absolute;
		left: 16px;
		top: 12px;
		width: 20px;
		height: 20px;
	}

	.top-view-img:active {
		top: 13px;
	}
</style>