333 lines
7.9 KiB
Vue
333 lines
7.9 KiB
Vue
<template>
|
|
<view class="view-page" :style="{backgroundImage : `url('${ThemeData?.app_bg ?? 'https://vespa.qxmier.com/image/bg.png'}')`}">
|
|
<!-- <headerHeight /> -->
|
|
<navBar :style="{marginTop: `${statusBarHeight}${uni.getSystemInfoSync().platform === 'ios' ? 'px': 'dp'}`}" :navTitle="'群聊设置'" :emitBack="true" @backEvent="back">
|
|
</navBar>
|
|
<view class="content" v-if="detailData">
|
|
<view class="name-view flex-line">
|
|
<view class="name-image">
|
|
<img :src="detailData.guild_cover" alt="" />
|
|
</view>
|
|
<view class="name-title">
|
|
{{detailData.name}}
|
|
</view>
|
|
</view>
|
|
<!-- 群聊成员 -->
|
|
<view class="member-view">
|
|
<view class="flex-line w-fill" style="justify-content: space-between;">
|
|
<view class="member-name">
|
|
群聊成员
|
|
</view>
|
|
<view class="flex-line member-detail" @click="memberList">
|
|
<span class="color-6">查看成员</span> <uni-icons class="flex-line" type="right" color="#666"
|
|
size="16"></uni-icons>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="w-fill flex-line mt-24">
|
|
<view class="" v-for="ele in detailData.user_list">
|
|
<view class="image-view" @click="jumpHomePage(ele)">
|
|
<img :src="ele.avatar" alt="" />
|
|
</view>
|
|
<view class="color-9 font-28 mt-24" style="text-align: center;">
|
|
{{ele.nickname}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 编辑 -->
|
|
<view class="edit-name">
|
|
<uni-easyinput v-model="guildName" :disabled="detailData.is_deacon !== 1 " primaryColor="#999" :inputBorder="false" :styles="styles" :placeholderStyle="placeholderStyle" placeholder="请输入内容"></uni-easyinput>
|
|
</view>
|
|
<view class="edit-notice">
|
|
<view class="notice-title">
|
|
群聊公告
|
|
</view>
|
|
<view class="notice-view">
|
|
<uni-easyinput primaryColor="#999" :inputBorder="false" :disabled="detailData.is_deacon !== 1 " :styles="styles" :placeholderStyle="placeholderStyle" type="textarea" autoHeight v-model="detailData.notification" placeholder="请输入群聊公告"></uni-easyinput>
|
|
</view>
|
|
</view>
|
|
<view class="footer"v-if="detailData.is_deacon === 1">
|
|
<view class="confirm-button" @click="confirmInfo">
|
|
<view class="button">
|
|
确认保存
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import headerHeight from '@/component/headerHeight.vue';
|
|
import navBar from '@/component/nav.vue';
|
|
import http from '@/until/http.js';
|
|
import logout from '@/static/image/union/logout.png'
|
|
import logo from '@/static/image/logo.png';
|
|
export default {
|
|
components: {
|
|
headerHeight,
|
|
navBar
|
|
},
|
|
data() {
|
|
return {
|
|
logo,
|
|
guildId:null,
|
|
notice:'',
|
|
value: '',
|
|
guildName:'',
|
|
detailData:null,
|
|
styles: {
|
|
color: '#333',
|
|
borderColor: 'none'
|
|
},
|
|
statusBarHeight:0,
|
|
placeholderStyle: "color:321;font-size:14px",
|
|
ThemeData:null
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
const {
|
|
id,
|
|
guildId,h
|
|
} = options
|
|
uni.setStorageSync('token', id)
|
|
this.guildId = guildId || ''
|
|
if (uni.getStorageSync('token')) {
|
|
this.getInfo()
|
|
}
|
|
this.statusBarHeight = h || uni.getStorageSync('BarHeight')
|
|
if(uni.getStorageSync('Theme_Data')) {
|
|
this.ThemeData = JSON.parse(uni.getStorageSync('Theme_Data'))
|
|
}
|
|
},
|
|
methods:{
|
|
// 关闭当前公会中心页面
|
|
back() {
|
|
this.closeWeb()
|
|
},
|
|
closeWeb(){
|
|
const platform = uni.getSystemInfoSync().platform;
|
|
if (platform === 'ios') {
|
|
// 通过 messageHandlers 调用 iOS 原生方法
|
|
window.webkit.messageHandlers.nativeHandler.postMessage({
|
|
'action': 'closeWeb'
|
|
});
|
|
} else if (platform === 'android') {
|
|
// 调用 Android 原生方法
|
|
window.Android.closeWeb();
|
|
}
|
|
},
|
|
async getInfo() {
|
|
http.get('/api/Guild/get_guild_info', {
|
|
token: uni.getStorageSync('token') ?? '',
|
|
guild_id: this.guildId
|
|
}).then(response => {
|
|
const {
|
|
data,
|
|
code
|
|
} = response
|
|
this.detailData = data || null
|
|
if(data) {
|
|
this.detailData.user_list = data.user_list.slice(0,4)
|
|
}
|
|
this.guildName = data.name || null
|
|
}).catch(error => {
|
|
});
|
|
},
|
|
memberList(){
|
|
uni.navigateTo({
|
|
url: `/pages/union/memberList?guildId=${this.guildId}`
|
|
});
|
|
},
|
|
jumpHomePage(data) {
|
|
const platform = uni.getSystemInfoSync().platform;
|
|
if (platform === 'ios') {
|
|
window.webkit.messageHandlers.nativeHandler.postMessage({
|
|
'action': 'jumpWebPage',
|
|
'data': {
|
|
userId: data.user_id
|
|
}
|
|
});
|
|
} else if (platform === 'android') {
|
|
window.Android.jumpWebPage(data.user_id);
|
|
}
|
|
},
|
|
async confirmInfo(){
|
|
if (this.guildName === '') {
|
|
uni.showToast({
|
|
title: "请输入群聊名称",
|
|
icon: 'none'
|
|
});
|
|
return
|
|
}
|
|
const parameter = {
|
|
token: uni.getStorageSync('token'),
|
|
guild_id: this.detailData.guild_id,
|
|
name: this.guildName,
|
|
notice: this.detailData.notice,
|
|
avatar: this.detailData.guild_cover
|
|
}
|
|
uni.showLoading({
|
|
title: '提交中',
|
|
mask: true
|
|
})
|
|
http.post('/api/Guild/set_guild_info', parameter).then(response => {
|
|
const {
|
|
data,
|
|
code
|
|
} = response
|
|
if (code) {
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: "提交成功",
|
|
icon: 'none',
|
|
mask: true
|
|
});
|
|
this.getInfo()
|
|
}, 1000)
|
|
} else {
|
|
uni.showToast({
|
|
title: "提交失败",
|
|
icon: 'error'
|
|
});
|
|
uni.hideLoading()
|
|
}
|
|
|
|
}).catch(error => {
|
|
uni.showToast({
|
|
title: "提交失败",
|
|
icon: 'error'
|
|
});
|
|
uni.hideLoading()
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.view-page {
|
|
// padding: 32rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// background-image: url('@/static/image/help/bg.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
min-height: 100vh;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
.footer {
|
|
// background: #f0f0f0;
|
|
padding: 20rpx;
|
|
text-align: center;
|
|
/* 适配iPhoneX等刘海屏 */
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
|
|
.confirm-button {
|
|
padding: 0 50rpx;
|
|
|
|
.button {
|
|
display: block;
|
|
width: 100%;
|
|
height: 84rpx;
|
|
border-radius: 106rpx;
|
|
line-height: 84rpx;
|
|
background-color: #0DFFB9;
|
|
color: #333;
|
|
text-align: center;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
}
|
|
.image-view {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
margin: 0 24rpx;
|
|
|
|
img {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: 0 32rpx;
|
|
|
|
.name-view {
|
|
// width: ;
|
|
width: 100%;
|
|
margin-top: 24rpx;
|
|
height: 148rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 22rpx;
|
|
|
|
.name-image {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
margin: 0 24rpx;
|
|
|
|
img {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
.name-title {
|
|
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
}
|
|
|
|
.member-view {
|
|
padding: 24rpx;
|
|
margin-top: 24rpx;
|
|
// width: ;
|
|
background-color: #fff;
|
|
border-radius: 22rpx;
|
|
|
|
.member-name {
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
|
|
.member-detail {
|
|
color: #666;
|
|
}
|
|
}
|
|
}
|
|
.edit-name{
|
|
margin-top: 24rpx;
|
|
background: #EFF2F8;
|
|
padding: 24rpx;
|
|
border-radius: 22rpx;
|
|
}
|
|
.edit-notice{
|
|
|
|
.notice-title{
|
|
padding: 24rpx 0;
|
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
.notice-view{
|
|
background: #EFF2F8;
|
|
padding: 24rpx;
|
|
border-radius: 22rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |