Yi.Admin/Yi.App.Vue3/src/view/main/recommend.vue

<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      class="list"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-row v-for="(item, index) in articleList" :key="index" class="row">
        <van-col span="4" class="leftCol">
          <AppUserIcon
            width="3rem"
            height="3rem"
            :src="item.user == null ? null : item.user.icon"
          />
        </van-col>

        <van-col span="14" class="centerTitle">
          <span class="justtitle">{{
            item.user == null ? "-" : item.user.nick ?? item.user.username
          }}</span>
          <br />
          <app-createTime :time="item.creationTime" />
        </van-col>

        <van-col span="6" class="down">
          <van-icon name="arrow-down" @click="show = true" />
        </van-col>

        <van-col class="rowBody" span="24">{{ item.content }}</van-col>

        <van-col
          span="8"
          v-for="(image, imageIndex) in item.images"
          :key="imageIndex"
          class="imageCol"
          @click="openImage(item.images, imageIndex)"
        >
          <van-image
            lazy-load
            fit="cover"
            width="100%"
            height="7rem"
            :src="url + image + '/true'"
            radius="5"
          />
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-col>

        <van-col span="24" class="bottomRow">
          <van-grid direction="horizontal" :column-num="3">
            <van-grid-item icon="share-o" text="分享" />
            <van-grid-item
              icon="comment-o"
              text="评论"
              @click="openComment(item.id)"
            />
            <!-- <van-grid-item
              icon="good-job-o"
              :text="`点赞:${item.agreeNum}`"
              @click="aggreeHand(item.id)"
            /> -->
                      <van-grid-item
              icon="good-job-o"
              :text="`点赞:10`"
              @click="aggreeHand(item.id)"
            />
          </van-grid>
        </van-col>
      </van-row>
    </van-list>
  </van-pull-refresh>
  <!-- 功能页面 -->
  <van-action-sheet
    v-model:show="show"
    :actions="actions"
    cancel-text="取消"
    close-on-click-action
  />

  <!-- 图片预览 -->
  <van-image-preview
    v-model:show="imageShow"
    :images="imagesPreview"
    :startPosition="startIndex"
    @change="onChange"
    :closeable="true"
  >
    <template v-slot:index>第{{ index + 1 }}页</template>
  </van-image-preview>

  <!-- 评论面板 -->
  <van-action-sheet v-model:show="commentShow" title="共10条评论">
    <van-row v-for="i in commentList" :key="i" class="commentContent">
      <van-col span="4">头像</van-col>
      <van-col span="16">{{ i.content }}</van-col>
      <van-col span="4">点赞</van-col>
    </van-row>

    <van-cell-group inset>
      <van-field v-model="commentData.content"  placeholder="请输入评论" >
        <template #button>
      <van-button size="small" type="primary" @click="sendComment()">发布</van-button>
    </template>
      </van-field>
    </van-cell-group>
  </van-action-sheet>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, toRefs } from "vue";
import { ImagePreview, Toast } from "vant";
import AppCreateTime from "@/components/AppCreateTime.vue";
import AppUserIcon from "@/components/AppUserIcon.vue";
import articleApi from "@/api/articleApi";
import agreeApi from "@/api/agreeApi";
import commentApi from "@/api/commentApi";
const VanImagePreview = ImagePreview.Component;
const url = `${import.meta.env.VITE_APP_BASE_API}/file/`;
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    // dictName: undefined,
    // dictType: undefined,
    isDeleted: false,
  },
});

const commentData = reactive({
  content: "",
  articleId:0
});
const sendComment=()=>{
 commentData.articleId=openCommentId.value;
  commentApi.add(commentData).then(()=>{
    getCommentList(openCommentId.value);
    commentData.content="";
  })
}

const { queryParams } = toRefs(data);
const {content}=toRefs(commentData);
const articleList = ref<any[]>([]);
const commentList = ref<any[]>([]);
const totol = ref<Number>(0);
const imageShow = ref(false);
const commentShow = ref<any>(false);
const index = ref(0);
let imagesPreview = ref<string[]>([]);
const openCommentId=ref(0);
const openComment = (id: any) => {
  commentShow.value = true;
  openCommentId.value=id;
  getCommentList(id);
};

const onChange = (newIndex: any) => {
  index.value = newIndex;
};

const list = ref<Number[]>([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const startIndex = ref(0);
const show = ref(false);
const actions = [{ name: "取消关注" }, { name: "将TA拉黑" }, { name: "举报" }];

const onLoad = async () => {
  if (refreshing.value) {
    articleList.value = [];
    refreshing.value = false;
  }
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  articleApi.pageList(queryParams.value).then((response: any) => {
    if (response.data.items.length == 0) {
      console.log("结束");
      finished.value = true;
    } else {
      console.log("执行");
      articleList.value.push(...response.data.items);
      totol.value = response.data.totol;
      queryParams.value.pageNum += 1;
    }

    loading.value = false;
  });
};
const onRefresh = () => {
  finished.value = false;

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  queryParams.value.pageNum = 1;
  onLoad();
};
const openImage = (imagesUrl: string[], imageIndex: any) => {
  imagesPreview.value = imagesUrl.map((i) => url + i);
  startIndex.value = imageIndex;
  imageShow.value = true;
};
onMounted(() => {
  articleList.value = [];
  // getList();
});

const getCommentList = (id: any) => {
  commentApi.getListByArticleId(id).then((response: any) => {
    commentList.value = response.data;
  });
};

const getList = () => {
  articleApi.pageList(queryParams.value).then((response: any) => {
    articleList.value.push(...response.data.data);
    totol.value = response.data.totol;
  });
};
const aggreeHand = (articleId: any) => {
  agreeApi.operate(articleId).then((response: any) => {
    //更改显示的值
    if (response.status) {
      articleList.value.filter((p) => p.id == articleId)[0].agreeNum += 1;
    } else {
      articleList.value.filter((p) => p.id == articleId)[0].agreeNum -= 1;
    }
    Toast({
      message: response.message,
      position: "bottom",
    });
  });
};
</script>
<style scoped>
.list {
  background-color: #f4f4f4;
}

.row {
  background-color: white;
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-bottom: 0.6rem;
}

.rowBody {
  text-align: left;
  background-color: white;

  margin-top: 1rem;
  margin-bottom: 1rem;
}

.title {
  padding-top: 1rem;

  min-height: 3rem;
  text-align: left;
}

.leftCol {
  align-content: left;
  text-align: left;
}

.centerTitle {
  text-align: left;
}

.imageCol {
  padding: 0.1rem 0.1rem 0.1rem 0.1rem;
}

.subtitle {
  color: #cbcbcb;
}

.justtitle {
  font-size: large;
}

.bottomRow {
  color: #999999;
}

.down {
  text-align: right;
  padding-right: 0.5rem;
}

.commentContent {
  margin-bottom: 4rem;
}
</style>