154 lines
4.2 KiB
Vue
154 lines
4.2 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')"
|
|
@click="editAvatar"
|
|
></customBtn>
|
|
</ZPaging>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import customBtn from '@/components/custom-btn/custom-btn.vue'
|
|
import { ServeEditGroup } from '@/api/group/index.js'
|
|
import ZPaging from '@/uni_modules/z-paging/components/z-paging/z-paging.vue'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import { reactive, computed, watch } from 'vue'
|
|
import { useGroupStore, useDialogueStore, useDialogueListStore } from '@/store'
|
|
|
|
import { uploadImg } from '@/api/chat'
|
|
import { uniqueId } from '@/utils'
|
|
|
|
const groupStore = useGroupStore()
|
|
const groupParams = reactive({
|
|
groupInfo: computed(() => groupStore.groupInfo),
|
|
})
|
|
|
|
const dialogueStore = useDialogueStore()
|
|
const dialogueParams = reactive({
|
|
receiver_id: computed(() => dialogueStore.talk.receiver_id),
|
|
})
|
|
|
|
const state = reactive({
|
|
groupAvatar: '', //群头像
|
|
})
|
|
|
|
watch(
|
|
() => groupParams.groupInfo,
|
|
(newGroupInfo) => {
|
|
state.groupAvatar = newGroupInfo.avatar
|
|
},
|
|
{ deep: true },
|
|
)
|
|
|
|
const onProgressFn = (progress, id) => {
|
|
console.log((progress.loaded / progress.total) * 100, 'progress')
|
|
|
|
useDialogueListStore().updateUploadProgress(
|
|
id,
|
|
(progress.loaded / progress.total) * 100,
|
|
)
|
|
}
|
|
|
|
onLoad((options) => {
|
|
console.log(options)
|
|
if (options.groupAvatar) {
|
|
state.groupAvatar = options.groupAvatar
|
|
}
|
|
})
|
|
|
|
//点击修改
|
|
const editAvatar = () => {
|
|
uni.chooseImage({
|
|
sourceType: ['album'],
|
|
count: 1,
|
|
success: async (res) => {
|
|
console.log(res, 'res')
|
|
res.tempFiles.forEach(async (file) => {
|
|
console.log(file)
|
|
let image = new Image()
|
|
image.src = URL.createObjectURL(file)
|
|
image.onload = () => {
|
|
const form = new FormData()
|
|
form.append('file', file)
|
|
form.append('source', 'fonchain-chat')
|
|
form.append('urlParam', `width=${image.width}&height=${image.height}`)
|
|
let randomId = uniqueId()
|
|
uploadImg(form, (e) => onProgressFn(e, randomId)).then(
|
|
({ status, data, msg }) => {
|
|
console.log(status, data, msg)
|
|
if (status == 0) {
|
|
let avatar = data.ori_url
|
|
let params = {
|
|
group_id: dialogueParams.receiver_id,
|
|
group_name: groupParams.groupInfo.group_name,
|
|
avatar: avatar,
|
|
}
|
|
console.log(params)
|
|
const resp = ServeEditGroup(params)
|
|
resp.then(({ code }) => {
|
|
if (code == 200) {
|
|
groupStore.updateGroupInfo({
|
|
avatar: data.ori_url,
|
|
})
|
|
// uni.navigateBack({
|
|
// delta: 1,
|
|
// })
|
|
} else {
|
|
}
|
|
})
|
|
resp.catch(() => {})
|
|
} else {
|
|
}
|
|
},
|
|
)
|
|
}
|
|
})
|
|
},
|
|
})
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.outer-layer {
|
|
flex: 1;
|
|
background-image: url('@/static/image/mine/background.png');
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center bottom;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
</style>
|