liaotian/components/yk-authpup/yk-authpup.vue

<template>
	<view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="">
		<view :class="[type, ani, animation ? 'ani' : '']" class="uni-custom uni-popup__wrapper"
			@click="close(true)">
			<view class="uni-popup__wrapper-box">
				<view :style="[{paddingTop: StatusBar+'px'}]">
					<view class="title">{{authList[permissionID].title}}</view>
					<view class="content">{{authList[permissionID].content}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'YkAuthpup',
		props: {
			// 开启动画
			animation: {
				type: Boolean,
				default: true
			},
			//弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层,
			type: {
				type: String,
				default: 'center'
			},
			show: {
				type: Boolean,
				default: true
			},
			permissionID: {
				type: [String, Number],
				default: ''
			}
		},
		data() {
			return {
				ani: '',
				showPopup: false,
				StatusBar:'',
				authList: {
					'WRITE_EXTERNAL_STORAGE': {
						title: "易趣联盟对存储空间/照片权限申请说明",
						content: "便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、保存相册、分享、客服沟通等场景中读取和写入相册和文件内容。"
					},
					'ACCESS_FINE_LOCATION': {
						title: "易趣联盟对地理位置权限申请说明",
						content: "便于应用程序可以提供基于位置的服务、定位导航、附近搜索等功能。"
					},
					'CALL_PHONE': {
						title: "易趣联盟对拨打/管理电话权限申请说明",
						content: "便于您使用该功能联系客服、业务经理与联系等场景下使用"
					},
                    'CAMERA': {
                        title: "易趣联盟对拍摄照片/录制视频权限申请说明",
                        content: "便于您使用该功能上传您的照片/图片/视频及用于更换头像、意见反馈、保存相册、分享、客服沟通等场景下使用。"
                    },
                    'RECORD_AUDIO': {
                        title: "易趣联盟申请获取麦克风权限",
                        content: "在下方弹窗中选择允许后，你可以在易趣联盟中发送语音消息的场景使用麦克风进行录音。"
                    }
				}
			}
		},
		created() {
			this.getSystemInfo();
		},
		methods: {
			//获取状态栏高度
			getSystemInfo(){
				uni.getSystemInfo({
				  success: function(e) {
				    this.StatusBar = e.statusBarHeight;
				  }
				})
			},
			open() {
				this.requestPermissions(this.permissionID);
			},
			close(type) {
				this.ani = ''
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPopup = false
					}, 300)
				})
			},
			//权限检测
			requestPermissions(permissionID) {
				let _this = this;
				let _permissionID;
				_permissionID = 'android.permission.' + permissionID;
				// #ifdef APP-PLUS
				//判断安卓与ios设备
				if ( plus.os.name =='Android') {
					plus.android.checkPermission(_permissionID,
						granted => {
							if (granted.checkResult == -1) {
								//还未授权当前查询的权限，打开权限申请目的自定义弹框
								_this.showPopup = true;
								_this.$nextTick(() => {
									setTimeout(() => {
										_this.ani = 'uni-' + _this.type
									}, 30)
								})
							}
						},
						error => {
							console.log(error.message);
						}
					);
					plus.android.requestPermissions([_permissionID],
						(e) => {
							//关闭权限申请目的自定义弹框
							_this.ani = '';
							_this.$nextTick(() => {
								setTimeout(() => {
									_this.showPopup = false
								}, 300)
							})
							if (e.granted.length > 0) {
								//当前查询权限已授权，此时可以通知页面执行接下来的操作
								_this.$emit('changeAuth');
							}
						})
				}else{
					//IOS不需要，在配置文件的隐私信息访问的许可描述里可添加
				}
				// #endif
			}
		}
	}
</script>
<style lang="scss">
	.uni-popup {
		position: fixed;
		/*  #ifdef  H5  */
		top: 0px;
		// top: 50px;
		/*  #endif  */
		/*  #ifndef  H5  */
		top: 0px;
		/*  #endif  */
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99999;
		overflow: hidden;
        height: 100vh;
        background-color: #fff;
		&__wrapper {
			position: absolute;
			z-index: 999;
			box-sizing: border-box;

			&.ani {
				transition: all 0.3s;
			}

			&.top {
				top: 0;
				left: 0;
				width: 100%;
				transform: translateY(-100%);
			}

			&.bottom {
				bottom: 0;
				left: 0;
				width: 100%;
				transform: translateY(100%);
			}

			&.right {
				bottom: 0;
				left: 0;
				width: 70%;
				transform: translateY(100%);
			}

			&.center {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				transform: scale(1.2);
				opacity: 0;
			}

			&-box {
				position: relative;
				box-sizing: border-box;
			}

			&.uni-custom {
				& .uni-popup__wrapper-box {
					// border-radius: 20upx 20upx 0 0;
					padding: 30upx;
					background: #fff;
					.title{
						font-size: 32rpx;
						font-weight: bold;
					}
					.content{
						margin-top: 16rpx;
						line-height: 1.6;
					}
				}

				&.center {
					& .uni-popup__wrapper-box {
						position: relative;
						max-width: 80%;
						max-height: 80%;
						overflow-y: scroll;
					}
				}

				&.top,
				&.bottom {
					& .uni-popup__wrapper-box {
                        padding-top: 44px;
						width: 100%;
						max-height: 1000upx;
						// overflow-y: scroll;
					}
				}
			}

			&.uni-top,
			&.uni-bottom {
				transform: translateY(0);
			}

			&.uni-center {
				transform: scale(1);
				opacity: 1;
			}
		}
	}
</style>