智慧教务系统UniApp前端项目(使用中2025-0517)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

318 lines
7.2 KiB

<!--聊天记录-列表-->
<template>
<view class="main_box">
<view class="main_section">
<scroll-view
class="section_1"
scroll-y="true"
:lower-threshold="lowerThreshold"
@scrolltolower="loadMoreData"
style="height: 80vh;"
>
<view class="ul">
<view class="time_section">2024-05-15</view>
<view class="li">
<view class="item left_item">
<view class="text_box">你好,aaaaaaaaaaaaaaaaaaaaaaaaa1111111111111111111@@@@@@@@@@@@@@@@@</view>
</view>
<view class="item"></view>
</view>
<view class="li">
<view class="item left_item">
<view class="text_box">你好,是呢么时间可以到课是呢么时间可以到课是呢么时间可以到课</view>
</view>
<view class="item"></view>
</view>
<view class="li">
<view class="item"></view>
<view class="item right_item">
<view class="text_box">间可以到课</view>
</view>
</view>
</view>
</scroll-view>
</view>
<view class="input_section">
<view class="left_box">
<input class="input" type="text" placeholder="请输入">
</view>
<view class="right_box">
<image class="send_img" src="@/static/images/common/fa_song.png"></image>
</view>
</view>
</view>
</template>
<script>
import memberApi from '@/api/member.js';
import AQUplodeImgMulti from '@/components/AQ/AQUplodeImgMulti';
import AQTabber from "@/components/AQ/AQTabber"
export default {
components: {
AQTabber,
AQUplodeImgMulti,
},
data() {
return {
loading:false,//加载状态
lowerThreshold: 100,//距离底部多远触发
isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载
//筛选条件
filteredData:{
page:1,//当前页码
limit:10,//每页返回数据条数
total:10,//数据总条数
status: '',//1=未提交,2=已提交,3=已批改
},
formData: {
images_arr: [],
images: '',
content: '',
mailbox: '',
},
}
},
onLoad() {
},
//下拉刷新
async onPullDownRefresh() {
//加载更多(下一页)
await this.loadMoreData()
},
methods: {
//初始化
async init(){
await this.getList();
},
//加载更多(下一页)
loadMoreData() {
//判断是否加载
if (!this.isReachedBottom) {
this.isReachedBottom = true;//设置为不可请求状态
this.getList();
}
},
//重置为第一页
async resetFilteredData() {
this.isReachedBottom = false; // 重置状态,以便下次触发加载更多
this.filteredData.page = 1//当前页码
this.filteredData.limit = 10//每页返回数据条数
this.filteredData.total = 10//数据总条数
},
//获取作业列表
async getList(){
this.loading = true
let data = {...this.filteredData}
//判断是否还有数据
if(this.filteredData.page * this.filteredData.limit > this.filteredData.total){
this.loading = false
uni.showToast({
title: '暂无更多',
icon: 'none'
})
return
}
if(data.page == 1){
this.tableList = []
}
let res = await memberApi.assignmentsList(data)
this.loading = false
this.isReachedBottom = false;
if (res.code != 1){
uni.showToast({
title: res.msg,
icon: 'none'
})
return
}
this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中
console.log('列表',this.tableList)
this.filteredData.total = res.data.total
this.filteredData.page++
},
//######AQ上传文件组件相关######
// 上传文件回调
AQUploadSuccess(res) {
console.log('接收AQ上传回调xxx1', res)
// 使用 split 方法分割字符串
let _inputValue = []
if (res.filePathArr.length) {
_inputValue = res.filePathArr
}
this.formData[res.inputName] = _inputValue
// console.log('接收AQ上传回调xxx1',res)
// console.log('接收AQ上传回调xxx2',this.formData.member_store_certification_arr)
},
async submitForm() {
let data = {...this.formData}
data.images = data.images_arr.join(',')
if (!data.content) {
//反馈内容为必填项
uni.showToast({
title: '反馈内容为必填项',
icon: 'none'
})
return
}
let res = await memberApi.setFeedback(data)
if (res.code != 1) {
uni.showToast({
title: res.msg,
icon: 'none'
})
} else {
uni.showToast({
title: '提交成功',
icon: 'none'
})
//延迟1s执行
setTimeout(() => {
this.$util.openHomeView();
}, 1000);
}
},
}
}
</script>
<style lang="less" scoped>
.main_box {
background: #292929;
}
//自定义导航栏
.navbar_section {
display: flex;
justify-content: center;
align-items: center;
background: #29d3b4;
.title {
padding: 20rpx 0;
font-size: 30rpx;
color: #315d55;
}
}
.main_section {
min-height: 100vh;
background: #292929 100%;
padding: 0 0rpx;
padding-top: 32rpx;
padding-bottom: 150rpx;
font-size: 28rpx;
display: flex;
flex-direction: column;
gap: 20rpx;
.section {
background-color: #434544;
padding: 40rpx 40rpx;
}
.section_1{
color: #FFFFFF;
font-size: 28rpx;
padding: 0 24rpx;
display: flex;
flex-direction: column;
gap: 40rpx;
.ul{
.time_section{
text-align: center;
font-size: 28rpx;
color: #989898;
}
.li{
margin: 40rpx 0;
display: flex;
justify-content: space-between;
.item{
max-width: 70%;
padding: 32rpx;
border-radius: 32rpx;
word-wrap: break-word; /* 允许长单词或 URL 换行 */
word-break: break-all; /* 强制所有字符换行 */
.text_box{}
}
.left_item{
background-color: #f4f6f9;
color: #343434;
}
.right_item{
background-color: #1684fc;
color: #fff;
}
}
}
}
}
//输入框板块
.input_section{
width: 100%;
position: fixed;
bottom: 0;
padding: 50rpx 50rpx;
display: flex;
justify-content:space-between;
align-items: center;
.left_box{
width: 70%;
.input{
background-color: #f4f6f9;
height: 88rpx;
padding: 28rpx;
font-size: 28rpx;
border-radius: 32rpx;
width: 532rpx;
color: #292929;
font-size: 28rpx;
}
}
.right_box{
border-radius: 50%;
background-color: #a2cefe;
width: 88rpx;
height: 88rpx;
display: flex;
justify-content: center;
align-items: center;
.send_img{
width: 36rpx;
height: 36rpx;
}
}
}
.describe {
color: #999999;
padding-left: 30rpx;
}
</style>