Refactor(云灵AI):1、使用新模型逻辑对接；2、订单查询
This commit is contained in:
lifizer
+30
-14
@@ -275,24 +275,40 @@
|
||||
}"
|
||||
class="page-to-bottom"
|
||||
>
|
||||
<view
|
||||
class="new-chat"
|
||||
@click="createNewHandle"
|
||||
>
|
||||
<view class="container">
|
||||
<view
|
||||
v-if="chatNumber"
|
||||
class="new-chat"
|
||||
@click="createNewHandle"
|
||||
>
|
||||
<image
|
||||
:src="webUrl + '/aiChat/icon-54.png'"
|
||||
class="btn-icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
开启新对话
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/aiChat/icon-05.png'"
|
||||
class="btn-icon"
|
||||
v-if="chatMessageListLength > 0 && !isScrollToBottom && !loading"
|
||||
:src="webUrl + '/aiChat/down.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
@click="scrollToBottomHandle"
|
||||
/>
|
||||
开启新对话
|
||||
<view
|
||||
v-for="(item, index) in bottomTools"
|
||||
:key="index"
|
||||
class="bottom-tool-item"
|
||||
@click="bottomToolClickHandle(item)"
|
||||
>
|
||||
<image
|
||||
:src="webUrl + '/aiChat/' + item.icon + '.png'"
|
||||
class="tool-icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
{{ item.text }}
|
||||
</view>
|
||||
</view>
|
||||
<image
|
||||
v-if="chatMessageListLength > 0 && !isScrollToBottom && !loading"
|
||||
:src="webUrl + '/aiChat/down.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
@click="scrollToBottomHandle"
|
||||
/>
|
||||
</view>
|
||||
<bottom-send
|
||||
ref="bottomSend"
|
||||
|
||||
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<view
|
||||
:style="{ 'background-image': 'url(' + webUrl + '/aiChat/bg-05.png)' }"
|
||||
class="image-recognition-page"
|
||||
>
|
||||
<hx-navbar
|
||||
:back="true"
|
||||
:fixed="true"
|
||||
:statusBar="true"
|
||||
left-icon="arrowleft"
|
||||
color="#333"
|
||||
transparent="auto"
|
||||
barPlaceholder="hidden"
|
||||
title="云灵"
|
||||
/>
|
||||
|
||||
<view
|
||||
class="main-content"
|
||||
:style="{ 'padding-top': (44 + statusBarHeight) + 'px' }"
|
||||
>
|
||||
<!-- 拍照区域 -->
|
||||
<view class="camera-section" @click="takePhoto">
|
||||
<view class="dashed-border-box">
|
||||
<view class="icon-wrap">
|
||||
<image
|
||||
:src="webUrl + '/aiChat/icon-55.png'"
|
||||
class="camera-icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
<view class="main-title">对准商品拍照</view>
|
||||
<view class="sub-tip">示例：特产/零食/茶叶/纪念品</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部相册上传按钮 -->
|
||||
<view class="bottom-action">
|
||||
<button class="album-btn" @click="chooseImage">
|
||||
<image
|
||||
:src="webUrl + '/aiChat/icon-56.png'"
|
||||
class="upload-icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<text>从相册上传图片进行识别</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { chatMixins } from '../mixins/chatMixins.js'
|
||||
import { VUE_APP_API_URL } from '@/config'
|
||||
|
||||
export default {
|
||||
name: 'AiChatImageRecognitionPage',
|
||||
mixins: [chatMixins],
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
createdCallbak() {
|
||||
// 覆盖 mixins 中的 createdCallbak，避免触发默认逻辑
|
||||
},
|
||||
takePhoto() {
|
||||
if (this.loading) return
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['camera'],
|
||||
success: (res) => {
|
||||
this.handleUpload(res.tempFilePaths[0])
|
||||
}
|
||||
})
|
||||
},
|
||||
chooseImage() {
|
||||
if (this.loading) return
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album'],
|
||||
success: (res) => {
|
||||
this.handleUpload(res.tempFilePaths[0])
|
||||
}
|
||||
})
|
||||
},
|
||||
handleUpload(filePath) {
|
||||
const _this = this
|
||||
uni.showLoading({ title: '识别中...' })
|
||||
_this.loading = true
|
||||
|
||||
uni.uploadFile({
|
||||
url: `${VUE_APP_API_URL}/api/upload`,
|
||||
filePath: filePath,
|
||||
header: {
|
||||
Authorization: 'Bearer ' + (_this.token || '')
|
||||
},
|
||||
name: 'file',
|
||||
success: (uploadRes) => {
|
||||
const resData = JSON.parse(uploadRes.data)
|
||||
if (resData.link) {
|
||||
_this.performRecognition(resData.link)
|
||||
} else {
|
||||
uni.hideLoading()
|
||||
_this.loading = false
|
||||
_this.$toast('上传失败，请重试')
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('Upload Error:', err)
|
||||
uni.hideLoading()
|
||||
_this.loading = false
|
||||
_this.$toast('网络异常，请重试')
|
||||
}
|
||||
})
|
||||
},
|
||||
performRecognition(imageUrl) {
|
||||
// 存储识别到的图片 URL，并返回上一页
|
||||
uni.setStorageSync('recognitionImage', imageUrl)
|
||||
uni.navigateTo({
|
||||
url: '/aiChat/views/imageRecognitionResult'
|
||||
})
|
||||
uni.hideLoading()
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.image-recognition-page {
|
||||
height: 100vh;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 60rpx 40rpx;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.camera-section {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 60rpx;
|
||||
|
||||
.dashed-border-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 600rpx;
|
||||
width: 100%;
|
||||
margin-top: 80rpx;
|
||||
border: 2rpx dashed #DCDFE6;
|
||||
border-radius: 24rpx;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
|
||||
.icon-wrap {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 50%;
|
||||
border: 6rpx solid #7A3DF1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.camera-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.sub-tip {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-action {
|
||||
width: 100%;
|
||||
padding-bottom: 60rpx;
|
||||
|
||||
.album-btn {
|
||||
width: 100%;
|
||||
height: 100rpx;
|
||||
background: #3D4CF1;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #FFFFFF;
|
||||
font-size: 32rpx;
|
||||
border: none;
|
||||
box-shadow: 0 8rpx 20rpx rgba(61, 76, 241, 0.3);
|
||||
|
||||
.upload-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<view class="image-recognition-result-page">
|
||||
<hx-navbar
|
||||
:back="true"
|
||||
:fixed="true"
|
||||
:statusBar="true"
|
||||
left-icon="arrowleft"
|
||||
color="#333"
|
||||
transparent="auto"
|
||||
barPlaceholder="hidden"
|
||||
title="识别结果"
|
||||
/>
|
||||
<view
|
||||
class="page-body"
|
||||
:style="{ 'padding-top': (44 + statusBarHeight) + 'px' }"
|
||||
>
|
||||
<view class="header">
|
||||
<view
|
||||
class="header-bg"
|
||||
:style="{ 'background-image': imageUrl ? `url(${imageUrl})` : '' }"
|
||||
/>
|
||||
<view class="header-mask" />
|
||||
<view class="scan-wrap">
|
||||
<image
|
||||
v-if="imageUrl"
|
||||
:src="imageUrl"
|
||||
class="scan-image"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="corner tl" />
|
||||
<view class="corner tr" />
|
||||
<view class="corner bl" />
|
||||
<view class="corner br" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="sheet">
|
||||
<view class="sheet-thumb-row">
|
||||
<image
|
||||
v-if="imageUrl"
|
||||
:src="imageUrl"
|
||||
class="sheet-thumb"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="sheet-divider" />
|
||||
|
||||
<view class="goods-grid">
|
||||
<view
|
||||
v-for="(item, index) in goodsList"
|
||||
:key="index"
|
||||
class="goods-card"
|
||||
@click="goGoods(item)"
|
||||
>
|
||||
<image
|
||||
:src="item.img"
|
||||
class="goods-img"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="goods-title">
|
||||
{{ item.title }}
|
||||
</view>
|
||||
<view class="goods-price-row">
|
||||
<view class="price-left">
|
||||
<text class="price-symbol">￥</text>
|
||||
<text class="price-val">{{ item.price }}</text>
|
||||
<text v-if="item.originPrice" class="origin-price">￥{{ item.originPrice }}</text>
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/home/icon-cart.png'"
|
||||
class="cart-btn"
|
||||
mode="aspectFit"
|
||||
@click.stop="addToCart(item)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AiChatImageRecognitionResultPage',
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
statusBarHeight: 20,
|
||||
imageUrl: '',
|
||||
goodsList: []
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.initSystemInfo()
|
||||
const urlFromQuery = options.imageUrl || ''
|
||||
const urlFromStorage = uni.getStorageSync('recognitionImage') || ''
|
||||
this.imageUrl = urlFromQuery || urlFromStorage || ''
|
||||
if (urlFromStorage) {
|
||||
uni.removeStorageSync('recognitionImage')
|
||||
}
|
||||
this.goodsList = this.buildMockGoods(this.imageUrl)
|
||||
},
|
||||
methods: {
|
||||
initSystemInfo() {
|
||||
uni.getSystemInfo({
|
||||
success: (e) => {
|
||||
this.statusBarHeight = e.statusBarHeight || 20
|
||||
}
|
||||
})
|
||||
},
|
||||
buildMockGoods(fallbackImg) {
|
||||
const img = fallbackImg || (this.webUrl + '/home/no-data-bg.png')
|
||||
return [
|
||||
{
|
||||
id: 0,
|
||||
img,
|
||||
title: '西双版纳独有酸蚀蜂种一年一采 不一样的美味',
|
||||
price: '39.8',
|
||||
originPrice: '40.00'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
img,
|
||||
title: '西双版纳独有酸蚀蜂种一年一采 不一样的美味',
|
||||
price: '39.8',
|
||||
originPrice: '40.00'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img,
|
||||
title: '西双版纳独有酸蚀蜂种一年一采 不一样的美味',
|
||||
price: '39.8',
|
||||
originPrice: '40.00'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img,
|
||||
title: '西双版纳独有酸蚀蜂种一年一采 不一样的美味',
|
||||
price: '39.8',
|
||||
originPrice: '40.00'
|
||||
}
|
||||
]
|
||||
},
|
||||
goGoods(item) {
|
||||
if (!item || !item.productId) return
|
||||
uni.navigateTo({
|
||||
url: `/pages/shop/GoodsCon/index?id=${item.productId}`
|
||||
})
|
||||
},
|
||||
addToCart() {
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.image-recognition-result-page {
|
||||
min-height: 100vh;
|
||||
background: #F5F8FF;
|
||||
|
||||
.page-body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
height: 520rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-bg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #DDE6FF;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(18rpx);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.header-mask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.scan-wrap {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 320rpx;
|
||||
height: 320rpx;
|
||||
transform: translate(-50%, -52%);
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 18rpx 48rpx rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
|
||||
.scan-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.corner {
|
||||
position: absolute;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
border: 6rpx solid rgba(255, 255, 255, 0.95);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.corner.tl {
|
||||
left: 16rpx;
|
||||
top: 16rpx;
|
||||
border-right: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.corner.tr {
|
||||
right: 16rpx;
|
||||
top: 16rpx;
|
||||
border-left: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.corner.bl {
|
||||
left: 16rpx;
|
||||
bottom: 16rpx;
|
||||
border-right: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
.corner.br {
|
||||
right: 16rpx;
|
||||
bottom: 16rpx;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.sheet {
|
||||
position: relative;
|
||||
margin-top: -70rpx;
|
||||
background: #FFFFFF;
|
||||
border-top-left-radius: 42rpx;
|
||||
border-top-right-radius: 42rpx;
|
||||
padding-bottom: calc(env(safe-area-inset-bottom) + 28rpx);
|
||||
}
|
||||
|
||||
.sheet-thumb-row {
|
||||
padding: 28rpx 0 18rpx 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sheet-thumb {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 18rpx;
|
||||
display: block;
|
||||
box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.sheet-divider {
|
||||
height: 2rpx;
|
||||
background: #EDEDED;
|
||||
margin: 0 32rpx;
|
||||
}
|
||||
|
||||
.goods-grid {
|
||||
padding: 28rpx 24rpx 0 24rpx;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.goods-card {
|
||||
width: 344rpx;
|
||||
background: #FFFFFF;
|
||||
border-radius: 22rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 22rpx;
|
||||
box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.goods-img {
|
||||
width: 344rpx;
|
||||
height: 344rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.goods-title {
|
||||
padding: 14rpx 14rpx 0 14rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 38rpx;
|
||||
color: #333;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
min-height: 76rpx;
|
||||
}
|
||||
|
||||
.goods-price-row {
|
||||
padding: 10rpx 14rpx 16rpx 14rpx;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.price-left {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.price-symbol {
|
||||
font-size: 26rpx;
|
||||
color: #C52733;
|
||||
line-height: 1;
|
||||
margin-right: 2rpx;
|
||||
}
|
||||
|
||||
.price-val {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #C52733;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.origin-price {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 1;
|
||||
margin-left: 12rpx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.cart-btn {
|
||||
width: 52rpx;
|
||||
height: 52rpx;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+133
-205
@@ -37,131 +37,57 @@
|
||||
conversationId: '123'
|
||||
})">播放</button> -->
|
||||
<block v-if="chatMessageListLength < 1">
|
||||
<view class="home-focus-wrap">
|
||||
<view class="focus-guide-wrap">
|
||||
<view class="guide-left">
|
||||
<image
|
||||
:src="webUrl + '/aiChat/logo-01.gif'"
|
||||
class="avatar"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
<view class="guide-right">
|
||||
<view class="trangle" />
|
||||
<view class="title">{{ settingInfo.helloMessageTitle }}</view>
|
||||
<view class="content">{{ settingInfo.helloMessageContent }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="weatherData.city && holidayData.suit" class="weather-holiday-wrap">
|
||||
<view class="weather-data data-wrap">
|
||||
<block v-if="!weatherDataLoading">
|
||||
<view v-if="weatherIsLoad">
|
||||
<!-- 各种天气对应的图标
|
||||
https://yikeapi.com/help/wea
|
||||
https://yikeapi.com/help/tianqiimg -->
|
||||
<view class="title">
|
||||
<image
|
||||
:src="webUrl + '/aiChat/weather/' + weatherData.wea_img +'.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="tem-wrap">
|
||||
<view class="tem">{{ weatherData.tem }}</view>
|
||||
<view class="unit">℃</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="loca">
|
||||
<view class="addr">
|
||||
<image
|
||||
:src="webUrl + '/aiChat/addr.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
{{ weatherData.city }}
|
||||
</view>
|
||||
<view class="tem-range">
|
||||
{{ weatherData.wea }} {{ weatherData.tem2 }}℃~{{ weatherData.tem1 }}℃
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">今日风向：{{ weatherData.win }}</view>
|
||||
<view class="content">紫外线指数：{{ weatherData.uvIndex }} {{ weatherData.uvDescription }}</view>
|
||||
</view>
|
||||
<view v-else class="no-weather">
|
||||
<view class="home-wrap">
|
||||
<view class="home-focus-wrap">
|
||||
<view class="focus-guide-wrap">
|
||||
<view class="guide-left">
|
||||
<image
|
||||
:src="webUrl + '/aiChat/weather/no-weather.png'"
|
||||
class="img"
|
||||
:src="webUrl + '/aiChat/logo-01.gif'"
|
||||
class="avatar"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view>无法获取天气信息</view>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view class="txt-loading">加载中...</view>
|
||||
</block>
|
||||
<view class="guide-right">
|
||||
<view class="title">{{ settingInfo.helloMessageTitle }}</view>
|
||||
<view class="content">{{ settingInfo.helloMessageContent }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="holidayData.suit" class="holiday-data data-wrap">
|
||||
<view class="topic-wrap">
|
||||
<view class="title">
|
||||
<view class="day">{{ holidayData.lunarCalendar }}</view>
|
||||
<view>{{ holidayData.date.substr(5).replace('-', '/') }} {{ weekDayArr[holidayData.weekDay] }}</view>
|
||||
</view>
|
||||
<view class="desc">{{ holidayData.yearTips }}年/{{ holidayData.chineseZodiac }}</view>
|
||||
<view class="tip">
|
||||
<view class="label">宜</view>
|
||||
<view class="content">
|
||||
{{ holidayData.suit }}
|
||||
</view>
|
||||
</view>
|
||||
<view class="tip">
|
||||
<view class="label label2">忌</view>
|
||||
<view class="content">
|
||||
{{ holidayData.avoid }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="topic-wrap">
|
||||
<view class="title">
|
||||
<image
|
||||
:src="webUrl + '/aiChat/icon-01.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
<view class="txt">#大家都在问</view>
|
||||
<image
|
||||
:src="webUrl + '/aiChat/icon-01.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
</view>
|
||||
<view class="list-wrap">
|
||||
<view
|
||||
:style="{
|
||||
'width': animationWidth,
|
||||
'animation': animationStr
|
||||
}"
|
||||
class="list-cont"
|
||||
>
|
||||
<view
|
||||
v-for="(item, index) in topicList"
|
||||
:key="index"
|
||||
class="list-item"
|
||||
@click="topicItemClickHandle(item.title)"
|
||||
>
|
||||
<view class="title-left">大家都在问</view>
|
||||
<view class="title-right" @click="loadData">
|
||||
<image
|
||||
v-if="item.isHot"
|
||||
:src="webUrl + '/aiChat/hot.png'"
|
||||
:src="webUrl + '/aiChat/icon-53.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
{{ item.title }}
|
||||
换一换
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-wrap">
|
||||
<view class="list-cont">
|
||||
<view
|
||||
v-for="(item, index) in topicList"
|
||||
:key="index"
|
||||
class="list-item"
|
||||
@click="topicItemClickHandle(item.title)"
|
||||
>
|
||||
<image
|
||||
v-if="item.isHot"
|
||||
:src="webUrl + '/aiChat/hot.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
{{ item.title }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="chat-wrap">
|
||||
<view v-if="chatMessageListLength > 0" class="chat-list-wrap">
|
||||
<view v-if="chatMessageListLength > 0" class="chat-wrap">
|
||||
<view class="chat-list-wrap">
|
||||
<view
|
||||
v-for="(item, index) in chatMessageList"
|
||||
:key="index"
|
||||
@@ -267,7 +193,12 @@
|
||||
</view>
|
||||
<!-- 换一换 -->
|
||||
<view
|
||||
v-if="!item.showCursor && item.nodes && item.nodes.length && !item.isError && item.showMoreInfo.show"
|
||||
v-if="!item.showCursor &&
|
||||
item.nodes &&
|
||||
item.nodes.length &&
|
||||
!item.isError &&
|
||||
(item.showMoreInfo.show || item.orderList.length > 0)
|
||||
"
|
||||
class="change-list-wrap"
|
||||
>
|
||||
<view v-if="item.showMoreInfo.showType === '特产商品'" class="list-wrap">
|
||||
@@ -371,7 +302,19 @@
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item.showMoreInfo.showType !== '优惠活动'" class="change-btn">
|
||||
<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.showMoreInfo.showType !== '优惠活动' && item.orderList.length === 0" class="change-btn">
|
||||
<image
|
||||
:src="webUrl + '/aiChat/icon-change.png'"
|
||||
class="icon"
|
||||
@@ -380,6 +323,7 @@
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 建议提问 -->
|
||||
<view
|
||||
v-if="index === (chatMessageListLength - 1) && item.listQuestion.length > 0"
|
||||
class="suggestion-wrap"
|
||||
@@ -420,25 +364,40 @@
|
||||
}"
|
||||
class="page-to-bottom"
|
||||
>
|
||||
<view
|
||||
v-if="chatNumber"
|
||||
class="new-chat"
|
||||
@click="createNewHandle"
|
||||
>
|
||||
<view class="container">
|
||||
<view
|
||||
v-if="chatNumber"
|
||||
class="new-chat"
|
||||
@click="createNewHandle"
|
||||
>
|
||||
<image
|
||||
:src="webUrl + '/aiChat/icon-54.png'"
|
||||
class="btn-icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
开启新对话
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/aiChat/icon-05.png'"
|
||||
class="btn-icon"
|
||||
v-if="chatMessageListLength > 0 && !isScrollToBottom && !loading"
|
||||
:src="webUrl + '/aiChat/down.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
@click="scrollToBottomHandle"
|
||||
/>
|
||||
开启新对话
|
||||
<view
|
||||
v-for="(item, index) in bottomTools"
|
||||
:key="index"
|
||||
class="bottom-tool-item"
|
||||
@click="bottomToolClickHandle(item)"
|
||||
>
|
||||
<image
|
||||
:src="webUrl + '/aiChat/' + item.icon + '.png'"
|
||||
class="tool-icon"
|
||||
mode="widthFix"
|
||||
/>
|
||||
{{ item.text }}
|
||||
</view>
|
||||
</view>
|
||||
<image
|
||||
v-if="chatMessageListLength > 0 && !isScrollToBottom && !loading"
|
||||
:src="webUrl + '/aiChat/down.png'"
|
||||
class="icon"
|
||||
mode="widthFix"
|
||||
@click="scrollToBottomHandle"
|
||||
/>
|
||||
</view>
|
||||
<bottom-send
|
||||
ref="bottomSend"
|
||||
@@ -458,32 +417,25 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { chatMixins } from '../mixins/chatMixins.js'
|
||||
import { chatMixinsV2 } from '../mixins/chatMixinsV2.js'
|
||||
import {
|
||||
getAiSystemInfoSetting,
|
||||
getAiSystemInfoTopic
|
||||
} from '@/api/public'
|
||||
import {
|
||||
getWeatherData,
|
||||
getHolidayData
|
||||
} from '@/api/chat/index'
|
||||
import AiHistoryList from '../components/historyList'
|
||||
import BottomSend from '../components/bottomSend.vue'
|
||||
import OrderItem from '../components/orderItem.vue'
|
||||
export default {
|
||||
name: 'AiChatIndexPage',
|
||||
components: {
|
||||
AiHistoryList,
|
||||
BottomSend
|
||||
BottomSend,
|
||||
OrderItem
|
||||
},
|
||||
mixins: [chatMixins],
|
||||
mixins: [chatMixinsV2],
|
||||
data() {
|
||||
return {
|
||||
cityName: '',
|
||||
weatherDataLoading: false,
|
||||
weatherIsLoad: true,
|
||||
weatherData: {},
|
||||
holidayData: {},
|
||||
weekDayArr: Object.freeze(['', '周一', '周二', '周三', '周四', '周五', '周六', '周日']),
|
||||
animationWidth: '150%',
|
||||
animationStr: '',
|
||||
settingInfo: {},
|
||||
@@ -521,29 +473,7 @@ export default {
|
||||
getAiSystemInfoTopic().then(res => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
this.topicList = data || []
|
||||
}
|
||||
})
|
||||
if (this.cityName) {
|
||||
this.weatherDataLoading = true
|
||||
getWeatherData({
|
||||
cityName: this.cityName
|
||||
}).then(res => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
this.weatherData = data
|
||||
}
|
||||
this.weatherIsLoad = true
|
||||
this.weatherDataLoading = false
|
||||
}).catch(() => {
|
||||
this.weatherDataLoading = false
|
||||
this.weatherIsLoad = false
|
||||
})
|
||||
}
|
||||
getHolidayData().then(res => {
|
||||
const { success, data } = res
|
||||
if (success) {
|
||||
this.holidayData = data
|
||||
this.topicList = (data || []).slice(0, 3)
|
||||
}
|
||||
})
|
||||
},
|
||||
@@ -625,43 +555,39 @@ export default {
|
||||
opacity: 0.0;
|
||||
}
|
||||
}
|
||||
.home-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: calc(100vh - 220rpx);
|
||||
padding: 0 0 220rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.focus-guide-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 40rpx;
|
||||
flex-direction: column;
|
||||
.guide-left {
|
||||
.avatar {
|
||||
display: block;
|
||||
width: 267rpx;
|
||||
height: 530rpx;
|
||||
width: 230rpx;
|
||||
height: 404rpx;
|
||||
}
|
||||
}
|
||||
.guide-right {
|
||||
position: relative;
|
||||
padding: 30rpx;
|
||||
margin: 0 0 0 40rpx;
|
||||
border-radius: 20rpx;
|
||||
width: 100%;
|
||||
padding: 30rpx 0;
|
||||
font-size: 28rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: 0rpx 12rpx 30rpx rgba(0,0,0,0.1);
|
||||
.trangle {
|
||||
position: absolute;
|
||||
bottom: 120rpx;
|
||||
left: -15rpx;
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
background-color: #fff;
|
||||
box-shadow: -30rpx 12rpx 30rpx rgba(0,0,0,0.1);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
text-align: center;
|
||||
.title {
|
||||
width: 110%;
|
||||
font-weight: bold;
|
||||
font-size: 34rpx;
|
||||
}
|
||||
.content {
|
||||
padding: 30rpx 0 0 0;
|
||||
color: #999;
|
||||
color: #3D4CF0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -670,17 +596,17 @@ export default {
|
||||
.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: 28rpx;
|
||||
background-color: #3D4CF1;
|
||||
justify-content: space-between;
|
||||
padding: 0 24rpx;
|
||||
color: #3D4CF0;
|
||||
font-size: 28rpx;
|
||||
.title-left {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.title-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.icon {
|
||||
display: flex;
|
||||
@@ -690,26 +616,20 @@ export default {
|
||||
}
|
||||
.list-wrap {
|
||||
width: 100%;
|
||||
margin: 60rpx 0 0 0;
|
||||
padding: 40rpx 0 0 0;
|
||||
overflow-x: hidden;
|
||||
.list-cont {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 750 * 1.5rpx;
|
||||
padding: 0 0 0 24rpx;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
// animation: translateXSwiper 10s infinite linear alternate;
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48rpx;
|
||||
padding: 0 18rpx;
|
||||
margin: 0 30rpx 30rpx 0;
|
||||
border-radius: 24rpx;
|
||||
padding: 12rpx 18rpx;
|
||||
margin: 0 0 24rpx 0;
|
||||
border-radius: 12rpx;
|
||||
border: 1rpx solid #ddd;
|
||||
font-size: 28rpx;
|
||||
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;
|
||||
@@ -720,6 +640,14 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
.order-list-wrap {
|
||||
width: 100%;
|
||||
padding: 24rpx 0;
|
||||
box-sizing: border-box;
|
||||
.order-item-wrap + .order-item-wrap {
|
||||
margin: 24rpx 0 0 0;
|
||||
}
|
||||
}
|
||||
@keyframes translateXSwiper {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
|
||||
Reference in New Issue
Block a user