JLBA202505130001_关于吉林银行新建AI智能培训系统的需求_emoji表情

.env.development.yh

@@ -2,14 +2,14 @@
 ENV = 'development.yh'
 # 'development.yh'
 
-# VITE_APP_BASE_H5_API_Url = 'http://25.18.122.65:7001'
+ VITE_APP_BASE_H5_API_Url = 'http://25.18.122.65:7001'
 
-VITE_APP_BASE_H5_API_Url = 'http://25.18.122.91:9786'
+# VITE_APP_BASE_H5_API_Url = 'http://25.18.122.91:9786'
 # VITE_APP_BASE_H5_API_Url = 'http://25.18.122.78:9786'
 # VITE_APP_BASE_API_Url = 'https://aitstest.jlbank.com.cn:7002'
 # VITE_APP_BASE_H5_API_Url_TRAEXAM = 'http://25.64.32.154:9604'
 # VITE_APP_BASE_H5_API_Url_TRAPRACTICE = 'http://25.64.32.156:9603'
-VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.32.154:9601'
+# VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.32.154:9601'
 # VITE_APP_BASE_H5_API_Url_TRAAPP = 'http://25.64.32.158:9601'
 # VITE_APP_BASE_H5_API_Url_TRASTUDY = 'http://25.64.32.154:9602'
 # VITE_APP_BASE_H5_API_Url_TRAASK = 'http://25.64.32.157:9605'

src/api/courseDetail.js

@@ -70,3 +70,12 @@ export const queryTraCrsRankingList = (data) => {
 };
 
 
+// 获取百禄表情列表
+export const queryTraMemeInfoList = (data) => {
+	return request({
+		url: '/traapp/traMemeInfo/queryTraMemeInfoList',
+		method: 'post',
+		data
+	});
+};
+

src/components/comment-input/comment-input.vue

@@ -6,6 +6,7 @@
 				<uv-textarea
 					class="textarea"
 					:class="{'margin-bottom-12':isShow}"
+					ref="textareaRef"
 					v-model="value"
 					border="none"
 					placeholder="发条评论，和大家一起讨论"
@@ -37,7 +38,7 @@
 		<!-- 下方主要表情输入框 -->
 		<view class="bottom-main-input-div">
 			<view class="expression-tool-div">
-				<view class="tool-icon tool-icon-img checked_tool" @click="upload">
+				<view class="tool-icon tool-icon-img checked_tool">
 					<image class="img" :src="commentInput1" mode="aspectFit"></image>
 				</view>
 				<view class="tool-icon tool-icon-emoji checked_tool">
@@ -46,7 +47,7 @@
 				<view class="fl1"></view>
 			</view>
 			<view class="emoji-list">
-				<view class="emoji-item" v-for="emojiItem in emojiList">
+				<view class="emoji-item" v-for="emojiItem in emojiList" @click="insertValue(emojiItem)">
 					{{emojiItem}}
 				</view>
 			</view>
@@ -61,6 +62,7 @@
 	import commentInput4 from '@/static/images/courseDetail/comment-input-4.png'
 	import { reactive, ref } from 'vue';
 	import { emojiList } from '@/emoji';
+	import { queryTraMemeInfoList } from '@/api/courseDetail.js'
 	const customStyle = {
 		backgroundColor: 'rgb(227, 230, 237)',
 		padding: '18rpx'
@@ -74,16 +76,26 @@
 	const click_input = () => {
 		if(!isShow.value) isShow.value = true
 	}
+	const textareaRef = ref()
 	const focus = (event) => {
 		popHeight.value = '278px'
 		isShow.value = true
-		console.log('event', event.detail.height);
+		console.log('event', event);
+		console.dir(textareaRef.value)
+		getMemList()
 	}
+	const resStart = ref(-1)
 	const blur = (event) => {
-		console.log('失去焦点不一定关闭');
+		console.log('失去焦点不一定关闭',event);
 		// popHeight.value = '0px'
+		resStart.value = event.detail.cursor
 		isShow.value = true
 	}
+	const insertValue = (emojiItem) => {
+		let _val = value.value
+		value.value = _val.substring(0, resStart.value) + emojiItem + _val.substring(resStart.value, _val.length)
+		resStart.value+=emojiItem.length
+	}
 	const fileList = reactive([]);
 	// 方法
 	const upload = (limit = 4) => {
@@ -111,19 +123,36 @@
 			}
 		})
 	}
-	
+	const memList = ref([])
+	const getMemList = () => {
+		if(memList.value.length > 0){
+			return
+		}
+		queryTraMemeInfoList().then(res=>{
+			console.log(res)
+			memList.value = res.body || []
+		})
+	}
 </script>
 
 <style scoped lang="scss">
 	.emoji-list{
-		display: flex;
+		// display: flex;
-		flex-wrap: wrap;
+		// flex-wrap: wrap;
 		margin: 0 auto;
-		background-color: red;
+		// background-color: red;
-		justify-content: center;
+		// justify-content: center;
+		height: calc(278px - 120rpx);
+		overflow-y: auto;
+		padding: 0 14rpx;
 		.emoji-item{
 			font-size: 44rpx;
-			padding: 14rpx;
+			// padding: 14rpx;
+			height: 90rpx;
+			width: 12.5%;
+			float: left;
+			text-align: center;
+			line-height: 90rpx;
 		}
 	}
 	// 表情输入框
@@ -131,6 +160,7 @@
 		padding: 20rpx 10rpx;
 		display: flex;
 		align-items: center;
+		height: 120rpx;
 		.tool-icon{
 			display: flex;
 			align-items: center;
@@ -239,4 +269,7 @@
 	.tool-div {
 		border-bottom: 4rpx solid rgb(206, 206, 206);
 	}
+	.textarea{
+		padding: 14rpx;
+	}
 </style>