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="toggleDropdown">
				<image src="@/static/icon/more2.png" style="width: 64rpx; height: 64rpx; margin-top: 15rpx"
					mode="widthFix"></image>

				<view class="dropdown-menu" v-if="showDropdown">
					<view class="dropdown-item" @tap="handleOption('report')">举报内容</view> 
				</view>

			</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-box">
						<image class="order-card-avatar" :src="msg.avatar" />
						<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>
						</view>
					</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 style="height: 200rpx; width: 100%"></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,
			showDropdown: 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.closeOrderCard();
				setTimeout(() => {
					this.scrollToView = "bottom-anchor";
				}, 1000);
			});
		},
		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())}`;
		},
		// 切换下拉菜单显示状态
		toggleDropdown() {
			this.showDropdown = !this.showDropdown;
		},
		// 处理下拉菜单选项点击
		handleOption(type) {
			this.showDropdown = false;
			switch (type) {
				case 'report':
					uni.navigateTo({
						url: '/pages/my/feedback?isReportContent=true'
					});
					break; 
			}
		},
	},
};
</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-box {
		display: flex;
		flex-direction: row-reverse;

		.order-card-avatar {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
			margin-left: 12rpx;
			margin-right: 24rpx;
		}

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

	.dropdown-menu {
		position: absolute;
		top: calc(100% + 10rpx);
		right: 20rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 0;
		width: 200rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
		z-index: 100;
		transform-origin: top right;
		animation: dropdownAnimation 0.2s ease-out;
		overflow: hidden;

		.dropdown-item {
			padding: 24rpx 0;
			color: #333333;
			font-size: 28rpx;
			position: relative;
			text-align: center;

			&:not(:last-child)::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 1rpx;
				background-color: #EEEEEE;
			}

			&:active {
				background-color: #f8f8f8;
			}
		}
	}

	@keyframes dropdownAnimation {
		0% {
			opacity: 0;
			transform: scale(0.95) translateY(-5rpx);
		}

		100% {
			opacity: 1;
			transform: scale(1) translateY(0);
		}
	}

}
</style>