Files
taimed/pages/articleList/index.vue
chenghuan 0e900d19be feat: 集成edu-core模块并重构课程详情页视频播放
- 添加edu-core本地依赖,用于视频播放组件
- 重构课程详情页,使用CourseVideo组件替换原有视频播放逻辑
- 优化课程列表页布局和样式,修复边框单位问题
- 更新manifest.json支持多方向屏幕旋转
2026-02-09 10:29:59 +08:00

822 lines
20 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view class="content" style="background-color: #d8e6ff57">
<z-nav-bar title="我的文章" bgColor="#5188e5" fontColor="#fff">
<template v-slot:right>
<view class="top_right" @tap="createFolder">
<uni-icons type="folder-add" size="17" color="#fff"></uni-icons>
<text>发布文章</text>
</view>
</template>
</z-nav-bar>
<view class="doctors_module" :style="`top: ${42 + statusBarHeight}px;`">
<view class="cateList flexbox" style="background-color: #f8f7fc">
<common-sticky
itemStyle="width:50%; height: 38px;font-size:24rpx;"
:list="tabsList"
label="title"
:currentCateIndex="currentCateIndex"
@handleselectCate="ordersTabCLi"
></common-sticky>
</view>
</view>
<scroll-view
scroll-y="true"
:scroll-top="scrollTop"
@scrolltolower="loadMore"
style="
height: calc(100vh - 180rpx);
margin-top: 65rpx;
padding-bottom: 120rpx;
"
v-if="show == true"
>
<view class="doctors_list" id="top">
<view
class="doctors_item"
v-for="(item, index) in list"
:key="index"
@click="goToDetail(item)"
>
<view class="flex">
<view class="flex">
<!-- <image
v-if="item.squareImage"
:src="item.squareImage"
class="item_image"
mode="aspectFit"
></image>
<image
v-else
src="../../static/logo_zi.png"
class="item_image"
mode="aspectFit"
></image> -->
<view class="item_right">
<view class="item_top">
<PrecisionImageGrid
:imageList="item.fileList1"
style="
width: 170rpx;
height: 170rpx;
/* position: absolute;
top: 0;
left: 0; */
"
/>
<view class="right">
<view class="item_name hidden2">{{ item.title }}</view>
<view class="item_time"
><text
style="margin-right: 30rpx; color: #e38d54"
v-if="item.come == 1"
>医案同步</text
><text style="letter-spacing: 1rpx">{{
item.createTime ? item.createTime : ""
}}</text></view
>
<view class="item_time item_bottom">
<view class="left">
<view
><text>{{ item.readCount ? item.readCount : 0 }}</text
>阅读</view
><text class="drop">·</text>
<view
><text>{{ item.likeCount ? item.likeCount : 0 }}</text
>点赞</view
><text class="drop">·</text>
<view
><text>{{
item.commentCount ? item.commentCount : 0
}}</text
>评论</view
></view
>
<view v-if="item.showFlag != 0"
class="operate"
@click.stop="handleMore(item)"
style="
line-height: 10rpx;
font-size: 38rpx;
margin-top: -20rpx;
"
>
...
</view>
<view v-else
class="operate"
@click.stop="selectArticleId = item.id;showDel=true"
style="
line-height: 10rpx;
font-size: 38rpx;
/* margin-top: -20rpx; */
"
>
<uni-icons
type="trash-filled"
size="22"
color="#aa3629"
></uni-icons
>
</view>
<!-- <view style="color: #5188e5"
><uni-icons
type="redo-filled"
size="18"
color="#5188e5"
></uni-icons
>分享</view
> -->
</view>
</view>
</view>
<!-- <view class="list_item_bt">
<text class="list_item_study" v-if="taihumedId == 0"
>编辑文章</text
>
<text class="list_item_study" v-else>文章详情</text>
</view> -->
<!-- <text class="item_con">{{ item.taihuTalent.map(talent => talent.name).join(' ') }}</text> -->
</view>
</view>
</view>
</view>
</view>
<text v-show="showText && count > list.length" class="show-more"
>加载更多</text
>
<text v-show="noMore" class="no-more">没有更多了</text>
</scroll-view>
<text class="null_text" v-else>{{ null_text }}</text>
<z-navigation></z-navigation>
<u-action-sheet
:actions="operateList"
:title="title"
@select="selectClick"
:show="showOperate"
@close="showOperate = false"
safeAreaInsetBottom
cancelText="取消"
round="8"
></u-action-sheet>
<u-modal
:show="showDel"
@confirm="confirmDel"
@cancel="showDel = false"
ref="uModalDel"
:asyncClose="true"
:showCancelButton="true"
confirmText="删除"
confirmColor="#aa3629"
title="提示"
>
<view class="slot-content"> 您确定要删除该文章吗 </view>
</u-modal>
</view>
</template>
<script>
import $http from "@/config/requestConfig.js";
import PrecisionImageGrid from "./PrecisionImageGrid.vue";
import { debounce, throttle } from "@/common/debounce.js";
export default {
components: { PrecisionImageGrid },
data() {
return {
selectArticleId: null,
showDel: false, // 控制弹窗显示隐藏
showOperate: false, // 控制弹窗显示隐藏
operateList: [],
tabsList: [],
currentCateIndex: 0,
list: [],
null_text: "",
current: 1,
limit: 10,
courseName: "",
taihumedId: null,
statusTitle: "",
statusColor: "",
timer: null,
showText: false,
noMore: false,
show: null,
count: 0,
scrollTop: 0, //滚动位置
isRefreshing: false, //刷新状态
};
},
onPullDownRefresh() {
this.isRefreshing = true;
console.log("下拉刷新");
setTimeout(() => {
this.current = 1;
this.list = [];
this.noMore = false;
this.getListData(this.tabsList[this.currentCateIndex].id);
uni.stopPullDownRefresh();
this.isRefreshing = false;
console.log("下拉刷新已停止");
}, 800);
},
onLoad() {
uni.hideTabBar();
this.getTabData();
},
onShow() {
// this.getListData(this.taihumedId);
},
methods: {
confirmDel: throttle(function () {
this.delArticle();
}, 2000),
refreshData(reset) {
this.current = 1;
this.list = [];
this.noMore = false;
if (reset) {
this.currentCateIndex = 0;
this.courseName = "";
this.taihumedId = this.tabsList[this.currentCateIndex].id;
this.statusTitle = this.tabsList[this.currentCateIndex].statusTitle;
this.statusColor = this.tabsList[this.currentCateIndex].color;
//重置
this.list = [];
this.noMore = false;
this.show = false;
this.count = 0;
this.current = 1;
this.getListData(this.taihumedId);
} else {
this.getListData(this.taihumedId);
}
},
selectClick(e) {
console.log(e.name);
if (e.name == "删除文章") {
this.showDel=true;
} else {
uni.navigateTo({
url: `/pages/articleList/article?navTitle=文章详情&title=文章详情&id=${this.selectArticleId}&type=detail&statusId=1&open=${e.name}`,
});
}
},
handleMore(item) {
// uni.showActionSheet({
// itemList: ['选项1', '选项2', '选项3'],
// success: (res) => {
// console.log('点击了:', res.tapIndex);
// },
// fail: (err) => {
// console.log('调用失败', err);
// }
// })
var list = [];
if (item.showFlag != 0) {
list = [
// {
// name: "查看评论",
// fontSize: "16",
// },
{
name: "分享文章",
fontSize: "16",
}
];
}
// if (item.come == 1) {
// this.operateList = list;
// } else {
this.operateList = [
...list,
{
name: "删除文章",
color: "#aa3629",
fontSize: "16",
},
];
// }
this.selectArticleId = item.id;
this.showOperate = true;
// this.$refs.commentLikePopup.showCommentPopup();
},
getGridColumns(length) {
if (length === 1) return "1fr"; // 1 张图 → 1 列
if (length === 2) return "repeat(2, 1fr)"; // 2 张图 → 2 列
if (length === 3) return "repeat(3, 1fr)"; // 3 张图 → 3 列
if (length === 4) return "repeat(2, 1fr)"; // 4 张图 → 2 列(类似朋友圈)
return "repeat(3, 1fr)"; // 其他数量 → 3 列
},
// 预览图片
previewImage(idx) {
uni.previewImage({
current: idx,
urls: this.imgList,
});
},
createFolder() {
uni.navigateTo({
url: `/pages/articleList/articleAdd?navTitle=文章&title=文章&type=add`,
});
},
//判断显示‘上/中/下’
formatContent(content) {
const keywords = ["上部", "中部", "下部"];
let result = [];
// 判断是否包含关键字
keywords.forEach((keyword) => {
if (content.includes(keyword)) {
result.push(keyword.substring(0, 1));
}
});
return result.join("");
},
//获取tab数据
getTabData() {
// this.$http.request({
// url: 'taihumed/course/getCourseTaihumedList',
// method: "POST",
// data: {},
// header: {
// "Content-Type": "application/json",
// },
// })
// .then(res=> {
// if (res.list&&res.list.length>0) {
this.tabsList = [
{ id: 1, title: "已发布", statusTitle: "" },
{ id: 0, title: "发布失败", statusTitle: "发布失败", color: "#f59442" },
];
this.taihumedId = this.tabsList[0].id;
this.statusTitle = "";
this.statusColor = "";
this.getListData(this.taihumedId);
// }
// });
},
//获取列表数据
delArticle() {
var that = this;
this.showDel=false;
uni.showLoading({
title: "加载中",
});
this.$http
.request({
url: "common/taihuTalentArticle/delArticle",
method: "POST",
data: {
id: this.selectArticleId,
},
header: {
"Content-Type": "application/json",
},
})
.then((res) => {
uni.hideLoading();
if (res.code == 0) {
uni.showToast({
title: "删除成功",
icon: "success",
duration: 2000,
});
this.$nextTick(() => {
this.list = this.list.filter((e) => {
return e.id != this.selectArticleId;
});
this.count = this.list.length;
});
}else {
this.showDel=false
uni.showToast({
title: "删除失败",
icon: "success",
duration: 2000,
});
}
});
},
getListData(taihumedId, type) {
console.log("taihumedId at line 344:", taihumedId);
if (type) {
this.current = 1;
this.list = [];
this.noMore = false;
}
if (this.noMore) {
return false;
}
if (this.current == 1) {
this.list = [];
}
uni.showLoading({
title: "加载中",
});
this.$http
.request({
url: "common/taihuTalentArticle/myArticleList",
method: "POST",
data: {
current: this.current,
limit: this.limit,
showFlag: taihumedId,
},
header: {
"Content-Type": "application/json",
},
})
.then((res) => {
uni.hideLoading();
this.count = res.page.total; //总数
let length = res.page.records.length;
if (res.page.records && length > 0) {
this.show = true;
//如果返回的数据少于每页数量,表示没有更多数据
if (
this.count == length ||
length < this.limit ||
this.count / this.current == this.limit
) {
this.noMore = true;
}
if (this.current == 1) {
this.list = [
...res.page.records.map((e) => {
return {
...e,
fileList1: e.img ? e.img.split(",") : [],
};
}),
];
} else {
this.list = [
...this.list,
...res.page.records.map((e) => {
return {
...e,
fileList1: e.img ? e.img.split(",") : [],
};
}),
];
}
this.current += 1; //更新页码
//显示提示语
this.showText = true;
if (this.current == 2 || type) {
this.scrollTop = 0;
this.$nextTick(() => {
this.scrollTop = 0.1; // 确保触发滚动
});
}
} else {
this.show = false;
this.null_text = "暂无数据";
}
});
},
//加载更多
loadMore() {
this.getListData(this.taihumedId);
},
//切换tab状态
ordersTabCLi(data, index) {
this.currentCateIndex = index;
this.courseName = "";
this.taihumedId = data.id;
this.statusTitle = data.statusTitle;
this.statusColor = data.color;
//重置
this.list = [];
this.noMore = false;
this.show = false;
this.count = 0;
this.current = 1;
this.getListData(this.taihumedId);
},
//详情
goToDetail(item) {
if (this.isRefreshing) return;
var navTitle = "";
var type = "";
switch (this.taihumedId) {
case 0:
navTitle = "文章详情";
type = "detail";
break;
case 1:
navTitle = "文章详情";
type = "detail";
break;
}
uni.navigateTo({
url: `/pages/articleList/article?navTitle=${navTitle}&title=${navTitle}&id=${item.id}&type=${type}&statusId=${this.taihumedId}`,
});
},
},
};
</script>
<style lang="scss" scoped>
@import "@/static/mixin.scss";
.content {
height: 100%;
overflow: auto;
background-color: #fff !important;
}
.doctors_list {
margin: 0 30rpx 30rpx;
}
.doctors_item {
// border: 1rpx solid $themeColor;
// border-radius: 15rpx;
// margin-bottom: 20rpx;
padding: 30rpx 0;
box-sizing: border-box;
display: flex;
align-items: center;
position: relative;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
// background-color: #fff;
// box-shadow: 0 1px 8px #e3e1e1;
}
.item_image {
display: block;
width: 120rpx;
height: 120rpx;
flex-shrink: 0;
background: #f3f3f3;
}
.item_right {
width: calc(100%);
// margin-left: 30rpx;
// padding-bottom: 20rpx;
}
.item_time {
color: #8e8d93;
margin-top: 14rpx;
line-height: 30rpx;
}
.item_top {
display: flex;
align-items: center;
justify-content: space-between;
// line-height: 30rpx;
// margin-top: 8rpx;
}
.right {
width: calc(100% - 186rpx);
}
.item_name {
font-size: 32rpx;
line-height: 26rpx;
white-space: pre-wrap;
word-wrap: break-word; /* 避免长单词造成溢出 */
color: #1b1b1d;
font-weight: bold;
margin-bottom: 12rpx;
}
.item_content {
h1 {
font-size: 28rpx;
line-height: 30px;
}
}
.item_title {
font-size: 32rpx;
color: #333;
}
.item_time {
font-size: 26rpx;
color: #aaacab;
}
.item_con {
font-size: 30rpx;
font-weight: bold;
color: #333;
margin-top: 10rpx;
line-height: 40rpx;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.null_text {
display: block;
text-align: center;
font-size: 30rpx;
color: #999;
padding-top: 300rpx;
}
.doctors_module {
width: 100%;
position: fixed;
z-index: 99;
left: 0;
}
.cateList {
background: #f3f3f3;
}
.flex {
display: flex;
align-items: center;
width: 100%;
}
.name_search {
background-color: #fff;
padding: 20rpx 30rpx;
display: flex;
align-items: center;
/deep/.is-input-border {
background-color: #f3f3f3;
border-radius: 50rpx;
height: 60rpx;
line-height: 30rpx;
padding: 15rpx;
font-size: 28rpx;
color: #666;
}
/deep/.uni-easyinput__content-input {
}
.name-placeholder {
font-size: 28rpx;
text-align: center;
color: #666;
}
button {
background-color: $themeBgColor;
font-size: 26rpx;
line-height: 36rpx;
border-radius: 15rpx;
color: #fff;
padding: 5rpx 20rpx;
margin-left: 15rpx;
}
}
.show-more,
.no-more {
display: inline-block;
width: 100%;
font-size: 24rpx;
padding-top: 5rpx;
color: #ccc;
text-align: center;
}
.list_item_study {
line-height: 48rpx;
background: $themeBgColor;
color: #fff;
border-radius: 40rpx;
font-size: 24rpx;
padding: 0 20rpx;
}
.list_item_bt {
display: flex;
align-items: center;
position: absolute;
right: 20rpx;
bottom: 16rpx;
}
.list_item_price {
font-size: 30rpx;
font-weight: 500;
margin-right: 30rpx;
color: red;
line-height: 54rpx;
}
.top_right {
display: flex;
align-items: center;
margin-right: 30rpx;
text {
font-size: 28rpx;
color: #fff;
padding-left: 2rpx;
}
}
/deep/.u-upload__deletable {
display: none !important;
}
/deep/.u-upload__button {
display: none !important;
}
/* 状态样式 */
.card_label {
display: inline-block;
padding: 0px 16rpx;
background-color: #4caf50; /* 绿色背景 */
color: white;
// font-weight: bold;
font-size: 12px;
border-radius: 4px; /* 圆角 */
position: relative; /* 用于斜角效果 */
text-align: center;
transform: skew(-20deg); /* 倾斜效果 */
margin-right: 20rpx; /* 如果有多个标签时,之间保持间距 */
line-height: 38rpx;
}
/* 斜角效果 */
// .card_label::after {
// content: '';
// position: absolute;
// top: 0;
// right: -10px;
// width: 20px;
// height: 20px;
// background-color: inherit;
// transform: rotate(45deg); /* 旋转45度形成斜角 */
// z-index: -1;
// }
.item_bottom {
display: flex;
align-items: center;
justify-content: space-between;
}
.item_bottom {
.left {
display: flex;
align-items: center;
}
.drop {
margin: 0 10rpx;
}
text {
margin-right: 10rpx;
}
}
.demo-section {
background-color: #fff;
padding: 20rpx;
border-radius: 10rpx;
margin-bottom: 20rpx;
}
.demo-title {
font-size: 28rpx;
margin-bottom: 15rpx;
display: block;
color: #333;
}
.hidden2 {
line-height: 24px;
max-height: 48px;
height: auto;
}
.operate {
display: flex;
align-items: center;
justify-content: space-around;
}
.like,
.comment,
.more {
margin: 0 5px;
}
</style>