添加朋友圈功能

2026-01-13 01:12:29 +08:00
parent ac67fa30f4
commit 06e026c8b8
8 changed files with 319 additions and 44 deletions
--- a/pages/discover/dynamic/dynamic.vue
+++ b/pages/discover/dynamic/dynamic.vue
@@ -1,72 +1,171 @@
 <script setup>
  import { reactive, ref } from 'vue'
-  import { onPageScroll } from '@dcloudio/uni-app'
  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('')

-  onPageScroll(e => {
-    cbNavBar.value?.updateScroll(e.scrollTop)
-    if (e.scrollTop > MAX_SCROLL - 220) {
+  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>
-  <view class="dynamic">
-    <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>
+  <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="https://wx4.sinaimg.cn/mw690/006i0nC8ly1hqugav3k6yj31o01o0aod.jpg"
+        :src="userInfo.avatar"
        mode="aspectFill"
        class="img"
+        @click="onImage(userInfo.avatar)"
      ></image>
      <!-- 用户信息 -->
      <view class="user-info">
-        <text>名字</text>
+        <text>{{ userInfo.userName }}</text>
        <image
-          src="https://img2.baidu.com/it/u=3408192385,656358498&fm=253&app=138&f=JPEG?w=760&h=760"
+          :src="userInfo.avatar"
          mode="aspectFill"
          class="avatar"
+          @click="onImage(userInfo.avatar)"
        ></image>
      </view>
    </view>

    <!-- 动态列表 -->
-    <view class="dynamic-list">
-      <view v-for="item in 4" class="list">
+    <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"
@@ -74,7 +173,7 @@
        ></image>
        <view class="content">
          <text class="name">名字</text>
-          <text class="text">这是一条朋友圈的标题</text>
+          <text class="text">{{ item.content }}</text>
          <view class="img-list">
            <image
              src="https://p4.itc.cn/images01/20220619/46660ed163164c14be90e605a73ee5e8.jpeg"
@@ -84,20 +183,44 @@
          </view>
          <!-- 地址 -->
          <view class="address">
-            <text>19分钟前</text>
-            <text>重庆市渝北xxx寄街道</text>
+            <text>{{ formatRelativeTime(item.createTime) }}</text>
+            <!-- <text>重庆市渝北xxx寄街道</text> -->
          </view>
          <!-- 点赞评论 -->
          <view class="like-box">
-            <view class="like">
+            <view class="like" @click.stop="onLike(item)">
              <uni-icons
                type="hand-up"
                size="20"
                color="#747474"
              ></uni-icons>
-              <text>22</text>
+              <text v-if="item.likeCount > 0">{{ item.likeCount }}</text>
            </view>
-            <uni-icons type="chat" size="20" color="#747474"></uni-icons>
+            <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">
@@ -109,7 +232,7 @@
        </view>
      </view>
    </view>
-  </view>
+  </z-paging>
 </template>

 <style lang="scss" scoped>
--- a/pages/discover/dynamic/release.vue
+++ b/pages/discover/dynamic/release.vue
@@ -1,5 +1,8 @@
 <script setup>
  import { reactive } from 'vue'
+  import { addUserMoments } from '@/api/my-index'
+  import { useUI } from '@/utils/use-ui'
+  import { navigateBack } from '@/utils/router'

  const placeholderStyle = `font-family: PingFang SC, PingFang SC;
 font-weight: 500;
@@ -9,13 +12,31 @@ line-height: 40rpx;
 font-style: normal;
 text-transform: none;`

+  const { showToast } = useUI()
+
  const formData = reactive({
    txt: '',
    listImg: []
  })

-  const onUpData = () => {
-    console.log(formData)
+  const onUpData = async () => {
+    if (!formData.txt) {
+      showToast('请输入内容')
+      return
+    }
+
+    await addUserMoments({
+      content: formData.txt,
+      privacy: 0,
+      images: formData.listImg.map(v => {
+        return {
+          imageUrl: v
+        }
+      })
+    })
+    await showToast('发布成功', 'success')
+
+    navigateBack()
  }
 </script>

--- a/pages/discover/styles/dynamic.scss
+++ b/pages/discover/styles/dynamic.scss
@@ -79,7 +79,7 @@
          font-size: 24rpx;
          color: #999999;
          margin-right: 16rpx;
-          &:last-child {
+          &:nth-child(2) {
            font-size: 24rpx;
            color: #0c587e;
          }
@@ -121,6 +121,32 @@
          }
        }
      }
+      .input-box {
+        margin-top: 16rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-radius: 14rpx;
+        border: 2rpx solid #19ac31;
+        padding: 12rpx 18rpx;
+        input {
+          font-size: 28rpx;
+        }
+        button {
+          display: inline-block;
+          margin: 0;
+          width: 120rpx;
+          height: 60rpx;
+          line-height: 60rpx;
+          background: #19ac31;
+          border-radius: 8rpx;
+          font-size: 24rpx;
+          color: #ffffff;
+          &::after {
+            display: none;
+          }
+        }
+      }
    }
  }
 }
--- a/pages/discover/styles/index.scss
+++ b/pages/discover/styles/index.scss
@@ -9,7 +9,7 @@
    width: 100%;
    height: 38rpx;
    left: 0;
-    bottom: 0;
+    bottom: -2rpx;
    background: #ffffff;
    border-radius: 32rpx 32rpx 0rpx 0rpx;
  }