zx_flk_app/pages/bluetoothUnlock/bluetoothPair.vue

<template>
    <view class="bluetoothPair-page">
        <view class="car-wrap">
            <view class="name">智能电动摩托车智驾 M7</view>
            <image :src="QINIU_URL + 'Fi6CPKj4-raA86oizhL3PiXD4DkH'" class="car-img" />
            <view>
                <viwe class="pair-title">是否配对改设备</viwe>
                <view class="pair-options">
                    <view class="btn cancle">取消</view>
                    <view class="btn confirm">配对</view>
                </view>
            </view>
        </view>
        <view class="pair-desc">
            点击下方 “ <text class="t">开始配对</text>”，请在系统弹窗中选择 “<text class="t">配对</text>”，以完成功能开启。
        </view>
        <view class="pair-tips">
            <view class="title">提示信息</view>
            <view class="text">使用感应解锁功能时，请务必保证手机蓝牙功能开启，在蓝牙列表中忽略此设备会导致感应解锁失败</view>
        </view>

        <viwe class="pair-btn" @tap="initiateBluetoothPairing">开始配对</viwe>
        <CenterDialog confirmText="配对" ref="centerDialog" />
        <Notice 
            v-model="showNotice" 
            title="感应解锁已开启" 
            btnText="关闭"
            text='注意：请勿在手机蓝牙中忽略“电动车蓝牙02"设备，否则感应解锁功能将无法使用'
        />
    </view>
</template>

<script>
import { QINIU_URL } from '@/common/constant'
import CenterDialog from '@/component/comPopup/CenterDialog.vue';
import Notice from '@/component/comPopup/Notice.vue';
export default {
    components: {
        CenterDialog,
        Notice
    },
    data() {
        return {
            QINIU_URL,
            showNotice: false
        }
    },
    methods: {
        initiateBluetoothPairing() {
            const deviceName = '电动车蓝牙';
            const pairingCode = '1234567890';
            this.$refs.centerDialog.open({
                title: '蓝牙配对请求',
                content: `<span style="color:#060809;font-weight:bold">${deviceName}</span>
                想与您配对，请确保显示的配对密钥为
                <span style="color:#060809;font-weight:bold">${pairingCode}</span>`
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.bluetoothPair-page {
    padding: 56rpx 32rpx 48rpx;

    .car-wrap {
        width: 100%;
        background: #F1F3F4;
        border-radius: 32rpx;
        padding: 48rpx 32rpx 32rpx;
        text-align: center;

        .name {
            color: #060809;
            font-size: 32rpx;
            font-weight: bold;
        }

        .car-img {
            width: 480rpx;
            height: 324rpx;
            margin: 48rpx auto;
            display: block;
        }

        .pair-title {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #060809;
        }

        .pair-options {
            margin-top: 30rpx;
            display: flex;
            justify-content: space-between;

            .btn {
                width: 302rpx;
                height: 80rpx;
                border-radius: 40rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32rpx;

                &.cancle {
                    color: #060809;
                    background: #E4E8E9;
                }

                &.confirm {
                    color: #FFFFFF;
                    background: #060809;
                }
            }
        }
    }

    .pair-desc {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #828DA2;
        text-align: left;
        margin: 24rpx 0 48rpx;

        .t {
            color: #060809;
        }
    }

    .pair-tips {
        .title {
            font-weight: 500;
            font-size: 32rpx;
            color: #060809;
            margin-bottom: 20rpx;
        }

        .text {
            font-weight: 400;
            font-size: 24rpx;
            color: #828DA2;
        }
    }

    .pair-btn {
        position: absolute;
        width: 91%;
        bottom: 48rpx;
        height: 80rpx;
        background: #060809;
        border-radius: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32rpx;
        color: #FFFFFF;

        &:active {
            opacity: .7;
        }
    }
}
</style>