uniapp-im-shop/pages/discover/dynamic/dynamic.vue

<script setup>
  import { reactive, ref } from 'vue'
  import { navigateTo } from '@/utils/router'
  import {
    addUserMomentsComment,
    deleteUserMoments,
    likeUserMoments,
    getUserMomentsList
  } from '@/api/my-index'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  import { useAuthUser } from '@/composables/useAuthUser'
  import { formatRelativeTime } from '@/utils/dateUtils'
  import { useUI } from '@/utils/use-ui'

  const { userInfo } = useAuthUser()
  const { showDialog, showToast } = useUI()

  const placeholderStyle = `font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 28rpx;
color: #999999;
line-height: 40rpx;
font-style: normal;
text-transform: none;`
  const MAX_SCROLL = 446

  const paging = ref(null)
  const cbNavBar = ref({})
  const dataList = ref([])
  const topIcon = reactive({
    leftColor: '#ffffff',
    rightColor: '#ffffff'
  })
  const formData = reactive({
    type: '',
    pageNum: 1,
    pageSize: 15
  })
  const contentData = ref('')
  const inputId = ref('')

  const onScroll = e => {
    cbNavBar.value?.updateScroll(e.detail.scrollTop)
    if (e.detail.scrollTop > MAX_SCROLL - 220) {
      topIcon.leftColor = '#000'
      topIcon.rightColor = '#000'
    } else {
      topIcon.leftColor = '#ffffff'
      topIcon.rightColor = '#ffffff'
    }
  }

  const getData = async (pageNum, pageSize) => {
    try {
      const res = await getUserMomentsList({
        pageNum,
        pageSize
      })
      paging.value.complete(res.rows)
    } catch (error) {
      paging.value.complete(false)
    }
  }

  const onLike = async item => {
    await likeUserMoments(item.id)
    //  item.likeCount += 1
  }

  /** 点击查看大图 */
  const onImage = current => {
    uni.previewImage({
      urls: [current], // 图片路径数组（本地或网络）
      current: current // 当前显示的图片（可选，默认为第一张）
    })
    closeComment()
  }

  /** 关闭评论框 */
  const closeComment = () => {
    contentData.value = ''
    inputId.value = ''
  }

  /** 发布评论 */
  const onComment = async item => {
    console.log('发布评论')
    const data = {
      content: contentData.value,
      id: item.id
    }
    const res = await addUserMomentsComment(data)
    closeComment()
  }

  /** 删除动态 */
  const onDeleteItem = async id => {
    const res = await showDialog('提示', '确定要删除吗？')
    if (!res) return
    await deleteUserMoments(id)
    await showToast('删除成功', 'success')
    dataList.value = dataList.value.filter(item => item.id !== id)
  }

  onShow(() => {
    getData(1, formData.pageSize)
  })
  onLoad(async () => {})
</script>

<template>
  <z-paging
    ref="paging"
    v-model="dataList"
    :default-page-no="formData.pageNum"
    :default-page-size="formData.pageSize"
    safe-area-inset-bottom
    use-safe-area-placeholder
    :show-loading-more-no-more-view="false"
    @query="getData"
    @scroll="onScroll"
  >
    <template #top>
      <nav-bar
        ref="cbNavBar"
        isTopBg
        target-color="#f9f9f9"
        :max-scroll="MAX_SCROLL"
      >
        <template #back>
          <uni-icons
            :color="topIcon.leftColor"
            type="left"
            size="24"
          ></uni-icons>
        </template>
        <template #right>
          <uni-icons
            :color="topIcon.rightColor"
            type="camera"
            size="24"
            @click="navigateTo('/pages/discover/dynamic/release')"
          ></uni-icons>
        </template>
      </nav-bar>
    </template>
    <view class="top-bg-img">
      <image
        :src="userInfo.avatar"
        mode="aspectFill"
        class="img"
        @click="onImage(userInfo.avatar)"
      ></image>
      <!-- 用户信息 -->
      <view class="user-info">
        <text>{{ userInfo.userName }}</text>
        <image
          :src="userInfo.avatar"
          mode="aspectFill"
          class="avatar"
          @click="onImage(userInfo.avatar)"
        ></image>
      </view>
    </view>

    <!-- 动态列表 -->
    <view class="dynamic-list" @click="closeComment">
      <view v-for="item in dataList" :key="item.id" class="list">
        <image
          src="https://img1.baidu.com/it/u=2645961124,1296922095&fm=253&app=138&f=JPEG?w=800&h=1530"
          mode="aspectFill"
          class="avatar"
        ></image>
        <view class="content">
          <text class="name">名字</text>
          <text class="text">{{ item.content }}</text>
          <view class="img-list">
            <image
              src="https://p4.itc.cn/images01/20220619/46660ed163164c14be90e605a73ee5e8.jpeg"
              mode="aspectFill"
              class="item-img"
            ></image>
          </view>
          <!-- 地址 -->
          <view class="address">
            <text>{{ formatRelativeTime(item.createTime) }}</text>
            <!-- <text>重庆市渝北xxx寄街道</text> -->
          </view>
          <!-- 点赞评论 -->
          <view class="like-box">
            <view class="like" @click.stop="onLike(item)">
              <uni-icons
                type="hand-up"
                size="20"
                color="#747474"
              ></uni-icons>
              <text v-if="item.likeCount > 0">{{ item.likeCount }}</text>
            </view>
            <uni-icons
              type="chat"
              size="20"
              color="#747474"
              @click.stop="inputId = item.id"
            ></uni-icons>

            <uni-icons
              type="trash"
              size="20"
              color="#d95d5d"
              style="margin-left: 86rpx"
              @click.stop="onDeleteItem(item.id)"
            ></uni-icons>
          </view>
          <view v-if="inputId === item.id" class="input-box">
            <input
              v-model="contentData"
              focus
              confirm-type="done"
              placeholder="评论"
              :placeholder-style="placeholderStyle"
              @confirm.stop="onComment(item)"
            />
            <button @click.stop="onComment(item)">发布</button>
          </view>
          <!-- 评论内容 -->
          <view class="comment">
            <view v-for="item in 3" :key="item" class="comment-item">
              <text>Admin:</text>
              <text>确实的很好，值得推荐的很好</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </z-paging>
</template>

<style lang="scss" scoped>
  @import '../styles/dynamic.scss';
</style>