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.
414 lines
7.7 KiB
414 lines
7.7 KiB
<!--作业列表-->
|
|
<template>
|
|
<view class="main_section">
|
|
|
|
<scroll-view class="section_3" scroll-y="true" :lower-threshold="lowerThreshold" @scrolltolower="loadMoreData"
|
|
style="height: 80vh;">
|
|
<view class="ul">
|
|
<view class="li" v-for="(v,k) in tableList" :key="k" @click="openViewWorkDetails(v)">
|
|
<view class="center_box">
|
|
<view>服务：{{v.service_name}}</view>
|
|
<view>时间：{{v.created_at}}</view>
|
|
<view>服务描述：{{v.description}}
|
|
</view>
|
|
</view>
|
|
<view class="right_box">
|
|
<view class="tag" v-if="v.status == 1" style="background:#1cd188;">已服务</view>
|
|
<view class="tag" v-else style="background:#1cd188;">待服务</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
|
|
|
|
<!-- 底部导航-->
|
|
<AQTabber />
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import AQTabber from "@/components/AQ/AQTabber.vue"
|
|
import apiRoute from '@/api/apiRoute.js';
|
|
|
|
export default {
|
|
components: {
|
|
AQTabber,
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false, //加载状态
|
|
lowerThreshold: 100, //距离底部多远触发
|
|
isReachedBottom: false, //防止重复加载|true=不可加载|false=可加载
|
|
|
|
//筛选条件
|
|
filteredData: {
|
|
page: 1, //当前页码
|
|
limit: 10, //每页返回数据条数
|
|
total: 10, //数据总条数
|
|
},
|
|
tableList: [], //数据列表
|
|
}
|
|
},
|
|
onLoad() {
|
|
|
|
},
|
|
onShow() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
async init(){
|
|
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 - 1) * this.filteredData.limit >= this.filteredData.total) {
|
|
this.loading = false
|
|
uni.showToast({
|
|
title: '暂无更多',
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
if (data.page == 1) {
|
|
this.tableList = []
|
|
}
|
|
|
|
let res = await apiRoute.getServiceList(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.filteredData.total = res.data.total
|
|
this.filteredData.page++
|
|
|
|
this.getData()
|
|
},
|
|
|
|
//跳转页面-作业详情
|
|
openViewWorkDetails(item) {
|
|
let id = item.id
|
|
this.$navigateTo({
|
|
url: `/pages/coach/my/service_detail?id=${id}`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.main_section {
|
|
min-height: 100vh;
|
|
background: #292929 100%;
|
|
padding: 0 24rpx;
|
|
padding-top: 40rpx;
|
|
padding-bottom: 150rpx;
|
|
font-size: 28rpx;
|
|
|
|
.section_3 {
|
|
margin-top: 36rpx;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
|
|
.title_box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.top_box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
text {
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
width: 90rpx;
|
|
height: 2px;
|
|
background: #29D3B4;
|
|
}
|
|
}
|
|
|
|
.ul {
|
|
margin-top: 30rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
|
|
.li {
|
|
position: relative;
|
|
border-radius: 22rpx;
|
|
background: #434544 100%;
|
|
padding: 14rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.left_box {
|
|
margin-left: 28rpx;
|
|
width: 146rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
|
|
.date_box {
|
|
display: flex;
|
|
font-size: 48rpx;
|
|
|
|
text:nth-child(1) {
|
|
color: #29D3B4;
|
|
}
|
|
}
|
|
|
|
.ratio {
|
|
color: #AAAAAA;
|
|
}
|
|
}
|
|
|
|
.center_box {
|
|
margin-left: 52rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.right_box {
|
|
.tag {
|
|
position: absolute;
|
|
top: 0rpx;
|
|
right: 0rpx;
|
|
padding: 10rpx;
|
|
width: 102rpx;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
border-bottom-left-radius: 20rpx;
|
|
border-top-right-radius: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 发布作业按钮样式
|
|
.publish-btn {
|
|
position: fixed;
|
|
bottom: 220rpx;
|
|
right: 40rpx;
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
background: #29D3B4;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4rpx 20rpx rgba(41, 211, 180, 0.4);
|
|
z-index: 99;
|
|
|
|
.btn-text {
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
// 弹窗内容样式
|
|
.popup-content {
|
|
width: 650rpx;
|
|
background: #333;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
|
|
.popup-title {
|
|
font-size: 36rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
margin-bottom: 30rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 20rpx;
|
|
|
|
.form-label {
|
|
display: block;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.form-input,
|
|
.form-textarea,
|
|
.form-picker {
|
|
width: 100%;
|
|
background: #444;
|
|
border-radius: 10rpx;
|
|
padding: 16rpx;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-textarea {
|
|
height: 150rpx;
|
|
}
|
|
|
|
.picker-text {
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
// 上传控件样式
|
|
.upload-container {
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.upload-btn {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
background: #444;
|
|
border-radius: 10rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px dashed #666;
|
|
|
|
.upload-icon {
|
|
font-size: 60rpx;
|
|
color: #29D3B4;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.upload-text {
|
|
font-size: 24rpx;
|
|
color: #aaa;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
|
|
// 图片预览
|
|
.image-preview {
|
|
position: relative;
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
|
|
.preview-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.delete-btn {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.delete-icon {
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 视频预览
|
|
.video-preview {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 300rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
|
|
.preview-video {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.delete-btn {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.delete-icon {
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 40rpx;
|
|
|
|
button {
|
|
width: 45%;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.btn-cancel {
|
|
background: #555;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-submit {
|
|
background: #29D3B4;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|