96 lines
2.3 KiB
Vue
96 lines
2.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.editAvatar') }}
|
|
</span>
|
|
</div>
|
|
</tm-navbar>
|
|
</template>
|
|
<div class="edit-group-info">
|
|
<div class="group-avatar">
|
|
<img :src="state.groupAvatar" />
|
|
</div>
|
|
</div>
|
|
<customBtn :btnText="$t('button.text.edit')"></customBtn>
|
|
<template #bottom>
|
|
<div class="app-logo-icon">
|
|
<img src="/src/static/image/chatSettings/app-icon.png" />
|
|
</div>
|
|
</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 {
|
|
margin: 158rpx 94rpx 100rpx;
|
|
background-color: #fff;
|
|
box-shadow: 0 6px 12px 2px rgba(0, 0, 0, 0.16);
|
|
padding: 50rpx;
|
|
border-radius: 16rpx;
|
|
.group-avatar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
img {
|
|
width: 460rpx;
|
|
height: 460rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-logo-icon {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 0 44rpx;
|
|
img {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
}
|
|
}
|
|
</style>
|