1016 lines
24 KiB
Vue
1016 lines
24 KiB
Vue
<template>
|
||
<view class="index-dialog-page">
|
||
<!-- <MarkdownPreview/> -->
|
||
<view class="top-bg"></view>
|
||
<view class="bot-bg"></view>
|
||
<scroll-view class="index-dialog-body" :scroll-y="true" upper-threshold="0" refresher-enabled="true"
|
||
refresher-default-style="none" @refresherrefresh="scrolltolower">
|
||
<view class="body-title">
|
||
<!-- <uv-icon class="arrow-icon" name="arrow-left" @click="common.navigateBack()"/> -->
|
||
AI问答演示
|
||
</view>
|
||
|
||
<view class="ai-info">
|
||
<!-- <image src="@/static/images/dialog/pet-3.png" alt="" class="image-pet-bg"></image> -->
|
||
<image src="@/static/images/dialog/pet-bg-base.png" alt="" class="image-pet-bg"></image>
|
||
<image :src="userInfo?.mascotInfo?.imgAddr || ''" alt="" class="image-pet" mode="widthFix"></image>
|
||
<view class="ai-info-bg-box">
|
||
<view class="hello-text">{{ userInfo ? 'Hi，我是' + userInfo?.mascotInfo?.mascotName : 'Hi' }}</view>
|
||
<view class="info-text">工作学习，我都能帮你！</view>
|
||
<view class="info-btn">试试他的能力</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="questions-view">
|
||
<scroll-view :scroll-x="true" :show-scrollbar="false">
|
||
<view class="question-row">
|
||
<view
|
||
class="question-item"
|
||
v-for="item in Math.ceil(questionList.length / 2)"
|
||
@click="sendText(questionList[item - 1].hotContent)"
|
||
>
|
||
{{ questionList[item - 1].hotContent }}
|
||
</view>
|
||
</view>
|
||
<view class="question-row">
|
||
<view
|
||
class="question-item"
|
||
v-for="item in questionList.length - Math.ceil(questionList.length / 2)"
|
||
@click="sendText(questionList[item + Math.ceil(questionList.length / 2) - 1].hotContent)"
|
||
>
|
||
{{ questionList[item + Math.ceil(questionList.length / 2) - 1].hotContent }}
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view> -->
|
||
<view class="talking-list">
|
||
<scroll-view class="talking-scroll-list" :scroll-y="true" :scroll-top="scrollTop" :show-scrollbar="false"
|
||
:scroll-with-animation="false">
|
||
<TalkingItem v-for="(item, index) in talkingList" :talkingType="item.type" :talkingInfo="item"
|
||
:isLast="index + 1 === talkingList.length" :isAnswering="!answerIsOver"
|
||
:activeVoiceId="activeVoiceTalkingItemId" @handleEvents="talkItemEvents"></TalkingItem>
|
||
</scroll-view>
|
||
</view>
|
||
<TouchBtn class="talk-btns" @uploadVoice="uploadRecordNow" @submitAnswer="submitAnswerNow"
|
||
@startRecord="startRecordCallback" :loadingText="sendLoadingText" :isLoading="!answerIsOver"
|
||
:adjustPosition="true" :isDisabled="isHistory" />
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 水印组件 -->
|
||
<watermark ref="watermarkRef"></watermark>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
unref,
|
||
onMounted,
|
||
watch,
|
||
nextTick,
|
||
computed,
|
||
onActivated
|
||
} from 'vue';
|
||
import common from '@/common/common';
|
||
import {
|
||
setupKeyboardHeightListener
|
||
} from '@/common/common';
|
||
import TouchBtn from '@/pages/course/components/touchBtn.vue';
|
||
import TalkingItem from './components/talking-item.vue';
|
||
import {
|
||
useSocketStore
|
||
} from '@/store/socket.js';
|
||
import {
|
||
useStorageStore
|
||
} from '@/store/storage.js';
|
||
import {
|
||
storeToRefs
|
||
} from 'pinia';
|
||
import {
|
||
onLoad,
|
||
onShow,
|
||
onUnload,
|
||
onHide,
|
||
onBackPress
|
||
} from '@dcloudio/uni-app';
|
||
import {
|
||
get_base_url,
|
||
goto_login_fun
|
||
} from '@/api/request';
|
||
import {
|
||
getUserInfo,
|
||
getPhoneEnvBool
|
||
} from '@/common/common';
|
||
import {
|
||
commonUploadVoiceFile
|
||
} from '@/api/common.js';
|
||
import {
|
||
queryHotQuestionApi,
|
||
insertTraAskFeedback,
|
||
queryAskHisByBatchIdPaging,
|
||
updateLikeStat,
|
||
updateDownvoteStat,
|
||
chatVoice
|
||
} from '@/api/dialog.js';
|
||
|
||
const {
|
||
statusBarHeight
|
||
} = uni.getWindowInfo();
|
||
|
||
const pageTopPadding = computed(() => statusBarHeight + 'px');
|
||
|
||
const socketStore = useSocketStore();
|
||
const {
|
||
SocketObj
|
||
} = storeToRefs(socketStore);
|
||
|
||
const feedbackRef = ref();
|
||
const watermarkRef = ref();
|
||
const userInfo = ref(getUserInfo());
|
||
const userParams = '/' + (unref(userInfo)?.userName ?? '') + ' ' + (unref(userInfo)?.loginName ?? '');
|
||
const questionList = ref([
|
||
// '对公小程序开户流程？',
|
||
// '厅堂服务经理2025年管理办法？',
|
||
// '厅堂服务经理2025年考核表单？',
|
||
// '吉林银行重要空白凭证调微业务操作规程？',
|
||
// '协助有权机关查询冻结扣划业务操作规程？',
|
||
// '柜面个人账户操作规程？',
|
||
// '久悬未取款账户如何办理销户？',
|
||
// '境外来华人员个人账户业务开户如何办理？',
|
||
// '营业机构日间管理风险防控要点有哪些？',
|
||
// '现金管理平台柜面业务操作？'
|
||
]);
|
||
const scrollBoxRef = ref();
|
||
const scrollTop = ref(99999);
|
||
const scrollToBottomNow = (time = 100) => {
|
||
nextTick(() => {
|
||
setTimeout(() => {
|
||
scrollTop.value += 100;
|
||
scrollTop.value += 100;
|
||
}, time);
|
||
});
|
||
};
|
||
const isHistory = ref(false);
|
||
const activeVoiceTalkingItemId = ref('');
|
||
// ws 初始化逻辑
|
||
const reconnectTimer = null; // 重连timer
|
||
const isManualClose = ref(false); // 是否手动关闭
|
||
const reqBatch = ref('');
|
||
const seqNo = ref('');
|
||
const mascotId = computed(() => {
|
||
return unref(userInfo)?.mascotInfo?.mascotId || 'Tst00001';
|
||
});
|
||
const answerText = ref('');
|
||
const answerFileList = ref('');
|
||
const answerIsOver = ref(true);
|
||
const talkingList = ref([
|
||
// {
|
||
// type: 'answer',
|
||
// isLoading: false,
|
||
// id: 1 + 'loading',
|
||
// talkingText: '是否手动关闭',
|
||
// talkingVoice: 'askData.value.talkingVoice'
|
||
// }
|
||
|
||
]);
|
||
|
||
const createNewDialog = () => {
|
||
if (talkingList.value.length === 0) {
|
||
common.msg('已经是最新对话');
|
||
}
|
||
common.redirectTo(`/pages/index/dialog`);
|
||
};
|
||
const showModelComfirm = ref(false);
|
||
const reconcatNum = ref(1);
|
||
const initsocketTask = () => {
|
||
isHistory.value = false;
|
||
socketStore.creatSocket('/traask/asksocket/open?summary=');
|
||
unref(SocketObj).on('error', () => {
|
||
if (watchFlag.value === 1 || showModelComfirm.value) return;
|
||
if (reconcatNum.value === 5) {
|
||
common.msg('系统网络异常，请稍后再试！');
|
||
return;
|
||
}
|
||
showModelComfirm.value = true;
|
||
common
|
||
.show('提示信息', '网络环境不稳定，请重试！', false, '', '确认')
|
||
.then((res) => {
|
||
reconcatNum.value += 1;
|
||
common.redirectTo(`/pages/index/dialog`);
|
||
})
|
||
.finally(() => {
|
||
showModelComfirm.value = false;
|
||
});
|
||
});
|
||
unref(SocketObj).on('message', (res) => {
|
||
const {
|
||
rtnCode,
|
||
body,
|
||
commond
|
||
} = JSON.parse(res.data);
|
||
let _id = new Date().getTime() + 'id';
|
||
if (rtnCode === '0000') {
|
||
if (commond === 'ASK-OPEN') {
|
||
if (!answerIsOver.value) {
|
||
// 问题没完成， 重新尝试回答
|
||
sendMessage({
|
||
commond: 'ASK-RE-START',
|
||
body: {
|
||
reqBatch: reqBatch.value,
|
||
seqNo: seqNo.value,
|
||
answerContent: answerText.value
|
||
}
|
||
});
|
||
} else {
|
||
// 新连接
|
||
sendMessage({
|
||
commond: 'ASK-START',
|
||
body: {
|
||
mascotId: mascotId.value,
|
||
deviceImei: ''
|
||
}
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
if (commond === 'ASK-START') {
|
||
// console.log('开启对话！')
|
||
reqBatch.value = body.reqBatch;
|
||
return;
|
||
}
|
||
if (commond === 'ASK') {
|
||
console.log('发送问题成功！');
|
||
if (talkingList.value.length > 0 && talkingList.value[talkingList.value.length - 1].isLoading) {
|
||
talkingList.value.pop();
|
||
}
|
||
seqNo.value = body.seqNo;
|
||
touchBtnCallBack.value && touchBtnCallBack.value();
|
||
touchBtnCallBack.value = null;
|
||
talkingList.value.push({
|
||
type: 'question',
|
||
talkingText: body.intrctContent,
|
||
isLoading: false,
|
||
id: _id,
|
||
...body,
|
||
talkingVoice: askData.value.talkingVoice
|
||
});
|
||
talkingList.value.push({
|
||
type: 'answer',
|
||
isLoading: true,
|
||
id: _id + 'loading'
|
||
});
|
||
scrollToBottomNow();
|
||
return;
|
||
}
|
||
if (commond === 'ASK-STOP') {
|
||
console.log('停止回答标记!');
|
||
stopAnswerCallBack.value && stopAnswerCallBack.value(askData.value);
|
||
setTimeout(() => {
|
||
stopAnswerCallBack.value = null;
|
||
answerIsOver.value = true;
|
||
}, 10);
|
||
return;
|
||
}
|
||
if (commond === 'ASK-ANSWER') {
|
||
if (body.event === 'start') {
|
||
console.log('开始回答！');
|
||
answerIsOver.value = false;
|
||
answerText.value = '';
|
||
talkingList.value.pop();
|
||
talkingList.value.push({
|
||
type: 'answer',
|
||
talkingText: answerText.value,
|
||
isLoading: false,
|
||
id: _id,
|
||
...body,
|
||
askData: {
|
||
...askData.value
|
||
},
|
||
talkingFiles: [],
|
||
talkingCrsList: []
|
||
});
|
||
} else if (body.event === 'token') {
|
||
answerIsOver.value = false;
|
||
answerText.value += body.data;
|
||
} else if (body.event === 'end') {
|
||
console.log('完成回答！');
|
||
answerIsOver.value = true;
|
||
} else if (body.event === 'sourceDocuments') {
|
||
console.log('回答返回文件列表！');
|
||
console.log('body: ', body);
|
||
if (talkingList.value.length === 0) return;
|
||
let _data = body.data;
|
||
talkingList.value[talkingList.value.length - 1].talkingFiles = _data.knowledgeList || [];
|
||
talkingList.value[talkingList.value.length - 1].talkingCrsList = _data.crsList || [];
|
||
}
|
||
return;
|
||
}
|
||
if (commond === 'ASK-RE-ANSWER') {
|
||
// console.log('开始继续回答！')
|
||
if (body.event === 'start') {
|
||
answerIsOver.value = false;
|
||
answerText.value = '';
|
||
} else if (body.event === 'token') {
|
||
answerIsOver.value = false;
|
||
answerText.value = body.data;
|
||
} else if (body.event === 'end') {
|
||
answerIsOver.value = true;
|
||
}
|
||
return;
|
||
}
|
||
|
||
if (commond === 'ASK-ERR') {
|
||
console.log('提问失败，系统异常！');
|
||
return;
|
||
}
|
||
} else {
|
||
if (['0005', 'QQ0005'].includes(res.rtnCode)) {
|
||
goto_login_fun();
|
||
}
|
||
}
|
||
});
|
||
watchFlag.value += 1;
|
||
};
|
||
const sendLoadingText = ref('问题回答中，请在问题回答结束后重试！');
|
||
const sendMessage = (data) => {
|
||
touchBtnCallBack.value && touchBtnCallBack.value();
|
||
touchBtnCallBack.value = null;
|
||
let _id = new Date().getTime() + 'id';
|
||
talkingList.value.push({
|
||
type: 'question',
|
||
talkingText: data.body.intrctContent,
|
||
isLoading: false,
|
||
...data.body,
|
||
id: _id + 'q',
|
||
talkingVoice: askData.value.talkingVoice || ''
|
||
});
|
||
talkingList.value.push({
|
||
type: 'answer',
|
||
isLoading: true,
|
||
id: _id + 'loading'
|
||
});
|
||
chatVoice({
|
||
chatVoice: data.body.intrctContent
|
||
}).then(res => {
|
||
talkingList.value.pop()
|
||
talkingList.value.push({
|
||
type: 'answer',
|
||
talkingText: res.body.content,
|
||
isLoading: false,
|
||
id: _id + 'a',
|
||
talkingFiles: [],
|
||
talkingCrsList: [],
|
||
talkingVoice: '',
|
||
talkingVoiceId: res.body.fileId
|
||
});
|
||
})
|
||
|
||
};
|
||
watch(
|
||
() => answerText.value,
|
||
(val) => {
|
||
if (val) {
|
||
changeText(val);
|
||
scrollToBottomNow();
|
||
}
|
||
}
|
||
);
|
||
|
||
const changeText = () => {
|
||
if (talkingList.value.length === 0) return;
|
||
talkingList.value[talkingList.value.length - 1].talkingText = answerText.value;
|
||
};
|
||
|
||
const stopAnswerCallBack = ref(null);
|
||
const talkItemEvents = ({
|
||
type,
|
||
data,
|
||
id,
|
||
info = {}
|
||
}) => {
|
||
switch (type) {
|
||
case 'reAnswer':
|
||
console.log('重新提问回答');
|
||
// 停止获取
|
||
sendMessage({
|
||
commond: 'ASK-STOP',
|
||
body: {
|
||
reqBatch: reqBatch.value,
|
||
seqNo: seqNo.value
|
||
}
|
||
});
|
||
sendMessage({
|
||
commond: 'ASK',
|
||
body: data.askData
|
||
});
|
||
// // 设置停止回调
|
||
// stopAnswerCallBack.value = ($data) => {
|
||
// sendMessage({
|
||
// "commond": 'ASK',
|
||
// "body": $data
|
||
// })
|
||
// }
|
||
break;
|
||
case 'stop':
|
||
console.log('停止获取数据');
|
||
stopAnswerCallBack.value = null;
|
||
// ASK-STOP
|
||
sendMessage({
|
||
commond: 'ASK-STOP',
|
||
body: {
|
||
reqBatch: reqBatch.value,
|
||
seqNo: seqNo.value
|
||
}
|
||
});
|
||
break;
|
||
case 'changePlay':
|
||
activeVoiceTalkingItemId.value = id;
|
||
break;
|
||
case 'feedback':
|
||
let _feedstatus = data.downvoteStat === 'Y' ? 'N' : 'Y';
|
||
let _feedid = data.seqNo || data.askId;
|
||
if (_feedstatus === 'N') {
|
||
updateDownvoteStat({
|
||
askId: _feedid,
|
||
stat: _feedstatus
|
||
}).then((res) => {
|
||
talkingList.value.forEach((t) => {
|
||
if (t.seqNo === _feedid || t.askId === _feedid) {
|
||
t.downvoteStat = 'N';
|
||
}
|
||
});
|
||
});
|
||
} else {
|
||
feedbackRef.value.open(data);
|
||
}
|
||
break;
|
||
case 'great':
|
||
let _status = data.likeStat === 'Y' ? 'N' : 'Y';
|
||
let _id = data.seqNo || data.askId;
|
||
updateLikeStat({
|
||
askId: _id,
|
||
stat: _status
|
||
}).then((res) => {
|
||
talkingList.value.forEach((t) => {
|
||
if (t.seqNo === _id || t.askId === _id) {
|
||
t.likeStat = _status;
|
||
if (_status === 'Y') {
|
||
t.downvoteStat = 'N';
|
||
}
|
||
}
|
||
});
|
||
});
|
||
break;
|
||
case 'preview':
|
||
if (getPhoneEnvBool('AND')) {
|
||
common.navigateTo('/pages/index/preview?fileId=' + info.docId);
|
||
} else {
|
||
const base_url = get_base_url('/traask/traFilePreview/');
|
||
let fileUrl = base_url + '/traask/traFilePreview/' + info.docId + userParams;
|
||
const localFilePath = '_doc/pdf_view/' + info.docName + '.pdf';
|
||
downloadAndSaveAvatar(fileUrl, localFilePath).then((res) => {
|
||
uni.openDocument({
|
||
filePath: res,
|
||
showMenu: true,
|
||
success: function() {
|
||
console.log('打开文档成功');
|
||
}
|
||
});
|
||
});
|
||
}
|
||
break;
|
||
case 'toCourse':
|
||
console.log(type, data, id);
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
};
|
||
const downloadAndSaveAvatar = async (fileUrl, localFilePath) => {
|
||
try {
|
||
//#ifdef APP-PLUS
|
||
return new Promise((resolve, reject) => {
|
||
console.log('开始下载:', fileUrl);
|
||
const dtask = plus.downloader.createDownload(
|
||
fileUrl, {
|
||
filename: localFilePath
|
||
},
|
||
(d, status) => {
|
||
if (status === 200) {
|
||
console.log('保存路径：', d.filename);
|
||
resolve(d.filename);
|
||
} else {
|
||
console.error('文件下载失败：', status);
|
||
reject(new Error(`下载失败，状态码: ${status}`));
|
||
}
|
||
}
|
||
);
|
||
dtask.start();
|
||
});
|
||
// #endif
|
||
//#ifdef H5
|
||
return new Promise((resolve, reject) => {
|
||
resolve();
|
||
});
|
||
// #endif
|
||
} catch (error) {
|
||
console.error('创建目录失败:', error);
|
||
throw error;
|
||
}
|
||
};
|
||
const feedbackAnswer = (params) => {
|
||
talkingList.value.forEach((t) => {
|
||
if (t.seqNo === params.askId) {
|
||
t.downvoteStat = 'Y';
|
||
t.likeStat = 'N';
|
||
}
|
||
});
|
||
};
|
||
const historyRef = ref(null);
|
||
const showMenuList = ref(false);
|
||
const showHistory = () => {
|
||
showMenuList.value = false;
|
||
historyRef.value.open();
|
||
};
|
||
const toMessage = () => {
|
||
showMenuList.value = false;
|
||
common.navigateTo('/pages/messageNotification/index');
|
||
};
|
||
const toMePage = () => {
|
||
showMenuList.value = false;
|
||
common.switchTab('/pages/me/index');
|
||
};
|
||
|
||
const showHistoryDetail = (item) => {
|
||
isHistory.value = true;
|
||
queryAskHisByBatchIdPaging({
|
||
batchId: item.reqBatch,
|
||
page: 1,
|
||
limit: 100
|
||
}).then((res) => {
|
||
console.log(res);
|
||
|
||
talkingList.value = (res.body || []).map((t, index) => {
|
||
let _text;
|
||
let _talkingCrsList;
|
||
let _talkingFiles;
|
||
if (t.chatRole === 'TCH') {
|
||
_text = t.respContentVo?.messageBuileder || '';
|
||
_talkingCrsList = t.respContentVo?.resultMap?.crsList || [];
|
||
_talkingFiles = t.respContentVo?.resultMap?.knowledgeList || [];
|
||
} else {
|
||
_text = t.respContent;
|
||
}
|
||
return {
|
||
type: t.chatRole === 'TCH' ? 'answer' : 'question',
|
||
talkingText: _text,
|
||
isLoading: false,
|
||
askId: t.askId,
|
||
seqNo: t.askId,
|
||
id: t.askId + index,
|
||
talkingVoice: '',
|
||
reqBatch: item.reqBatch,
|
||
intrctWay: '01', //01-文本；02-语音；03-图片
|
||
intrctContent: _text,
|
||
bucketKey: '',
|
||
downvoteStat: t.downvoteStat,
|
||
likeStat: t.likeStat,
|
||
talkingCrsList: _talkingCrsList,
|
||
talkingFiles: _talkingFiles,
|
||
isHistory: true
|
||
};
|
||
});
|
||
historyRef.value.close();
|
||
});
|
||
};
|
||
|
||
const touchBtnCallBack = ref(null);
|
||
const askData = ref({});
|
||
const sendText = (item) => {
|
||
submitAnswerNow(item);
|
||
};
|
||
// 发送语音
|
||
const uploadRecordNow = (voicePath) => {
|
||
// /traask/traAskchat/voiceTrans
|
||
//#ifndef APP-PLUS
|
||
// h5 假数据
|
||
// #endif
|
||
//#ifdef APP-PLUS
|
||
talkingList.value.push({
|
||
type: 'question',
|
||
talkingText: '',
|
||
isLoading: true
|
||
});
|
||
scrollToBottomNow();
|
||
commonUploadVoiceFile(voicePath, '/traask/traAskchat/voiceTrans', {})
|
||
.then((_res) => {
|
||
if (!!(_res.body.transContent || '').trim()) {
|
||
askData.value = {
|
||
reqBatch: reqBatch.value,
|
||
intrctWay: '02', //01-文本；02-语音；03-图片
|
||
intrctContent: _res.body.transContent,
|
||
bucketKey: _res.body.fileId,
|
||
ossFileAddr: _res.body.ossFileAddr,
|
||
talkingVoice: voicePath
|
||
};
|
||
sendMessage({
|
||
commond: 'ASK',
|
||
body: askData.value
|
||
});
|
||
} else {
|
||
talkingList.value.pop();
|
||
uni.showToast({
|
||
title: '未识别到文字',
|
||
icon: 'none',
|
||
duration: 1000
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
talkingList.value.pop();
|
||
uni.showToast({
|
||
title: '系统异常，请联系管理员',
|
||
icon: 'none',
|
||
duration: 1000
|
||
});
|
||
});
|
||
// #endif
|
||
};
|
||
// 发送文本
|
||
const submitAnswerNow = (val, cb = null) => {
|
||
if (!answerIsOver.value) {
|
||
// 问题回答中
|
||
return;
|
||
}
|
||
touchBtnCallBack.value = cb;
|
||
askData.value = {
|
||
reqBatch: reqBatch.value,
|
||
intrctWay: '01', //01-文本；02-语音；03-图片
|
||
intrctContent: val,
|
||
bucketKey: ''
|
||
};
|
||
sendMessage({
|
||
commond: 'ASK',
|
||
body: askData.value
|
||
});
|
||
};
|
||
const startRecordCallback = () => {
|
||
// 开始录音回调
|
||
};
|
||
const watchFlag = ref(1);
|
||
|
||
const scrolltolower = () => {
|
||
common.navigateBack();
|
||
};
|
||
|
||
const getQuestionList = () => {
|
||
queryHotQuestionApi().then((res) => {
|
||
console.log(res);
|
||
questionList.value = res.body
|
||
.map((t) => {
|
||
return {
|
||
...t,
|
||
hotContent: t.refineContent
|
||
};
|
||
})
|
||
.filter((t) => t.refineContent);
|
||
});
|
||
};
|
||
const loadData = async () => {
|
||
userInfo.value = getUserInfo();
|
||
// getQuestionList();
|
||
// initsocketTask();
|
||
};
|
||
onLoad(() => {
|
||
changeAppHeightBottom();
|
||
if (!common.isLogin()) {
|
||
common.navigateTo('/pages/login/login');
|
||
return;
|
||
}
|
||
// 判断下如果没有设置吉祥物就跳转到吉祥物页面
|
||
if (userInfo.value?.mascotInfo.mascotId === null) {
|
||
//说明这人在上次选吉祥物的时候退出了，没有选到吉祥物
|
||
common.redirectTo('/pages/mascot/mascot_select_list');
|
||
return;
|
||
}
|
||
loadData();
|
||
});
|
||
const previewRef = ref();
|
||
const previewFileRef = ref();
|
||
const showPreview = ref(false);
|
||
onMounted(() => {
|
||
// previewFileRef.value.open({
|
||
// fileId: '0006e7f7-a332-4c81-9802-ac4e2d971c71'
|
||
// })
|
||
});
|
||
|
||
const refreshData = () => {
|
||
loadData();
|
||
};
|
||
|
||
const keyboardHeight = ref('0px');
|
||
const setHeight = (res) => {
|
||
keyboardHeight.value = (res.height || 0) + 'px';
|
||
};
|
||
const keyBoardIsHide = computed(() => {
|
||
return parseInt(keyboardHeight.value) == 0;
|
||
});
|
||
const bottomHeight = ref('0px');
|
||
const totalBotHeight = computed(() => {
|
||
return keyBoardIsHide.value ? 0 + 'px' : parseInt(keyboardHeight.value) - parseInt(bottomHeight.value) + 'px';
|
||
});
|
||
const changeAppHeightBottom = (height) => {
|
||
//#ifdef APP-PLUS
|
||
// 获取系统信息
|
||
const systemInfo = uni.getSystemInfoSync();
|
||
// 计算安全区域底部高度
|
||
bottomHeight.value = systemInfo.screenHeight - systemInfo.safeArea.bottom + 'px';
|
||
// #endif
|
||
};
|
||
|
||
const deleteFolder = () => {
|
||
//#ifdef APP-PLUS
|
||
plus.io.resolveLocalFileSystemURL('_doc/pdf_view', function(entry) {
|
||
console.log('entry', entry);
|
||
entry.removeRecursively(function(res) {
|
||
console.log('删除成功');
|
||
});
|
||
});
|
||
// #endif
|
||
};
|
||
|
||
onUnload(() => {
|
||
watchFlag.value = 1;
|
||
});
|
||
defineExpose({
|
||
refreshData
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.index-dialog-page {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.top-bg {
|
||
background: linear-gradient(0deg, rgba(234, 246, 255, 0) 0%, #e6eafd 100%);
|
||
height: 480rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.bot-bg {
|
||
// background-color: #F6F8FF;
|
||
background: linear-gradient(136deg, rgba(234, 246, 255, 0) 0%, #fff 100%);
|
||
width: 100%;
|
||
flex: 1;
|
||
}
|
||
|
||
.index-dialog-body {
|
||
position: absolute;
|
||
overflow: hidden;
|
||
height: calc(100% - v-bind(totalBotHeight));
|
||
width: 100%;
|
||
padding: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
box-sizing: border-box;
|
||
padding-top: v-bind(pageTopPadding);
|
||
// padding-bottom: v-bind(bottomHeight);
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
|
||
.body-title {
|
||
height: 90rpx;
|
||
text-align: center;
|
||
font-size: 33rpx;
|
||
padding-top: 20rpx;
|
||
|
||
line-height: 46rpx;
|
||
box-sizing: border-box;
|
||
font-weight: 500;
|
||
color: #000;
|
||
position: relative;
|
||
|
||
// margin-bottom: 23rpx;
|
||
.arrow-icon {
|
||
position: absolute;
|
||
left: 36rpx;
|
||
top: 30rpx;
|
||
color: #000;
|
||
}
|
||
}
|
||
|
||
.seek-setting {
|
||
position: absolute;
|
||
z-index: 13;
|
||
right: 45rpx;
|
||
top: 8rpx;
|
||
font-size: 26rpx;
|
||
width: 140rpx;
|
||
height: 52rpx;
|
||
padding: 10rpx 0;
|
||
// overflow: hidden;
|
||
line-height: 32rpx;
|
||
text-align: right;
|
||
padding-right: 48rpx;
|
||
|
||
.more-list {
|
||
position: absolute;
|
||
top: 100%;
|
||
right: 0;
|
||
width: 100rpx;
|
||
text-align: center;
|
||
background-color: #fff;
|
||
border-radius: 12rpx;
|
||
padding: 16rpx 0;
|
||
display: none;
|
||
z-index: 21;
|
||
|
||
&.show {
|
||
display: block;
|
||
}
|
||
|
||
.more-item {
|
||
line-height: 60rpx;
|
||
font-size: 29rpx;
|
||
color: #333;
|
||
position: relative;
|
||
z-index: 22;
|
||
}
|
||
}
|
||
|
||
.image-icon {
|
||
width: 30rpx;
|
||
height: 32rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 10rpx;
|
||
}
|
||
|
||
.image-icon-new {
|
||
right: 50rpx;
|
||
width: 30rpx;
|
||
height: 32rpx;
|
||
position: absolute;
|
||
top: 10rpx;
|
||
}
|
||
}
|
||
|
||
.ai-info {
|
||
padding: 0 24rpx;
|
||
height: 250rpx;
|
||
overflow: hidden;
|
||
padding-top: 72rpx;
|
||
margin-bottom: 24rpx;
|
||
position: relative;
|
||
box-sizing: border-box;
|
||
|
||
.image-pet {
|
||
width: 230rpx;
|
||
// height: 235rpx;
|
||
position: absolute;
|
||
right: 24rpx;
|
||
top: -20rpx;
|
||
z-index: 2;
|
||
}
|
||
|
||
.image-pet-bg {
|
||
position: absolute;
|
||
padding: 0 24rpx;
|
||
box-sizing: border-box;
|
||
width: 100%;
|
||
height: 230rpx;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 2;
|
||
}
|
||
|
||
.ai-info-bg-box {
|
||
position: absolute;
|
||
z-index: 3;
|
||
left: 0;
|
||
top: 68rpx;
|
||
width: 100%;
|
||
// background-color: #ccc;
|
||
padding: 0 64rpx;
|
||
height: 178rpx;
|
||
|
||
.hello-text {
|
||
height: 54rpx;
|
||
line-height: 44rpx;
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.info-text {
|
||
height: 44rpx;
|
||
line-height: 44rpx;
|
||
font-size: 32rpx;
|
||
color: #000;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.info-btn {
|
||
width: 220rpx;
|
||
font-size: 29rpx;
|
||
height: 54rpx;
|
||
color: #fff;
|
||
background: linear-gradient(104deg, #5547f3 0%, #4e86f4 100%);
|
||
line-height: 54rpx;
|
||
text-align: center;
|
||
border-radius: 15rpx 15rpx 0 0;
|
||
position: absolute;
|
||
left: 68rpx;
|
||
bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.questions-view {
|
||
padding-left: 24rpx;
|
||
padding-right: 24rpx;
|
||
height: 184rpx;
|
||
box-sizing: border-box;
|
||
|
||
.question-row {
|
||
white-space: nowrap;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.question-item {
|
||
white-space: nowrap;
|
||
height: 66rpx;
|
||
line-height: 66rpx;
|
||
background-color: #fff;
|
||
border: 2rpx solid #e0dede;
|
||
padding: 0 16rpx;
|
||
border-radius: 11rpx;
|
||
margin-right: 16rpx;
|
||
display: inline-block;
|
||
font-size: 26rpx;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.router-list {
|
||
height: 84rpx;
|
||
padding: 20rpx 30rpx 0;
|
||
background-color: #fff;
|
||
border-radius: 15rpx 15rpx 0 0;
|
||
white-space: nowrap;
|
||
box-sizing: border-box;
|
||
|
||
.btns-item {
|
||
display: inline-block;
|
||
box-sizing: border-box;
|
||
height: 62rpx;
|
||
border: 2rpx solid #e0dede;
|
||
border-radius: 15rpx;
|
||
margin-right: 16rpx;
|
||
padding: 0 20rpx 0 64rpx;
|
||
line-height: 58rpx;
|
||
font-size: 29rpx;
|
||
position: relative;
|
||
|
||
.image-icon {
|
||
position: absolute;
|
||
width: 31rpx;
|
||
height: 31rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
left: 24rpx;
|
||
}
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.talking-list {
|
||
height: calc(100% - 514rpx);
|
||
padding: 12rpx 24rpx;
|
||
box-sizing: border-box;
|
||
|
||
.talking-scroll-list {
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
// .talking-list {
|
||
// height: calc(100% - 832rpx);
|
||
// padding: 12rpx 24rpx;
|
||
// box-sizing: border-box;
|
||
|
||
// .talking-scroll-list {
|
||
// height: 100%;
|
||
// }
|
||
// }
|
||
</style> |