增加提示音设置

src/js/utils/audio.js

@@ -1,7 +1,12 @@
 import msgReceive from '@/assets/audio/msgreceive.mp3'
 import msgSend from '@/assets/audio/msgsend.mp3'
+import { userStore } from '@/stores'
+const userData = userStore()
 
 export const playMsgReceive = () => {
+  if (!userData.user.newMsgTips) {
+    return
+  }
   const audio = new Audio(msgReceive)
   audio.play().catch(() => {
     // do nothing
@@ -9,6 +14,9 @@ export const playMsgReceive = () => {
 }
 
 export const playMsgSend = () => {
+  if (!userData.user.sendMsgTips) {
+    return
+  }
   const audio = new Audio(msgSend)
   audio.play().catch(() => {
     // do nothing

src/router/index.js

@@ -151,6 +151,13 @@ const router = createRouter({
               meta: {
                 active_1: '/setting' // 一级导航default-active
               }
+            },
+            {
+              path: '/setting/notify',
+              component: () => import('@/views/setting/sub/SettingNotify.vue'),
+              meta: {
+                active_1: '/setting' // 一级导航default-active
+              }
             }
           ]
         }

src/views/setting/SettingLayout.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { User, Key } from '@element-plus/icons-vue'
+import { User, Key, Bell } from '@element-plus/icons-vue'
 </script>
 
 <template>
@@ -10,13 +10,17 @@ import { User, Key } from '@element-plus/icons-vue'
         <el-menu :default-active="$route.path" text-color="black" style="border: 0" router>
           <el-menu-item index="/setting/personal">
             <el-icon><User /></el-icon>
-            <span>个人信息</span>
+            <span>个人设置</span>
           </el-menu-item>
 
           <el-menu-item index="/setting/security">
             <el-icon><Key /></el-icon>
             <span>安全设置</span>
           </el-menu-item>
+          <el-menu-item index="/setting/notify">
+            <el-icon><Bell /></el-icon>
+            <span>通知设置</span>
+          </el-menu-item>
         </el-menu>
       </el-aside>
       <el-main style="padding: 0">

src/views/setting/sub/SettingNotify.vue

@@ -0,0 +1,111 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { userStore } from '@/stores'
+import { userModifySelfService } from '@/api/user'
+
+const userData = userStore()
+
+const isNewMsgTips = ref()
+const isSendMsgTips = ref()
+
+onMounted(() => {
+  isNewMsgTips.value = userData.user.newMsgTips
+  isSendMsgTips.value = userData.user.sendMsgTips
+})
+
+const handleSwitch = (obj) => {
+  userModifySelfService(obj).then(() => {
+    userData.updateUser().then(() => {
+      isNewMsgTips.value = userData.user.newMsgTips
+      isSendMsgTips.value = userData.user.sendMsgTips
+    })
+  })
+}
+</script>
+
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-header class="bdr-b">通知设置</el-header>
+      <el-main class="list">
+        <div class="item bdr-b">
+          <div class="content">
+            <div class="name">新消息提示音</div>
+            <span class="desc">当前状态：{{ isNewMsgTips ? '开启' : '关闭' }}</span>
+          </div>
+          <div class="modify">
+            <el-switch
+              v-model="isNewMsgTips"
+              @change="handleSwitch({ newMsgTips: isNewMsgTips })"
+            />
+          </div>
+        </div>
+
+        <div class="item bdr-b">
+          <div class="content">
+            <div class="name">发送消息提示音</div>
+            <div class="desc">当前状态：{{ isSendMsgTips ? '开启' : '关闭' }}</div>
+          </div>
+          <div class="modify">
+            <el-switch
+              v-model="isSendMsgTips"
+              @change="handleSwitch({ sendMsgTips: isSendMsgTips })"
+            />
+          </div>
+        </div>
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-header {
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  padding-left: 15px;
+  font-size: 18px;
+}
+
+.el-main {
+  .list {
+    padding: 15px;
+    padding-top: 0;
+
+    .item {
+      margin: 5px 0;
+      padding: 5px 0;
+      display: flex;
+      align-items: center;
+
+      &:first-child {
+        margin-top: 0;
+      }
+
+      .content {
+        flex: auto;
+        .name {
+          height: 40px;
+          font-size: 15px;
+          line-height: 40px;
+          font-weight: 500;
+        }
+
+        .desc {
+          color: gray;
+          height: 30px;
+          line-height: 30px;
+          font-size: 13px;
+        }
+      }
+
+      .modify {
+        width: 120px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+    }
+  }
+}
+</style>