8.21提交

2025-08-21 17:45:03 +08:00
parent bbd3169335
commit f8003ca7a6
40 changed files with 5558 additions and 30 deletions
@@ -0,0 +1,153 @@
+<template>
+	<view class="group-msg-page">
+		<!-- 顶部导航栏 -->
+		<uni-nav-bar
+			left-icon="left"
+			title="群发消息"
+			@clickLeft="goBack"
+			fixed
+			color="#8B2316"
+			height="140rpx"
+			:border="false"
+			backgroundColor="#eeeeee"
+		/>
+
+		<!-- 内容区域 -->
+		<view class="content-area">
+			<view class="emptybox">
+				<up-image  :src="emptyImg" width="176rpx" height="204rpx" ></up-image>
+				<text class="empty-text">暂无数据</text>
+			</view>
+		</view>
+
+		<!-- 底部固定按钮 -->
+		<view class="bottom-bar">
+			<button class="send-btn" @click="openModal">群发消息</button>
+		</view>
+
+		<!-- 弹窗与遮罩 -->
+		<view v-if="showModal" class="mask" @click="closeModal"></view>
+		<view v-if="showModal" class="center-modal">
+			<view class="modal-title">温馨提示</view>
+			<view class="modal-divider"></view>
+			<view class="modal-item" @click="onSelect('single')">
+				<text>单独选择</text>
+			</view>
+			<view class="modal-divider"></view>
+			<view class="modal-item" @click="onSelect('group')">
+				<text>分组选择</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import emptyImg from "@/static/icon_empty.png"
+const showModal = ref(true);
+
+const goBack = () => {
+	uni.navigateBack();
+};
+
+const openModal = () => {
+	showModal.value = true;
+};
+
+const closeModal = () => {
+	showModal.value = false;
+};
+
+const onSelect = (type) => {
+	showModal.value = false;
+	if (type === 'single') {
+		uni.showToast({ title: '单独选择', icon: 'none' });
+	} else if (type === 'group') {
+		uni.showToast({ title: '分组选择', icon: 'none' });
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.group-msg-page {
+	min-height: 100vh;
+	background: #f5f5f5;
+}
+
+.content-area {
+	// 为 nav-bar 腾出空间
+	padding-bottom: 120rpx; // 为底部按钮留空
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: calc(100vh - 280rpx);
+}
+
+.empty-text {
+	font-size: 28rpx;
+	color: #999999;
+}
+
+.bottom-bar {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: #ffffff;
+	border-top: 1rpx solid #eaeaea;
+	padding: 0; // 让按钮顶满
+	.send-btn {
+		width: 100%;
+		height: 100rpx;
+		background: #00cac1;
+		color: #ffffff;
+		border: none;
+		border-radius: 0;
+		font-size: 32rpx;
+		font-weight: normal;
+	}
+}
+
+/* 遮罩与弹窗 */
+.mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0,0,0,0.6);
+	z-index: 10;
+}
+
+.center-modal {
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: 650rpx;
+	background: #ffffff;
+	border-radius: 16rpx;
+	z-index: 11;
+	overflow: hidden;
+	box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.15);
+}
+
+.modal-title {
+	text-align: center;
+	font-size: 34rpx;
+	color: #8B2316;
+	padding: 28rpx 20rpx;
+}
+
+.modal-item {
+	padding: 36rpx 28rpx;
+	font-size: 30rpx;
+	color: #333333;
+	background: #ffffff;
+}
+
+.modal-divider {
+	height: 2rpx;
+	background: #eeeeee;
+}
+</style>