yizhizan-h5/pages/msg/addmsg.vue

<template>
	<view>
		<!-- 顶部标题栏 -->
		<view class="nav-header">
			<view class="nav-left" @click="goBack">
				<u-icon name="close" color="rgba(56, 58, 63, 1)" size="32"></u-icon>
			</view>
			<view class="nav-center">
				<text class="nav-title">招呼语</text>
			</view>
			<view class="nav-right"></view>
		</view>
		
		<!-- 招呼语、自动回复切换 -->
		<!-- <view class="navbar">
			<view v-for="(item, index) in tabList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === item.state }" @click="tabClicks(item.state)">
				{{ item.text }}
			</view>
		</view> -->

		<!-- 自动回复列表 -->
		<!-- 
				<view v-if="tabCurrentIndex == 1 && contentMsg" @click="goAdd(1,1)"
					style="margin-top: 20upx;color: #000000;display: flex;align-items: center;background: #FFFFFF;padding: 0rpx 20rpx;">
					<view style="height: 80upx;line-height: 80upx;width: 80%;">
						{{contentMsg}}
					</view>
					<view style="width: 20%;display: flex;justify-content: flex-end;">
						<image src="../../static/images/my/right_icon.png" style="width: 15rpx;height: 30rpx;"></image>
					</view>
				</view>
		-->

		<view class="setting-item setting-item-first">
			<view class="setting-left">
				<view class="setting-title-row">
					<view class="setting-label">自动发送招呼语</view>
					<view class="setting-desc">开启后，沟通时自动发送招呼语</view>
				</view>
				<view class="switch-status" :class="{ 'status-on': notificationEnabled, 'status-off': !notificationEnabled }">
					{{ notificationEnabled ? 'On' : 'Off' }}
				</view>
			</view>
			<view class="setting-right">
				<u-switch v-model="notificationEnabled" active-color="#007AFF" @change="toggleNotification"></u-switch>
			</view>
		</view>

		<!-- 主内容区域 -->
		<view class="main-content">
			<!-- 左侧导航侧边栏 -->
			<view class="sidebar">
				<view class="sidebar-item" :class="{ 'active': tabCurrentIndex === 1 }" @click="tabClicks(1)">
					<text class="sidebar-text">常规</text>
				</view>
				<view class="sidebar-item" :class="{ 'active': tabCurrentIndex === 0 }" @click="tabClicks(0)">
					<text class="sidebar-text">自定义</text>
				</view>
			</view>
			
			<!-- 右侧内容区域 -->
			<view class="content-area">
				<view v-if="tabCurrentIndex == 0">
					<view v-for="item in list" :key="item.id" @click="goAdd(1,0,item.id)">
					<view
						style="margin-top: 20upx;color: #000000;display: flex;align-items: center;background: #FFFFFF;padding: 0rpx 40rpx;">
						<view style="height: 80upx;line-height: 80upx;width: 80%;">
							{{item.content}}
						</view>
						
						<!--
							<view style="width: 20%;display: flex;justify-content: flex-end;">
								<image src="../../static/images/my/right_icon.png" style="width: 15rpx;height: 30rpx;"></image>
							</view>
						-->
					</view>
					</view>
					
					<!-- 空状态显示 -->
					<empty v-if="list.length == 0" content='暂无相关内容'></empty>
					
					<!-- 自定义标签下的添加按钮 -->
					<view class="custom-add-button" @click="goAdd(0,0)">
						<!-- 
							<u-icon name="plus" color="#fff" size="30" style="margin-right: 10upx;"></u-icon>
						-->
						添加招呼语
					</view>
				</view>
				
				<!-- 常规招呼语模板 -->
				<view v-if="tabCurrentIndex == 1">
					<view class="template-item" @click="selectTemplate('你好')">
						<text class="template-text">你好</text>
					</view>
					<view class="template-item" @click="selectTemplate('Boss, 您好')">
						<text class="template-text">Boss, 您好</text>
					</view>
					<view class="template-item" @click="selectTemplate('你好, 可以聊聊吗?')">
						<text class="template-text">你好, 可以聊聊吗?</text>
					</view>
					<view class="template-item" @click="selectTemplate('我对{招聘职位}很感兴趣, 期望可以深聊, 谢谢!')">
						<text class="template-text">我对{招聘职位}很感兴趣, 期望可以深聊, 谢谢!</text>
					</view>
					<view class="template-item" @click="selectTemplate('你好, 我对贵公司很感兴趣, 希望能和您聊聊!')">
						<text class="template-text">你好, 我对贵公司很感兴趣, 希望能和您聊聊!</text>
					</view>
					
					<!-- 常规标签下的添加按钮 -->
					<view class="regular-add-button" @click="addRegularTemplate()">
						<!-- <u-icon name="plus" color="rgba(1, 107, 246, 1)" size="30" style="margin-right: 10upx;"></u-icon> -->
						添加常用语
					</view>
				</view>
			</view>
		</view>
		

		<!-- 
			<view class="padding-lr-sm" style="position: fixed;bottom: 40upx;width: 100%;z-index: 99999;"
				v-if="tabCurrentIndex == 1 && contentMsg == ''">
				<u-button class="" :custom-style="customStyle1" :hair-line="false" @click="goAdd(0,1)">
					<u-icon name="plus" color="#fff" size="30" style="margin-right: 10upx;"></u-icon>
					添加
				</u-button>
			</view>
		-->
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				customStyle1: {
					backgroundColor: "#00B88F",
					border: 0,
					color: "#FFF",
					height: '98rpx'
				},
				contentMsg: '',
				tabCurrentIndex: 0,
				fromInfo: 5,
				limit: 20,
				list: [],
				page: 1,
				scrollTop: false,
				notificationEnabled: true, // 自动发送招呼语开关状态
				tabList: [{
						state: 0,
						text: '常用词语',
						totalElements: 0
					},
					{
						state: 1,
						text: '自动回复',
						totalElements: 0
					}
				]
			}
		},
		onShow() {
			this.page = 1;
			this.loadData();
		},
		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack()
			},
			onPageScroll: function(e) {
				this.scrollTop = e.scrollTop > 200;
			},
			onReachBottom: function() {
				this.page = this.page + 1;
				this.loadData();
			},
			onPullDownRefresh: function() {
				this.page = 1;
				this.loadData();
			},
			goAdd(index, type, id) {
				uni.navigateTo({
					url: '/pages/msg/add?type=' + index + '&type1=' + type + '&id=' + id
				});
			},
			//顶部渠道点击
			tabClicks(index) {
				this.list = [];
				this.page = 1;
				this.tabCurrentIndex = index;
				// this.$queue.showLoading("加载中...")
				this.loadData();
			},
			//获取消息列表
			loadData() {
				let that = this;
				let number = 10;
				let token = this.$queue.getData('token');
				if (token) {
					this.$queue.showLoading("加载中...")
					if (this.tabCurrentIndex == 0) {
						this.$Request.getT('/app/message/selectMessageByUserId?page=' + this.page + '&limit=' + this
								.limit +
								'&state=20')
							.then(res => {
								if (res.code == 0) {
									if (this.page == 1) {
										this.list = [];
									}
									res.data.list.forEach(d => {
										this.list.push(d);
									});
								}
								uni.hideLoading();
							});
					} else {
						this.$Request.get("/app/user/selectUserById").then(res => {
							if (res.code == 0) {
								this.contentMsg = res.data.msg ? res.data.msg : '';
							}
							uni.hideLoading();
						});
					}
				}
			},
			// 添加常规模板
			addRegularTemplate() {
				uni.navigateTo({
					url: '/pages/msg/regular'
				});
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop > 200;
		},
		onReachBottom: function() {
			this.page = this.page + 1;
			this.loadData();
		},
		// 自动发送招呼语开关变化
		toggleNotification() {
			console.log('自动发送招呼语开关状态:', this.notificationEnabled ? '开启' : '关闭');
			// 这里可以添加保存到服务器的逻辑
		},
		// 选择模板
		selectTemplate(template) {
			console.log('选择的模板:', template);
			// 这里可以添加使用模板的逻辑，比如跳转到编辑页面
			uni.navigateTo({
				url: '/pages/msg/add?type=0&type1=0&template=' + encodeURIComponent(template)
			});
		},
	}
