hmc_gbhd/frontend/src/pages/activity/dynamic/index.vue

<template>
  <view class="page-container">
    <t-dropdown-menu class="top-dropdown">
      <t-dropdown-item :options="actOptions" :value="selectActId"/>
    </t-dropdown-menu>

    <scroll-view
      scroll-y
      class="list-scroll-view"
      @scrolltolower="handleScrollToBottom"
      refresher-enabled
      :refresher-triggered="refresherTriggered"
      @refresherrefresh="handleRefresh"
      refresher-background="#f2f3f5"
    >
      <view class="content-container">
        <view v-for="item in dataList">
          <view class="content-container-header">
            <view>
              <t-avatar shape="circle" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" />
            </view>
            <view style="margin-left: 12px">
              <view class="title">{{ item.userName }}</view>
              <view class="content">{{ item.sex }}</view>
            </view>
          </view>
          <view class="content-container-text">
            {{ item.content }}
          </view>
          <view class="content-container-pic">
            <t-image
              v-for="p in JSON.parse(item.files)"
              v-if="item.files && item.files?.length > 0"
              class="image-container"
              :style="{ width: '72px', height: '72px', 'margin-right': '8px'}"
              fit="contain"
              @click="onView(item.files)"
              :src="p"></t-image>
          </view>
          <view class="content-container-footer">
            <view class="time">{{ moment(item.publish).format('MM-DD HH:mm') }}</view>
            <view @click="onPraise(item)">
              <t-badge :count="item.praiseCount" :offset="[-2, -2]" class="badge-item" :showZero="true">
                <t-icon :style="item.praiseCount > 0 ? 'color: var(--td-brand-color)' : ''" name="thumb-up-2-filled"/>
              </t-badge>
            </view>
          </view>
          <t-divider />
        </view>
      </view>

      <!-- 加载状态 -->
      <view class="loading-container">
        <t-loading v-if="loading" text="加载中..." layout="vertical" theme="circular" size="40rpx"/>
        <t-divider v-else-if="!hasMore && dataList.length > 0" content="没有更多数据了"/>
      </view>

      <!-- 空状态 -->
      <t-empty
        v-if="!loading && dataList.length === 0"
        description="暂无精彩瞬间"
      />
    </scroll-view>

  </view>

  <t-fab :icon="iconFunc" draggable="all" :y-bounds="[30, 20]" @click="onClick" />
  <t-image-viewer v-model:images="imagesArray" v-model:visible="imageVisible" />
  <publish-moment v-model:show="dynamicVisible" :actId="selectActId" @published="getListData"></publish-moment>
</template>

<script setup>
import {ref, reactive, onMounted, computed, h} from 'vue';
import {Toast} from 'tdesign-mobile-vue';
import {useRequest} from "@/utils/request";
import { AddIcon } from 'tdesign-icons-vue-next';
import PublishMoment from "@/pages/activity/dynamic/PublishMoment.vue";
import moment from "moment";

const iconFunc = () => h(AddIcon, { size: '24px' });
const request = useRequest()
const actList = ref([])
const imagesArray = ref([])
const imageVisible = ref(false)
const refresherTriggered = ref(false);
const loading = ref(false);
const hasMore = ref(true);
const dataList = ref([]);
const content = ref(null);

const dynamicVisible = ref(false);

const actOptions = computed(() => {
  return actList.value.map(item => {
    return {
      value: item.id,
      label: item.title
    }
  })
})

const selectActId = ref(null)
const pageForm = reactive({
  activityId: null,
  pageNumber: 1,
  pageSize: 10,
  totalCount: 0,
  searchKeyword: '',
  status: '' // 全部
})

async function onClick() {
  dynamicVisible.value = true
}
async function onPraise(row) {
  request.post('/client/activity/dynamic/praise/' + row.id).then(res=>{
    if(res.code===0){
      getListData(false)
    }else{
      Toast({message: res.msg, theme: 'error'});
    }
  })
}
async function listMineAct() {
  try {
    const {data, code, msg} = await request.get('/client/activity/list-mine-act')
    if (code === 0) {
      actList.value = data
      if (actList.value.length) {
        selectActId.value = actList.value[0].id
      }
    } else {
      Toast.error(msg)
    }
  } catch (e) {
    Toast.error(e.message)
  }
}
async function onView(src) {
  console.log(src)
  imagesArray.value = src
  imageVisible.value = true
}
// 触底加载更多
const handleScrollToBottom = () => {
  if (loading.value || !hasMore.value) return;
  getListData();
};
//下拉刷新
const handleRefresh = () => {
  if (loading.value) {
    refresherTriggered.value = false;
    return;
  }
  refresherTriggered.value = true;
  pageForm.pageNumber = 1;
  getListData(true);
};
// 获取列表数据
const getListData = async (isRefresh = false) => {
  if (loading.value) return;
  loading.value = true;
  if (isRefresh) {
    pageForm.pageNumber = 1;
  }
  // 延时1秒，模拟网络请求
  await new Promise(resolve => setTimeout(resolve, 1000));
  try {
    const response = await useRequest().post('/client/activity/dynamic/list', {
      pageForm: JSON.stringify(pageForm),
      activityId: selectActId.value
    });
    if (response.code === 0) {
      const {list, totalCount} = response.data;
      if (isRefresh) {
        dataList.value = list;
      } else {
        dataList.value = [...dataList.value, ...list];
      }
      pageForm.totalCount = totalCount;
      hasMore.value = dataList.value.length < totalCount;
      pageForm.pageNumber++;
    } else {
      Toast({message: '获取列表失败', theme: 'error'});
    }
  } catch (error) {
    Toast({message: '获取列表失败', theme: 'error'});
  } finally {
    loading.value = false;
    // 重置下拉刷新状态
    if (refresherTriggered.value) {
      refresherTriggered.value = false;
    }
  }
};

onMounted(() => {
  listMineAct();
  getListData();
});

</script>

<style scoped lang="less">
.header {
  position: relative;
  height: 245px;
  overflow: hidden;
}
.header-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.textarea {
  height: 300px;
  width: 100%;
}
.list-scroll-view {
  flex: 1;
  height: 0;
}
.page-container {
  background: white;
}
.content-container {
  padding: 16px;
}
.content-container-header {
  display: flex;
  align-items: center;
  .title {
    font-weight: bold;
    color: rgb(35, 110, 180);
    margin-bottom: 2px;
  }
  .content {
    font-size: 13px;
  }
}
.content-container-text {
  margin-top: 6px;
}
.content-container-footer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  .t-icon {
    font-size: 18px;
  }
  .time {
    color: grey;
  }
}
.button-group {
  background-color: var(--bg-color-demo, #fff);
  box-sizing: border-box;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  position: relative;

  .t-button {
    height: 32px;
    flex: 1;

    &:not(:last-child) {
      flex: 1;
      margin-right: 16px;
    }
  }
}
.content-container-pic {
  display: flex;
}
</style>