735 lines
23 KiB
Vue
735 lines
23 KiB
Vue
<template>
|
|
<view
|
|
:class="scrollTop > 0 ? 'page-scroll' : ''"
|
|
class="fix-tabbar-page"
|
|
>
|
|
<hx-navbar
|
|
:back="true"
|
|
:fixed="true"
|
|
:statusBar="true"
|
|
:pageScroll.sync="scrollData"
|
|
:title="pageTitle"
|
|
color="#333"
|
|
transparent="auto"
|
|
barPlaceholder="hidden"
|
|
/>
|
|
<view
|
|
id="fixTbabarBody"
|
|
:style="{
|
|
'padding-top': (44 + statusBarHeight) + 'px'
|
|
}"
|
|
class="fix-tabbar-body"
|
|
>
|
|
<view class="chat-wrap">
|
|
<view v-if="chatMessageListLength > 0" class="chat-list-wrap">
|
|
<view
|
|
v-for="(item, index) in chatMessageList"
|
|
:key="index"
|
|
class="chat-message-item"
|
|
>
|
|
<view v-if="item.type === -1" class="chat-message-body">
|
|
<view class="item-right">
|
|
<view class="txt">
|
|
{{ item.prompt }}
|
|
</view>
|
|
</view>
|
|
<view class="item-right-tools">
|
|
<view class="btn" @click="copyContentHandle(item.prompt)">
|
|
<image
|
|
:src="webUrl + '/aiChat/icon-02.png'"
|
|
class="icon"
|
|
mode="widthFix"
|
|
/>
|
|
复制
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.type === -2" class="chat-message-body">
|
|
<view class="avatar">
|
|
<image
|
|
:src="webUrl + '/aiChat/avatar.png'"
|
|
class="chat-avatar"
|
|
mode="widthFix"
|
|
/>
|
|
</view>
|
|
<view class="item-left">
|
|
<view class="txt">
|
|
<view
|
|
ref="rich-text-box"
|
|
:class="{
|
|
'show-cursor': item.showCursor
|
|
}"
|
|
class="rich-text-box"
|
|
>
|
|
<rich-text
|
|
v-if="item.nodes && item.nodes.length"
|
|
:nodes="item.nodes"
|
|
space="nbsp"
|
|
/>
|
|
<view v-if="!(item.nodes && item.nodes.length) && loading" class="loader-wrap">
|
|
<div class="loading2" />
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-if="!item.showCursor && item.nodes && item.nodes.length && !item.isError"
|
|
class="bottom-btns"
|
|
>
|
|
<!-- <button
|
|
open-type="share"
|
|
plain="true"
|
|
class="item"
|
|
@click="shareHandle"
|
|
>
|
|
<image
|
|
:src="webUrl + '/icon-25.png'"
|
|
class="icon"
|
|
mode="widthFix"
|
|
/>
|
|
分享
|
|
</button> -->
|
|
<view class="item" @click="copyContentHandle(item.content)">
|
|
<image
|
|
:src="webUrl + '/aiChat/icon-02.png'"
|
|
class="icon"
|
|
mode="widthFix"
|
|
/>
|
|
复制
|
|
</view>
|
|
<view
|
|
v-if="index === (chatMessageListLength - 1)"
|
|
class="item"
|
|
@click="regenerateHandle(item)"
|
|
>
|
|
<image
|
|
:src="webUrl + '/aiChat/icon-04.png'"
|
|
class="icon"
|
|
mode="widthFix"
|
|
/>
|
|
重新生成
|
|
</view>
|
|
<view
|
|
:class="{
|
|
'playing': [item.conversationId, item.messageId, item.parentMessageId].includes(audioPlayId) && isPlayAudio
|
|
}"
|
|
class="item"
|
|
@click="ttsHandle(item)"
|
|
>
|
|
<image
|
|
:src="webUrl + '/aiChat/' + (([item.conversationId, item.messageId, item.parentMessageId].includes(audioPlayId) && isPlayAudio) ? 'audio-on' : 'audio-off') +'.png'"
|
|
class="icon"
|
|
mode="widthFix"
|
|
/>
|
|
语音播放
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 换一换 -->
|
|
<view
|
|
v-if="!item.showCursor &&
|
|
!item.isError &&
|
|
(item.orderList.length > 0 ||
|
|
item.giftGoodsList.length > 0 ||
|
|
item.goodsList.length > 0 ||
|
|
item.shopList.length > 0 ||
|
|
item.prizeList.length > 0 ||
|
|
item.ichList.length > 0 ||
|
|
item.qianxianList.length > 0
|
|
)
|
|
"
|
|
class="change-list-wrap"
|
|
>
|
|
<!-- 礼品 -->
|
|
<view
|
|
v-if="item.giftGoodsList.length > 0"
|
|
class="recommend-goods-wrap"
|
|
>
|
|
<swiper
|
|
class="goods-swiper"
|
|
:indicator-dots="false"
|
|
:autoplay="false"
|
|
:current="item.currentSwiperIndex"
|
|
previous-margin="120rpx"
|
|
next-margin="120rpx"
|
|
circular
|
|
@change="e => onSwiperChange(index, e)"
|
|
>
|
|
<swiper-item
|
|
v-for="(goodItem, goodIndex) in item.giftGoodsList"
|
|
:key="goodIndex"
|
|
>
|
|
<view
|
|
:class="{ 'active': item.currentSwiperIndex === goodIndex }"
|
|
class="goods-item"
|
|
@click="productItemClickHandle(goodItem)"
|
|
>
|
|
<view class="supplier" @click.stop="productItemSupplierClickHandle(goodItem)">
|
|
<image
|
|
:src="webUrl + '/aiChat/icon-57.png'"
|
|
class="icon"
|
|
mode="widthFix"
|
|
lazy-load
|
|
/>
|
|
<text class="s-name">{{ goodItem.merName ||goodItem.storeName }}</text>
|
|
<u-icon name="arrow-right" color="#999" size="12"></u-icon>
|
|
</view>
|
|
<view class="title one-t">{{ goodItem.name }}</view>
|
|
<image :src="goodItem.img" class="p-img" mode="aspectFill" lazy-load />
|
|
<view class="price">
|
|
<text class="unit">￥</text>
|
|
<text class="num">{{ goodItem.price }}</text>
|
|
</view>
|
|
<view class="actions">
|
|
<view class="btn-buy" @click.stop="productItemBuyNowClickHandle(goodItem)">立即下单</view>
|
|
<view class="btn-gift" @click.stop="productItemGiftBuyClickHandle(goodItem)">送给朋友</view>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<!-- 特产商品 -->
|
|
<view v-if="item.goodsList.length > 0" class="list-wrap">
|
|
<view
|
|
v-for="(productItem, productIndex) in item.goodsList"
|
|
:key="productIndex"
|
|
class="product-item"
|
|
@click="productItemClickHandle(productItem)"
|
|
>
|
|
<image
|
|
:src="productItem.img"
|
|
class="img"
|
|
lazy-load
|
|
/>
|
|
<view class="product-info">
|
|
<view class="name one-t">
|
|
{{ productItem.name }}
|
|
</view>
|
|
<view class="price-wrap">
|
|
<view class="price">
|
|
<text class="txt">￥</text>{{ productItem.price }}
|
|
</view>
|
|
<view class="btn">立即查看</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 店铺 -->
|
|
<view v-if="item.shopList.length > 0" class="list-wrap">
|
|
<view
|
|
v-for="(hotel, hotelIndex) in item.shopList"
|
|
:key="hotelIndex"
|
|
class="product-item"
|
|
@click="hotelItemClickHandle(hotel)"
|
|
>
|
|
<view class="hotel-type">
|
|
{{ hotel.hotelTypeName }}
|
|
</view>
|
|
<image
|
|
:src="hotel.img + ((hotel.img && hotel.img.indexOf('.mp4') > -1) ? '?vframe/jpg/offset/1' : '')"
|
|
class="img"
|
|
lazy-load
|
|
/>
|
|
<view class="product-info">
|
|
<view class="name one-t">
|
|
{{ hotel.name }}
|
|
</view>
|
|
<view class="desc-wrap one-t">
|
|
{{ hotel.description || '' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 非遗 -->
|
|
<view v-if="item.ichList.length > 0" class="list-wrap">
|
|
<view
|
|
v-for="(ich, ichIndex) in item.ichList"
|
|
:key="ichIndex"
|
|
class="product-item"
|
|
@click="ichItemClickHandle(ich)"
|
|
>
|
|
<image
|
|
:src="ich.img"
|
|
class="img"
|
|
/>
|
|
<view class="product-info">
|
|
<view class="name one-t">
|
|
{{ ich.name }}
|
|
</view>
|
|
<view class="desc-wrap one-t">
|
|
{{ ich.description || '' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 千县 -->
|
|
<view v-if="item.qianxianList.length > 0" class="list-wrap">
|
|
<view
|
|
v-for="(qianxian, qianxianIndex) in item.qianxianList"
|
|
:key="qianxianIndex"
|
|
class="product-item"
|
|
@click="qianxianItemClickHandle(qianxian)"
|
|
>
|
|
<image
|
|
:src="qianxian.img"
|
|
class="img"
|
|
lazy-load
|
|
/>
|
|
<view class="product-info">
|
|
<view class="name name2 one-t">
|
|
{{ qianxian.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 抽奖 -->
|
|
<view v-if="item.prizeList.length > 0" class="list-wrap prize-list-wrap">
|
|
<view
|
|
v-for="(prize, prizeIndex) in item.prizeList"
|
|
:key="prizeIndex"
|
|
class="prize-item"
|
|
@click="prizeItemClickHandle(prize)"
|
|
>
|
|
<image
|
|
:src="prize.img"
|
|
class="img"
|
|
mode="widthFix"
|
|
lazy-load
|
|
/>
|
|
</view>
|
|
</view>
|
|
<!-- 订单 -->
|
|
<view v-if="item.orderList.length > 0" class="order-list-wrap">
|
|
<view
|
|
v-for="(order, orderIndex) in item.orderList"
|
|
:key="orderIndex"
|
|
class="order-item-wrap"
|
|
>
|
|
<order-item
|
|
:item="order"
|
|
@viewOrderTrack="viewOrderTrackHandle"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-if="(item.shopList.length > 0 ||
|
|
item.goodsList.length > 0 ||
|
|
item.giftGoodsList.length > 0 ||
|
|
item.ichList.length > 0 ||
|
|
item.qianxianList.length > 0 ||
|
|
item.shopList.length > 0) && item.showChangeBtn
|
|
"
|
|
class="change-btn"
|
|
>
|
|
<view class="change-btn-content" @click="analyzeKeywordsChangeHandle(item.conversationId, item)">
|
|
<image
|
|
:src="webUrl + '/aiChat/icon-53.png'"
|
|
:class="{
|
|
'rotate': item.changeIsRotate
|
|
}"
|
|
class="icon"
|
|
mode="widthFix"
|
|
/>
|
|
换一换
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 建议提问 -->
|
|
<view
|
|
v-if="index === (chatMessageListLength - 1) && item.listQuestion.length > 0"
|
|
class="suggestion-wrap"
|
|
>
|
|
<view class="suggestion-list">
|
|
<view
|
|
v-for="(question, questionIndex) in item.listQuestion"
|
|
:key="questionIndex"
|
|
class="item"
|
|
@click="suggestionItemClickHandle(question)"
|
|
>
|
|
<view class="item-cont">
|
|
<view class="txt">
|
|
{{ question }}
|
|
</view>
|
|
<image
|
|
:src="webUrl + '/aiChat/icon-03.png'"
|
|
class="pic"
|
|
mode="widthFix"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view id="bottom_postion" class="bottom-postion" />
|
|
</view>
|
|
</view>
|
|
<view
|
|
:class="{
|
|
'focus': onFocus
|
|
}"
|
|
class="page-to-bottom"
|
|
>
|
|
<view class="down-icon-wrap">
|
|
<image
|
|
v-if="chatMessageListLength > 0 && !isScrollToBottom && !loading"
|
|
:src="webUrl + '/aiChat/down.png'"
|
|
class="icon down-icon"
|
|
mode="widthFix"
|
|
@click="scrollToBottomHandle"
|
|
/>
|
|
</view>
|
|
<view
|
|
:class="{
|
|
'container-county': !!countyId
|
|
}"
|
|
class="container"
|
|
>
|
|
<view
|
|
v-if="chatNumber"
|
|
class="new-chat"
|
|
@click="createNewHandle"
|
|
>
|
|
<image
|
|
:src="webUrl + '/aiChat/icon-54.png'"
|
|
class="btn-icon"
|
|
mode="widthFix"
|
|
/>
|
|
开启新对话
|
|
</view>
|
|
<view
|
|
v-if="!countyId"
|
|
v-for="(item, index) in bottomTools"
|
|
:key="index"
|
|
:class="{
|
|
'hide': !item.display
|
|
}"
|
|
class="bottom-tool-item"
|
|
@click="bottomToolClickHandle(item)"
|
|
>
|
|
<image
|
|
:src="item.icon"
|
|
class="tool-icon"
|
|
mode="widthFix"
|
|
/>
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<bottom-send
|
|
ref="bottomSend"
|
|
:loading="loading"
|
|
:keyboard-height="keyboardHeight"
|
|
:voice-exception="exceptionConfig.voice_exception"
|
|
@send="streamReq"
|
|
@history="historyViewHandle"
|
|
@focus="inputFocusHandle"
|
|
/>
|
|
<AiHistoryList
|
|
ref="historyView"
|
|
:status-bar-height="statusBarHeight"
|
|
:county-id="countyId"
|
|
form-module="history"
|
|
@enter-history="audioStopHandle"
|
|
/>
|
|
<ProductWindow
|
|
v-if="!countyId"
|
|
ref="attrWindow"
|
|
:attr="attr"
|
|
:cart-num="cart_num"
|
|
:show-ok="!showGiftBtn"
|
|
:is-gift="showGiftBtn"
|
|
:padding-bottom="'60px'"
|
|
class-name="ai-product-window"
|
|
ok-text="立即购买"
|
|
@changeFun="changeFun"
|
|
@ok="buyNowOrGiftBuyReq(1)"
|
|
@gift="buyNowOrGiftBuyReq(2)"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { chatMixinsV2 } from '../mixins/chatMixinsV2.js'
|
|
import goCartMixin from '@/mixins/goCartMixins'
|
|
import AiHistoryList from '../components/historyList'
|
|
import BottomSend from '../components/bottomSend.vue'
|
|
import OrderItem from '../components/orderItem.vue'
|
|
import ProductWindow from '@/components/ProductWindow'
|
|
import {
|
|
historyChatMessage,
|
|
getCountyAiHistoryChatMessage
|
|
} from '@/api/chat/index'
|
|
import { formatAiMsgContent } from '../utils/aiChat'
|
|
export default {
|
|
name: 'AiChatHistoryPage',
|
|
components: {
|
|
AiHistoryList,
|
|
BottomSend,
|
|
OrderItem,
|
|
ProductWindow
|
|
},
|
|
mixins: [chatMixinsV2, goCartMixin],
|
|
data() {
|
|
return {
|
|
pageTitle: '',
|
|
countyId: ''
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.chatNumber = options.chatNumber
|
|
this.pageTitle = options.title || ''
|
|
this.countyId = options.countyId || ''
|
|
this.pageTitle = this.pageTitle.length > 8 ? (this.pageTitle.substring(0, 8) + '...') : this.pageTitle
|
|
this.init()
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.loading = true
|
|
let reqFn = null
|
|
if (this.countyId) {
|
|
reqFn = getCountyAiHistoryChatMessage
|
|
} else {
|
|
reqFn = historyChatMessage
|
|
}
|
|
reqFn({
|
|
chatNumber: this.chatNumber
|
|
}).then(res => {
|
|
const { success, data = [] } = res
|
|
if (success) {
|
|
this.loading = false
|
|
try {
|
|
data.map(item => {
|
|
if (item.role === 'user') {
|
|
this.chatMessageList.push({
|
|
type: -1,
|
|
prompt: item.content
|
|
})
|
|
} else {
|
|
if (['text', 'skill_list'].includes(item.contentType)) {
|
|
const tempItemData = {
|
|
...item,
|
|
nodes: formatAiMsgContent(item.content),
|
|
prompt: this.getParentPrompt(data, item.parentMessageId),
|
|
conversationId: item.messageId,
|
|
showCursor: false,
|
|
listQuestion: item.listQuestion || [],
|
|
// 特产商品
|
|
goodsList: [],
|
|
// 礼品商品
|
|
giftGoodsList: [],
|
|
// 非遗文化
|
|
ichList: [],
|
|
// 千县名品
|
|
qianxianList: [],
|
|
// 抽奖
|
|
prizeList: [],
|
|
// 店铺
|
|
shopList: [],
|
|
// 地标好物--屏蔽原因：实现此功能时，后端通过AI动态返回的图片不满足需求，后面就不要了
|
|
landmarksList: [],
|
|
// 订单
|
|
orderList: [],
|
|
type: -2,
|
|
showMoreInfo: {},
|
|
currentSwiperIndex: 0,
|
|
showChangeBtn: false,
|
|
changeIsRotate: false
|
|
}
|
|
if (item.cardData) {
|
|
const { contentType, finish, items = [] } = item.cardData
|
|
if (contentType === 'order') {
|
|
tempItemData.orderList = items || []
|
|
}
|
|
if (contentType === 'shop') {
|
|
tempItemData.shopList = items || []
|
|
}
|
|
if (contentType === 'gift') {
|
|
tempItemData.giftGoodsList = items || []
|
|
}
|
|
if (contentType === 'discount') {
|
|
tempItemData.prizeList = items || []
|
|
}
|
|
if (contentType === 'goods') {
|
|
tempItemData.goodsList = items || []
|
|
}
|
|
if (contentType === 'famous') {
|
|
tempItemData.qianxianList = items || []
|
|
}
|
|
if (contentType === 'ich') {
|
|
tempItemData.ichList = items || []
|
|
}
|
|
if (contentType === 'landmarks') {
|
|
tempItemData.landmarksList = items || []
|
|
}
|
|
}
|
|
this.chatMessageList.push(tempItemData)
|
|
}
|
|
}
|
|
})
|
|
console.log(this.chatMessageList)
|
|
this.$nextTick(() => {
|
|
this.scrollToBottomHandle()
|
|
})
|
|
} catch (err) {
|
|
uni.showModal({
|
|
title: '错误提示',
|
|
content: JSON.stringify(err)
|
|
})
|
|
console.log(err)
|
|
}
|
|
}
|
|
}).catch(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
getParentPrompt(list = '', parentMessageId) {
|
|
let prompt = ''
|
|
list.map(item => {
|
|
if (item.messageId === parentMessageId) {
|
|
prompt = item.content
|
|
}
|
|
})
|
|
return prompt
|
|
},
|
|
// 创建新会话
|
|
createNewHandle() {
|
|
uni.setStorageSync('addNewChat', '1')
|
|
uni.navigateBack()
|
|
},
|
|
bottomToolClickHandle(item) {
|
|
if (item.giftCardEnabled === 1) {
|
|
uni.setStorageSync('addNewChat', '2')
|
|
uni.navigateBack()
|
|
return
|
|
}
|
|
if (item.navType === 'prompt') {
|
|
this.streamReq({
|
|
prompt: item.promptContent,
|
|
init: 0
|
|
})
|
|
}
|
|
if (item.navType === 'url') {
|
|
uni.navigateTo({
|
|
url: item.url
|
|
})
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.chat-wrap {
|
|
padding: 0 0 180rpx 0;
|
|
.chat-info-wrap {
|
|
padding: 24rpx;
|
|
.chat-list-wrap2 {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
.loading-wrap {
|
|
text-align: center;
|
|
color: #666;
|
|
line-height: 120rpx;
|
|
}
|
|
.rich-text-box {
|
|
max-width: 100%;
|
|
}
|
|
.show-cursor .cursor {
|
|
display: inline-block;
|
|
color: #3D4CF1;
|
|
font-weight: bold;
|
|
animation: blinking 1s infinite;
|
|
}
|
|
|
|
@keyframes blinking {
|
|
from {
|
|
opacity: 1.0;
|
|
}
|
|
|
|
to {
|
|
opacity: 0.0;
|
|
}
|
|
}
|
|
.focus-guide-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 60rpx 40rpx;
|
|
.guide-left {
|
|
.avatar {
|
|
display: block;
|
|
width: 267rpx;
|
|
height: 530rpx;
|
|
}
|
|
}
|
|
.guide-right {
|
|
padding: 30rpx;
|
|
margin: 0 0 0 40rpx;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
background-color: #fff;
|
|
box-shadow: 0rpx 12rpx 30rpx rgba(0,0,0,0.1);
|
|
.title {
|
|
font-weight: bold;
|
|
}
|
|
.content {
|
|
padding: 30rpx 0 0 0;
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
.topic-wrap {
|
|
width: 100%;
|
|
.title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.txt {
|
|
width: 186rpx;
|
|
height: 46rpx;
|
|
margin: 0 20rpx;
|
|
border-radius: 24rpx;
|
|
text-align: center;
|
|
line-height: 46rpx;
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
background-color: #3D4CF1;
|
|
}
|
|
.icon {
|
|
display: flex;
|
|
width: 40rpx;
|
|
}
|
|
}
|
|
.list-wrap {
|
|
width: 100%;
|
|
margin: 60rpx 0 0 0;
|
|
overflow-x: auto;
|
|
.list-cont {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 150%;
|
|
.list-item {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 40rpx;
|
|
padding: 0 12rpx;
|
|
margin: 0 30rpx 30rpx 0;
|
|
border-radius: 20rpx;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
background: rgba(255,255,255,0.39);
|
|
box-shadow: 0rpx 6rpx 12rpx rgba(0,0,0,0.1);
|
|
.icon {
|
|
display: block;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin: 0 8rpx 0 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|