Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 0febf92c 作者: e
操作

feat: 完成调整AI小助手及打开功能

上级 a70adcc7
正在显示 包含 149 行增加 和 4 行删除
src/pages/common/chat/webview.vue
......@@ -8,7 +8,7 @@
const src = ref<string>()
onLoad(({ token, userId }) => {
src.value = `/hybrid/html/chat.html?token=${token}&userId=${userId}`
src.value = `/static/chat.html?token=${token}&userId=${userId}`
})
</script>
......
src/pages/shouye/shouye.vue
......@@ -11,7 +11,9 @@ import Navigate from '@/utils/page/navigate'
import * as AreaDict from '@/utils/dict/area'
import { getList } from '@/api/model/news'
import { getList as getVideoList } from '@/api/model/knowledgeVideo'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const dictStore = useDictStore()
const model = reactive({
// 湖南省人民政府
......@@ -152,6 +154,14 @@ onPullDownRefresh(() => {
}, 1000)
})
function openAITools() {
uni.navigateTo({
animationType: 'slide-in-bottom',
// 最新版 SDK Webview 嵌入版本，支持绑定用户 ID，支持自定义样式等
url: `/pages/common/chat/webview?token=&userId=${userStore.getUserInfo?.id}`,
})
}
function getWeatherRecommend(weather: string) {
switch (weather) {
case '晴':
......@@ -467,7 +477,7 @@ onHide(() => {
<!-- <text class="text" style="font-family: alimamashuheiti">湖南省</text> -->
</view>
<!-- ai助手 -->
<FuiMovableView top="650" right="10" zIndex="99999">
<FuiMovableView top="650" right="-12" zIndex="99999">
<view class="h-80rpx flex items-center" @click="openAITools">
<image class="w-117rpx h-118rpx" src="/static/images/codefun/ai.png" alt="" />
</view>
......
src/static/chat.html 0 → 100644
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover"
name="viewport"
/>
<title>AI Chat</title>
<style>
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: #fff;
}
#chat-bot {
position: fixed;
inset: 0;
z-index: 9999;
box-sizing: border-box;
/* 兼容 iOS < 11.2 */
padding-bottom: constant(safe-area-inset-bottom);
/* 兼容 iOS >= 11.2 */
padding-bottom: env(safe-area-inset-bottom);
/* 兼容 iOS < 11.2 */
padding-top: constant(safe-area-inset-top);
/* 兼容 iOS >= 11.2 */
padding-top: env(safe-area-inset-top);
}
.close-btn {
z-index: 99999;
position: absolute;
right: 12px;
top: calc(18px + constant(safe-area-inset-top));
top: calc(18px + env(safe-area-inset-top));
padding: 8px;
}
.android #chat-bot {
/* 兼容 iOS < 11.2 */
padding-top: calc(18px + constant(safe-area-inset-top));
/* 兼容 iOS >= 11.2 */
padding-top: calc(18px + env(safe-area-inset-top));
}
.android .close-btn {
/* 兼容 iOS < 11.2 */
top: calc(18px + 18px + constant(safe-area-inset-top));
/* 兼容 iOS >= 11.2 */
top: calc(18px + 18px + env(safe-area-inset-top));
}
</style>
</head>
<body>
<script
type="text/javascript"
src="https://hntq-res.oss-cn-shenzhen.aliyuncs.com/uni.webview.1.5.6.js"
></script>
<script type="text/javascript">
const u = navigator.userAgent
const isAndroid = u.includes('Android') || u.includes('Adr')
if (isAndroid) {
document.body.classList.add('android')
}
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function () {
// 添加关闭按钮
const div = document.createElement('div')
div.className = 'close-btn'
div.innerHTML =
'<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path fill="#666" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/></svg>'
div.onclick = function () {
uni.navigateBack()
}
document.body.appendChild(div)
})
</script>
<div id="chat-bot"></div>
<script src="https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.1.0-beta.0/libs/cn/index.js"></script>
<script>
function getUrlParams(url) {
const paramsObj = {}
if (!url) {
url = window.location.href
}
const questionIndex = url.indexOf('?')
if (questionIndex !== -1) {
const paramStr = url.slice(questionIndex + 1)
const paramArr = paramStr.split('&')
paramArr.forEach((param) => {
const [key, value] = param.split('=')
paramsObj[key] = decodeURIComponent(value)
})
}
return paramsObj
}
const params = getUrlParams()
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
bot_id: '7571349247409979402',
},
userInfo: {
id: params.userId,
url: 'https://hntq.yiring.com/minio/public/system/ai/hntq-ai-user-2.png',
// nickname: "壹润科技",
},
ui: {
base: {
layout: 'mobile',
lang: 'zh-CN',
icon: 'https://hntq.yiring.com/minio/public/system/ai/hntq-ai-logo.png',
},
header: {
isNeedClose: false,
},
footer: {
isShow: false,
},
chatBot: {
title: 'AI 农技助手',
uploadable: false,
el: document.getElementById('chat-bot'),
},
asstBtn: {
isNeed: false,
},
},
})
cozeWebSDK.showChatBot()
</script>
</body>
</html>
src/static/images/codefun/ai.png
src/static/images/codefun/ai.png

10.4 KB | W: | H:

src/static/images/codefun/ai.png

17.6 KB | W: | H:

src/static/images/codefun/ai.png
src/static/images/codefun/ai.png
src/static/images/codefun/ai.png
src/static/images/codefun/ai.png
  • 2-up
  • Swipe
  • Onion skin
types/components.d.ts
......@@ -150,8 +150,6 @@ declare module 'vue' {
IframeVideo: typeof import('./../src/components/IframeVideo/index.vue')['default']
Legend: typeof import('./../src/components/Map/Widgets/Legend/src/Legend.vue')['default']
Mapbox: typeof import('./../src/components/Map/Mapbox/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
Src: typeof import('./../src/components/Echarts/src/index.vue')['default']
Switch: typeof import('./../src/components/Map/Widgets/Switch/src/Switch.vue')['default']
ThumbnailPreview: typeof import('./../src/components/ThumbnailPreview/index.vue')['default']
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论