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

<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"
              >玉田，隶属河北省唐山市，自古崇文重教，素有“京东文化名城”之美誉。近年来，玉田坚持以办好人民满意的教育为目标，持续深化教育改革，优化资源配置，推动教育事业高质量发展，为县域经济社会发展提供了强有力的人才支撑。</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 l16 from "@/static/img/index/l16.png"; // 导入图片资源
import l17 from "@/static/img/index/l17.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:
            "玉田，隶属河北省唐山市，自古崇文重教，素有“京东文化名城”之美誉。近年来，玉田坚持以办好人民满意的教育为目标，持续深化教育改革，优化资源配置，推动教育事业高质量发展，为县域经济社会发展提供了强有力的人才支撑。一、教育资源均衡发展  玉田高度重视教育公平，通过实施“城乡教育一体化”工程，推动优质教育资源向农村倾斜。近年来，累计投入资金，新建、改扩建中小学及幼儿园，农村学校全部实现标准化建设。同时，通过“集团化办学”“结对帮扶”等，缩小城乡校际差距，确保每个孩子“有学上、上好学”。二、教学质量稳步提升  以“双减”政策为契机，玉田深化课堂教学改革，推广“高效课堂”模式，强化素质教育。中考、高考成绩连续多年位居唐山市前列，玉田一中等重点高中成为区域教育标杆。职业教育同步发力，玉田职业技术教育中心开设机电、现代农业等特色专业，年均培养技能型人才超千人，服务本地产业升级。三、师资队伍持续优化  通过“名师工程”“骨干教师培训计划”等举措，玉田累计培养省级以上优秀教师，县级教学能手。每年设立专项经费支持教师研修，并提高乡村教师待遇，确保师资队伍“留得住、教得好”。四、特色教育成果显著  玉田立足本土文化，打造“非遗进校园”“红色教育”等品牌活动，将泥塑、剪纸等传统文化融入课程。同时，大力发展校园足球、科技创新等特色项目，多所学校获评“全国青少年校园足球特色学校”“河北省科技创新示范校”。",
          xin: false,
          timer: "2025-05-25 09:45  玉田",
          xinnum: 0,
          xing: false,
          xingnum: 0,
          ping: false,
          pingnum: 0,
          pingcontent: [],
          fen: false,
          fennum: 0,
          imglist: [l16, l17],
        },
      ],
    };
  },
  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: 250rpx; /* 图片宽度，根据需求调整 */
  //   height: 250rpx; /* 图片高度，根据需求调整 */
  border-radius: 8rpx; /* 图片圆角 */
  object-fit: cover; /* 图片填充方式 */
}
</style>