129 lines
2.9 KiB
Vue
129 lines
2.9 KiB
Vue
<template>
|
|
<div class="setting-form-item">
|
|
<div class="item-main">
|
|
<div class="item-main-label">
|
|
<span class="text-[32rpx] font-regular">{{ props?.item?.label }}</span>
|
|
</div>
|
|
<div class="item-main-value" @click="toManagePage(props?.item)">
|
|
<span class="text-[32rpx] font-regular" v-if="props?.item?.value">
|
|
{{ props?.item?.value }}
|
|
</span>
|
|
<img
|
|
v-if="
|
|
props?.item?.hasPointer &&
|
|
((props?.isManager &&
|
|
props?.item?.label === $t('chat.settings.groupName')) ||
|
|
(!props?.isManager &&
|
|
props?.item?.label !== $t('chat.settings.groupName')))
|
|
"
|
|
src="/src/static/image/chatSettings/pointer.png"
|
|
/>
|
|
<tm-switch
|
|
:width="88"
|
|
:height="48"
|
|
v-if="props?.item?.customInfo && props?.item?.customInfo === 'switch'"
|
|
barIcon=""
|
|
color="#46299D"
|
|
unCheckedColor="#EEEEEE"
|
|
:modelValue="modelValue"
|
|
@change="changeSwitch($event, props?.item)"
|
|
></tm-switch>
|
|
</div>
|
|
</div>
|
|
<div class="item-sub" v-if="props?.item?.subValue">
|
|
<span class="text-[32rpx] font-regular">{{ props?.item?.subValue }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { defineProps, defineEmits, computed } from 'vue'
|
|
|
|
import { useI18n } from 'vue-i18n'
|
|
const { t } = useI18n()
|
|
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
},
|
|
},
|
|
sessionInfo: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
},
|
|
},
|
|
isManager: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
})
|
|
const emits = defineEmits(['toManagePage', 'changeSwitch'])
|
|
const toManagePage = (item) => {
|
|
emits('toManagePage', item.label)
|
|
}
|
|
const modelValue = computed(() => {
|
|
let switchStatus = false
|
|
if (
|
|
props?.item?.label === t('chat.settings.topSession') &&
|
|
props?.sessionInfo?.is_top == 1
|
|
) {
|
|
switchStatus = true
|
|
}
|
|
if (
|
|
props?.item?.label === t('chat.settings.messageNoDisturb') &&
|
|
props?.sessionInfo?.is_disturb == 1
|
|
) {
|
|
switchStatus = true
|
|
}
|
|
return switchStatus
|
|
})
|
|
|
|
//切换开关选择
|
|
const changeSwitch = (e, item) => {
|
|
emits('changeSwitch', e, item.label)
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.setting-form-item {
|
|
.item-main {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.item-main-label {
|
|
flex-shrink: 0;
|
|
span {
|
|
line-height: 44rpx;
|
|
color: $theme-text;
|
|
}
|
|
}
|
|
.item-main-value {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
span {
|
|
line-height: 44rpx;
|
|
color: #747474;
|
|
}
|
|
img {
|
|
width: 11rpx;
|
|
height: 18rpx;
|
|
margin: 0 0 0 32rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-sub {
|
|
margin: 28rpx 0 0;
|
|
span {
|
|
line-height: 44rpx;
|
|
color: #747474;
|
|
}
|
|
}
|
|
}
|
|
</style>
|