zx_flk_app/pages/bluetoothUnlock/components/AndroidUnlockAuth.vue

<template>
    <u-popup v-model="showDialog" mode="bottom" border-radius="28" @close="close">
        <view class="dialog-content">
            <view class="title">{{ $t('开启感应解锁') }}</view>
            <view class="tips">为保证 感应解锁 的正常使用，请依次开以下权限，开启后可以显著提高解锁成功率，且不会明显增加手机电量消耗</view>
            <view class="authorization-wrap">
                <view class="corner-mark">{{ $t('授权引导') }}</view>
                <view class="step-item-container">
                    <view class="step-item" v-for="(auth, idx) in authStepList" :key="idx">
                        <view :class="['icon', `icon_${auth.type}`]"></view>
                        <view class="desc-wrap">
                            <view class="title-row">
                                <view class="title">{{ auth.title }}</view>
                                <view class="turn-on-switch is-open">{{ $t('已开启') }}</view>
                            </view>
                            <view class="desc">{{ auth.desc }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="btn" @tap="linkTo">{{ $t('我已开启') }}</view>
        </view>
    </u-popup>
</template>

<script>
export default {
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            showDialog: this.value,
        }
    },
    computed: {
        authStepList() {
            const lang = v => this.$t(v)
            return  [
                { title: lang('位置权限'), type: 'location', desc: '打开手机定位，并运行APP始终使用' },
                { title: lang('电池优化'), type: 'battery', desc: '打开电池优化设置， 将弗兰克APP加入保护名单' },
                { title: lang('后台运行'), type: 'backstage', desc: '打开后台运行权限 清选择手动控制' },
                { title: lang('打开应用锁'), type: 'appLock', desc: '打开应用权限锁' },
            ]
        }
    },
    watch: {
        value(newValue) {
            this.showDialog = newValue;
        }
    },
    methods: {
        linkTo() {
            uni.navigateTo({ url: '/pages/bluetoothUnlock/bluetoothPair' })
        },
        close() {
            this.$emit('input', false);
        }
    }
}
</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;
        width: 100%;
        border-radius: 40rpx;
        position: relative;

        .corner-mark {
            width: 224rpx;
            height: 100rpx;
            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%;
            }
        }

        .step-item-container {
            background: #fff;
            border-top-left-radius: 40rpx;
            padding: 30rpx 24rpx;
            margin-top: -24rpx;
        }

        .step-item {
            width: 100%;
            background: #F4F5F6;
            border-radius: 24rpx;
            padding: 32rpx 28rpx;
            margin-bottom: 24rpx;
            display: flex;
            align-items: center;

            &:last-child {
                margin-bottom: 0;
            }

            .desc-wrap {
                flex: 1;
                margin-left: 24rpx;
            }

            .title-row {
                display: flex;
                justify-content: space-between;
                margin-bottom: 24rpx;

                .title {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 32rpx;
                    color: #060809;
                    font-weight: bold;
                }

                .turn-on-switch {
                    background: #2ADA62;
                    border-radius: 20rpx;
                    font-size: 22rpx;
                    color: #FFFFFF;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 8rpx 20rpx;
                }
            }

            .desc {
                font-size: 24rpx;
                color: #060809;
            }
            .icon {
                width: 66rpx;
                height: 70rpx;
            }
            .icon_location {
                background: url('https://qiniu.bms16.com/FpNU0wp-E5Iin60nT8_NwT1_h_xm');
                background-size: 100% 100%;
            }

            .icon_battery {
                background: url('https://qiniu.bms16.com/FjD4CXHuNUL85_JYI7w2MDucjeI-');
                background-size: 100% 100%;
            }

            .icon_backstage {
                background: url('https://qiniu.bms16.com/Fo7RGbv1gokn1iUQpF8tca5aUWkD');
                background-size: 100% 100%;
            }

            .icon_appLock {
                background: url('https://qiniu.bms16.com/FoWg_FjfV5_v9fxvFQ2dHzXOCDPD');
                background-size: 100% 100%;
            }
        }
    }

    .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>