添加快捷文案模板

pages/main/index.vue

@@ -7,24 +7,27 @@
 		<view class="cu-chat">
 			<block v-for="(x,i) in msgList" :key="i">
 				<!-- 用户消息 -->
-				<view v-if="x.my && x.type === 'msg'" class="cu-item self" :class="[i === 0 ? 'first' : '', i === 1 ? 'sec' : '']">
+				<view v-if="x.my && x.type === 'msg'" class="cu-item self"
+					:class="[i === 0 ? 'first' : '', i === 1 ? 'sec' : '']">
 					<view class="main">
 						<view class="content bg-cyan shadow"><!-- @click="x.msg && $squni.copy(x.msg)" -->
 							<text>{{ x.msg }}</text>
 						</view>
 					</view>
 					<image class="cu-avatar round" src="/static/logo-100.png">
-					<view v-if="i === 0" class="date">{{ x.date }}</view>
+						<view v-if="i === 0" class="date">{{ x.date }}</view>
 				</view>
 				<!-- AI消息 -->
-				<view v-if="!x.my && x.type === 'msg'" class="cu-item" :class="[i === 0 ? 'first' : '', i === 1 ? 'sec' : '']">
+				<view v-if="!x.my && x.type === 'msg'" class="cu-item"
+					:class="[i === 0 ? 'first' : '', i === 1 ? 'sec' : '']">
 					<view class="flex flex-direction align-center">
 						<image class="cu-avatar round chat-avatar" src="/static/robot.png">
-						<text v-if="i === 0" class="cuIcon-title" :class="[statusColor]"></text>
+							<text v-if="i === 0" class="cuIcon-title" :class="[statusColor]"></text>
 					</view>
 					<view class="main">
 						<view class="content shadow"><!-- @click="x.msg && $squni.copy(x.msg)" -->
-							<text>{{ x.msg }}</text>
+							<img v-if="x.pic" :src="x.msg" />
+							<text v-else>{{ x.msg }}</text>
 						</view>
 					</view>
 					<view v-if="i === 0" class="date">{{ x.date }}</view>
@@ -33,7 +36,7 @@
 					<text class="cuIcon-roundclosefill text-red "></text> {{ x.msg }}
 				</view>
 			</block>
-			
+
 			<view v-if="msgLoading" class="cu-item">
 				<view class="flex flex-direction align-center">
 					<image class="cu-avatar round chat-avatar" src="/static/robot.png">
@@ -49,38 +52,55 @@
 				<button class="cu-btn round shadow sm cuIcon line-cyan" @click="startNewChat">
 					<text class="cuIcon-paint"></text>
 				</button>
-				<button class="cu-btn round shadow sm line-cyan" @click="$squni.navigateTo('/pages/main/history')">历史消息</button>
-				<button class="cu-btn round shadow sm bg-orange" @click="$squni.navigateTo('/pages/main/prompt/prompt')">提示词</button>
+				<button class="cu-btn round shadow sm line-cyan"
+					@click="$squni.navigateTo('/pages/main/history')">历史消息</button>
+				<button class="cu-btn round shadow sm bg-orange"
+					@click="$squni.navigateTo('/pages/main/prompt/prompt')">提示词</button>
 				<button class="cu-btn round shadow sm line-cyan" @click="openBottomFunc">我的信息</button>
 			</view>
 			<!-- <view class="action func" @click="openBottomFunc">
 				<text class="cuIcon-list text-cyan" style="font-size: 60upx;"></text>
 			</view> -->
-			<input v-model="msg" class="solid padding-lr" :adjust-position="false" :focus="false" maxlength="5000"
-				cursor-spacing="10" :placeholder="loading ? '小AirSmart正在思考中，请稍后~' : '你可以问我任何问题'"
-				@focus="inputFocus" @blur="inputBlur" @confirm="sendMsg"></input>
+			<view class="input-msg">
+				<ol class="tip-list">
+					<li class="tip-item" v-for="item in inputTipList" :key="item.type" @click="handleSendMsg(item)">
+						{{ item.name }}
+					</li>
+				</ol>
+				<input v-model="msg" class="solid padding-lr" :adjust-position="false" :focus="false" maxlength="5000"
+					cursor-spacing="10" :placeholder="loading ? '小AirSmart正在思考中，请稍后~' : '你可以问我任何问题或输入  “/”  获取模板'" @focus="inputFocus"
+					@blur="inputBlur" @confirm="sendMsg" @input="handleInput"></input>
+			</view>
 			<!-- <view class="action">
 				<text class="cuIcon-emojifill text-grey"></text>
 			</view> -->
 			<button class="cu-btn bg-cyan shadow" :disabled="loading" @click="sendMsg">
