school_ecology_h5/pages/organization/organization.vue

<template>
	<view class="container">
		<!-- 顶部置顶区域 -->
		<view class="top">
			<!-- 信息区域 -->
			<view class="top_msg">
				<view class="msg_name">{{ info.name }}</view>
				<view class="msg_time">{{ info.createTime }}</view>
			</view>

			<!-- 按钮区域 -->
			<view v-if="info.isJoin == 1" class="top_btn off">已加入</view>
			<view v-if="info.isJoin == 2" class="top_btn" @click="handleJoin_debounce">立即加入</view>
			<view v-if="info.isJoin == 3" class="top_btn off">已申请</view>

			<!-- 背景图区域 -->
			<view class="top_bg">
				<img class="bgImg" mode="aspectFill" src="@/static/images/1.png" />
			</view>
		</view>

		<!-- 其他组织区域 -->
		<view class="org" v-if="info.otherClub?.length">
			<view class="org_text">其他组织</view>

			<!-- 组织列表区域 -->
			<view class="org_list">
				<org-item v-for="(item, index) in info.otherClub" :key="index" :item="item" @click="clickItem(index)">
					<template #bg>
						<img v-if="index % 4 == 0" class="img_bg" src="@/static/images/3.png" />
						<img v-if="index % 4 == 1" class="img_bg" src="@/static/images/4.png" />
						<img v-if="index % 4 == 2" class="img_bg" src="@/static/images/5.png" />
						<img v-if="index % 4 == 3" class="img_bg" src="@/static/images/6.png" />
					</template>
				</org-item>
			</view>
		</view>

		<!-- 底部分段器区域 -->
		<view class="foot">
			<common-controlTag :tagList="tagList" @change="changeIndex"></common-controlTag>

			<!-- 本会简介区域 -->
			<view v-if="currentIndex == 0" class="desc">
				{{ info.description }}
			</view>

			<!-- 联系我们区域 -->
			<view v-if="currentIndex == 1" class="contact">
				<!-- <rich-text :nodes="info.contact"></rich-text> -->
				<view>联系人:{{ info.contacts }}</view>
				<view class="phone">
					电话:
					<view class="phone_num" @click="handlePhone(info.phone)">{{ info.phone }}</view>
				</view>
				<view>邮箱:{{ info.email }}</view>
				<view>地址:{{ info.address }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getHomeClubData, getJoinClubApply } from '@/api/index.js'
import debounce from 'lodash/debounce'

// 首页数据
const info = ref({})

// 分段器数组
const tagList = ['本会简介', '联系我们']

// 当前分段器索引
const currentIndex = ref(0)

onLoad(() => {
	// 获取首页数据
	getData()
})

// 获取首页数据
const getData = async () => {
	const res = await getHomeClubData()
	// console.log(res)
	info.value = res.data
}

const handleJoin = () => {
	uni.showModal({
		title: '提示',
		content: '确定申请加入该组织吗？',
		success: (res) => {
			if (res.confirm) {
				handleJoinReq()
			}
		}
	})
}
// 点击立即加入按钮回调
const handleJoin_debounce = debounce(handleJoin, 200)

// 申请加入组织请求
const handleJoinReq = async () => {
	let data = {
		id: info.value.id
	}
	const res = await getJoinClubApply(data)
	// console.log(res)
	if (res.code == 200) {
		uni.showToast({
			title: res.message,
			icon: 'none'
		})
		setTimeout(() => {
			getData()
		}, 1500)
	}
}

// 点击拨打电话回调
const handlePhone = (phoneNumber) => {
	uni.makePhoneCall({
		phoneNumber
	})
}

// 点击每一个组织回调
const clickItem = (index) => {
	let list = encodeURIComponent(JSON.stringify(info.value.otherClub))
	uni.navigateTo({
		url: `/pages/org_list/org_list?list=${list}&index=${index}`
	})
}

// common-controlTag组件自定义事件
const changeIndex = (e) => {
	currentIndex.value = e
}
</script>

<style lang="scss" scoped>
.container {
	padding: 30rpx 18rpx;
	min-height: 100vh;

	.top {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 28rpx;
		height: 223rpx;
		border-radius: 26rpx;
		box-shadow: 0 0 10rpx #d3d3d3;
		background-color: #fff;

		.top_msg {
			flex: 1;
			margin: 0 20rpx;
			overflow: hidden;

			.msg_name {
				font-size: 32rpx;
				color: #333333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.msg_time {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}

		.top_btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 150rpx;
			height: 70rpx;
			font-size: 28rpx;
			color: #fff;
			border-radius: 8rpx;
			background-color: #007aff;
		}

		.off {
			color: #a6a6a6;
			background-color: #e5e5e5;
		}

		.top_bg {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			height: 78rpx;

			.bgImg {
				width: 100%;
				height: 100%;
			}
		}
	}

	.org {
		margin-top: 30rpx;

		.org_text {
			position: relative;
			padding: 0 10rpx;
			font-size: 32rpx;
			font-weight: bold;

			&::after {
				position: absolute;
				bottom: 4rpx;
				left: 0;
				content: '';
				width: 148rpx;
				height: 9rpx;
				background-image: linear-gradient(270deg, rgba(91, 186, 255, 0.5) 0%, rgba(0, 119, 255, 0.5) 100%);
			}
		}

		.org_list {
			margin-top: 30rpx;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20rpx;

			.img_bg {
				position: absolute;
				right: 8rpx;
				bottom: 8rpx;
				width: 139rpx;
				height: 130rpx;
			}
		}
	}

	.foot {
		margin-top: 38rpx;
		color: #333333;
		font-size: 28rpx;
		line-height: 50rpx;

		.desc {
			margin-top: 15rpx;
		}

		.contact {
			margin-top: 15rpx;

			.phone {
				display: flex;

				.phone_num {
					color: #007aff;
				}
			}
		}
	}
}
</style>