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.
320 lines
7.4 KiB
320 lines
7.4 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="item_box" v-for="(v,k) in tableList" :key="k">
|
|
<view class="time_section" v-if="v.create_time">{{v.create_time}}</view>
|
|
|
|
<view class="li" v-if="v.direction == `left`">
|
|
<view class="item left_item">
|
|
<view class="text_box">{{v.content}}</view>
|
|
</view>
|
|
<view class="item"></view>
|
|
</view>
|
|
|
|
<view class="li" v-if="v.direction == `right`">
|
|
<view class="item"></view>
|
|
<view class="item right_item">
|
|
<view class="text_box">{{v.content}}</view>
|
|
</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 commonApi from '@/api/common.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,//数据总条数
|
|
hair_staff_id: '',//发信人id
|
|
},
|
|
tableList:[],//聊天数据列表
|
|
|
|
formData: {
|
|
images_arr: [],
|
|
images: '',
|
|
content: '',
|
|
mailbox: '',
|
|
},
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.filteredData.hair_staff_id = options.hair_staff_id//发信人id
|
|
},
|
|
onShow(){
|
|
this.init()
|
|
},
|
|
//下拉刷新
|
|
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 commonApi.getContactMessage(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 方法 将新数据追加到数组中
|
|
this.tableList.unshift(...res.data.data); // 将新数据插入到数组头部
|
|
|
|
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>
|