</script>

<style lang="scss">
	page {
		padding-top: 80rpx;
	}

	// 主内容区域
	.main-content {
		display: flex;
		height: calc(78vh);
		padding: 0 28rpx;
		gap: 20rpx;
	}

	.bg {
		background-color: #FFFFFF;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #FFFFFF;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #000000;
			position: relative;

			&.current {
				color: #000000;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid #00B88F;
				}
			}
		}
	}
	
	// 顶部标题栏样式
	.nav-header {
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		background: #FFFFFF;
	}

	.nav-left {
		width: 60rpx;
		display: flex;
		justify-content: flex-start;
	}

	.nav-center {
		flex: 1;
		display: flex;
		justify-content: center;
	}

	.nav-title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333333;
	}

	.nav-right {
		width: 60rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	// 设置项样式
	.setting-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #FFFFFF;
		border-radius: 12rpx;
		
		&.setting-item-first {
			border: none;
			padding: 40rpx 28rpx;
		}
		
		.setting-left {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			flex: 1;
			
			.setting-title-row {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				width: 100%;
				margin-bottom: 16rpx;
				
				.setting-label {
					color: rgba(21, 22, 26, 1);
					font-family: DM Sans;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 26px;
					letter-spacing: 0%;
					text-align: left;
					margin-right: 16rpx;
				}
				
				.setting-desc {
					color: rgba(153, 153, 153, 1);
					font-family: DM Sans;
					font-size: 22rpx;
					font-weight: 400;
					line-height: 13px;
					letter-spacing: 0%;
					text-align: left;
					margin-right: 16rpx;
				}
			}
			
			.switch-status {
				font-size: 32rpx;
				
				&.status-on {
					color: #007AFF;
				}
				
				&.status-off {
					color: #999999;
				}
			}
		}
		
		.setting-right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			
			.u-switch {
				margin-top: 20rpx;
				transform: scale(1.2); // 放大开关
			}
		}
	}

	// 左侧导航侧边栏
	.sidebar {
		width: 170rpx;
		padding: 20rpx 0;
		background: #F8F8F8;
		border-radius: 12rpx;
		
		.sidebar-item {
			padding: 20rpx 40rpx;
			text-align: center;
			cursor: pointer;
			transition: all 0.3s ease;
			
			&.active {
				.sidebar-text {
					color: rgba(1, 107, 246, 1);
					font-weight: 600;
				}
			}
			
			.sidebar-text {
				font-size: 28rpx;
				color: #666666;
				font-weight: 400;
			}
		}
	}

	// 右侧内容区域
	.content-area {
		flex: 1;
		background: #FFFFFF;
		overflow-y: auto;
		border-radius: 12rpx;
		box-shadow: 0px 8px 150px 0px rgba(0, 0, 0, 0.05);
		padding: 20rpx;
	}

	// 模板项样式
	.template-item {
		padding: 30rpx 20rpx;
		
		&:active {
			color: var(--016BF6, rgba(1, 107, 246, 1));
			font-family: DM Sans;
			font-size: 16px;
			font-weight: 400;
			line-height: 21px;
			letter-spacing: 0%;
			text-align: left;
		}
		
		.template-text {
			color: rgba(153, 153, 153, 1);
			font-family: DM Sans;
			font-size: 16px;
			font-weight: 400;
			line-height: 21px;
			letter-spacing: 0%;
			text-align: left;
		}
	}

	// 自定义添加按钮样式
	.custom-add-button {
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgba(1, 107, 246, 1);
		font-family: DM Sans;
		font-size: 16px;
		font-weight: 400;
		line-height: 21px;
		letter-spacing: 0%;
		text-align: left;
		
		&:active {
			transform: scale(0.98);
		}
	}

	// 常规添加按钮样式（与自定义按钮样式相同）
	.regular-add-button {
		display: flex;
		align-items: center;
		justify-content: center;
		color: rgba(1, 107, 246, 1);
		font-family: DM Sans;
		font-size: 16px;
		font-weight: 400;
		line-height: 21px;
		letter-spacing: 0%;
		text-align: left;
		
		&:active {
			transform: scale(0.98);
		}
	}
</style>