128 lines
3.3 KiB
Vue
128 lines
3.3 KiB
Vue
<template>
|
|
<div class="outer-layer manage-group-info-page">
|
|
<div class="root">
|
|
<ZPaging ref="zPaging" :show-scrollbar="false">
|
|
<template #top>
|
|
<tm-navbar :hideBack="false" hideHome title="" :leftWidth="220">
|
|
<div class="navBar-title flex flex-col items-center justify-center">
|
|
<span class="text-[34rpx] font-medium">
|
|
{{ $t('chat.settings.editGroupName') }}
|
|
</span>
|
|
</div>
|
|
</tm-navbar>
|
|
</template>
|
|
<div class="edit-group-info">
|
|
<div class="group-avatar">
|
|
<img :src="state.groupAvatar" />
|
|
</div>
|
|
<div class="group-name">
|
|
<span class="text-[28rpx] font-medium">
|
|
{{ $t('chat.settings.groupName') }}
|
|
</span>
|
|
<div class="groupNameInputArea">
|
|
<input
|
|
class="groupNameInput"
|
|
:placeholder="$t('edit.groupName.placeholder')"
|
|
placeholder-style="color:#B4B4B4;font-size:28rpx;font-weight:500;line-height:40rpx;"
|
|
v-model="state.groupName"
|
|
/>
|
|
<img
|
|
class="groupName-input-clearBtn"
|
|
src="/src/static/image/chatSettings/clear-btn.png"
|
|
@click="clearGroupNameInput"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<template #bottom>
|
|
<customBtn
|
|
:isBottom="true"
|
|
:btnText="$t('ok')"
|
|
@clickBtn="confirmEdit"
|
|
></customBtn>
|
|
</template>
|
|
</ZPaging>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import customBtn from '@/components/custom-btn/custom-btn.vue'
|
|
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { reactive } from 'vue'
|
|
|
|
const state = reactive({
|
|
pageTitle: '', //页面标题
|
|
groupAvatar: '', //群头像
|
|
groupName: '', //群名称
|
|
})
|
|
|
|
onLoad((options) => {
|
|
console.log(options)
|
|
if (options.groupAvatar) {
|
|
state.groupAvatar = options.groupAvatar
|
|
}
|
|
})
|
|
|
|
//点击清空群名称输入
|
|
const clearGroupNameInput = () => {
|
|
state.groupName = ''
|
|
}
|
|
|
|
//点击确认修改
|
|
const confirmEdit = () => {
|
|
console.log(state.groupName)
|
|
}
|
|
</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;
|
|
}
|
|
|
|
.edit-group-info {
|
|
.group-avatar {
|
|
padding: 250rpx 0 88rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
img {
|
|
width: 192rpx;
|
|
height: 192rpx;
|
|
}
|
|
}
|
|
.group-name {
|
|
padding: 0 32rpx;
|
|
span {
|
|
display: inline-block;
|
|
padding: 0 32rpx 10rpx;
|
|
color: $theme-text;
|
|
}
|
|
.groupNameInputArea {
|
|
position: relative;
|
|
.groupNameInput {
|
|
background-color: #fff;
|
|
height: 110rpx;
|
|
box-shadow: 0 6px 12px 2px rgba(188, 188, 188, 0.08);
|
|
padding: 0 74rpx 0 32rpx;
|
|
color: #B747474;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
line-height: 40rpx;
|
|
}
|
|
.groupName-input-clearBtn {
|
|
position: absolute;
|
|
right: 22rpx;
|
|
top: 40rpx;
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|