setting page

src/entry/popup.js

@@ -7,7 +7,7 @@ const app = createApp(App)
 import router from '@/router/popup.js'
 import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less'
 
-import {Button,message,Tooltip} from "ant-design-vue";
+import {Button,message,Tooltip,Switch} from "ant-design-vue";
 
 
 message.config({
@@ -18,6 +18,7 @@ message.config({
 app.use(Button);
 app.use(message)
 app.use(Tooltip)
+app.use(Switch)
 
 
 app.use(router)

src/http/user.js

@@ -0,0 +1,17 @@
+import { service } from "./request";
+
+export function getSetting(params) {
+    return service({
+        url: `/user/setting/get`,
+        method: "post",
+        data: params,
+    });
+}
+
+export function putSetting(params) {
+    return service({
+        url: `/user/setting/update`,
+        method: "post",
+        data: params,
+    });
+}

src/router/popup.js

@@ -23,6 +23,8 @@ import TopUpHome from '@/view/popup/top-up/home.vue'
 
 import CurrencyDetail from '@/view/popup/currency-detail.vue'
 
+import Setting from '@/view/popup/setting/index.vue'
+
 // 2. 定义路由配置
 const routes = [
     {
@@ -122,6 +124,11 @@ const routes = [
         path: '/currencyDetail',
         name: 'currencyDetail',
         component: CurrencyDetail
+    },
+    {
+        path: '/setting',
+        name: 'setting',
+        component: Setting
     }
 ]
 

src/view/popup/components/top-bar.vue

@@ -4,14 +4,17 @@
             <img :src="userInfo.avatarUrl" class="icon-avatar">
             <span class="nick-name" :style="{color: color}">{{userInfo.nickName}}</span>
         </div>
-        <!-- <div>
-            <img :src="require('@/assets/svg/icon-denet-logo.svg')" />
-        </div> -->
+        <div>
+            <img class="setting" @click="clickSetting" :src="require('@/assets/svg/icon-setting-white.svg')" />
+        </div>
     </div>
 </template>
 
 <script setup>
 import {defineProps} from 'vue';
+import {useRouter} from 'vue-router'
+
+const router = useRouter()
 
 const props = defineProps({
     userInfo: {
@@ -37,6 +40,9 @@ const props = defineProps({
 function clickUserInfo() {
     window.open(`https://twitter.com/${props.userInfo.nickName}`);
 }
+function clickSetting() {
+    router.push({ name: 'setting' })
+}
 </script>
 
 <style scoped lang='scss'>
@@ -64,5 +70,11 @@ function clickUserInfo() {
             font-size: 14px;
         }
     }
+
+    .setting {
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+    }
 }
 </style>

src/view/popup/setting/index.vue

@@ -0,0 +1,122 @@
+<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>SET</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
+    })
+}
+
+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>