de-net/src/view/popup/setting/index.vue

<template>
    <div class="detail-wrapper">
        <div class="back-bar">
            <img
                :src="require('@/assets/svg/icon-nft-back-arrow.svg')"
                class="icon-arrow"
                @click="back"
            />
            <span>Settings</span>
        </div>

        <div class="item">
            <div class="l">Announcement Notification</div>
            <div class="r">
                <a-switch v-model:checked="noticeStatus" @change="change"></a-switch>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onBeforeMount, ref } from "vue";
import router from "@/router/popup.js";
import { getSetting, putSetting } from "@/http/user";

let noticeStatus = ref(true);

function back() {
    router.back();
}

function change(checked) {
    let noticeSwitch = checked ? 1 : 0;
    // set
    putSetting({
        params: { noticeSwitch }
    }).then(res => {
        let { code, data } = res;
        if (code === 0) {
            noticeStatus.value = checked
        } else {
            noticeStatus.value = !checked
        }
    }).catch(() => {
        noticeStatus.value = !checked
    })

    noticeSetting()
}

function noticeSetting() {
    chrome.runtime.sendMessage({
        actionType: "USER_SETTING",
        data: {
            status: noticeStatus.value
        }
    }, (response) => {
        console.log("res", response);
    });
}

onBeforeMount(() => {
    getSetting({}).then((res) => {
        let { code, data } = res;
        if (code === 0) {
            noticeStatus.value = data.noticeSwitch === 1 ? true : false;
        }
    });
});
</script>

<style lang='scss' scoped>
.detail-wrapper {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;

    .back-bar {
        height: 48px;
        background: #ffffff;
        box-shadow: 0px 0.5px 0px #d1d9dd;
        box-sizing: border-box;
        padding: 14px;
        font-weight: 500;
        font-size: 16px;
        display: flex;
        align-items: center;
        margin-bottom: 14px;

        .icon-arrow {
            width: 24px;
            margin-right: 12px;
            cursor: pointer;
        }
    }

    .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 50px;
        padding: 0 16px;
        background-color: #ffffff;
        .l {
            color: #000000;
            font-size: 15px;
            font-weight: 500;
        }
    }
}

:deep() .ant-switch {
    background-color: #e9ecee;
    height: 14px;
    line-height: 16px;
    min-width: 36px;
}

:deep() .ant-switch-checked {
    background-color: #aed8f5 !important;
}

:deep() .ant-switch::after {
    width: 20px;
    height: 20px;
    top: -4px;
    left: -1px;
}

:deep() .ant-switch-checked::after {
    background-color: #1d9bf0 !important;
    margin-left: 3px;
    left: 100% !important;
}
</style>