MoeNovaClient/pages/crowdFunding/customerService.vue

<template>
	<view class="customer-service-page">
		<!-- 顶部栏 -->
		<!-- 顶部导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-left">
				<text class="fa fa-angle-left" @click="goBack"></text>
				<view class="navbar-title one-omit">
					时间是一种解药时间是一种解药时间是一种解药时间是一种解药时间是一种解药
				</view>
			</view>

			<view class="navbar-right" @click="showActionSheet">
				<image src="@/static/icon/more2.png" style="width: 64rpx;height: 64rpx;  margin-top: 15rpx;"
					mode="widthFix"></image>
			</view>
		</view>


		<!-- 聊天内容区 -->
		<scroll-view class="cs-chat-list" :scroll-y="true" :scroll-with-animation="true"
			:scroll-into-view="scrollToView"
			:style="{ paddingBottom: (keyboardHeight ? keyboardHeight + 100 : 100) + 'rpx' }">
			<view v-for="(msg, idx) in chatList" :key="msg.id">
				<view v-if="shouldShowTime(idx)" class="cs-time-bar">
					<view class="cs-time-inner">{{ formatTime(msg.time) }}</view>
				</view>
				<template v-if="msg.type === 'orderCard'">
					<view class="cs-msg-order-card">
						<image class="order-card-img" :src="msg.order.img" mode="aspectFill" />
						<view class="order-card-info">
							<view class="order-card-title">{{ msg.order.title }}</view>
							<view class="order-card-row">
								<text class="order-card-label">订单编号</text>
								<text class="order-card-value">{{ msg.order.orderNo }}</text>
							</view>
							<view class="order-card-row">
								<text class="order-card-label">下单时间</text>
								<text class="order-card-value">{{ msg.order.orderTime }}</text>
							</view>
							<view class="order-card-btn-box">
								<button class="order-card-btn">查看详情</button>
							</view>
						</view>
						<image class="order-card-avatar" :src="msg.avatar" />
					</view>
				</template>
				<template v-else>
					<view :id="'msg-' + msg.id"
						:class="['cs-msg-item', msg.type === 'user' ? 'cs-msg-self' : 'cs-msg-other']">
						<image class="cs-avatar" :src="msg.avatar" />
						<view class="cs-msg-bubble">{{ msg.content }}</view>
					</view>
				</template>
			</view>
			<view :id="'bottom-anchor'"></view>
			<view v-if="adShow" :style="{ height: orderCardHeight + 'rpx' }"></view>
		</scroll-view>

		<!-- 底部输入栏 -->
		<view class="cs-input-bar" :style="{ bottom: keyboardHeight + 'rpx' }">
			<!-- 广告条 -->
			<view class="order-card" v-if="adShow">
				<view class="order-card-header">
					<image class="order-card-img" src="/static/crowdFunding/top-img.png" mode="aspectFill" />
					<view class="order-card-info">
						<view class="order-card-title one-omit">【Woh】灯塔 塔罗牌 治愈风泛伟特系</view>
						<view class="order-card-btn-box">
							<button class="order-card-btn" @click="sendOrderCardMsg()">发给客服</button></view>
					</view> 
					<image class="order-card-close" @click="closeOrderCard" src="@/static/icon/wd_icon_guanbi.png"   mode="widthFix"></image>
				</view>
				<view class="order-card-row">
					<text class="order-card-label">订单编号</text>
					<text class="order-card-value">12201544521215415415415</text>
				</view>
				<view class="order-card-row">
					<text class="order-card-label">下单时间</text>
					<text class="order-card-value">2025-05-27 09:35:30</text>
				</view>
			</view>

			<view class="cs-input-area">
				<textarea
					class="cs-textarea"
					v-model="inputValue"
					placeholder="在这里输入新消息"
					:focus="inputFocused"
					:adjust-position="false"
					@focus="onInputFocus"
					@blur="onInputBlur"
					@keyboardheightchange="onKeyboardHeightChange"
					maxlength="300"
					auto-height
					:style="{ 'max-height': '120rpx', 'overflow-y': 'auto' }"
				></textarea>
				<view class="emoji-trigger" @tap="toggleEmojiPanel">
					<text class="fa fa-smile-o"></text>
				</view>
				<view class="send_btn" @tap="sendMsg">发送</view>
			</view>
		 
		</view>

		<view class="emoji-panel" :class="{ show: showEmojiPanel }" v-if="showEmojiPanel">
			<view class="emoji-grid">
				<view class="emoji-item" v-for="(emoji, index) in emojiList" :key="index" @tap="selectEmoji(emoji)">
					{{ emoji }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			chatList: [
				{ id: 1, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:01' },
				{ id: 2, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:05' },
				{ id: 3, content: '你好请问可以怎么帮助你', type: 'user', avatar: '/static/makedetail/characterProfilePicture.png', time: '2025-05-21 20:10' }, { id: 4, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'user', avatar: '/static/makedetail/characterProfilePicture.png', time: '2025-05-21 20:10' },
				{ id: 5, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:01' },
				{ id: 6, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:05' },
				 { id: 7, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:01' },
				{ id: 8, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:05' },
				{ id:9, content: '你好请问可以怎么帮助你', type: 'user', avatar: '/static/makedetail/characterProfilePicture.png', time: '2025-05-21 21:10' }, { id: 13, content: '你好请问可以怎么帮助你', type: 'user', avatar: '/static/makedetail/characterProfilePicture.png', time: '2025-05-21 20:10' },
				{ id: 10, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 20:01' },
				{ id: 11, content: '哈哈哈哈哈哈哈哈红红火火恍恍惚惚', type: 'customerService', avatar: '/static/home/avator.png', time: '2025-05-21 23:05' }
			],
			inputValue: '',
			pollTimer: null,
			scrollToView: 'bottom-anchor',
			adShow: true,
			keyboardHeight: 0,
			inputFocused: false,
			orderCardHeight: 260, // rpx，实际高度可根据广告条内容微调
			showEmojiPanel: false,
			emojiList: [
				'😀','😁','😂','🤣','😃','😄','😅','😆','😉','😊','😋','😎','😍','😘','🥰','😗','😙','😚','🙂','🤗',
				'🤩','🤔','🤨','😐','😑','😶','🙄','😏','😣','😥','😮','🤐','😯','😪','😫','🥱','😴','😌','😛','😜',
				'😝','🤤','😒','😓','😔','😕','🙃','🤑','😲','☹️','🙁','😖','😞','😟','😤','😢','😭','😦','😧','😨',
				'😩','🤯','😬','😰','😱','🥵','🥶','😳','🤪','😵','😡','😠','🤬','😷','🤒','🤕','🤢','🤮','🥴','😇',
				'🥳','🥺','🤠','😈','👿','👹','👺','💀','👻','👽','🤖','💩','😺','😸','😹','😻','😼','😽','🙀','😿',
				'😾','🙈','🙉','🙊','💋','💌','💘','💝','💖','💗','💓','💞','💕','💟','❣️','💔','❤️','🧡','💛','💚',
				'💙','💜','🤎','🖤','🤍','💯','💢','💥','💫','💦','💨','🕳️','💣','💬','👋','🤚','🖐️','✋','🖖','👌',
				'🤏','✌️','🤞','🤟','🤘','🤙','👈','👉','👆','🖕','👇','☝️','👍','👎','✊','👊','🤛','🤜','👏','🙌',
				'👐','🤲','🙏','✍️','💅','🤳','💪','🦾','🦵','🦶','👂','👃','🧠','🦷','🦴','👀','👁️','👅','👄'
			],
		}
	},
	onShow() {
		this.startPolling();
	},
	onHide() {
		this.clearPolling();
	},
	onUnload() {
		this.clearPolling();
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		// 轮询获取消息
		startPolling() {
			this.clearPolling();
			this.pollTimer = setInterval(this.fetchMessages, 30000);
			this.fetchMessages();
		},
		clearPolling() {
			if (this.pollTimer) {
				clearInterval(this.pollTimer);
				this.pollTimer = null;
			}
		},
		fetchMessages() {
			// TODO: 替换为实际接口获取消息的接口
			// uni.request({ ... })
			// 假设新消息加入chatList
			// this.chatList.push(...)
			// 滚动到底部
			this.$nextTick(() => {
				this.scrollToView = 'bottom-anchor';
			});
		},
		sendMsg() {
			if (!this.inputValue.trim()) return;
			this.chatList.push({
				id: Date.now(),
				content: this.inputValue,
				type: 'user',
				avatar: '/static/avatar/cs2.png'
			});
			this.inputValue = '';
			this.$nextTick(() => {
				this.scrollToView = 'bottom-anchor';
			});
			// TODO: 发送消息到后端接口
		},
		closeOrderCard() {
			this.adShow = false;
		},
		shouldShowTime(idx) {
			if (idx === 0) return true;
			// 找到上一个显示时间条的消息
			let lastShowIdx = -1;
			for (let i = idx - 1; i >= 0; i--) {
				if (this.shouldShowTime(i)) {
					lastShowIdx = i;
					break;
				}
			}
			if (lastShowIdx === -1) return true;
			const curTime = new Date(this.chatList[idx].time.replace(/-/g, '/')).getTime();
			const lastTime = new Date(this.chatList[lastShowIdx].time.replace(/-/g, '/')).getTime();
			// 20分钟 = 20*60*1000 毫秒
			return (curTime - lastTime) > 20 * 60 * 1000;
		},
		formatTime(timeStr) {
			// 例：'2025-05-21 20:01' => '05月21日 20:01'
			if (!timeStr) return '';
			const d = new Date(timeStr.replace(/-/g, '/'));
			const MM = String(d.getMonth() + 1).padStart(2, '0');
			const DD = String(d.getDate()).padStart(2, '0');
			const hhmm = timeStr.slice(11, 16);
			return `${MM}月${DD}日 ${hhmm}`;
		},
		onInputFocus(e) {
			this.inputFocused = true;

		},
		onInputBlur(e) {
			this.inputFocused = false;
			this.keyboardHeight = 0;
		},
		px2rpx(px) {
			// 以750设计稿为例，1rpx = 屏幕宽度/750
			const screenWidth = uni.getSystemInfoSync().windowWidth;
			return px * 750 / screenWidth;
		},
		onKeyboardHeightChange(e) {
			let pxHeight = e.detail ? e.detail.height : (e.height || 0);
			// #ifdef H5 || APP-PLUS
			this.keyboardHeight = this.px2rpx(pxHeight);
			// #endif
			// #ifdef MP-WEIXIN
			this.keyboardHeight = pxHeight; // 小程序下直接用rpx
			// #endif
		},
		toggleEmojiPanel() {
			this.inputFocused = false;
			setTimeout(() => {
				this.showEmojiPanel = !this.showEmojiPanel;
			}, 100);
		},
		selectEmoji(emoji) {
			this.inputValue += emoji;
			this.showEmojiPanel = false;
		},
		sendOrderCardMsg() {
			this.chatList.push({
				id: Date.now(),
				type: 'orderCard',
				avatar: '/static/makedetail/characterProfilePicture.png', // 用户头像
				order: {
					img: '/static/crowdFunding/top-img.png',
					title: '【Woh】灯塔 塔罗牌 治愈风泛伟特系',
					orderNo: '12201544521215415415415',
					orderTime: '2025-05-27 09:35:30'
				},
				time: this.getNowTime()
			});
			this.$nextTick(() => {
				this.scrollToView = 'bottom-anchor';
			});
		},
		getNowTime() {
			const d = new Date();
			const pad = n => n < 10 ? '0' + n : n;
			return `${d.getFullYear()}-${pad(d.getMonth()+1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
		},
		}
	}
</script>

<style lang="scss">
.customer-service-page {
	min-height: 100vh;
	background: #f2f6f2;
	display: flex;
	flex-direction: column;
	position: relative;


	.custom-navbar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 90rpx;
		padding: 0 20rpx;
		padding-top: var(--status-bar-height);
		background-color: #ffffff;
		position: sticky;
		top: 0;
		height: calc(90rpx + var(--status-bar-height));
		z-index: 100;

		.navbar-left {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.fa-angle-left {
				font-size: 48rpx;
				color: #333;
			}

			.navbar-title {
				max-width: 450rpx;
				font-family: 'PingFang SC-Bold';
				font-weight: 400;
				font-size: 32rpx;
				color: #1f1f1f;
				padding-left: 20rpx;
			}
		}


		.navbar-right {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.fa-ellipsis-h {
				font-size: 36rpx;
				color: #333;
			}
		}
	}






	.cs-chat-list {
		flex: 1;
		padding: 24rpx 0 0 0;
		overflow-y: auto;
		background: #f6f7f9;

		.cs-msg-item {
			display: flex;
			align-items: flex-end;
			margin-bottom: 18rpx;
			padding: 0 24rpx;

			&.cs-msg-other {
				flex-direction: row;

				.cs-avatar {
					margin-right: 12rpx;
				}

				.cs-msg-bubble {
					background: #fff;
					color: #1f1f1f;
					border-top-left-radius: 0;
					border-top-right-radius: 12rpx;
					border-bottom-left-radius: 12rpx;
					border-bottom-right-radius: 12rpx;
				}
			}

			&.cs-msg-self {
				flex-direction: row-reverse;

				.cs-avatar {
					margin-left: 12rpx;
				}

				.cs-msg-bubble {
					background: #e6f6d9;
					color: #1f1f1f;
					border-top-right-radius: 0;
					border-top-left-radius: 12rpx;
					border-bottom-left-radius: 12rpx;
					border-bottom-right-radius: 12rpx;
				}
			}

			.cs-avatar {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
			}

			.cs-msg-bubble {
				max-width: 70vw;
				min-height: 40rpx;
				font-size: 28rpx;
				padding: 18rpx 24rpx;
				word-break: break-all;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
				margin-bottom: 2rpx;
				display: flex;
				align-items: center;
			}
		}

		.cs-time-bar {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 18rpx 0 12rpx 0;

			.cs-time-inner {
				background: #fff;
				color: #b2b2b2;
				font-size: 24rpx;
				border-radius: 16rpx;
				padding: 8rpx 24rpx;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
				display: inline-block;
			}
		}
	}

	.order-card {
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
		padding: 24rpx 24rpx 18rpx 24rpx;
		margin: 24rpx;
		position: absolute;
		top: -280rpx;
		font-size: 28rpx;
		width: 670rpx;
		.order-card-header {
			display: flex;
			align-items: flex-start;
			position: relative;

			.order-card-img {
				width: 100rpx;
				height: 100rpx;
				border-radius: 12rpx;
				margin-right: 18rpx;
				flex-shrink: 0;
			}

			.order-card-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
			
				.order-card-title {
					font-size: 30rpx;
					color: #1f1f1f;
					font-weight: 500;
					margin-bottom: 18rpx;
					margin-top: 2rpx;
					line-height: 1.3;
					max-width: 450rpx;
				}

				.order-card-btn-box {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					
					.order-card-btn {
						font-family: 'PingFang SC-Bold';
						font-weight: 400;
						font-size: 24rpx;
						color: #ACF934;
						background: #1F1F1F;
						border-radius: 128rpx;
						padding: 8rpx 14rpx;
						line-height: 1.2;
						margin: 0;
					}
				}
			}

			.order-card-close {
				position: absolute;
				right: -10rpx;
				top:-10rpx;
				font-size: 36rpx;
				color: #1f1f1f;
				background: #fff;
				border-radius: 50%;
				width: 34rpx;
				height: 34rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 2;
			}
		}

		.order-card-row {
			display: flex;
			align-items: center;
			margin-top: 12rpx;

			.order-card-label {
				color: #b2b2b2;
				font-size: 26rpx;
				width: 140rpx;
				flex-shrink: 0;
			}

			.order-card-value {
				color: #1f1f1f;
				font-size: 26rpx;
				margin-left: 12rpx;
				word-break: break-all;
			}
		}
	}

	.cs-input-bar {
		display: flex;
		align-items: center;
		background: #fff;
		padding: 12rpx 16rpx;
		border-top: 1rpx solid #ededed;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;

		.cs-input-area {
			display: flex;
			align-items: flex-end;
			background: #fff;
			border-radius: 32rpx;
			padding: 8rpx 12rpx;
			flex: 1;

			.cs-textarea {
				flex: 1;
				min-height: 64rpx;
				max-height: 120rpx;
				overflow-y: auto;
				border: none;
				font-size: 28rpx;
				background: #f6f7f9;
				border-radius: 24rpx;
				padding: 12rpx 20rpx;
				resize: none;
			}

			.emoji-trigger {
				margin: 0 12rpx;
				font-size: 36rpx;
				color: #999;
				display: flex;
				align-items: center;
			}

			.send_btn {
				background: #A6E22E;
				color: #fff;
				border-radius: 32rpx;
				font-size: 28rpx;
				padding: 0 32rpx;
				height: 64rpx;
				line-height: 64rpx;
				margin-left: 8rpx;
			}
		}
	}

	.emoji-panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 50vh;
		width: 100vw;
		background: #fff;
		padding: 12rpx 0 0 0;
		border-top: 1rpx solid #ededed;
		z-index: 1000;
		box-shadow: 0 -4rpx 24rpx rgba(0,0,0,0.08);
		overflow-y: auto;
		transform: translateY(100%);
		transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
		border-top: 20rpx solid #fff;
		&.show {
			transform: translateY(0);
		}
		.emoji-grid {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			padding-bottom: 24rpx;
			.emoji-item {
				width: 60rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				color: #333;
				margin: 8rpx;
				border-radius: 8rpx; 
				padding: 8rpx;
			}
		}
	}

	.cs-msg-order-card {
		position: relative;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		background: #fff;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
		padding: 24rpx 24rpx 18rpx 24rpx;
		margin: 24rpx 0 0 0;
		width: 600rpx;
		min-height: 160rpx;
		.order-card-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 12rpx;
			margin-right: 18rpx;
			flex-shrink: 0;
		}
		.order-card-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			.order-card-title {
				font-size: 30rpx;
				color: #1f1f1f;
				font-weight: 500;
				margin-bottom: 18rpx;
				margin-top: 2rpx;
				line-height: 1.3;
				max-width: 350rpx;
				word-break: break-all;
			}
			.order-card-btn-box {
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top: 12rpx;
				.order-card-btn {
					font-family: 'PingFang SC-Bold';
					font-weight: 400;
					font-size: 24rpx;
					color: #1F1F1F;
					background: #ACF934;
					border-radius: 128rpx;
					padding: 8rpx 24rpx;
					line-height: 1.2;
					margin: 0;
				}
			}
		}
		.order-card-row {
			display: flex;
			align-items: center;
			margin-top: 8rpx;
			.order-card-label {
				color: #b2b2b2;
				font-size: 26rpx;
				width: 140rpx;
				flex-shrink: 0;
			}
			.order-card-value {
				color: #1f1f1f;
				font-size: 26rpx;
				margin-left: 12rpx;
				word-break: break-all;
			}
		}
		.order-card-avatar {
			position: absolute;
			top: -32rpx;
			right: -32rpx;
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
			background: #fff;
		}
	}
}
</style>