yizhizan-h5/pages/msg/index.vue

<template>
	<view>
		<view class="msg-box" :style="{ paddingTop: BarHeight + 'px' }">
		<!-- <view class="msg-box"> -->
			<!-- 顶部导航栏 -->
			<view class="nav-header">
				<view class="nav-left">
					<!-- <u-icon name="search" color="rgba(56, 58, 63, 1)" size="40"></u-icon> -->
				</view>
				<view class="nav-center">
					<text class="nav-title">消息</text>
				</view>
				<view class="nav-right">
					<!-- <u-icon name="bell" color="rgba(56, 58, 63, 1)" size="40" style="margin-right: 20rpx;"></u-icon> -->
					<u-icon name="setting" color="rgba(56, 58, 63, 1)" size="40" v-if="isLogin" @click="showSettingsModal"></u-icon>
				</view>
			</view>
			
			<!-- 系统通知 -->
			<view class="system-message-wrapper flex align-center" @click="goMsg">
				<view class="system-message-image flex align-center justify-center">
					<image src="/static/im/letter.svg" class="letter-icon"></image>
				</view>
				<view class="system-message-wrapper-r flex align-center justify-between">
					<view class="flex align-center">
						<text class="message-text">系统消息</text>
						<text class="message-count" v-if="systemCount">{{ systemCount }}</text>					
					</view>
					<view class="system-message-time" v-if="systemCount">{{ systemMessageTime || '' }}</view>
				</view>
			</view>
			
			<!-- 搜索栏 -->
			<view class="search-bar flex align-center" v-if="isLogin" @click="goSearch">
				<image src="@/static/images/svg/search.svg" class="search-icon"></image>
				搜索聊天记录
			</view>
			
			<!-- tabs -->
			<view class="tabs-wrapper flex align-center justify-between" v-if="isLogin">
				<view
					class="tab"
					v-for="(tab, index) in prevTabs"
					:class="{ 'active-tab': selectedTab == tab.type }"
					:key="tab.type + index"
					@click="changeTab(tab.type, 'fixed')">
						{{ tab.name }}
						<template v-if="userType == 1 && unreadCount && tab.type == 'unread'">
							({{ unreadCount }})
							<view class="red-dot"></view>
						</template>
					</view>
				<view
					class="tab"
					v-for="(tab, index) in midTabs"
					:class="{ 'active-tab': selectedTab == tab.type }"
					:key="tab.type + index"
					@click="changeTab(tab.type)">{{ tab.name }}</view>
				<view class="icon-wrapper">
					<image src="/static/im/more.svg" class="more-icon" @click="showTabModal = true"></image>
					<u-mask :show="showTabModal" @click="showTabModal = false">
						<view class="tabs-list" :style="{ top: `calc(${BarHeight}px + 370rpx)` }">
							<view class="tab-item" v-for="(tab, index) in endTabs" :key="tab.type + index" @click.stop="changeTab(tab.type)">{{ tab.name }}</view>
						</view>						
					</u-mask>
				</view>
			</view>
			
			<!-- 聊天列表 -->
			<template v-if="chatList.length">
				<scroll-view
					class="scroll-view"
					:style="{ height: `calc(100vh - 380rpx - ${BarHeight}px)` }"
					:scroll-y="true"
					:refresher-threshold="100"
					:refresher-enabled="true"
					:refresher-triggered="isRefreshing"
					scroll-with-animation="true"
					@refresherrefresh="handleRefresh">
					<view class="list">
						<view
							class="chat-item flex justify-between"
							v-for="item in chatList"
							:key="item.chatConversationId"
							@click="goIM(item)"
							@longpress="confirmDelete(item)">
							<view class="avatar-wrapper">
								<image :src="item.avatar || '/static/logo.png'" mode="aspectFill" class="avatar"></image>
								<view class="dot online-dot" v-if="item.onlineStatus == 'ONLINE'"></view>
								<view class="dot offline-dot" v-else></view>
							</view>
							<view class="chat-info-wrapper flex justify-between">
								<view class="chat-info-wrapper-l">
									<view class="chat-info-wrapper-l-t flex align-center">
										<view class="user-name">{{ item.userName }}</view>
										<view class="tip-wrapper">
											<text class="text-tip" v-if="item.companyName">{{ item.companyName }}</text>
											<text class="text-tip" style="margin: 0 6rpx;" v-if="item.companyName && item.stationName"> | </text>
											<text class="text-tip" v-if="item.stationName">{{ item.stationName }}</text>
										</view>
									</view>
									<view class="chat-info-wrapper-l-b">
										<template v-if="item.messageType == 1">{{item.content}}</template>
										<template v-else-if="item.messageType == 10">简历已发送</template>
										<template v-else-if="item.messageType == 18">位置</template>
										<template v-else-if="item.messageType == 9">简历请求</template>
										<template v-else-if="item.messageType == 6">微信请求</template>
										<template v-else-if="item.messageType == 5">手机号请求</template>
										<template v-else-if="item.messageType == 2">[图片]</template>
										<template v-else-if="item.messageType == 3">[语音]</template>
										<template v-else-if="item.messageType == 7">[交换手机]</template>
										<template v-else-if="item.messageType == 8">[交换微信]</template>
										<template v-else-if="item.messageType == 12">{{item.content}}已拒绝</template>
										<template v-else-if="item.messageType == 4">
											<image
												class="chat-listitem-text"
												v-if="item.content && item.messageType === 4"
												:src="ossUrl +item.content"
												style="height: 40rpx;width: 40rpx;"
											></image>
										</template>
										<template v-else-if="item.messageType == 20">[视频通话]</template>
										<template v-else-if="item.messageType == 21">[语音通话]</template>
										<template v-else-if="item.messageType == 99">[面试邀约]</template>
										<template v-else-if="item.messageType == 98">[{{item.content}}]</template>
										<template v-else-if="item.messageType == 96 || item.messageType == 97">[{{item.content}}]</template>
										<template v-else>[其他消息类型]</template>
									</view>
								</view>
								<view class="chat-info-wrapper-r">
									<view class="chat-info-wrapper-r-t">
										<image src="/static/im/toUp.svg" class="up-icon" v-if="showIsTop(item)"></image>
									</view>
									<view class="chat-time" v-if="item.messageTime">{{ getMonthOrDay(item.messageTime) }}</view>
									<view class="count-wrapper">
										<view class="count" v-if="item.contentCount">{{ item.contentCount }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</template>
			
			<empty v-if="!chatList.length" content='暂无消息'></empty>
		</view>
		
		<!-- <view class="chat-title">聊天</view> -->
		
		<!-- <view v-if="msgList.length" class="margin-topW">
			<view class="flex padding-tb radius padding-lr-sm bg" @click="goMsg" v-for="(item,index) in msgList"
				:key='index'>
				<view>
					<image style="width: 80rpx;height: 80rpx;border-radius: 80rpx;"
						src="../../static/images/msg/msg.png"></image>
				</view>
				<view class="flex-sub margin-left-sm">
					<view class="flex justify-between">
						<view class="text-white">{{item.title?item.title: '系统消息'}}</view>
						<view v-if="messageCount>0"
							style="height: 32rpx;width: 32rpx;border-radius: 100rpx;background-color: red;color: #FFF;text-align: center;">
							{{messageCount}}
						</view>
					</view>
					<view>
						<view class="text-grey">{{item.content}}</view>
					</view>
				</view>
			</view>
		</view> -->

		<!-- <view v-if="chatList.length" class="margin-top-sm  content ">
			<view class="radius padding-lr-sm bg" style="margin-top: 4rpx;" @click="goIM(item)" @longpress="confirmDelete(item)"
				v-for="(item,index) in chatList" :key='index'>
				<view class="flex padding-tb ">
					<view class="avatar-container">
						<u-image shape="circle" width='80rpx' height="80rpx" :src="item.avatar"></u-image>
					</view>
					<view class="flex-sub margin-left-sm" style="overflow: hidden;">
						<view class="flex justify-between align-center">
							<view class="text-white flex align-center" style="flex: 1;overflow: hidden;">
								<view class="text-white" style="font-size: 30rpx;">
									{{item.userName}}
								</view>
								<text class="text-grey userNameleng" style="font-size: 26rpx;margin-left: 10rpx;">
									<text v-if="item.companyName">{{item.companyName}} |</text> 
									{{item.stationName}}
								</text>
							</view>
							<view class="text-grey" style="flex-shrink: 0;margin-left: 10rpx;">
							{{item.messageTime?getMonthOrDay(item.messageTime):''}}</view>
						</view>
						<view class="flex justify-between" style="margin-top: 10rpx;">
							<view class="text-grey" v-if="item.messageType == 1">{{item.content}}</view>
							<view class="text-grey" v-else-if="item.messageType == 10">简历已发送</view>
							<view class="text-grey" v-else-if="item.messageType == 18">位置</view>
							<view class="text-grey" v-else-if="item.messageType == 9">简历请求</view>
							<view class="text-grey" v-else-if="item.messageType == 6">微信请求</view>
							<view class="text-grey" v-else-if="item.messageType == 5">手机号请求</view>
							<view class="text-grey" v-else-if="item.messageType == 2">[图片]</view>
							<view class="text-grey" v-else-if="item.messageType == 3">[语音]</view>
							<view class="text-grey" v-else-if="item.messageType == 7">[交换手机]</view>
							<view class="text-grey" v-else-if="item.messageType == 8">[交换微信]</view>
							<view class="text-grey" v-else-if="item.messageType == 12">{{item.content}}已拒绝</view>
							<view class="text-grey" v-else-if="item.messageType == 4"><image class="chat-listitem-text"
							v-if="item.content && item.messageType === 4"
							:src="ossUrl +item.content"
							style="height: 40rpx;width: 40rpx;"></image></view>
							<view class="text-grey" v-else-if="item.messageType == 20">[视频通话]</view>
							<view class="text-grey" v-else-if="item.messageType == 21">[语音通话]</view>
							<view class="text-grey" v-else-if="item.messageType == 99">[面试邀约]</view>
							<view class="text-grey" v-else-if="item.messageType == 98">[{{item.content}}]</view>
							<view class="text-grey" v-else-if="item.messageType == 96 || item.messageType == 97">[{{item.content}}]</view>
							<view class="text-grey" v-else>[其他消息类型]</view>
							<view v-if="item.contentCount"
								style="height: 32rpx;width: 32rpx;border-radius: 100rpx;background-color: red;color: #FFF;text-align: center;">
								{{item.contentCount}}
							</view>

						</view>
					</view>
				</view>
			</view>
		</view> -->

		<!-- <empty v-if="!chatList.length" content='暂无消息'></empty> -->
		
		<!-- 消息设置弹窗 -->
		<u-popup v-model="showSettings" mode="bottom" :mask-close-able="true" border-radius="20">
			<view class="settings-modal">
				<view class="modal-drag-bar"></view>
				<view class="modal-title">消息设置</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="setting-item" @click="goGreetingSettings">
					<view class="setting-left">
						<view class="setting-label">招呼语设置</view>
					</view>
					<view class="setting-right">
						<view class="setting-desc">设置后,沟通时可自动发送设置的招呼语</view>
						<u-icon name="arrow-right" color="rgba(29, 33, 41, 1)" size="24"></u-icon>
					</view>
				</view>
				
				<!-- 常用语设置 -->
				<view class="setting-item" @click="goCommonPhrases">
					<view class="setting-left">
						<view class="setting-label">常用语设置</view>
					</view>
					<view class="setting-right">
						<u-icon name="arrow-right" color="rgba(29, 33, 41, 1)" size="24"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import empty from '../../components/empty.vue'
	import configData from '../../common/config.js'

	// 求职端tabs
	// 显示：全部（固定）、未读（固定）、新招呼、仅沟通、有交换、有面试
	const JobApplicationTab = [
		{
			type: '',
			name: '全部'
		},
		{
			type: 'unread',
			name: '未读'
		},
		{
			type: 'new',
			name: '新招呼'
		},
		{
			type: 'communicating',
			name: '仅沟通'
		},
		{
			type: 'exchanged',
			name: '有交换'
		},
		{
			type: 'interview',
			name: '有面试'
		},
	]
	
	// 招聘端tabs
	// 显示：全部（固定）、新招呼（固定）、沟通中、已约面、已获取简历、已交换电话、已交换微信、收藏
	const RecruitmentTab = [
		{
			type: '',
			name: '全部'
		},
		{
			type: 'new',
			name: '新招呼'
		},
		{
			type: 'communicating',
			name: '沟通中'
		},
		{
			type: 'interview',
			name: '已约面'
		},
		{
			type: 'gotResume',
			name: '已获取简历'
		},
		{
			type: 'gotPhone',
			name: '已交换电话'
		},
		{
			type: 'gotWx',
			name: '已交换微信'
		},
		{
			type: 'collected',
			name: '收藏'
		},
	] 
	
	export default {
		components: {
			empty
		},
		data() {
			return {
				BarHeight: 0,
				page: 1,
				limit: 100,
				chatList: [],
				msgList: [],
				time: '',
				messageCount: 0,
				// userCount: 0,
				arr: [],
				showModal: true,
				showSettings: false, // 控制设置弹窗显示
				notificationEnabled: true, // 消息通知开关状态
				ossUrl:configData.ossUrl,
				tabs: [],
				selectedTab: '',
				isRefreshing: false,
				total: 0,
				userType: null,
				showTabModal: false,
				systemCount: 0, // 系统消息数量
				systemMessageTime: '', // 系统消息时间
				refreshTime: '', // 更新时间戳
				isLogin: false,
				unreadCount: 0
			}
		},
		computed: {
			prevTabs() {
				return this.tabs.slice(0, 2)
			},
			midTabs() {
				return this.tabs.slice(2, 4)
			},
			endTabs() {
				return this.tabs.slice(4)
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			let systemInfo = uni.getSystemInfoSync();
			this.BarHeight = systemInfo.statusBarHeight;
			// #endif

			uni.$on('chatUnreadCount', (data) => {
				if (this.userType === 1) {
					this.unreadCount = data
				}
			})
		},
		onUnload() {
			uni.$off('chatUnreadCount')
			if (this.time) clearInterval(this.time)
		},
		// //下拉刷新
		// onPullDownRefresh() {
		// 	let that = this
		// 	if (uni.getStorageSync('token')) {
		// 		that.getweiduMsg();
		// 		that.getChatList()
		// 		that.getMsgList()
		// 		that.$nextTick(function() {
		// 			that.messageCount = uni.getStorageSync('messageCount')
		// 		})
		// 	}
		// },
		onShow() {
			if (uni.getStorageSync('token')) {
				const userType = uni.getStorageSync('userType') || null
				if (this.userType != userType) {
					this.userType = userType
					this.init()
				} else {
					// if (this.userType == 1) {
					// 	this.getUnreadCount()
					// }
					this.getChatList()
					this.getMsgList()
				}
				
				this.isLogin = true
				this.time = setInterval(() => {
					const newTime = (new Date()).getTime()
					// 判断上一次请求是否大于3s
					if (this.refreshTime + 3000 < newTime) {
						// this.getweiduMsg();
						// if (this.userType == 1) {
						// 	this.getUnreadCount()
						// }
						this.getChatList()
						this.getMsgList()
						this.$nextTick(() => {
							this.messageCount = uni.getStorageSync('messageCount')
						})
					}
				}, 3000)
				this.$Request.getT('/app/common/type/310').then(res => { //消息未读提醒
					if (res.code == 0) {
						if (res.data && res.data.value) {
							this.arr.push(res.data.value)
						}
					}
				})
				this.$Request.getT('/app/common/type/337').then(res => { //预约成功通知(通用)
					if (res.code == 0) {
						if (res.data && res.data.value) {
							this.arr.push(res.data.value)
						}
					}
				})
				this.$Request.getT('/app/common/type/338').then(res => { //订单状态通知
					if (res.code == 0) {
						if (res.data && res.data.value) {
							this.arr.push(res.data.value)
						}
					}
				})
				// // #ifdef MP-WEIXIN
				// if (this.showModal) {
				// 	this.openMsg()
				// }
				// // #endif
			} else {
				this.isLogin = false
				this.chatList = []
				this.msgList = []
			}
		},
		onHide() {
			clearInterval(this.time)
		},
		methods: {
			// 初始化
			init() {
				// if (this.userType == 1) {
				// 	this.getUnreadCount()
				// }
				this.setTabs()
				this.getChatList()
				this.getMsgList()
			},
			
			// 设置tabs
			setTabs() {
				const userType = this.$queue.getData('userType')
				if (userType == 1) {
					this.tabs = JobApplicationTab
				} else if (userType == 2) {
					this.tabs = RecruitmentTab
				}
			},
			
			changeTab(type, isFixed = '') {
				if (!isFixed) {
					const index = this.tabs.findIndex(tab => tab.type == type)
					if (index > -1) {
						const tabItem = this.tabs.splice(index, 1)
						this.tabs.splice(2, 0, ...tabItem)
					}
				}
				if (this.showTabModal) {
					this.showTabModal = false
				}
				this.selectedTab = type
				this.page = 1
				this.getChatList()
			},
			
			confirmDelete(item){
				uni.showModal({
					title: '提示',
					content: '是否删除这条消息？',
					cancelText: '取消',
					confirmText: '删除',
					success: (res) => {
					  if (res.confirm) {
						this.$Request.get(`/app/chat/deleteConversation?chatConversationId=${item.chatConversationId}`).then(res => {
							if(res.code == 0){
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}else{
								uni.showToast({
									title: res.msg || '删除失败',
									icon: 'none'
								})
							}
						});
					  }
					}
				});
			},
			// 显示置顶
			showIsTop(item) {
				if (this.userType == 1) {
					return Boolean(item.isTop)
				} else if (this.userType == 2) {
					return Boolean(item.isTopQiye)
				}
				return false
			},
			//把时间转换为月日
			getMonthOrDay(data) {
				// 1️⃣ 手动解析字符串，避免 iOS 时区问题
				let timePublish;
				if (typeof data === 'string') {
					// 格式：2026-01-05 18:46:39
					const parts = data.split(/[- :]/);
					// 注意：月份从 0 开始
					timePublish = new Date(parts[0], parts[1] - 1, parts[2], parts[3] || 0, parts[4] || 0, parts[5] || 0);
				} else {
					timePublish = new Date(data);
				}
							
				const timeNow = new Date();
				const publishYear = timePublish.getFullYear();
				const publishMonth = timePublish.getMonth() + 1;
				const publishDate = timePublish.getDate();
				const publishHour = timePublish.getHours().toString().padStart(2, '0');
				const publishMinute = timePublish.getMinutes().toString().padStart(2, '0');
							
				const oneDay = 1000 * 60 * 60 * 24;
				// 用本地时间差计算天数
				const diffDays = Math.floor((timeNow.setHours(0, 0, 0, 0) - timePublish.setHours(0, 0, 0, 0)) / oneDay);
							
				const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				const weekStr = weekDays[timePublish.getDay()];
				const sameYear = publishYear === timeNow.getFullYear();
							
				let result = '';
							
				if (diffDays === 0) {
					result = `${publishHour}:${publishMinute}`;
				} else if (diffDays === 1) {
					result = `昨天 ${publishHour}:${publishMinute}`;
				} else if (diffDays < 7) {
					result = `${weekStr} ${publishHour}:${publishMinute}`;
				} else if (sameYear) {
					result = `${publishMonth}月${publishDate}日 ${publishHour}:${publishMinute}`;
				} else {
					result = `${publishYear}年${publishMonth}月${publishDate}日 ${publishHour}:${publishMinute}`;
				}
							
				return result;
			},
			// // 开启订阅消息
			// openMsg() {
			// 	console.log('订阅消息')
			// 	var that = this
			// 	uni.getSetting({
			// 		withSubscriptions: true, //是否获取用户订阅消息的订阅状态，默认false不返回
			// 		success(ret) {
			// 			console.log(ret.subscriptionsSetting.itemSettings, '*************************************')
			// 			// if (ret.subscriptionsSetting.itemSettings && Object.keys(ret.subscriptionsSetting.itemSettings).length == 2) {
			// 			if (ret.subscriptionsSetting.itemSettings) {
			// 				uni.setStorageSync('sendMsg', true)
			// 				uni.openSetting({ // 打开设置页 
			// 					success(rea) {
			// 						console.log(rea.authSetting)
			// 					}
			// 				});
			// 			} else { // 用户没有点击“总是保持以上，不再询问”则每次都会调起订阅消息
			// 				uni.setStorageSync('sendMsg', false)
			// 				uni.showModal({
			// 					title: '提示',
			// 					content: '为了更好的体验,请绑定消息推送',
			// 					confirmText: '确定',
			// 					cancelText: '取消',
			// 					confirmColor: '#016BF6',
			// 					success: function(res) {
			// 						if (res.confirm) {
			// 							wx.requestSubscribeMessage({
			// 								tmplIds: that.arr,
			// 								success(re) {
			// 									console.log(JSON.stringify(re),
			// 										'++++++++++++++')
			// 									var datas = JSON.stringify(re);
			// 									if (datas.indexOf("accept") != -1) {
			// 										console.log(re)
			// 										// uni.setStorageSync('sendMsg', true)
			// 									}
			// 								},
			// 								fail: (res) => {
			// 									console.log(res)
			// 								}
			// 							})
			// 							// uni.setStorageSync('sendMsg', true)
			// 							console.log('确认')
			// 							that.showModal = false
			// 						} else if (res.cancel) {
			// 							console.log('取消')
			// 							// uni.setStorageSync('sendMsg', false)
			// 							that.showModal = true
			// 						}
			// 					}
			// 				})
			// 			}
			// 		}
			// 	})
			// },
			// getweiduMsg() {
			// 	this.$Request.get("/app/chats/userCount").then(res => {
			// 		uni.stopPullDownRefresh()
			// 		if (res.code == 0) {
			// 			this.userCount = res.data
			// 		}
			// 	});
			// },
			//在线客服
			goChat() {
				// uni.navigateTo({
				// 	url:'/my/setting/chat'
				// })
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					// console.log('授权+1')
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(JSON.stringify(re), 111111111111)
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								// console.log(re)
							}
						},
						fail: (res) => {
							// console.log(res)
						}
					})
				}
				// #endif
				let that = this
				if (uni.getStorageSync('userType') == 1) { //用户端
					// #ifdef MP-WEIXIN
					wx.openCustomerServiceChat({
						extInfo: {
							url: that.$queue.getData('kefu')
						},
						corpId: that.$queue.getData('kefuAppid'),
						success(res) {
							console.log(res)
						},
					})
					// #endif
					// #ifdef H5
					window.location.href = that.$queue.getData('kefu');
					// #endif
					// #ifdef APP
					let kefu = that.$queue.getData('kefu')
					console.log(kefu)
					plus.runtime.openURL(kefu, function(res) {});
					// #endif
				} else { //企业端
					// #ifdef MP-WEIXIN
					wx.openCustomerServiceChat({
						extInfo: {
							url: that.$queue.getData('kefuq')
						},
						corpId: that.$queue.getData('kefuAppidq'),
						success(res) {
							console.log(res)
						},
					})
					// #endif
					// #ifdef H5
					window.location.href = that.$queue.getData('kefuq');
					// #endif
					// #ifdef APP
					let kefu = that.$queue.getData('kefuq')
					console.log(kefu)
					plus.runtime.openURL(kefu, function(res) {});
					// #endif
				}

			},
			getChatList() {
				this.refreshTime = (new Date()).getTime()
				this.$Request.get("/app/chat/selectChatConversationPage", {
					page: this.page,
					limit: this.limit,
					type: this.selectedTab
				}).then(res => {
					// uni.stopPullDownRefresh()
					if (res.code == 0) {
						this.chatList = this.page != 1 ? [...this.chatList, ...res.data.list] : res.data.list
						this.total = res.data.totalCount
					}
				}).finally(() => {
					this.refreshTime = (new Date()).getTime()
					this.isRefreshing = false
				});
			},
			getMsgList() {
				this.$Request.get("/app/message/selectMessageCountByUserId").then(res => {
					// uni.stopPullDownRefresh()
					if (res.code == 0) {
						// this.msgList = res.data.list
						this.systemCount = res.data.count
						this.systemMessageTime = res.data.lastTime
					}
				});
			},
			goIM(e) {
				// #ifdef MP-WEIXIN
				if (uni.getStorageSync('sendMsg')) {
					// console.log('授权+1')
					wx.requestSubscribeMessage({
						tmplIds: this.arr,
						success(re) {
							// console.log(JSON.stringify(re), 111111111111)
							var datas = JSON.stringify(re);
							if (datas.indexOf("accept") != -1) {
								// console.log(re)
							}
						},
						fail: (res) => {
							// console.log(res)
						}
					})
				}
				// #endif
				let userId = '';
				let userType = uni.getStorageSync('userType')
				if (userType == 2) { //当前登录用户为企业
					userId = e.userId
				} else { //当前登录用户为用户
					userId = e.focusedUserId
				}
				if (uni.getStorageSync('userType') == 1) {
					uni.navigateTo({
						url: '/pages/msg/im?chatConversationId=' + e.chatConversationId + '&byUserId=' + userId +
							'&postPushId=' + e.postPushId + '&resumesId=' + e.resumesId
					})
				} else {
					uni.navigateTo({
						url: '/pages/msg/im?chatConversationId=' + e.chatConversationId + '&byUserId=' + userId +
							'&resumesId=' + e.resumesId + '&postPushId=' + e.postPushId
					})
				}

			},
			goMsg() {
				if (!this.isLogin) return
				uni.navigateTo({
					url: '/pages/msg/message'
				})
			},
			
			// 显示设置弹窗
			showSettingsModal() {
				this.showSettings = true
			},
			
			// 切换通知开关
			toggleNotification() {
				// 开关状态已经通过v-model自动更新，这里可以添加其他逻辑
				console.log('通知开关状态:', this.notificationEnabled)
			},
			
			// 招呼语设置
			goGreetingSettings() {
				uni.navigateTo({
					url: '/pages/msg/addmsg'
				})
			},
			
			// 常用语设置
			goCommonPhrases() {
				uni.navigateTo({
					url: '/pages/msg/addmsg'
				})
			},
			// 搜索功能
			goSearch() {
				uni.navigateTo({
					url: '/pages/msg/search'
				})
			},
			// 刷新
			handleRefresh() {
				if (!uni.getStorageSync('token')) {
					return this.isRefreshing = false
				}
				if (this.isRefreshing) return
				this.isRefreshing = true
				this.page = 1
				this.getChatList()
				this.getMsgList()
			},
			// // 加载更多
			// loadMore() {
			// 	console.log('加载更多')
			// 	if (this.loading || this.chatList.length >= this.total || !uni.getStorageSync('token')) return
			// 	this.page++
			// 	this.getChatList()
			// },
			
			// // 获取未读消息数量
			// getUnreadCount() {
			// 	this.$Request.getT('/app/message/selectMessageCountByUserId')
			// 		.then(res => {
			// 			if (res.code == 0) {
			// 				this.unreadCount = res.data.count
			// 			}
			// 		})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.msg-box {
		display: flex;
		flex-direction: column;
		// height: 400px;
		font-family: DM Sans;

		.chat-title {
			background: linear-gradient(180deg, rgba(13, 39, 247, 1) 0%, rgb(191, 194, 201) 100%);
			-webkit-background-clip: text;
			background-clip: text;
			-webkit-text-fill-color: transparent;
			color: transparent;
			font-family: DM Sans;
			font-size: 42rpx;
			font-weight: 500;
			line-height: 28px;
			letter-spacing: 0%;
			text-align: left;
			margin: 20rpx 0 20rpx 20rpx;
		}
		
		.margin-top-sm {
			margin-top: 0 !important;
		}

		.nav-header {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
		}

		.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;
		}
		
		// 系统通知
		.system-message-wrapper {
			padding: 10rpx 0 0 32rpx;
			.system-message-image {
				width: 80rpx;
				height: 80rpx;
				background: linear-gradient(90.00deg, rgba(13, 39, 247, 1),rgba(19, 193, 234, 1));
				border-radius: 50%;
				margin-right: 32rpx;
				.letter-icon {
					width: 36rpx;
					height: 28rpx;
				}
			}
			.system-message-wrapper-r {
				flex: 1;
				height: 100%;
				padding: 20rpx 32rpx 20rpx 16rpx;
				border-bottom: 1px solid rgba(235, 236, 240, 1);
				.message-text {
					color: rgba(21, 22, 26, 1);
					font-size: 32rpx;
					font-weight: 400;
				}
				.message-count {
					min-width: 32rpx;
					height: 32rpx;
					line-height: 32rpx;
					padding: 0 10rpx;
					color: #fff;
					font-size: 20rpx;
					background: rgba(240, 35, 35, 1);
					border-radius: 32rpx;
					box-sizing: border-box;
					margin-left: 20rpx;
				}
				.system-message-time {
					color: rgba(189, 191, 198, 1);
					font-size: 20rpx;
					font-weight: 400;
				}
			}
		}
		
		// 搜索栏
		.search-bar {
			border: 1px solid rgba(231, 230, 228, 1);
			border-radius: 12rpx;
			background: rgba(237, 237, 237, 1);
			padding: 16rpx 24rpx;
			color: rgba(188, 188, 188, 1);
			font-size: 28rpx;
			margin: 24rpx 32rpx 24rpx;
			.search-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}
		}
		
		// tabs
		.tabs-wrapper {
			padding: 8rpx 32rpx;
			margin-bottom: 16rpx;
			.tab {
				position: relative;
				padding: 8rpx 24rpx;
				border-radius: 50rpx;
				background: rgba(0, 0, 0, 0.04);
				color: rgba(102, 102, 102, 1);
				font-size: 24rpx;
				font-weight: 400;
				line-height: 28rpx;
				&.active-tab {
					font-weight: 500;
					color: rgba(1, 107, 246, 1);
					background: rgba(1, 107, 246, 0.1);
				}
				.red-dot {
					position: absolute;
					top: 2px;
					right: 2px;
					width: 8px;
					height: 8px;
					border-radius: 8px;
					background: #f53f3f;
				}
			}
			.icon-wrapper {
				position: relative;
				padding: 8rpx;
				.more-icon {
					width: 36rpx;
					height: 36rpx;
				}
				.tabs-list {
					position: absolute;
					right: 30rpx;
					width: 268rpx;
					background: #fff;
					border-radius: 4px;
					box-shadow: 0px 3px 6px -4px rgba(0, 0, 0, 0.12),0px 6px 16px 0px rgba(0, 0, 0, 0.08),0px 9px 28px 8px rgba(0, 0, 0, 0.05);
					z-index: 10;
					.tab-item {
						text-align: center;
						color: rgba(102, 102, 102, 1);
						font-size: 14px;
						font-weight: 400;
						line-height: 34px;
					}
				}
			}
		}
		
		// 聊天列表
		.scroll-view {
			.chat-item {
				padding-left: 32rpx;
				padding-bottom: 16rpx;
				margin-bottom: 20rpx;
				.avatar-wrapper {
					position: relative;
					width: 96rpx;
					height: 128rpx;
					margin-right: 16rpx;
					padding-top: 32rpx;
					.avatar {
						display: block;
						width: 100%;
						height: 100%;
						border: 1px solid #eee;
						border-radius: 50%;
					}
					.dot {
						position: absolute;
						right: 8rpx;
						bottom: 0;
						width: 16rpx;
						height: 16rpx;
						border: 1px solid rgba(255, 255, 255, 1);
						border-radius: 50%;
					}
					.online-dot {
						background: rgba(0, 180, 42, 1);
					}
					.offline-dot {
						background: rgb(153, 153, 153);
					}
				}
				
				.chat-info-wrapper {
					flex: 1;
					padding-right: 32rpx;
					padding-bottom: 24rpx;
					border-bottom: 1px solid rgba(235, 236, 240, 1);
					.chat-info-wrapper-l {
						flex: 1;
						width: 400rpx;
						padding-top: 28rpx;
					}
					.user-name {
						// max-width: 130rpx;
						max-width: 70%;
						color: rgba(21, 22, 26, 1);
						font-size: 32rpx;
						font-weight: 400;
						margin-right: 16rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.tip-wrapper {
						max-width: 70%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.text-tip {
						color: rgba(117, 119, 124, 1);
						font-size: 20rpx;
						font-weight: 400;
					}
					.chat-info-wrapper-l-b {
						width: 100%;
						color: rgba(117, 119, 124, 1);
						font-size: 24rpx;
						font-weight: 400;
						line-height: 36rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					
					.chat-info-wrapper-r-t {
						display: flex;
						justify-content: flex-end;
						width: 100%;
						height: 40rpx;
						.up-icon {
							display: block;
							width: 40rpx;
							height: 40rpx;
						}
					}
					.chat-time {
						color: rgba(189, 191, 198, 1);
						font-size: 24rpx;
						font-weight: 400;
						line-height: 40rpx;
					}
					.count-wrapper {
						display: flex;
						justify-content: flex-end;
						width: 100%;
						height: 32rpx;
						.count {
							min-width: 32rpx;
							line-height: 32rpx;
							border-radius: 32rpx;
							color: #fff;
							font-size: 20rpx;
							padding: 0 10rpx;
							background: rgba(245, 63, 63, 1);
						}
					}
				}
				
				&:last-child {
					.chat-info-wrapper {
						border-bottom: 0;
					}
				}
			}
		}

		// .bg {
		// 	background: #FFFFFF;
		// }

		// .userNameleng {
		// 	// width: 80%;
		// 	flex: 1;
		// 	overflow: hidden;
		// 	white-space: nowrap;
		// 	text-overflow: ellipsis;
		// 	-o-text-overflow: ellipsis;
		// }

		// .avatar-container {
		// 	position: relative;
		// 	display: inline-block;
		// }

		// .online-dot {
		// 	position: absolute;
		// 	bottom: 2rpx;
		// 	right: 2rpx;
		// 	width: 20rpx;
		// 	height: 20rpx;
		// 	background-color: #00FF00;
		// 	border-radius: 50%;
		// 	border: 2rpx solid #FFFFFF;
		// }
	}
	
	// 设置弹窗样式
	.settings-modal {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 30rpx 40rpx 30rpx;
		min-width: 100%;
		
		.modal-drag-bar {
			width: 60rpx;
			height: 8rpx;
			background: #E5E5E5;
			border-radius: 4rpx;
			margin: 20rpx auto 30rpx auto;
		}
		
		.modal-title {
			margin: 0 auto;
			color: rgba(34, 37, 42, 1);
			font-family: DM Sans;
			font-size: 36rpx;
			font-weight: 500;
			line-height: 23px;
			letter-spacing: 0px;
			text-align: center;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid rgba(219, 218, 218, 1);
		}
		
		.setting-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 12rpx 32rpx;
			margin-bottom: 30rpx;
			border: 1px solid rgba(227, 231, 236, 1);
			border-radius: 6px;
			
			
			&:active {
				background-color: #F8F8F8;
			}
			
			&.setting-item-first {
				border: none;
				padding: 40rpx 32rpx;
			}
			
			.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;
					}
				}
				
				.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); // 放大开关到1.5倍
					}

				.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;
				}
			}
		}
	}

	
</style>