yusheng-h5/pages/union/setGroup.vue

<template>
	<view class="view-page">
		<!-- <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">
							<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 class="edit-notice flex-line w-fill flex-spaceB">
				<view class="notice-title">
					设置置顶
				</view>
				<view >
					<switch checked color="#457AFF" style="transform:scale(0.7)"/>
				</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",
			}
		},
		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')
		},
		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}`
				});
			},
			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>