Files
taimed/pages/doctors/index.vue
liuyuan 0d0bf4bb3a tijiao
2025-09-04 13:55:23 +08:00

1003 lines
26 KiB
Vue

<template>
<view class="content">
<z-nav-bar
title="名医精彩"
bgColor="#5188e5"
fontColor="#fff"
:backState="2000"
>
<template v-slot:right v-if="activeTab === 1&&showArticleButton">
<view class="top_right" @tap="createFolder" style="margin-right: 20rpx">
<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;`"
style="z-index: 10"
>
<view class="tab-bar">
<view
class="tab-item left-tab"
:class="{ active: activeTab === 0 }"
@click="changeActiveTab(0)"
>
名医讲堂
</view>
<view
class="tab-item right-tab"
:class="{ active: activeTab === 1 }"
@click="changeActiveTab(1)"
>
名医天地
</view>
</view>
<template v-if="activeTab == 0">
<view class="cateList flexbox">
<common-sticky
itemStyle="width:33.3%; height: 38px;font-size:24rpx;"
:list="tabsList"
label="title"
:currentCateIndex="currentCateIndex"
@handleselectCate="ordersTabCLi"
></common-sticky>
</view>
<view class="name_search">
<uni-easyinput
v-model="courseName"
prefixIcon="search"
placeholder="按姓名/课程搜索"
placeholderClass="name-placeholder"
class="center-input"
/>
<button @click="getListData(taihumedId, true)">查询</button>
</view>
</template>
<template v-if="activeTab == 1">
<!--
<view class="name_search">
<uni-easyinput
v-model="courseName"
prefixIcon="search"
placeholder="按文章标题搜索"
placeholderClass="name-placeholder"
class="center-input"
/>
<button @click="getArticleListData(true)">查询</button>
</view> -->
</template>
</view>
<scroll-view
scroll-y="true"
:scroll-top="scrollTop"
@scrolltolower="loadMore"
:style="`
height: calc(100vh - ${activeTab == 0 ? 320 : 180}rpx);
margin-top: ${activeTab == 0 ? 260 : 80}rpx;
padding-bottom: 140rpx;`"
v-if="show == true"
>
<view class="doctors_list" id="top" v-if="activeTab == 0">
<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" v-if="currentCateIndex != 2">
<!-- <view class="item_top">
<text
class="item_name"
v-if="item.taihuTalent && item.taihuTalent.length > 0"
>{{ item.taihuTalent[0].name }}</text
>
</view> -->
<text class="item_con">{{ item.title }}</text>
<view class="item_info hidden2" style="margin-top: 20rpx">
<rich-text
style="color: #666"
:nodes="item.content"
v-if="item.content"
></rich-text>
</view>
</view>
<view class="item_right" v-else>
<view class="item_top">
<text class="item_name">{{ item.title }}</text>
</view>
<text
class="item_con"
v-if="item.taihuTalent && item.taihuTalent.length > 0"
>{{
item.taihuTalent.map((talent) => talent.name).join(" ")
}}</text
>
</view>
</view>
</view>
<view class="list_item_bt">
<view
class="list_item_price"
v-if="
item.courseCatalogueEntityList &&
item.courseCatalogueEntityList.length == 1
"
>
<text v-if="item.courseCatalogueEntityList[0].halfFee == 0"
>免费</text
>
<text v-else
>¥{{ item.courseCatalogueEntityList[0].halfFee }}/{{
item.courseCatalogueEntityList[0].fee
}}</text
>
</view>
<view
class="list_item_price"
v-if="
item.courseCatalogueEntityList &&
item.courseCatalogueEntityList.length > 1
"
>
<text v-for="(v, i) in item.courseCatalogueEntityList" :key="i">
{{ formatContent(v.title)
}}<text v-if="i !== item.courseCatalogueEntityList.length - 1"
>/</text
>
</text>
<text
v-if="item.courseCatalogueEntityList[0].halfFee == 0"
style="padding-left: 20rpx"
>免费</text
>
<text v-else style="margin-left: 20rpx"
>各{{ item.courseCatalogueEntityList[0].halfFee }}/{{
item.courseCatalogueEntityList[0].fee
}}</text
>
</view>
<text class="list_item_study">了解课程</text>
</view>
</view>
</view>
<view
class="doctors_list"
id="top"
v-if="activeTab == 1"
style="margin: 0"
>
<!-- <view
class="doctors_item"
v-for="(item, index) in list"
:key="index"
@click="goToDetail(item)"
>
</view> -->
<Dynamic
v-for="(item, index) in list"
:key="item.id"
:imgList="item.fileList1"
:avatar="item.taihuTalent&&item.taihuTalent.icon?item.taihuTalent.icon:''"
:name="item.taihuTalent&&item.taihuTalent.name?item.taihuTalent.name:''"
:createTime="item.createTime"
:title="item.title"
:id="item.id"
:content="item.content"
:isLike="item.likeFlag"
:isGiveReward="item.isGiveReward"
:likeCount="item.likeCount"
:likeList="item.likeList"
:readCount="item.readCount"
:giveRewardNumber="item.giveRewardNumber"
:commentCount="item.commentCount"
@clickDynamic="clickDynamic(index)"
@addRead="addRead"
@clickUser="clickUser(item)"
@clickFocus="clickFocus(index)"
@clickThumbsup="(type) => clickThumbsup(item.id, type)"
@clickGiveReward="clickGiveReward(item.id)"
@clickChat="clickChat(item.id)"
>
</Dynamic>
</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>
<common-pinglun ref="pinglun" @close="close" @show="(e)=>pinglunShow=e"></common-pinglun>
<common-likeList ref="commonLikeList" @close="close" @show="(e)=>likeShow=e"></common-likeList>
<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
<uni-popup-share @select="haveSelected"></uni-popup-share>
</uni-popup>
<uni-popup ref="customModal2" type="dialog" backgroundColor="#fff" round="8" >
<view class="my-modal" style="width: 80vw;border-radius: 20px;padding: 20px;">
<view class="my-modal__hd" style="font-size: 36rpx;font-weight: 700;margin-bottom: 10rpx;">消息提醒</view>
<view style="margin-bottom: 20rpx;font-size: 26rpx;color: #5188e5;">您的文章有人点赞评论啦,请注意查看。</view>
<view class="my-modal__bd">
<view class="multi-line-text">
<view style=" display: block;" v-for="(item, index) in sysNotices_list" :key="index">
<view v-if="item&&item.title" class="hidden1" @click="readArticle(item)" style="text-wrap: wrap;white-space: pre-wrap;width: 100%;
word-wrap: break-word;">{{index+1}}.{{ item.title }}</view>
</view>
</view>
</view>
<view class="my-modal__ft" style="margin-top: 10rpx;">
<button @click="confirm2" style="font-size: 28rpx;color: #bbb;">知道了</button>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import $http from "@/config/requestConfig.js";
import commonArticle from "./article.vue";
import Dynamic from "@/components/qizai-dynamic/Dynamic.vue";
import commonPinglun from "../articleList/pinglun.vue";
import commonLikeList from "../articleList/likeList.vue";
export default {
data() {
return {
sysNotices_list:[],
shareId: null,
showArticleButton: false,
activeTab: 0,
tabsList: [],
currentCateIndex: 0,
list: [],
null_text: "",
pinglunShow:false,
likeShow:false,
current: 1,
limit: 10,
courseName: "",
taihumedId: null,
timer: null,
showText: false,
noMore: false,
show: null,
count: 0,
scrollTop: 0, //滚动位置
isRefreshing: false, //刷新状态
};
},
components: {
commonArticle,
Dynamic,
commonPinglun,
commonLikeList,
},
onPullDownRefresh() {
if(this.pinglunShow){
uni.stopPullDownRefresh();
return false
}
if(this.likeShow){
uni.stopPullDownRefresh();
return false
}
this.isRefreshing = true;
console.log("下拉刷新");
setTimeout(() => {
this.current = 1;
this.list = [];
this.noMore = false;
if (this.activeTab == 0) {
this.getListData(this.tabsList[this.currentCateIndex].id);
} else {
this.getArticleListData();
}
uni.stopPullDownRefresh();
this.isRefreshing = false;
console.log("下拉刷新已停止");
}, 800);
},
onLoad() {
this.getSysNotices()
uni.hideTabBar();
this.getTabData();
},
onShow() {
this.isShowArticleButton()
if (this.activeTab == 0&&this.taihumedId!=null) {
this.getListData(this.taihumedId);
} else if (this.activeTab == 1) {
this.getArticleListData(true);
}
},
methods: {
async addRead(articleId){
// common/taihuTalentArticle/addReadCount
await $http
.request({
url: "common/taihuTalentArticle/addReadCount",
method: "POST",
data: {"articleId":articleId},
header: {
"Content-Type": "application/json",
},
})
.then(async (res) => {
if(res.code == 0){
console.log(res)
this.getArticleDetail(articleId);
}
});
},
confirm2(){
this.$refs.customModal2.close();
this.sysNotices_list.forEach(e=>{
if(e&&e.id){
this.readSysNotice(e.id);
}
})
// this.readSysNotice();
},
readArticle(item){
this.readSysNotice(item.id)
uni.navigateTo({
url: `/pages/articleList/article?navTitle=文章详情&title=文章详情&id=${item.id}&type=detail&statusId=${item.showFlag}`,
});
this.$refs.customModal2.close();
},
//已读记录
async readSysNotice(id) {
await $http
.request({
url: "common/taihuTalentArticle/setReadFlag",
method: "POST",
data: { articleId: id},
header: {
"Content-Type": "application/json",
},
})
.then(async (res) => {
});
},
//已读记录
async isShowArticleButton() {
await $http
.request({
url: "common/taihuTalentArticle/getArticleRoleByUser",
method: "POST",
data: { },
header: {
"Content-Type": "application/json",
},
})
.then(async (res) => {
if(res.code == 0 && res.roleFlag == 1){
this.showArticleButton=true
}else{
this.showArticleButton=false
}
});
},
async getSysNotices() {
await $http
.request({
url: "common/taihuTalentArticle/getCommentRemind",
method: "POST",
data: { },
header: {
"Content-Type": "application/json",
},
})
.then(async (res) => {
if(res.set&&res.set.length>0){
this.sysNotices_list = res.set;
// this.idString = res.set.map(item => item.id).join(', ');
this.$refs.customModal2.open();
}
});
},
refreshData() {
this.activeTab=1;
this.currentCateIndex = 0;
//重置
this.list = [];
this.noMore = false;
this.show = false;
this.count = 0;
this.current = 1;
this.getArticleListData();
},
createFolder() {
uni.navigateTo({
url: `/pages/articleList/articleAdd?navTitle=文章&title=文章&type=add`,
});
},
newOnShare() {
this.$refs.share.open();
},
haveSelected(data) {
var data1 = this.list.find((item) => item.id == this.shareId);
let image = "";
data1.img && data1.img != ""
? (image = data1.img.split(",")[0])
: (image = "static/logo_zi.png");
console.log(data, " 选择的是");
if (data.index == 0) {
// 分享到好友
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 0,
href: this.$apkUrl,
title: `我在【太湖云医】发布了文章 “ ${data1.title} ”`,
summary: `${data1.content.substring(0, 50).replace(/<[^>]*>/g, '').trim()}`,
imageUrl: image,
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
},
});
} else if (data.index == 1) {
// 分享到朋友圈
uni.share({
provider: "weixin",
scene: "WXSceneTimeline",
type: 0,
href: this.$apkUrl,
title: `我在【太湖云医】发布了文章 “ ${data1.title} ”`,
summary: `${data1.content.substring(0, 50).replace(/<[^>]*>/g, '').trim()}`,
imageUrl: image,
success: function (res) {
console.log("success:" + JSON.stringify(res));
},
fail: function (err) {
console.log("fail:" + JSON.stringify(err));
},
});
}
},
clickDynamic(id) {
//评论
console.log("childDynamic");
},
// 点击用户信息
clickUser(e) {
console.log(e);
console.log("childUser");
uni.navigateTo({
url: "/pages/talents/detail?id=" + e.taihuTalent.id,
});
},
// 点击关注
clickFocus(e) {
this.list[e].isFocusOn = this.list[e].isFocusOn ? false : true;
console.log(e);
console.log("childUser");
},
close(id) {
this.getArticleDetail(id);
},
// 点赞
clickThumbsup(id, type) {
console.log("childThumbsup");
if (type == "like") {
this.$http
.request({
url: "common/taihuTalentArticle/addOrCancelArticleLike",
method: "POST",
data: {
articleId: id,
},
header: {
"Content-Type": "application/json",
},
})
.then((res) => {
console.log("res at line 308:", res);
this.getArticleDetail(id);
this.$forceUpdate();
});
} else if (type == "pinglun") {
this.$refs.pinglun.onHandleClickOpenComment(id);
} else if (type == "likeList") {
this.$refs.commonLikeList.onHandleClickOpenComment(id);
} else if (type == "share") {
this.shareId = id;
this.newOnShare();
}
},
getArticleDetail(id) {
//清空消息记录
this.$http
.request({
url: "common/taihuTalentArticle/getArticleLikeAndComment",
method: "POST",
data: {
articleId: id,
},
header: {
"Content-Type": "application/json",
},
})
.then((res) => {
console.log("res at line 682:", res);
if (res.code == 0) {
this.list.forEach((item) => {
if (item.id == id) {
item.isLike = res.article.isLike;
item.likeCount = res.article.likeCount;
item.readCount = res.article.readCount;
item.commentCount = res.article.commentCount;
item.likeList = res.article.likeList;
item.likeFlag = res.article.likeFlag;
}
});
}
})
.catch((error) => {
console.log("请求出错:", error);
});
//调用后端 SSE 接口,发送问题并接收实时回答
// this.startSSE(params);
},
// 点击打赏
clickGiveReward(e) {
console.log(e);
console.log("clickGiveReward");
},
// 点击聊天
clickChat(e) {
console.log(e);
console.log("clickChat");
},
changeActiveTab(e) {
this.current = 1;
this.list = [];
this.noMore = false;
console.log("e at line 309:", e, this.taihumedId);
this.activeTab = e;
this.$forceUpdate();
if (e == 0) {
if (!this.taihumedId) {
this.taihumedId = this.tabsList[0].id;
}
this.getListData(this.taihumedId);
} else {
this.getArticleListData(true);
}
},
//判断显示‘上/中/下’
formatContent(content) {
const keywords = ["上部", "中部", "下部"];
let result = [];
// 判断是否包含关键字
keywords.forEach((keyword) => {
if (content.includes(keyword)) {
result.push(keyword.substring(0, 1));
}
});
return result.join("");
},
//获取tab数据
getTabData() {
if (this.activeTab == 0) {
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 = res.list;
this.taihumedId = this.tabsList[0].id;
this.getListData(this.taihumedId);
}
});
} else if (this.activeTab == 1) {
this.getArticleListData();
}
},
//获取列表数据
getArticleListData(type) {
if (type) {
this.current = 1;
this.list = [];
this.noMore = false;
}
if (this.noMore) {
return false;
}
uni.showLoading({
title: "加载中",
});
this.$http
.request({
url: "common/taihuTalentArticle/getArticleList",
method: "POST",
data: {
current: this.current,
limit: this.limit,
},
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;
}
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 = "暂无数据";
}
});
},
//获取列表数据
getListData(taihumedId, type) {
if (type) {
this.current = 1;
this.list = [];
this.noMore = false;
}
if (this.noMore) {
return false;
}
uni.showLoading({
title: "加载中",
});
this.$http
.request({
url: "taihumed/course/getCourseToTaihumedList",
method: "POST",
data: {
current: this.current,
limit: this.limit,
taihumedId: taihumedId,
userName: "",
courseName: this.courseName,
},
header: {
"Content-Type": "application/json",
},
})
.then((res) => {
uni.hideLoading();
this.count = res.pageRes.total; //总数
let length = res.pageRes.records.length;
if (res.pageRes.records && length > 0) {
this.show = true;
//如果返回的数据少于每页数量,表示没有更多数据
if (
this.count == length ||
length < this.limit ||
this.count / this.current == this.limit
) {
this.noMore = true;
}
this.list = [...this.list, ...res.pageRes.records];
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() {
if (this.activeTab == 0) {
this.getListData(this.taihumedId);
} else {
this.getArticleListData();
}
},
//切换tab状态
ordersTabCLi(data, index) {
this.currentCateIndex = index;
this.courseName = "";
this.taihumedId = data.id;
//重置
this.list = [];
this.noMore = false;
this.show = false;
this.count = 0;
this.current = 1;
this.getListData(this.taihumedId);
},
//详情
goToDetail(item) {
if (this.isRefreshing) return;
uni.navigateTo({
url: `/pages/curriculum/index?navTitle=${item.title}&title=${item.title}&id=${item.id}`,
});
},
},
};
</script>
<style lang="scss" scoped>
@import "@/static/mixin.scss";
.content {
height: 100%;
overflow: auto;
background-color: #fff;
}
.doctors_list {
margin: 0 20rpx 20rpx;
}
.doctors_item {
border: 1rpx solid $themeColor;
border-radius: 15rpx;
margin-bottom: 20rpx;
padding: 25rpx 25rpx 60rpx;
display: flex;
align-items: center;
position: relative;
}
.item_image {
display: block;
width: 200rpx;
height: 200rpx;
flex-shrink: 0;
background: #f3f3f3;
}
.item_right {
width: calc(100% - 200rpx);
margin-left: 30rpx;
padding-bottom: 20rpx;
}
.item_top {
display: flex;
align-items: center;
line-height: 40rpx;
}
.item_name {
font-size: 32rpx;
color: #333;
font-weight: bold;
}
.item_title {
font-size: 32rpx;
color: #333;
}
.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: 20rpx;
}
.list_item_price {
font-size: 30rpx;
font-weight: 500;
margin-right: 30rpx;
color: red;
line-height: 54rpx;
}
.tab-bar {
display: flex;
width: 100%;
height: 90rpx;
// margin:0 0 30rpx;
background-color: #f5f5f5;
// border-radius: 20rpx;
overflow: hidden;
border-bottom: 1px solid #f2f6ff;
}
.tab-item {
flex: 1;
text-align: center;
line-height: 90rpx;
font-size: 32rpx;
color: #666;
font-weight: bold;
background-color: #f8f8f8;
}
/* 左边tab的圆角 */
.left-tab.active {
background-color: #ffffff;
color: #0552c5;
background-color: #e9f0ff;
box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.04),
/* 外部柔光阴影 */ inset -4rpx 0 6rpx rgba(0, 0, 0, 0.03); /* 内阴影模拟夹层效果 */
}
/* 右边tab的重点样式 */
.right-tab.active {
background-color: #ffffff;
background-color: #e9f0ff;
color: #0552c5;
// border-left: 1px solid #e0e0e0;
font-weight: bold;
z-index: 1;
box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.04),
/* 外部柔光阴影 */ inset -4rpx 0 6rpx rgba(0, 0, 0, 0.03); /* 内阴影模拟夹层效果 */
}
.hidden2 {
line-height: 24px;
max-height: 48px;
height: auto;
}
.hidden1 {
line-height: 24px;
max-height: 24px;
height: auto;
-webkit-line-clamp: 1;
}
</style>