418 lines
8.6 KiB
Vue
418 lines
8.6 KiB
Vue
<template>
|
||
<div class="comemntcell">
|
||
<van-image
|
||
round
|
||
width="49"
|
||
height="49"
|
||
:src="avatar"
|
||
/>
|
||
<div class="descbox">
|
||
<div class="namebox">
|
||
<div class="name">{{ formatName(item.user_name) }}</div>
|
||
<div
|
||
class="zanbox"
|
||
@click="toggleLike(item.comment_id, item.is_like, index)"
|
||
>
|
||
<img src="../assets/nozan.png" alt="" v-if="!item.is_like" />
|
||
<img src="../assets/zan.png" alt="" v-else />
|
||
<div class="num" v-if="item.like_num > 0">{{ formatNumber(item.like_num) }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="depart">{{ item.department_name }}</div>
|
||
<div class="hospital">{{ item.hospital_name }}</div>
|
||
<div class="date">{{ formateDate(item.created_at) }}</div>
|
||
<div class="tag" v-if="item.is_high_quality == 1">
|
||
<span>优质解答</span>
|
||
</div>
|
||
<div class="comment">
|
||
<div class="text">
|
||
{{ item.content }}
|
||
</div>
|
||
<div class="reply" @click="openConmment(item.level, item.user_name)">
|
||
{{ item.level == 1 ? "回复" : "评论" }}
|
||
</div>
|
||
</div>
|
||
<!-- <reply ref="replyRef" :parentIndex="parentIndex" :parent_id='item.comment_id' :root_id="''" :case_id="case_id" :project_id="project_id"></reply> -->
|
||
<div class="talkbox" v-show="showReply">
|
||
<div class="textbox">
|
||
<van-field
|
||
:autosize="{ minHeight: 120 }"
|
||
v-model="content"
|
||
rows="2"
|
||
autosize
|
||
type="textarea"
|
||
maxlength="200"
|
||
placeholder="请输入评论内容"
|
||
show-word-limit
|
||
/>
|
||
</div>
|
||
<div class="toolbox">
|
||
<div class="cancel" @click="showReply = false">取消</div>
|
||
<button class="ok" @click="handleAdd" :disabled="isLock">提交</button>
|
||
</div>
|
||
</div>
|
||
<div class="sondiv">
|
||
<comment-list
|
||
v-if="item.case_comment && item.case_comment.length > 0"
|
||
:childList="item.case_comment"
|
||
:parentIndex="index"
|
||
@freshLike="freshLike"
|
||
:root_id="parent_id"
|
||
:replyName="item.user_name"
|
||
:case_id="case_id"
|
||
:project_id="project_id"
|
||
@freshSecComment="freshSecComment"
|
||
@handleFreshList="handleFreshList"
|
||
></comment-list>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { showToast } from "vant";
|
||
import { ref } from "vue";
|
||
import api from "../api/user.js";
|
||
import dayjs from "dayjs";
|
||
import avatar from "../assets/doctor_avatar.png";
|
||
|
||
const replyRef = ref(null);
|
||
const showReply = ref(false);
|
||
const content = ref("");
|
||
const level = ref(2);
|
||
const writer = ref("");
|
||
const isLock = ref(false);
|
||
const props = defineProps({
|
||
item: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
parent_id: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
root_id: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
replyName: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
index: {
|
||
type: Number,
|
||
default: 0,
|
||
},
|
||
childList: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
project_id: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
case_id: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
|
||
parentIndex: {
|
||
type: Number,
|
||
default: -1,
|
||
},
|
||
});
|
||
|
||
const emit = defineEmits([
|
||
"freshLike",
|
||
"freshList",
|
||
"freshSecComment",
|
||
"handleFreshList",
|
||
]);
|
||
|
||
const formateDate = (val) => {
|
||
return dayjs(val).format("YYYY-MM-DD HH:mm");
|
||
};
|
||
|
||
/**
|
||
* 显示回复框的处理函数
|
||
*
|
||
* 该函数用于设置 showReply 的值为 true，从而显示回复框。
|
||
*/
|
||
const handleReply = () => {
|
||
replyRef.value[0].openReply();
|
||
};
|
||
|
||
const handleLike = async (id, index) => {
|
||
const { code } = await api.like(id);
|
||
if (code == 200) {
|
||
showToast("点赞成功");
|
||
emit("freshLike", {
|
||
parentIndex: props.parentIndex,
|
||
index: index,
|
||
likeNum: 1,
|
||
});
|
||
}
|
||
};
|
||
const freshLike = (data) => {
|
||
emit("freshLike", data);
|
||
};
|
||
const freshSecComment = (data) => {
|
||
emit("freshSecComment", data);
|
||
};
|
||
const handleCancleLike = async (id, index) => {
|
||
const { code } = await api.cancleLike(id);
|
||
if (code == 200) {
|
||
showToast("取消点赞成功");
|
||
emit("freshLike", {
|
||
parentIndex: props.parentIndex,
|
||
index: index,
|
||
likeNum: -1,
|
||
});
|
||
}
|
||
};
|
||
const toggleLike = (id, flag, index) => {
|
||
console.log(id, flag, props.parentIndex, index);
|
||
if (flag) {
|
||
handleCancleLike(id, index);
|
||
} else {
|
||
handleLike(id, index);
|
||
}
|
||
};
|
||
const formatNumber = (value) => {
|
||
if (value > 9999) {
|
||
return (value / 10000).toFixed(1) + "w";
|
||
} else {
|
||
return value;
|
||
}
|
||
};
|
||
const formatName=(val)=>{
|
||
if(!val) return '医生'
|
||
return val.slice(0,1)+'医生'
|
||
|
||
}
|
||
const openConmment = (flag, name) => {
|
||
showReply.value = true;
|
||
if (flag == 2 || flag == 3) {
|
||
content.value = "@" + formatName(name) + "：";
|
||
writer.value = "@" + formatName(name) + "：";
|
||
level.value = 3;
|
||
} else {
|
||
content.value = "";
|
||
writer.value = "";
|
||
level.value = 2;
|
||
}
|
||
};
|
||
const handleAdd = async () => {
|
||
if (content.value == "" || content.value == writer.value) {
|
||
showToast("请输入内容");
|
||
return false;
|
||
}
|
||
showReply.value = false;
|
||
isLock.value = true;
|
||
const { code, data } = await api.addComment({
|
||
case_id: props.case_id,
|
||
project_id: props.project_id,
|
||
content: content.value,
|
||
level: level.value,
|
||
root_id: level.value == 2 ? props.parent_id : props.root_id,
|
||
parent_id: props.parent_id,
|
||
});
|
||
isLock.value = false;
|
||
if (code == 200) {
|
||
emit("freshList");
|
||
content.value = "";
|
||
}
|
||
};
|
||
const handleFreshList = () => {
|
||
emit("freshList");
|
||
};
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.sondiv {
|
||
margin-top: 15px;
|
||
:deep() .cellbox {
|
||
padding-top: 15px;
|
||
}
|
||
}
|
||
|
||
.cellbox {
|
||
padding-top: 15px;
|
||
}
|
||
|
||
.active {
|
||
border-bottom: 1px solid #e5e5e5;
|
||
}
|
||
|
||
.comemntcell {
|
||
display: flex;
|
||
|
||
.descbox {
|
||
margin-left: 12px;
|
||
flex: 1;
|
||
// border-bottom: 1px solid #E5E5E5;
|
||
|
||
.depart {
|
||
margin-top: 10px;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
|
||
.hospital {
|
||
margin-top: 5px;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
|
||
.date {
|
||
margin-top: 5px;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
|
||
.comemntcell {
|
||
border-bottom: 1px solid #e5e5e5;
|
||
|
||
.descbox {
|
||
border: none;
|
||
padding-bottom: 15px;
|
||
}
|
||
}
|
||
|
||
.comment {
|
||
margin-top: 5px;
|
||
display: flex;
|
||
|
||
.text {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
line-height: 17px;
|
||
flex: 1;
|
||
white-space: pre-wrap;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.reply {
|
||
margin-left: 30px;
|
||
width: 50px;
|
||
height: 25px;
|
||
background: #43c9c3;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.tag {
|
||
margin-top: 2px;
|
||
font-size: 12px;
|
||
color: #ffffff;
|
||
height: 15px;
|
||
background: #43c9c3;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
padding: 0 4px;
|
||
width: 54px;
|
||
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
span {
|
||
transform: scale(0.9);
|
||
}
|
||
}
|
||
|
||
.namebox {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.name {
|
||
font-size: 16px;
|
||
color: #333333;
|
||
}
|
||
|
||
.zanbox {
|
||
display: flex;
|
||
font-size: 15px;
|
||
justify-content: flex-end;
|
||
color: #333333;
|
||
align-items: center;
|
||
margin-right: 40px;
|
||
|
||
img {
|
||
width: 20px;
|
||
height: 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.expand {
|
||
width: 240px;
|
||
height: 19px;
|
||
margin: 12px auto 12px;
|
||
background: #43c9c3;
|
||
border-radius: 4px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 10px;
|
||
color: #ffffff;
|
||
}
|
||
.talkbox {
|
||
margin: 12px 30px 0px 0;
|
||
}
|
||
.textbox {
|
||
border-radius: 5px;
|
||
border: 0.5px solid #43c9c3;
|
||
|
||
:deep() .van-cell {
|
||
background: none;
|
||
}
|
||
|
||
:deep() .van-field__word-limit {
|
||
color: #999999;
|
||
}
|
||
}
|
||
.toolbox {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.cancel {
|
||
height: 38px;
|
||
background: #ffffff;
|
||
border: 1px solid #ebebeb;
|
||
border-radius: 4px;
|
||
font-size: 14px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #737478;
|
||
flex: 1;
|
||
}
|
||
|
||
.ok {
|
||
margin-left: 12px;
|
||
flex: 1;
|
||
border-radius: 4px;
|
||
height: 38px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #43c9c3;
|
||
border: 1px solid #43c9c3;
|
||
font-size: 14px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</style>
|