feat：ai伴学的未报名已报名完善央视修改，投诉功能完善，ai助手bug修改，
This commit is contained in:
小张
parent
8e146666f7
commit
b3ed88602f
@ -126,8 +126,8 @@
|
||||
|
||||
<!-- 课程描述 -->
|
||||
<div class="course-description">
|
||||
<div>本课程中的部分图片、音频和视频素材来源于网络，仅供教学使用。如有问题，请点击 <span>这里</span> 反馈</div>
|
||||
<span>稿件投诉</span>
|
||||
<div>本课程中的部分图片、音频和视频素材来源于网络，仅供教学使用。如有问题，请点击 <span @click="openComplaintModal('feedback')">这里</span> 反馈</div>
|
||||
<span @click="openComplaintModal('complaint')">稿件投诉</span>
|
||||
</div>
|
||||
|
||||
|
||||
@ -696,10 +696,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="ai-assistant-interface">
|
||||
<div class="banner-button">
|
||||
<!-- <div class="banner-button">
|
||||
<img src="/images/aiCompanion/切换@2x.png" alt="切换" class="button-icon-image">
|
||||
<span class="button-text">普通</span>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
|
||||
<!-- AI主要内容区域 -->
|
||||
@ -966,6 +966,59 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 投诉/反馈弹窗 -->
|
||||
<n-modal v-model:show="complaintModalVisible" style="width: 600px;">
|
||||
<div class="complaint-modal">
|
||||
<!-- 自定义标题 -->
|
||||
<div class="complaint-modal-header">
|
||||
<div class="complaint-modal-title">投诉/反馈</div>
|
||||
<div class="complaint-modal-divider"></div>
|
||||
</div>
|
||||
|
||||
<div class="complaint-modal-content">
|
||||
<!-- 投诉内容 -->
|
||||
<div class="complaint-section">
|
||||
<div class="complaint-label">投诉内容：</div>
|
||||
<div class="complaint-input-wrapper">
|
||||
<n-input
|
||||
v-model:value="complaintContent"
|
||||
type="textarea"
|
||||
placeholder="请输入您想要投诉或反馈的内容"
|
||||
:rows="8"
|
||||
:maxlength="500"
|
||||
show-count
|
||||
class="complaint-textarea"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 上传图片 -->
|
||||
<div class="upload-section">
|
||||
<div class="upload-label">上传图片：</div>
|
||||
<div class="upload-wrapper">
|
||||
<n-upload
|
||||
v-model:file-list="uploadFileList"
|
||||
:max="5"
|
||||
list-type="image-card"
|
||||
accept="image/*"
|
||||
:custom-request="handleUpload"
|
||||
>
|
||||
<div class="upload-area">
|
||||
<div class="upload-plus">+</div>
|
||||
</div>
|
||||
</n-upload>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="modal-actions">
|
||||
<n-button @click="cancelComplaint" class="cancel-btn">取消</n-button>
|
||||
<n-button type="primary" @click="submitComplaint" class="submit-btn">提交</n-button>
|
||||
</div>
|
||||
</div>
|
||||
</n-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -1935,6 +1988,63 @@ const notesList = ref([
|
||||
])
|
||||
const editingNoteIndex = ref(-1)
|
||||
|
||||
// 投诉/反馈弹窗相关状态
|
||||
const complaintModalVisible = ref(false)
|
||||
const complaintContent = ref('')
|
||||
const complaintType = ref<'feedback' | 'complaint'>('feedback')
|
||||
const uploadFileList = ref([])
|
||||
|
||||
// 打开投诉弹窗
|
||||
const openComplaintModal = (type: 'feedback' | 'complaint') => {
|
||||
complaintType.value = type
|
||||
complaintModalVisible.value = true
|
||||
complaintContent.value = ''
|
||||
uploadFileList.value = []
|
||||
}
|
||||
|
||||
// 取消投诉
|
||||
const cancelComplaint = () => {
|
||||
complaintModalVisible.value = false
|
||||
complaintContent.value = ''
|
||||
uploadFileList.value = []
|
||||
}
|
||||
|
||||
// 提交投诉
|
||||
const submitComplaint = async () => {
|
||||
if (!complaintContent.value.trim()) {
|
||||
message.warning('请输入投诉内容')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
// 这里可以调用API提交投诉
|
||||
console.log('提交投诉:', {
|
||||
type: complaintType.value,
|
||||
content: complaintContent.value,
|
||||
files: uploadFileList.value
|
||||
})
|
||||
|
||||
message.success('提交成功，我们会尽快处理您的反馈')
|
||||
complaintModalVisible.value = false
|
||||
complaintContent.value = ''
|
||||
uploadFileList.value = []
|
||||
} catch (error) {
|
||||
console.error('提交投诉失败:', error)
|
||||
message.error('提交失败，请稍后重试')
|
||||
}
|
||||
}
|
||||
|
||||
// 处理文件上传
|
||||
const handleUpload = ({ file, onFinish, onError }: any) => {
|
||||
// 这里可以实现真实的文件上传逻辑
|
||||
console.log('上传文件:', file)
|
||||
|
||||
// 模拟上传成功
|
||||
setTimeout(() => {
|
||||
onFinish()
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
// 发送聊天消息
|
||||
const sendMessage = () => {
|
||||
if (chatMessage.value.trim()) {
|
||||
@ -2097,9 +2207,10 @@ onActivated(() => {
|
||||
}
|
||||
|
||||
.container {
|
||||
/* max-width: 1400px; */
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
padding-left: 120px;
|
||||
padding-right: 120px;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
@ -2126,7 +2237,7 @@ onActivated(() => {
|
||||
|
||||
.course-content {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
gap: 32px;
|
||||
width: 100%;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
@ -4109,7 +4220,8 @@ onActivated(() => {
|
||||
/* AI助手界面样式 */
|
||||
.ai-assistant-interface {
|
||||
position: relative;
|
||||
min-width: 360px;
|
||||
width: 360px; /* 固定宽度，不再自适应 */
|
||||
flex-shrink: 0; /* 防止收缩 */
|
||||
/* background: white; */
|
||||
padding-top: 12px;
|
||||
margin-top: 30px;
|
||||
@ -5023,10 +5135,29 @@ onActivated(() => {
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
/* 大屏幕 - 使用120px左右边距 */
|
||||
@media (min-width: 1400px) {
|
||||
.container {
|
||||
padding-left: 120px;
|
||||
padding-right: 120px;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.course-content {
|
||||
gap: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1399px) and (min-width: 1200px) {
|
||||
.container {
|
||||
padding: 0 24px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.course-content {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
@ -5038,6 +5169,7 @@ onActivated(() => {
|
||||
.container {
|
||||
padding: 0 20px;
|
||||
max-width: 992px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.course-content {
|
||||
@ -5054,6 +5186,7 @@ onActivated(() => {
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
max-width: 768px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.course-content {
|
||||
@ -5070,6 +5203,7 @@ onActivated(() => {
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
max-width: 576px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.course-content {
|
||||
@ -5091,6 +5225,7 @@ onActivated(() => {
|
||||
.container {
|
||||
padding: 0 16px;
|
||||
max-width: 576px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.video-player.unregistered {
|
||||
@ -5355,6 +5490,8 @@ onActivated(() => {
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 0 12px;
|
||||
margin: 0 auto;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.video-player.unregistered {
|
||||
@ -5413,6 +5550,8 @@ onActivated(() => {
|
||||
@media (max-width: 360px) {
|
||||
.container {
|
||||
padding: 0 8px;
|
||||
margin: 0 auto;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
.video-player.unregistered {
|
||||
@ -5599,7 +5738,7 @@ onActivated(() => {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-size: 16px; /* 调整字体大小从12px到16px */
|
||||
color: #666;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s ease;
|
||||
@ -6189,4 +6328,167 @@ onActivated(() => {
|
||||
.no-comments {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 投诉/反馈弹窗样式 */
|
||||
.complaint-modal {
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.complaint-modal-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.complaint-modal-title {
|
||||
width: 72px;
|
||||
height: 22px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 22px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.complaint-modal-divider {
|
||||
width: 506px;
|
||||
height: 1px;
|
||||
background: #E6E6E6;
|
||||
}
|
||||
|
||||
.complaint-modal-content {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.complaint-section {
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.complaint-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-right: 16px;
|
||||
white-space: nowrap;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.complaint-input-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.complaint-textarea {
|
||||
width: 428px;
|
||||
height: 214px;
|
||||
background: #F5F8FB;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.upload-section {
|
||||
display: flex;
|
||||
margin-bottom: 24px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.upload-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
margin-right: 16px;
|
||||
white-space: nowrap;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.upload-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: white;
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.upload-area:hover {
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
.upload-plus {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.upload-plus::before,
|
||||
.upload-plus::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: #666666;
|
||||
}
|
||||
|
||||
.upload-plus::before {
|
||||
width: 10px;
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.upload-plus::after {
|
||||
width: 1px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding-top: 24px;
|
||||
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: #f5f5f5;
|
||||
border: 1px solid #d9d9d9;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.cancel-btn:hover {
|
||||
background: #e6f7ff;
|
||||
border-color: #40a9ff;
|
||||
color: #40a9ff;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
background: #1890ff;
|
||||
border: 1px solid #1890ff;
|
||||
}
|
||||
|
||||
.submit-btn:hover {
|
||||
background: #40a9ff;
|
||||
border-color: #40a9ff;
|
||||
}
|
||||
|
||||
/* 课程描述中的可点击元素样式 */
|
||||
.course-description span {
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.course-description span:hover {
|
||||
color: #40a9ff;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user