mirror of
https://gitee.com/lijingbo-2021/open-anylink-web.git
synced 2026-05-17 20:58:02 +00:00
113 lines
2.5 KiB
Vue
113 lines
2.5 KiB
Vue
<script setup>
|
||
import { ref, onMounted } from 'vue'
|
||
import { useUserStore } from '@/stores'
|
||
import { userModifySelfService } from '@/api/user'
|
||
|
||
const userData = useUserStore()
|
||
|
||
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;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.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>
|