chat-app/src/pages/chatSettings/groupManage/manageNotice.vue

363 lines
9.4 KiB
Vue
Raw Normal View History

<template>
<div class="outer-layer manage-notice-page">
<div class="root">
<ZPaging ref="zPaging" :show-scrollbar="false">
<template #top>
<tm-navbar
:hideBack="state.editMode === 3 ? false : true"
hideHome
title=""
:leftWidth="220"
>
<template #left v-if="state.editMode !== 3">
<div class="nav-bar-cancel-btn">
<span class="text-[34rpx] font-regular" @click="toPrevPage">
{{ $t('cancel') }}
</span>
</div>
</template>
<div class="navBar-title flex flex-col items-center justify-center">
<span class="text-[34rpx] font-medium">
{{ $t('chat.settings.groupNotice') }}
</span>
</div>
<template #right>
<div
v-if="state.editMode !== 3"
class="nav-bar-done-btn"
:class="state.canDoComplete ? 'nav-bar-done-btn-can-do' : ''"
@click="showCompleteModel"
>
<span class="text-[34rpx] font-regular">
{{ $t('button.text.done') }}
</span>
</div>
<div
class="nav-bar-edit-btn"
v-if="state.editMode === 3"
@click="changeToEditMode"
>
<span class="text-[34rpx] font-regular">
{{ $t('groupNotice.mode.edit') }}
</span>
</div>
</template>
</tm-navbar>
</template>
<div class="notice-text-area">
<div class="notice-view-area">
<div class="notice-view-info" v-if="state.editMode !== 1">
<div class="notice-creater-avatar">
<img :src="state?.groupNoticeObj?.avatar" />
</div>
<div class="notice-creater-info">
<span class="text-[32rpx] font-medium">
{{ state?.groupNoticeObj?.updater_name }}
</span>
<span class="text-[24rpx] font-medium notice-create-date">
{{ state?.groupNoticeObj?.updated_at }}
</span>
</div>
</div>
<div class="notice-view-content" v-if="state.editMode === 3">
<span class="text-[32rpx] font-regular">
{{ state?.groupNoticeObj?.content }}
</span>
</div>
<wd-textarea
size="large"
v-if="state.editMode !== 3"
v-model="state.groupNotice"
:placeholder="$t('input.placeholder.enter')"
:maxlength="500"
:show-word-limit="true"
@input="inputGroupNotice"
/>
</div>
</div>
</ZPaging>
</div>
</div>
</template>
<script setup>
import useConfirm from '@/components/x-confirm/useConfirm.js'
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
import { reactive, computed, onMounted } from 'vue'
import { useGroupStore, useDialogueStore } from '@/store'
import {
ServeEditGroupNotice,
ServeDeleteGroupNotice,
} from '@/api/group/index.js'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const { showConfirm } = useConfirm()
const groupStore = useGroupStore()
const groupParams = reactive({
groupNotice: computed(() => groupStore.groupNotice),
})
const dialogueStore = useDialogueStore()
const dialogueParams = reactive({
receiver_id: computed(() => dialogueStore.talk.receiver_id),
})
const state = reactive({
groupNoticeObj: null, //群公告信息
groupNotice: '', //群公告
canDoComplete: false, //是否可以点击完成按钮
editMode: 1, // 1新增2修改3查看
})
onMounted(() => {
console.log(groupParams.groupNotice)
if (groupParams?.groupNotice?.length > 0) {
state.editMode = 3
state.groupNoticeObj = groupParams.groupNotice[0]
inputGroupNotice(groupParams?.groupNotice[0]?.content)
}
})
//点击返回上一页
const toPrevPage = () => {
if (state.groupNotice) {
showConfirm({
content: t('groupNotice.quit.edit'),
contentText: t('groupNotice.continue.edit'),
confirmText: t('groupNotice.continue.edit'),
cancelText: t('groupNotice.confirm.quit'),
onConfirm: () => {},
onCancel: () => {
if (state.editMode === 2) {
state.editMode = 3
} else {
uni.navigateBack({
delta: 1,
})
}
},
})
} else {
uni.navigateBack({
delta: 1,
})
}
}
//输入群公告
const inputGroupNotice = (e) => {
state.groupNotice = e
if (e.trim() || state.editMode === 2) {
state.canDoComplete = true
} else {
state.canDoComplete = false
}
}
//点击显示完成群公告弹窗
const showCompleteModel = () => {
if (!state.canDoComplete) {
return
}
showConfirm({
content: state.groupNotice
? t('groupNotice.publish.prompt')
: t('groupNotice.clear.prompt'),
contentText: state.groupNotice
? t('prompt.confirm.publish')
: t('groupNotice.confirm.clear'),
confirmText: state.groupNotice
? t('prompt.confirm.publish')
: t('groupNotice.confirm.clear'),
cancelText: t('cancel'),
onConfirm: () => {
if (state.groupNotice) {
let params = {
notice_id: state?.groupNoticeObj?.id || 0,
group_id: dialogueParams.receiver_id,
title: '',
content: state.groupNotice,
is_top: 0,
is_confirm: 0,
}
console.log(params)
const resp = ServeEditGroupNotice(params)
resp.then(({ code, data }) => {
console.log(data)
if (code == 200) {
groupStore.updateGroupNotice([data])
uni.navigateBack({
delta: 1,
})
} else {
}
})
resp.catch(() => {})
} else {
let params = {
notice_id: state?.groupNoticeObj?.id,
group_id: dialogueParams.receiver_id,
}
console.log(params)
const resp = ServeDeleteGroupNotice(params)
resp.then(({ code, data }) => {
console.log(data)
if (code == 200) {
groupStore.updateGroupNotice([])
uni.navigateBack({
delta: 1,
})
} else {
}
})
resp.catch(() => {})
}
},
onCancel: () => {},
})
}
//点击切换为编辑模式
const changeToEditMode = () => {
state.editMode = 2
}
</script>
<style scoped lang="scss">
.outer-layer {
flex: 1;
background-image: url('@/static/image/clockIn/z3280@3x.png');
background-size: cover;
background-repeat: no-repeat;
}
.manage-notice-page {
::v-deep .zp-paging-container-content {
height: 100%;
}
.nav-bar-cancel-btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 0 0 0 42rpx;
span {
line-height: 40rpx;
}
}
.nav-bar-done-btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 0 36rpx 0 0;
padding: 6rpx 24rpx;
background-color: #f3f3f3;
border-radius: 8rpx;
span {
color: #bababa;
line-height: 40rpx;
}
}
.nav-bar-done-btn-can-do {
background-color: $theme-primary;
span {
color: #fff;
}
}
.nav-bar-edit-btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 0 36rpx 0 0;
padding: 6rpx 0 6rpx 24rpx;
border-radius: 8rpx;
span {
line-height: 40rpx;
}
}
.notice-text-area {
display: flex;
.notice-view-area {
padding: 0 20rpx;
background-color: #fff;
border-radius: 8rpx;
box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
flex: 1;
display: flex;
flex-direction: column;
.notice-view-info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding: 32rpx 0;
border-bottom: 1px solid $theme-border-color;
.notice-creater-avatar {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 96rpx;
height: 96rpx;
border-radius: 50%;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
.notice-creater-info {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 0 0 0 30rpx;
text {
line-height: 44rpx;
}
.notice-create-date {
color: #bababa;
line-height: 34rpx;
margin: 8rpx 0 0;
}
}
}
.notice-view-content {
padding: 24rpx 0;
span {
line-height: 44rpx;
}
}
}
}
.notice-text-area {
padding: 20rpx 32rpx;
height: 100%;
display: flex;
flex: 1;
::v-deep .wd-textarea {
// height: 100%;
display: flex;
flex: 1;
padding: 22rpx 0 0;
}
::v-deep .wd-textarea__value {
padding-right: 0;
// height: 100%;
display: flex;
flex: 1;
}
::v-deep .wd-textarea__inner {
height: 100%;
}
}
}
</style>