-				<text class="cuIcon-loading2 cuIconfont-spin" v-if="loading || !ready"></text>{{ !ready ? '连接中' : '发送' }}
+				<text class="cuIcon-loading2 cuIconfont-spin"
+					v-if="loading || !ready"></text>{{ !ready ? '连接中' : '发送' }}
 			</button>
 		</view>
-		
-		<bottom-func v-if="bottomFuncShow" ref="bottomFunc" :chatAsset="chatAsset" @rewarded-video-ad="() => chatAsset.dfn += 2"></bottom-func>
+
+		<bottom-func v-if="bottomFuncShow" ref="bottomFunc" :chatAsset="chatAsset"
+			@rewarded-video-ad="() => chatAsset.dfn += 2"></bottom-func>
 	</view>
 </template>
 
 <script>
 	import {
-		dateFormat, interval
+		dateFormat,
+		interval
 	} from '@/util/squ.js'
-	import {
+	import squni, {
 		scrollToBottom
 	} from '@/util/squni.js'
 	import websocket from '@/util/websocket'
 	import {
-		sendMsgApi, getUserChatAssetApi, startNewChatApi, findPromptListApi
+		sendMsgApi,
+		getUserChatAssetApi,
+		startNewChatApi,
+		findPromptListApi,
+		msgList,
+		sendMsgPic
 	} from '@/api/chat.js'
 	import BottomFunc from './bottom-func'
 	const HELLO_MSG = {
@@ -90,7 +110,9 @@
 		date: dateFormat(new Date(), 'yyyy年MM月dd日 hh:mm')
 	}
 	export default {
-		components: { BottomFunc },
+		components: {
+			BottomFunc
+		},
 		data() {
 			return {
 				loading: false,
@@ -98,6 +120,7 @@
 				msgList: [HELLO_MSG],
 				msgContent: "",
 				msg: "",
+				msgType: 0,
 				inputBottom: 0,
 				bottomFuncShow: false,
 				chatAsset: {},
@@ -106,11 +129,12 @@
 				statusTimer: null,
 				msgLoading: false,
 				promptId: null,
-				curPrompt: {}
+				curPrompt: {},
+				inputTipList: []
 			}
 		},
 		computed: {
-			ready () {
+			ready() {
 				return this.statusColor === 'text-green'
 			}
 		},
@@ -137,20 +161,22 @@
 		},
 		async onShow() {
 			await this.$ready
-			
+
 			this.userId = this.$store.getters.userId
-			if(!this.userId) {
+			if (!this.userId) {
 				this.$squni.toast('请先进行登录哦')
 				return
 			}
-			
+
 			this.promptId = this.$squni.getCurQuery('promptId')
-			if(this.promptId) {
-				findPromptListApi({ id: this.promptId }).then(res => {
+			if (this.promptId) {
+				findPromptListApi({
+					id: this.promptId
+				}).then(res => {
 					if (res.status === 'success') {
 						this.curPrompt = res.data
-						
-						if(this.ready && HELLO_MSG.msg.indexOf('提示词') < 0) {
+
+						if (this.ready && HELLO_MSG.msg.indexOf('提示词') < 0) {
 							let prompt = ''
 							if (this.curPrompt && this.curPrompt.title) {
 								prompt = `（提示词：${this.curPrompt.title}）`
@@ -160,13 +186,13 @@
 					}
 				})
 			}
-			
+
 			getUserChatAssetApi().then(res => {
 				if (res.status === 'success') {
 					this.chatAsset = res.data
 				}
 			})
-			
+
 			this.heartStatus()
 			try {
 				//建立socket连接
@@ -187,16 +213,21 @@
 			logout() {
 				this.loginLoading = true
 				doLoginApi('H5', {
-					username: this.email || this.phone|| this.username,
+					username: this.email || this.phone || this.username,
 					password: this.password
 				}).then(res => {
 					this.loginLoading = false
 					if (res === LoginSuccess) {
-						uni.showToast({ title: '登录成功' })
+						uni.showToast({
+							title: '登录成功'
+						})
 						// 跳转到主页发现已经登录，会自动重新获取用户信息，此处无需获取
 						window.location.href = getUrlQuery('_originHref')
 					} else {
-						uni.showToast({ title: (res && res.data && res.data.message) || '登录失败', icon: 'none' })
+						uni.showToast({
+							title: (res && res.data && res.data.message) || '登录失败',
+							icon: 'none'
+						})
 						this.createCode(4)
 					}
 				})
@@ -212,28 +243,47 @@
 				this.loading = true
 				
 				// ======== 开发环境模拟回复 ========
-				//return this.mockReply()
+				// return this.mockReply()
 				// ======== 开发环境模拟回复 ========
 				
-				if(this.calcAsset() === false) {
+				if (this.calcAsset() === false) {
 					this.loading = false
 					return
 				}
 				
-				// 发送消息: M1/M2
-				websocket.sendMessage(JSON.stringify({
-					model: 'M1',
-					msg: msg,
-					platform: this.$squni.getStorageSync('platform'),
-					openid: this.$squni.getStorageSync('openid'),
-					promptId: this.promptId
-				}), null, () => {
-					this.putMsgError('机器人被拔网线了，请稍后再试~')
-				})
+				if(this.msgType === 2){
+					sendMsgPic({
+						userId: this.$squni.getStorageSync('userId'),
+						question: msg,
+						type: this.msgType
+					}).then(res => {
+						if(res.code === 20000) {
+							JSON.parse(res.data.ack).map(i => {
+								this.putMsg(i.url, false, 'msg', true)
+								this.loading = false
+								this.msgLoading = false
+								this.msgType = 0
+							})
+						}else{
+							this.putMsgError('机器人被拔网线了，请稍后再试~')
+						}
+					})
+				}else{
+					// 发送消息: M1/M2
+					websocket.sendMessage(JSON.stringify({
+						model: 'M1',
+						msg: msg,
+						platform: this.$squni.getStorageSync('platform'),
+						openid: this.$squni.getStorageSync('openid'),
+						promptId: this.promptId
+					}), null, () => {
+						this.putMsgError('机器人被拔网线了，请稍后再试~')
+					})
+				}
 			},
 			recvMsg(msg) {
 				this.msgLoading = false
-				if(!msg) {
+				if (!msg) {
 					this.putMsgError('机器人开小差了，请稍后再试~')
 					return
 				}
@@ -253,20 +303,21 @@
 							let content = msgJson.content
 							if (msgJson.codeKey) {
 								content += `[${msgJson.codeKey}]`
-								if(msgJson.codeKey === 'chat.asset_short') {
+								if (msgJson.codeKey === 'chat.asset_short') {
 									this.openBottomFunc()
-								} else if(msgJson.codeKey.indexOf('chat.asset_') >= 0) {
+								} else if (msgJson.codeKey.indexOf('chat.asset_') >= 0) {
 									this.chatAsset[this.assetType]++
 								}
 							}
 							this.putMsgError(content)
-						} if (msgJson.role === 'assistant') {
+						}
+						if (msgJson.role === 'assistant') {
 							this.putMsg('', false)
 						} else if (msgJson.role == null && msgJson.content) {
 							this.msgList[this.msgList.length - 1].msg += msgJson.content
 							scrollToBottom()
 						}
-					} catch(error) {
+					} catch (error) {
 						this.putMsgError(msg)
 					}
 				}
@@ -276,34 +327,35 @@
 				this.msgList = [HELLO_MSG]
 				startNewChatApi()
 			},
-			sendMsgBak() {
-				let that = this
-				if (this.msg == "") {
-					return
-				}
-				this.msgContent += (this.userId + ":" + this.msg + "\n")
-				this.putMsg(this.msg, true)
-				this.loading = true
+			// sendMsgBak() {
+			// 	let that = this
+			// 	if (this.msg == "") {
+			// 		return
+			// 	}
+			// 	this.msgContent += (this.userId + ":" + this.msg + "\n")
+			// 	this.putMsg(this.msg, true)
+			// 	this.loading = true
 
-				// ======== 开发环境模拟回复 ========
-				return this.mockReply()
-				// ======== 开发环境模拟回复 ========
+			// 	// ======== 开发环境模拟回复 ========
+			// 	return this.mockReply()
+			// 	// ======== 开发环境模拟回复 ========
 
-				sendMsgApi({
-					userId: this.userId + '',
-					question: this.msgContent
-				}).then(({
-					status, data
-				}) => {
-					if (status === 'success') {
-						this.putMsg(data.ack, false)
-						this.msgContent += ("openai:" + this.msg + "\n")
-					} else {
-						this.putMsg(res.message || '机器人开小差了，请稍后再试~', false, 'error')
-					}
-					that.loading = false
-				})
-			},
+			// 	sendMsgApi({
+			// 		userId: this.userId + '',
+			// 		question: this.msgContent
+			// 	}).then(({
+			// 		status,
+			// 		data
+			// 	}) => {
+			// 		if (status === 'success') {
+			// 			this.putMsg(data.ack, false)
+			// 			this.msgContent += ("openai:" + this.msg + "\n")
+			// 		} else {
+			// 			this.putMsg(res.message || '机器人开小差了，请稍后再试~', false, 'error')
+			// 		}
+			// 		that.loading = false
+			// 	})
+			// },
 			calcAsset() {
 				if (this.chatAsset.dfn > 0) {
 					this.chatAsset.dfn--
@@ -317,11 +369,12 @@
 					return false
 				}
 			},
-			putMsg (msg, my = false, type = 'msg') {
+			putMsg(msg, my = false, type = 'msg', pic = false) {
 				let item = {
 					type: type,
 					msg: msg,
 					my: my,
+					pic: pic,
 					date: dateFormat(new Date(), 'yyyy年MM月dd日 hh:mm')
 				}
 				this.msgList.push(item)
@@ -341,10 +394,10 @@
 			addHistory(item) {
 				if (item.type === 'msg') {
 					let chatHistory = this.$squni.getStorageSync('chatHistory')
-					if(!chatHistory) {
+					if (!chatHistory) {
 						chatHistory = []
 					}
-					if(chatHistory.length >= 50) {
+					if (chatHistory.length >= 50) {
 						chatHistory.splice(0, 1)
 					}
 					chatHistory.push(item)
@@ -369,7 +422,7 @@
 				this.statusTimer = interval(() => {
 					if (websocket.isOpen) {
 						this.statusColor = 'text-green'
-					} else if(this.statusColor === 'text-red') {
+					} else if (this.statusColor === 'text-red') {
 						this.statusColor = 'text-yellow'
 					} else {
 						this.statusColor = 'text-red'
@@ -387,6 +440,19 @@
 			inputBlur(e) {
 				this.inputBottom = 0
 			},
+			// 对话输入框输入'/'显示提示信息
+			handleInput(e) {
+				if (e.detail.value.startsWith('/')) {
+					msgList().then(res => {
+						this.inputTipList = res.data
+					})
+				}
+			},
+			handleSendMsg(e){
+				this.msgType = e.type
+				this.msg = e.name
+				this.inputTipList = []
+			},
 			openBottomFunc() {
 				this.bottomFuncShow = true
 				this.$nextTick(() => {
@@ -411,40 +477,71 @@
 	page {
 		padding-bottom: 220upx;
 	}
+
 	.cu-chat .chat-avatar.cu-avatar {
-	    width: 82upx;
-	    height: 82upx;
+		width: 82upx;
+		height: 82upx;
 	}
+
 	.cu-item:not(.first) {
 		padding-bottom: 0upx;
 	}
+
 	.cu-item.sec {
 		padding-top: 0upx;
 	}
+
 	.cu-chat .cu-item>.main {
 		max-width: calc(100% - 160upx);
 	}
+
 	.main .content {
 		word-wrap: break-word;
 		cursor: text;
 		user-select: text;
 	}
+
 	.cu-bar.foot {
 		box-shadow: 0 -0.5px 1px rgba(0, 0, 0, 0.1);
+		align-items: flex-end;
 	}
+
 	.foot {
 		padding-top: 20upx;
 		padding-bottom: 60upx;
 	}
+
 	.foot .cu-btn {
 		margin-right: 20upx;
+		width: 200upx;
 	}
+
 	.foot .action.func {
 		margin-left: 30upx;
 	}
+
 	.foot .tip-box {
 		position: absolute;
 		top: -60upx;
 		margin: 0 30upx;
 	}
-</style>
+	
+	.input-msg{
+		width: 100%;
+		.tip-list{
+			margin: 0 40upx;
+			padding: 0 40upx;
+			
+			.tip-item{
+				cursor: pointer;
+				color: #909399;
+				line-height: 64upx;
+			}
+			
+			.tip-item:hover{
+				background: #d9ecff;
+				color: #000;
+			}
+		}
+	}
+</style>