559 lines
12 KiB
Vue
559 lines
12 KiB
Vue
<template>
|
||
<view class="u-page">
|
||
<z-paging
|
||
ref="paging"
|
||
inside-more
|
||
loading-more-no-more-text="咱也是有底线的！"
|
||
:auto-show-back-to-top="true"
|
||
v-model="dataList"
|
||
@query="queryList"
|
||
>
|
||
<template #top>
|
||
<backLogoNav :searchWord="keyWord" :navName="navName"></backLogoNav>
|
||
<view class="tabcon">
|
||
<up-tabs
|
||
:activeStyle="{
|
||
color: '#3CC7C0',
|
||
}"
|
||
:inactiveStyle="{
|
||
color: '#4B5563',
|
||
}"
|
||
lineColor="#3CC7C0"
|
||
lineWidth="155rpx"
|
||
lineHeight="2"
|
||
:list="tabList"
|
||
@click="switchTab"
|
||
></up-tabs>
|
||
</view>
|
||
</template>
|
||
<view
|
||
class="item"
|
||
v-for="(item, index) in dataList"
|
||
:key="index"
|
||
|
||
>
|
||
<view class="title">{{item.content}}</view>
|
||
|
||
<view class="deal">
|
||
<view class="time">
|
||
<up-icon name="clock" color="#6B7280" size="28rpx"></up-icon>
|
||
<view class="num">{{ formatdate(item.created_at) }}</view>
|
||
</view>
|
||
<view class="dot" @click="isDel(item.comment_id)">...</view>
|
||
</view>
|
||
<view class="casecontent">
|
||
<view class="author" v-if="tab==0">{{item.author_name}}({{item.author_hospital_name}})</view>
|
||
<view class="content" v-if="tab==0">{{ item.exchange_title }}</view>
|
||
<view class="content" v-else-if="tab==1">{{ item.article_title }}</view>
|
||
<view class="content" v-else-if="tab==2">{{ item.video_title }}</view>
|
||
</view>
|
||
</view>
|
||
</z-paging>
|
||
</view>
|
||
<!-- 底部操作 -->
|
||
<up-popup
|
||
:zIndex="10"
|
||
:overlayStyle="{ zIndex: 9 }"
|
||
:closeOnClickOverlay="false"
|
||
:show="showDeal"
|
||
:round="10"
|
||
mode="bottom"
|
||
@close="closeDeal"
|
||
@open="openDeal"
|
||
>
|
||
<view class="dealbox">
|
||
<!-- <view class="dealcell">收藏</view> -->
|
||
<view class="dealcell" @click="alertPop">删除</view>
|
||
<view class="bar"></view>
|
||
<view class="dealcell" @click="closeDeal">取消</view>
|
||
</view>
|
||
</up-popup>
|
||
<up-overlay :show="showModal" mask-click-able>
|
||
<view class="zanboxpop">
|
||
<view class="zanwraper">
|
||
<view class="title">提示</view>
|
||
<view class="content">
|
||
是否删除该评论？
|
||
</view>
|
||
|
||
<view class="btnbox">
|
||
<view class="cancle" @click="showModal=false">取消</view>
|
||
<view class="ok" @click="confirmDel">确定</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</up-overlay>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive } from "vue";
|
||
import backLogoNav from "@/components/backLogoNav/backLogoNav.vue";
|
||
import list from "@/uni_modules/z-paging/components/z-paging/z-paging";
|
||
import api from "@/api/api";
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
import dayjs from "dayjs";
|
||
import switchImg from "@/static/switch.png";
|
||
import certImg from "@/static/cert.png";
|
||
import navTo from "@/utils/navTo.js";
|
||
const paging = ref(null);
|
||
const uDropdownRef = ref(null);
|
||
const dataList = ref([]);
|
||
const total = ref(0);
|
||
const delId = ref("");
|
||
const keyWord = ref("");
|
||
const isArticle = ref(true);
|
||
const navName = ref("肝胆相照临床病例库");
|
||
const showDeal = ref(false);
|
||
const showModal = ref(false);
|
||
|
||
const tab=ref(0);
|
||
const closeDeal=()=>{
|
||
showDeal.value = false;
|
||
};
|
||
const alertPop=()=>{
|
||
showModal.value = true;
|
||
showDeal.value = false;
|
||
};
|
||
const confirmDel=()=>{
|
||
if(tab.value==0){
|
||
delExchangeComment(delId.value);
|
||
}else if(tab.value==1){
|
||
delArticleComment(delId.value);
|
||
}else if(tab.value==2){
|
||
delVideoComment(delId.value);
|
||
}
|
||
|
||
showModal.value = false;
|
||
};
|
||
const openDeal=()=>{
|
||
showDeal.value = true;
|
||
};
|
||
const isDel=(id)=>{
|
||
delId.value=id;
|
||
showDeal.value = true;
|
||
};
|
||
|
||
const options = ref([
|
||
{
|
||
label: "正序",
|
||
value: "asc",
|
||
},
|
||
{
|
||
label: "倒序",
|
||
value: "desc",
|
||
},
|
||
]);
|
||
const tabList = ref([
|
||
{
|
||
name: "病例交流",
|
||
},
|
||
{
|
||
name: "文章病例库",
|
||
},
|
||
{
|
||
name: "视频病例库",
|
||
},
|
||
]);
|
||
|
||
const delArticleComment = (id) => {
|
||
api.delArticleComment(id).then((res) => {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: "删除成功",
|
||
});
|
||
paging.value.refresh();
|
||
|
||
});
|
||
};
|
||
const delVideoComment = (id) => {
|
||
api.delVideoComment(id).then((res) => {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: "删除成功",
|
||
});
|
||
paging.value.refresh();
|
||
|
||
});
|
||
};
|
||
const delExchangeComment = (id) => {
|
||
api.delExchangeComment(id).then((res) => {
|
||
uni.showToast({
|
||
icon: "none",
|
||
title: "删除成功",
|
||
});
|
||
paging.value.refresh();
|
||
|
||
});
|
||
};
|
||
|
||
const switchTab = (item) => {
|
||
tab.value=item.index;
|
||
paging.value.reload();
|
||
};
|
||
onLoad((options) => {
|
||
|
||
});
|
||
|
||
const formatdate = (date) => {
|
||
return dayjs(date).format("YYYY-MM-DD");
|
||
};
|
||
const goDetail = (id) => {
|
||
let type = isArticle.value ? "article" : "video";
|
||
navTo({
|
||
url: `/pages/detail/detail?id=${id}&type=${type}`,
|
||
});
|
||
};
|
||
|
||
const getExchangeCommentUser = async (params) => {
|
||
api.getExchangeCommentUser({
|
||
...params,
|
||
})
|
||
.then((res) => {
|
||
paging.value.complete(res.data.data.data);
|
||
total.value = res.data.data.total;
|
||
})
|
||
.catch((err) => {
|
||
paging.value.complete(false);
|
||
});
|
||
};
|
||
const getArticleCommentUser = async (params) => {
|
||
api.getArticleCommentUser({
|
||
...params,
|
||
})
|
||
.then((res) => {
|
||
paging.value.complete(res.data.data.data);
|
||
total.value = res.data.data.total;
|
||
})
|
||
.catch((err) => {
|
||
paging.value.complete(false);
|
||
});
|
||
};
|
||
const getVideoCommentUser = async (params) => {
|
||
api.getVideoCommentUser({
|
||
...params,
|
||
})
|
||
.then((res) => {
|
||
paging.value.complete(res.data.data.data);
|
||
total.value = res.data.data.total;
|
||
})
|
||
.catch((err) => {
|
||
paging.value.complete(false);
|
||
});
|
||
};
|
||
|
||
const queryList = (pageNo, pageSize) => {
|
||
const params = {
|
||
page: pageNo,
|
||
page_size: pageSize,
|
||
};
|
||
if(tab.value==0){
|
||
getExchangeCommentUser(params);
|
||
}else if(tab.value==1){
|
||
getArticleCommentUser(params);
|
||
}else{
|
||
getVideoCommentUser(params);
|
||
}
|
||
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.zanboxpop {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 100%;
|
||
.zanwraper {
|
||
width: 630rpx;
|
||
margin: 0 auto;
|
||
padding-bottom: 50rpx;
|
||
background: #f5f6f9;
|
||
border-radius: 16rpx;
|
||
.title {
|
||
margin-top: 48rpx;
|
||
text-align: center;
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
}
|
||
.content{
|
||
padding:30rpx 0 ;
|
||
background: #f5f6f9;
|
||
text-align: center;
|
||
}
|
||
.count {
|
||
margin-top: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: center;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: rgba(0, 0, 0, 0.65);
|
||
.num {
|
||
color: #ff0000;
|
||
font-size: 32rpx;
|
||
}
|
||
.earn {
|
||
font-size: 32rpx;
|
||
color: #3cc7c0;
|
||
}
|
||
}
|
||
.countbox {
|
||
display: flex;
|
||
width: 100%;
|
||
margin: 30rpx 0px 40rpx;
|
||
padding: 0 40rpx;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
.minus {
|
||
flex-shrink: 0;
|
||
margin-left: 10rp;
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
font-size: 60rpx;
|
||
color: #333;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #ffffff;
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #e9e9e9;
|
||
}
|
||
.add {
|
||
flex-shrink: 0;
|
||
width: 90rpx;
|
||
margin-left: 10rpx;
|
||
height: 90rpx;
|
||
font-size: 60rpx;
|
||
color: #333;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
background: #3cc7c0;
|
||
border-radius: 12rpx;
|
||
border: 2rpx solid #3cc7c0;
|
||
}
|
||
:deep(.u-input__content__field-wrapper__field) {
|
||
height: 60rpx;
|
||
|
||
font-size: 34rpx!important;
|
||
text-align: center!important;
|
||
}
|
||
:deep(.u-input) {
|
||
background: #f2f2f2;
|
||
width: 200rpx!important;
|
||
flex:none;
|
||
}
|
||
:deep(.u-input--radius) {
|
||
border-radius: 24rrpx;
|
||
}
|
||
}
|
||
.btnbox {
|
||
margin: 0px 40rpx 0px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.cancle {
|
||
color: rgba(0, 0, 0, 0.3);
|
||
width: 256rpx;
|
||
height: 88rpx;
|
||
background: #f5f6f9;
|
||
border-radius: 25px;
|
||
border: 2rpx solid rgba(0, 0, 0, 0.15);
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.ok{
|
||
color:#fff;
|
||
width: 256rpx;
|
||
height: 88rpx;
|
||
background: #3cc7c0;
|
||
border-radius: 25px;
|
||
border: 2rpx solid #3cc7c0;
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.bar {
|
||
width: 100%;
|
||
background: #f9fafb;
|
||
height: 20rpx;
|
||
}
|
||
.dealbox {
|
||
.dealcell {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 112rpx;
|
||
font-size: 32rpx;
|
||
color: rgba(0, 0, 0, 0.9);
|
||
border-bottom: 2rpx solid #efefef;
|
||
}
|
||
}
|
||
.tabcon {
|
||
margin: -20rpx 20rpx 0;
|
||
}
|
||
.databox {
|
||
height: 162rpx;
|
||
background: #ffffff;
|
||
display: flex;
|
||
margin-bottom: 20rpx;
|
||
// padding: 0 30rpx;
|
||
justify-content: space-between;
|
||
.cell {
|
||
flex: 1;
|
||
padding: 35rpx 0;
|
||
|
||
text-align: center;
|
||
|
||
.num {
|
||
font-size: 38rpx;
|
||
color: #3cc7c0;
|
||
}
|
||
.name {
|
||
margin-top: 18rpx;
|
||
font-size: 28rpx;
|
||
color: #4b5563;
|
||
}
|
||
}
|
||
}
|
||
.filterbox {
|
||
display: flex;
|
||
height: 128rpx;
|
||
align-items: center;
|
||
position: relative;
|
||
.type {
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: 24rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #f3f4f6;
|
||
border-radius: 15rpx;
|
||
height: 74rpx;
|
||
padding: 0 25rpx;
|
||
z-index: 2;
|
||
}
|
||
}
|
||
.u-page {
|
||
:deep(.u-flex) {
|
||
display: flex;
|
||
flex-direction: row;
|
||
overflow: hidden;
|
||
}
|
||
:deep(.u-dropdown__menu) {
|
||
background: #fff;
|
||
z-index: 1;
|
||
margin-left: 180rpx;
|
||
}
|
||
:deep(.u-dropdown__menu__item) {
|
||
height: 74rpx;
|
||
padding: 0 20rpx;
|
||
background: #f3f4f6;
|
||
border-radius: 15rpx;
|
||
flex: none;
|
||
margin-left: 60rpx;
|
||
}
|
||
.casecontent{
|
||
margin-top: 16rpx;
|
||
padding:24rpx 30rpx;
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid #E5E7EB;
|
||
.author{
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
}
|
||
.content{
|
||
margin-top: 10rpx;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 46rpx;
|
||
}
|
||
}
|
||
.deal {
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
color: #6b7280;
|
||
font-size: 24rpx;
|
||
justify-content: space-between;
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.recored {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 31rpx;
|
||
color: #3cc7c0;
|
||
}
|
||
.collect {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.eyebox {
|
||
width: 160rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.dot{
|
||
font-size: 34rpx;
|
||
}
|
||
.time {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.num {
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
.item {
|
||
border-bottom: 1rpx solid #f3f4f6;
|
||
padding: 30rpx;
|
||
.title {
|
||
font-size: 30rpx;
|
||
color: #111827;
|
||
line-height: 46rpx;
|
||
}
|
||
}
|
||
.tagsbox {
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
.tag {
|
||
padding: 0 10rpx;
|
||
margin-right: 16rpx;
|
||
height: 46rpx;
|
||
line-height: 46rpx;
|
||
text-align: center;
|
||
background: rgba(60, 199, 192, 0.1);
|
||
border-radius: 8rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #3cc7c0;
|
||
}
|
||
}
|
||
}
|
||
.detail {
|
||
background: #f9f9f9;
|
||
padding: 12rpx 30rpx;
|
||
.desc {
|
||
font-size: 26rpx;
|
||
color: #4b5563;
|
||
line-height: 40rpx;
|
||
}
|
||
.red {
|
||
color: #ff0000;
|
||
}
|
||
}
|
||
</style> |