uniapp-app/pages_chat/quickReply/quickReply.vue

<template>
	<view class="quick-reply-page">
		<uni-nav-bar
			left-icon="left"
			@clickLeft="goBack"
			title="快捷回复"
			fixed
			color="#8B2316"
			height="180rpx"
			:border="false"
			backgroundColor="#f5f5f5"
		/>

		<!-- 顶部添加快捷回复入口 -->
		<view class="add-entry" @click="onAdd">
			<view class="row">
                <view class="add-icon">
				<uni-icons type="plusempty" color="#8B2316" size="22" />
			</view>
			<text class="add-text">添加快捷回复</text>
            </view>
            <view class="bar">
           
        </view>
		</view>
        

		<!-- 列表 -->
		<scroll-view class="list" scroll-y>
			<view
				class="item"
				v-for="(text, index) in replies"
				:key="index"
				@click="onSelect(text.replystr)"
				@longpress="onLongPress(text.uuid)"
			>
				<text class="item-text">{{text.replystr }}</text>
			</view>
		</scroll-view>

		<!-- 输入内容弹窗 -->
		<UniPopup
			ref="popupRef"
			type="center"
			background-color="#ffffff"
			mask-background-color="rgba(0,0,0,0.4)"
		>
			<view class="input-popup">
				<view class="popup-title">新增快捷回复</view>
				<textarea
					v-model="inputContent"
					class="popup-textarea"
					:maxlength="-1"
					placeholder="请输入回复内容"
					auto-height
				/>
				<view class="popup-actions">
					<view class="btn cancel" @click="onCancel">取消</view>
					<view class="btn confirm" @click="onConfirm">确定</view>
				</view>
			</view>
		</UniPopup>
	</view>
</template>

<script setup>
 	import { ref, onMounted, getCurrentInstance } from 'vue'
	import { onLoad,onShow} from '@dcloudio/uni-app'
 	// @ts-ignore
	const delUuid=ref('');
 	import UniPopup from '@/components/uni-components/uni-popup/components/uni-popup/uni-popup.vue'
     import api from '@/api/api'
	// 示例数据（后续可替换为接口数据或本地存储）
	const replies = ref([])

	const goBack = () => {
		uni.navigateBack({
			fail() {
				uni.redirectTo({ url: '/pages/index/index' })
			},
		})
	}

	const popupRef = ref(null)
	const inputContent = ref('')

	const onAdd = () => {
		// @ts-ignore
		popupRef.value && popupRef.value.open('center')
	}
 onShow(() => {
	getQuickReplyList()
 })
 onLoad(() => {
	getQuickReplyList()
 })
	const onSelect = (text) => {
		uni.$emit('quickReply', text);
		uni.navigateBack()
	}
	const getQuickReplyList = async () => {
		const res = await api.quickReplyList({})
		if(res.code==200){
			replies.value = res.data
		}
	}
	const addQuickReply = async () => {
		const res = await api.addQuickReply({
			replystr:inputContent.value
		})
		if(res.code==200){
			uni.showToast({title: '添加成功', icon: 'none'})
			getQuickReplyList()
		}
	}
	const deleteQuickReply = async () => {
		const res = await api.deleteQuickReply({
			uuid:delUuid.value
		})
		if(res.code==200){
			uni.showToast({title: '删除成功', icon: 'none'})
			getQuickReplyList()
		}
	};
	// 长按删除
	const onLongPress = (index) => {
		delUuid.value = index;
		uni.showActionSheet({
			itemList: ['删除该条快捷回复'],
			success: (res) => {
				if (res.tapIndex === 0) {
					uni.showModal({
						title: '确认删除',
						content: '删除后不可恢复，是否删除？',
						confirmColor: '#8B2316',
						success: (modalRes) => {
							if (modalRes.confirm) {
								deleteQuickReply()
							}
						},
					})
				}
			},
		})
	}

	const onCancel = () => {
		// @ts-ignore
		popupRef.value && popupRef.value.close()
		inputContent.value = ''
	}

	const onConfirm = () => {
		const text = inputContent.value.trim()
		if (!text) {
			uni.showToast({ title: '请输入内容', icon: 'none' })
			return
		}
		replies.value = [text, ...replies.value]
		uni.setClipboardData({ data: text, showToast: false })
		uni.showToast({ title: '已添加并复制', icon: 'none' })
		onCancel()
	}

</script>

<style scoped lang="scss">
.bar{
    width:100%;
    height:20rpx;
    background-color: #e3e3e3;
}
	.quick-reply-page {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
	}

	/* 顶部添加入口 */
	.add-entry {
		
		
		position: fixed;
		top: 180rpx; /* 与导航栏高度一致 */
		left: 0;
		right: 0;
		z-index: 2;
	}
    .row{
        display: flex;
		align-items: center;
        padding: 28rpx 30rpx;
		background-color: #ffffff;
    }

	.add-icon {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		border: 2rpx solid #8b2316;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
	}

	.add-text {
		font-size: 30rpx;
		color: #8b2316;
	}

	/* 列表区域 */
	.list {
		position: fixed;
		top: 272rpx; /* 导航栏 + 添加入口高度（约） */
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #ffffff;
	}

	.item {
		padding: 28rpx 30rpx;
		border-bottom: 1rpx solid #eeeeee;
	}

	.item-text {
		font-size: 30rpx;
		color: #333333;
		line-height: 1.6;
		word-break: break-all;
	}

	/* 弹窗样式 */
	.input-popup{
		width: 640rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.popup-title{
		font-size: 32rpx;
		color: #333333;
		font-weight: 500;
		margin-bottom: 20rpx;
	}
	.popup-textarea{
		width: 100%;
		min-height: 160rpx;
		background: #f7f7f7;
		border-radius: 12rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		color: #333333;
	}
	.popup-actions{
		display: flex;
		justify-content: space-between;
		margin-top: 24rpx;
	}
	.btn{
		flex: 1;
		height: 72rpx;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.btn.cancel{
		background-color: #ffffff;
		border: 2rpx solid #8b2316;
		color: #8b2316;
		margin-right: 20rpx;
	}
	.btn.confirm{
		background-color: #8b2316;
		color: #ffffff;
	}
</style>