fix: 修复留言不能跳转的问题
This commit is contained in:
Shu Guang
parent
779948ec47
commit
b2ab2348d7
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div class="comment-container">
|
||||
<div class="background-wrapper"></div>
|
||||
|
||||
<div class="content-wrapper">
|
||||
<div class="barrage-box">
|
||||
<vue-baberrage
|
||||
@ -123,13 +122,14 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.getCommentList();
|
||||
// 定时刷新弹幕列表
|
||||
setInterval(() => {
|
||||
this.timer = setInterval(() => {
|
||||
this.getCommentList();
|
||||
}, 30000);
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@ -140,6 +140,11 @@ export default {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.background-wrapper {
|
||||
@ -148,15 +153,7 @@ export default {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.3;
|
||||
filter: blur(5px);
|
||||
}
|
||||
z-index: -1;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
@ -176,24 +173,28 @@ export default {
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
// height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
pointer-events: none;
|
||||
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.barrage-box {
|
||||
width: 100vw;
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
margin-bottom: 30px;
|
||||
position: relative;
|
||||
|
||||
.barrage-component {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -201,6 +202,8 @@ export default {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.comment-input {
|
||||
/deep/ .el-input-group__prepend {
|
||||
@ -224,7 +227,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
// 响应式适配
|
||||
@media screen and (max-width: 768px) {
|
||||
.input-box {
|
||||
padding: 10px;
|
||||
|
||||
@ -1,15 +1,30 @@
|
||||
<template>
|
||||
<div class="chat-container">
|
||||
<h2 style="text-align: center;color:deepskyblue;">llama3 智能推荐 </h2>
|
||||
<el-card class="chat" style="margin-top:10px;height: 80vh;border-radius: 15px;border-color: #ccc;">
|
||||
<h2 style="text-align: center; color: deepskyblue">DeepSeek 智能推荐</h2>
|
||||
<el-card
|
||||
class="chat"
|
||||
style="
|
||||
margin-top: 10px;
|
||||
height: 80vh;
|
||||
border-radius: 15px;
|
||||
border-color: #ccc;
|
||||
"
|
||||
>
|
||||
<el-card class="main_chat">
|
||||
<div v-for="item in messages" :key="message.id" class="message">
|
||||
<div v-if="item.inputMessage!=null&&item.inputMessage!==''" class="user-message">
|
||||
<div
|
||||
v-if="item.inputMessage != null && item.inputMessage !== ''"
|
||||
class="user-message"
|
||||
>
|
||||
{{ item.inputMessage }}
|
||||
</div>
|
||||
<div v-if="item.aiResult!=null&&item.aiResult!==''" class="bot-message">{{ item.aiResult }}</div>
|
||||
<div
|
||||
v-if="item.aiResult != null && item.aiResult !== ''"
|
||||
class="bot-message"
|
||||
>
|
||||
{{ item.aiResult }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</el-card>
|
||||
<el-input
|
||||
placeholder="请输入内容，例如：我喜欢动物类的书籍，请给我推荐"
|
||||
@ -24,8 +39,7 @@
|
||||
@click="sendMessage"
|
||||
:disabled="loading"
|
||||
></el-button>
|
||||
</el-input
|
||||
>
|
||||
</el-input>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
@ -39,10 +53,10 @@ export default {
|
||||
message: {
|
||||
inputMessage: "",
|
||||
aiResult: "",
|
||||
userId: null
|
||||
userId: null,
|
||||
},
|
||||
loading: false
|
||||
}
|
||||
loading: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
@ -54,14 +68,14 @@ export default {
|
||||
if (this.inputMessage.trim() === "") {
|
||||
return this.$message.info({
|
||||
message: "文本不能为空",
|
||||
duration: 1500
|
||||
})
|
||||
duration: 1500,
|
||||
});
|
||||
}
|
||||
// 先判断文本内容是否为空或者是无意义的数字，如果是提示用户信息
|
||||
if (/[\da-zA-Z]/.test(this.inputMessage)) {
|
||||
this.$message.info({
|
||||
message: "请不要输入无意义的内容",
|
||||
duration: 1000
|
||||
duration: 1000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
@ -70,7 +84,7 @@ export default {
|
||||
this.messages.push({
|
||||
id: Date.now(),
|
||||
inputMessage: this.inputMessage,
|
||||
userId: parseInt(userId)
|
||||
userId: parseInt(userId),
|
||||
});
|
||||
// 这里可以是调用 GPT API 的逻辑
|
||||
this.message.inputMessage = this.inputMessage.trim();
|
||||
@ -80,9 +94,12 @@ export default {
|
||||
this.loading = true;
|
||||
this.$message.info({
|
||||
message: "文本输入越长，接口调用时间越长，请耐心等待10秒左右",
|
||||
duration:2500
|
||||
})
|
||||
const {data: res} = await this.$http.post("user/ai_intelligent", this.message)
|
||||
duration: 2500,
|
||||
});
|
||||
const { data: res } = await this.$http.post(
|
||||
"user/ai_intelligent",
|
||||
this.message
|
||||
);
|
||||
|
||||
if (res.status !== 200) {
|
||||
this.loading = false;
|
||||
@ -90,15 +107,14 @@ export default {
|
||||
}
|
||||
this.$message.success({
|
||||
message: res.msg,
|
||||
duration: 1500
|
||||
})
|
||||
duration: 1500,
|
||||
});
|
||||
this.messages.push({
|
||||
id: Date.now(),
|
||||
aiResult: res.data,
|
||||
userId: userId
|
||||
userId: userId,
|
||||
});
|
||||
this.loading = false;
|
||||
|
||||
}
|
||||
},
|
||||
/**
|
||||
@ -107,26 +123,28 @@ export default {
|
||||
*/
|
||||
async getHistoryRecords() {
|
||||
var userId = window.sessionStorage.getItem("userId");
|
||||
const {data: res} = await this.$http.get("user/ai_list_information/" + userId)
|
||||
const { data: res } = await this.$http.get(
|
||||
"user/ai_list_information/" + userId
|
||||
);
|
||||
if (res.status !== 200) {
|
||||
return this.$message.error(res.msg)
|
||||
return this.$message.error(res.msg);
|
||||
}
|
||||
this.$message.success({
|
||||
message: res.msg,
|
||||
duration: 1500
|
||||
})
|
||||
duration: 1500,
|
||||
});
|
||||
res.data.forEach((item) => {
|
||||
this.messages.push(item);
|
||||
})
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getHistoryRecords();
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang='less'>
|
||||
<style scoped lang="less">
|
||||
//.chat-container {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
@ -136,7 +154,8 @@ export default {
|
||||
margin-bottom: 10px;
|
||||
height: 70vh;
|
||||
background-size: cover;
|
||||
background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211243632.jpg) no-repeat 0px 0px;
|
||||
background: url(https://xxx.xiaobaitiao.icu/img/icu/202312211243632.jpg)
|
||||
no-repeat 0px 0px;
|
||||
border-radius: 10px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@ -155,7 +174,6 @@ export default {
|
||||
align-self: flex-end;
|
||||
text-align: right;
|
||||
margin-top: 10px;
|
||||
|
||||
}
|
||||
|
||||
.bot-message {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user