zx_flk_app/pages/index/components/IosUnlockAuth.vue

<template>
    <u-popup v-model="showDialog" mode="bottom" border-radius="28" @close="close">
        <view class="dialog-content">
            <view class="title">请先开启位置授权</view>
            <view class="tips">为保证 感应解锁 的正常使用，请 开启位置授权 并 打开精准位置 开关，可提高解锁成功率，且不会明显增加手机电量消耗。</view>
            <view class="authorization-wrap">
                <view class="corner-mark">授权引导</view>
                 <view class="step-item">
                    <view class="address-title-view flex-row">
                    	<image style="width: 62rpx;height: 84rpx;" src="https://qiniu.bms16.com/Fve-wxQ2MHOLXoQ3IZ7QdcKoLlwW" mode=""></image>
						<view class="address-title">
							<view>位置权限</view>
							<view class="address-text-tip">打开手机定位，并允许APP <text style="color: #0A59F7;">「始终」</text>使用</view>
						</view>
					</view>
					<view v-for="(item, idx) in authStepList" :key="idx" @tap="enablePermissions(item)" class="permission-set-view">
					<!-- <view class="permission-set-view" style="margin-bottom: 42rpx;"> -->
						<view class="icon-step"><image style="width: 160rpx;height: 78rpx;" src="https://qiniu.bms16.com/FvTiAtpG8QOlJxGrNquB-yI396Be" /></view>
						<view class="step-text">第<text style="font-size: 40rpx; font-weight: 600;margin: 0 6rpx;"> {{ idx+1 }} </text>步</view>
						<view class="permission-tip-view flex-row flex-between">
							<view class="permission-tip flex-row">
								{{ item.desc }}
								<image style="width: 28rpx;height: 28rpx;" src="https://qiniu.bms16.com/FrLjB8R1kL_AQNJjWUaKcDkLC-8O" />
							</view>
							<view :class="['turn-on-switch', item.state && 'is-open']">
								{{ item.state ? $t('已开启') : $t('未开启') }}
							</view>
						</view>
						<view class="permission-top-view">{{ item.title }}</view>
						<view v-if="item.type=='awalysLocation'" class="permission-one flex-row flex-between">
							<text class="alaways-text">始终</text>
							<image class="check-icon" src="https://qiniu.bms16.com/Fj595k1vS6PArDsvoPTkO8PcyqRc" mode=""></image>
						</view>
					</view>
					<!-- <view class="permission-set-view">
						<view class="icon-step"><image style="width: 160rpx;height: 78rpx;" src="https://qiniu.bms16.com/FvTiAtpG8QOlJxGrNquB-yI396Be" /></view>
						<view class="step-text">第<text style="font-size: 40rpx; font-weight: 600;margin: 0 6rpx;"> 2 </text>步</view>
						<view class="permission-tip-view flex-row flex-between">
							<view class="permission-tip flex-row">
								开启请准位置开关
								<image style="width: 28rpx;height: 28rpx;" src="https://qiniu.bms16.com/FrLjB8R1kL_AQNJjWUaKcDkLC-8O" />
							</view>
							<view :class="['turn-on-switch', state && 'is-open']">
								{{ state ? $t('已开启') : $t('未开启') }}
							</view>
						</view>
						<view class="permission-top-view">精准位置</view>
					</view> -->
                 </view>
            </view>
            <view class="btn" @tap="linkTo" >我已开启</view>
        </view>
    </u-popup>
</template>

<script>
	// import mixin from '@/mixin'; // 引入 mixin
export default {
	// mixins:[mixin],
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
			state:true,
            showDialog: this.value,
			authStepList:[],

        }
    },
    watch: {
        value(newValue) {
			this.showDialog = newValue
			if (newValue) {
				this._initCheckdPermission()
			}
		}
    },
    methods: {
		async _initCheckdPermission() {
			this.authStepList=app.globalData.permissionArr
		},
        close() {
            this.$emit('closePermission')
        },
		linkTo(){
			// let isOpenAllPermission=false
			// app.globalData.permissionArr.map(item=>{
			// 	if(!item.state) isOpenAllPermission=true
			// })
			// if (!isOpenAllPermission) {
			//   this.close()
			//   uni.navigateTo({ url: '/pages/bluetoothUnlock/bluetoothPair' })
			// } else {
			//   permision.gotoAppPermissionSetting()
			// }
			uni.navigateTo({ url: '/pages/bluetoothUnlock/bluetoothPair' })
		}
		
    }
}
</script>

<style lang="scss" scoped>
.dialog-content {
    width: 100%;
    height: 100%;
    background: #F1F3F4;
    padding: 40rpx 32rpx;
    .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 40rpx;
        color: #060809;
    }
    .tips {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #828DA2;
        line-height: 40rpx;
        margin: 32rpx 0 40rpx;
    } 
    .authorization-wrap {
        background: #fff;
        // height: 728rpx;
        width: 100%;
        border-radius: 40rpx;
        // padding: 30rpx 24rpx;
        position: relative;
		.step-item{
			padding: 30rpx 24rpx;
		}
        .corner-mark {
          width: 224rpx;
          height: 80rpx;
          background: #0A59F7;
          border-radius: 40rpx 0 0 0;
          display: flex;
          color: #fff;
          line-height: 86rpx;
          text-align: center;
          justify-content: flex-end;
        
          &::after {
            content: "";
            width: 86rpx;
            height: 80rpx;
            background: url('https://qiniu.bms16.com/FibAaPERzqi6m95EP2jREUKixjUi');
            background-size: 100%;
          }
        }
			.address-title-view{
				margin-bottom: 26rpx;
			}
			.address-title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				margin-left: 26rpx;
				color: #060809;
			}
			.address-text-tip{
				font-weight: 400;
				font-size: 24rpx;
				color: #060809;
				margin-top: 16rpx;
			}
			.permission-set-view{
				background: #F4F5F6;
				border-radius: 24rpx;
				padding: 48rpx 36rpx 32rpx;
				position: relative;
			}
			.turn-on-switch {
			          background: #FF791A;
			          border-radius: 20rpx;
			          font-size: 22rpx;
			          color: #FFFFFF;
			          display: flex;
			          align-items: center;
			          justify-content: center;
			          padding: 8rpx 20rpx;
			
			          &.is-open {
			            background: #2ADA62;
			          }
			        }
			.icon-step{
				position: absolute;
				width: 160rpx;
				top: -10rpx;
				left: 0;
				z-index: 10;
				display: flex;
				align-items: center;
			}
			.step-text{
				position: absolute;
				width: 160rpx;
				top: -12rpx;
				left: 30rpx;
				z-index: 100;
				display: flex;
				align-items: center;
			}
			.permission-tip-view{
				margin-bottom: 20rpx;
			}
			.permission-tip{
				font-weight: 400;
				font-size: 24rpx;
				color: #060809;
			}
			.permission-top-view{
				font-weight: 600;
				font-size: 32rpx;
				color: #060809;
				margin-bottom: 20rpx;
			}
			.alaways-text{
				font-weight: 600;
				font-size: 32rpx;
				color: #0A59F7;
			}
			.check-icon{
				width: 40rpx;
				height: 40rpx;
			}
        
    }
    .btn {
        margin-top: 40rpx;
        width: 100%;
        height: 80rpx;
        background: #060809;
        border-radius: 40rpx;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        &:active {
            opacity: 0.8;
        }
    }
}
</style>