app/pages/tabbar/vlog/log/ylog.vue

532 lines
13 KiB
Vue
Raw Normal View History

2025-06-06 10:29:23 +08:00
<template>
<view>
<!-- 页面其他内容 -->
<view class="page-content">
<!-- 这里可以添加页面的主要内容 -->
<view class="company-profile">
<view class="header">
<view class="avatar">
<image :src="imgage" mode="aspectFill" class="avatar-img" />
</view>
<view class="title">玉田医院</view>
<view class="badge">达人标识</view>
<!-- <view
:class="istae == true ? 'follow-btn' : 'stafollow-btn'"
@click="istae = !istae"
>关注</view
> -->
</view>
<view class="info-section">
<view class="info-item">
<text class="info-content"
>玉田县中医院始建于1982年7月1日
1996年7月被评为二级甲等中医医院2013年9月通过国家二级甲等医院复审2019年1月纳入国家三级中医医院管理是玉田县唯一一家中医特色突出中西医结合的国家三级中医医院</text
>
</view>
</view>
</view>
<view class="card" v-for="(item, index) in list" :key="index">
<view class="card-header" @click="torout(item)">
<text class="title">{{ item.title }}</text>
<text class="subtitle">{{ item.conent }}</text>
</view>
<view class="card-body">
<view class="img-list">
<image
v-for="(imgUrl, imgIndex) in item.imglist"
:key="imgIndex"
:src="imgUrl"
mode="aspectFill"
class="list-img"
/>
</view>
</view>
<view class="stats-row">
<view class="stat-item">
<text class="stat-number">
<image
v-if="item.xing"
@click="addxingfun(item, index)"
src="@/static/img/index/xing-2.png"
:style="stylie"
></image>
<image
v-else
src="@/static/img/index/xing.png"
@click="delxingfun(item, index)"
:style="stylie"
></image>
<text>
{{ item.xingnum }}
</text>
</text>
</view>
<view class="stat-item">
<text class="stat-number">
<image
v-if="item.fen"
@click="shareContent(item, index)"
src="@/static/img/index/fen.png"
:style="stylie"
></image>
<image
v-else
src="@/static/img/index/fen-2.png"
@click="shareContent(item, index)"
:style="stylie"
></image>
<text>
{{ item.fennum }}
</text>
</text>
</view>
<!-- 评论 -->
<view class="stat-item">
<text class="stat-number">
<text class="stat-number">
<image
v-if="item.ping"
@click="showCommentInput(item, index)"
src="@/static/img/index/ping.png"
:style="stylie"
></image>
<image
v-else
src="@/static/img/index/ping.png"
@click="showCommentInput(item, index)"
:style="stylie"
></image>
<text>
{{ item.pingnum }}
</text>
</text>
</text>
</view>
<view class="stat-item">
<text class="stat-number">
<image
v-if="item.xin"
@click="addisredfun(item, index)"
src="@/static/img/index/xin.png"
:style="stylie"
></image>
<image
v-else
src="@/static/img/index/xin-3.png"
@click="delisredfun(item, index)"
:style="stylie"
></image>
<text>
{{ item.xinnum }}
</text>
</text>
</view>
</view>
</view>
</view>
<!-- 自定义模态框 -->
<view v-if="showCommentModal" class="comment-modal">
<view class="modal-content">
<textarea
v-model="commentContent"
placeholder="请输入评论内容"
class="comment-input"
></textarea>
<view class="modal-buttons">
<button @click="cancelComment">取消</button>
<button @click="submitComment()">提交</button>
</view>
</view>
</view>
</view>
</template>
<script>
import imgage from "@/static/logn.png"; // 导入图片资源
import l7 from "@/static/img/index/l7.png"; // 导入图片资源
import l8 from "@/static/img/index/l8.png"; // 导入图片资源
export default {
data() {
return {
stylie: {
width: "20px", // 设置宽度为 20px
height: "20px", // 设置高度为 20px
marginRight: "10px", // 设置右边距为 10px
},
showCommentModal: false, // 控制模态框的显示
commentContent: "", // 评论内容
currentCommentIndex: -1,
currentCommentItem: null,
isred: false,
isrednum: 0,
imgage: imgage,
showDropdown: false,
currentTitle: "",
istae: true,
list: [
{
tp: "玉田医疗",
img: "",
title: "玉田县中医院",
conent:
"玉田县中医院是一家集医疗、教学、科研、预防保健、康复康养为一体经过42年的奋斗发展构建起了“一院多区”高质量发展的格局。院区全部开放运行后总床位可达2662张将实现区域医疗中心发展目标。",
xin: false,
timer: "2025-06-01 12:00 玉田",
xinnum: 0,
xing: false,
xingnum: 0,
ping: false,
pingnum: 0,
pingcontent: [],
fen: false,
fennum: 0,
imglist: [l7, l8],
},
],
};
},
onLoad(options) {
if (options.name) {
this.passedName = options.name;
this.currentTitle = options.name; // 可以根据需求设置当前标题
}
},
methods: {
shareContent(item, index) {
uni.share({
provider: "weixin",
scene: "WXSceneTimeline", // 指定分享到朋友圈
type: 0,
href: "https://example.com", // 分享的链接,需替换为实际链接
title: "医疗服务分享", // 分享标题
imageUrl: item.img || "https://example.com/default-image.jpg", // 分享图片,需替换为实际图片链接
success: () => {
this.list[index].fennum++;
this.list[index].fen = true;
uni.showToast({
title: "分享成功",
icon: "success",
duration: 2000,
});
},
fail: (err) => {
uni.showToast({
title: "分享失败,请重试",
icon: "none",
duration: 2000,
});
},
});
},
addisredfun(item, index) {
this.list[index].xinnum--;
this.list[index].xin = !this.list[index].xin;
},
delisredfun(item, index) {
if (this.list[index].xinnum == 0) {
this.list[index].xinnum++;
}
this.list[index].xin = !this.list[index].xin;
},
addxingfun(item, index) {
this.list[index].xingnum--;
this.list[index].xing = !this.list[index].xing;
},
delxingfun(item, index) {
if (this.list[index].xingnum == 0) {
this.list[index].xingnum++;
}
this.list[index].xing = !this.list[index].xing;
},
showCommentInput(item, index) {
this.showCommentModal = true;
this.currentCommentIndex = index;
this.currentCommentItem = item;
},
cancelComment() {
this.showCommentModal = false;
this.commentContent = "";
},
submitComment() {
if (this.commentContent.trim()) {
const userInfo = this.$options.filters.isLogin();
const currentDate = new Date();
const time = `${currentDate.getFullYear()}-${String(
currentDate.getMonth() + 1
).padStart(2, "0")}-${String(currentDate.getDate()).padStart(
2,
"0"
)} ${String(currentDate.getHours()).padStart(2, "0")}:${String(
currentDate.getMinutes()
).padStart(2, "0")}`;
this.list[this.currentCommentIndex].pingcontent.push({
img: userInfo.face, //图片
name: userInfo.nickName, //名字
content: this.commentContent, //内容
time: time, //时间
zannum: 0, //点赞数
iszan: false, // 点赞状态,默认为未赞
});
this.list[this.currentCommentIndex].pingnum++;
this.list[this.currentCommentIndex].ping = true;
}
this.showCommentModal = false;
this.commentContent = "";
uni.showToast({
title: "提交成功",
icon: "success",
duration: 2000,
});
},
// addpingfun(item, index) {
// this.list[index].pingnum--;
// this.list[index].ping = !this.list[index].ping;
// },
// delpingfun(item, index) {
// if (this.list[index].pingnum == 0) {
// this.list[index].pingnum++;
// }
// this.list[index].ping = !this.list[index].ping;
// },
torout(item) {
const itemJson = encodeURIComponent(JSON.stringify(item));
uni.navigateTo({
url: `/pages/tabbar/vlog/vlindexstr?item=${itemJson}`,
});
},
},
};
</script>
<style lang="scss">
.nav-left,
.nav-right {
width: 100rpx;
text-align: center;
font-size: 32rpx;
color: #333333;
}
.nav-title {
flex: 1;
text-align: center;
font-size: 36rpx;
// font-weight: bold;
color: #333333;
display: flex;
justify-content: center;
align-items: center;
.dropdown-icon {
margin-left: 10rpx;
font-size: 28rpx;
}
}
.dropdown-menu {
position: absolute;
top: 160rpx;
left: 0;
right: 0;
background-color: #fff;
border: 1rpx solid #eee;
border-radius: 10rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
z-index: 10;
margin: 0 20rpx;
.dropdown-item {
padding: 20rpx;
font-size: 32rpx;
color: #333;
border-bottom: 1rpx solid #eee;
&:last-child {
border-bottom: none;
}
&:active {
background-color: #f5f5f5;
}
}
}
.page-content {
padding: 20rpx;
}
.company-profile {
padding: 20px;
background: #fff;
// margin-bottom: 15px;
}
.header {
display: flex;
align-items: center;
// margin-bottom: 20px;
}
.title {
font-size: 18px;
font-weight: bold;
margin-right: 10px;
}
.badge {
background: #ffcc00;
color: #333;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
margin-right: 10px;
}
.follow-btn {
color: #1890ff;
border: 1px solid #1890ff;
padding: 2px 10px;
border-radius: 4px;
font-size: 12px;
}
.stafollow-btn {
color: #ffffff;
border: 1px solid red;
background: red;
padding: 2px 10px;
border-radius: 4px;
font-size: 12px;
}
.info-section {
// border-top: 1px solid #eee;
padding-top: 10px;
}
.info-item {
margin-bottom: 12px;
line-height: 1.5;
}
.info-label {
font-weight: bold;
color: #333;
}
.info-content {
color: #666;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
}
.avatar-img {
width: 100%;
height: 100%;
}
.card {
background-color: #ffffff;
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin-top: 10px;
}
.card-header {
margin-bottom: 16px;
}
.title {
font-size: 16px;
font-weight: bold;
color: #333;
display: block;
}
.subtitle {
font-size: 14px;
color: #666;
display: block;
// 新增样式控制两行显示
// overflow: hidden;
// display: -webkit-box;
// -webkit-box-orient: vertical;
// -webkit-line-clamp: 2; /* 限制显示两行 */
}
.stats-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
.stat-item {
flex: 1;
text-align: center;
}
.stat-number {
font-size: 16px;
font-weight: bold;
color: #1890ff;
display: flex; /* 弹性布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中(关键) */
gap: 8rpx; /* 图片与文字间距 */
}
// 补充:确保图片和文字的垂直基准一致(可选)
.stat-number image {
vertical-align: middle; /* 图片垂直居中(兼容非 flex 场景) */
}
.comment-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 8px;
width: 80%;
}
.comment-input {
width: 100%;
height: 150px;
margin-bottom: 20px;
}
.modal-buttons {
display: flex;
justify-content: space-around;
}
.img-list {
display: flex;
// flex-wrap: wrap;
gap: 10px; /* 图片之间的间距 */
}
.list-img {
// width: 100%; /* 图片宽度,根据需求调整 */
// height: 250rpx; /* 图片高度,根据需求调整 */
border-radius: 8rpx; /* 图片圆角 */
object-fit: cover; /* 图片填充方式 */
}
</style>