city-gather/src/subPack-common/feedbackList/index.vue

<script setup lang="ts">
const { themeVars } = storeToRefs(useManualThemeStore())
definePage({
  name: 'common-feedback-list',
  islogin: true,
  style: {
    navigationBarTitleText: '我的反馈',
  },
})

const { data: feedbackList, isLastPage, page } = usePagination(
  (pageNum, pageSize) => Apis.sys.myOpinionFeedback({ params: { pageNum, pageSize } }),
  { data: resp => resp.data?.list, initialPage: 1, initialPageSize: 10, immediate: true, append: true },
)

function previewImage(urls: string[], current: string) {
  uni.previewImage({ current, urls })
}

onReachBottom(() => {
  if (!isLastPage.value) {
    page.value++
  }
})
</script>

<template>
  <view class="page-wraper px-24rpx">
    <view v-for="(item, index) in feedbackList" :key="item.id">
      <view v-if="index === 0" class="h-20rpx" />
      <view class="mb-20rpx rounded-32rpx bg-#FFF p-24rpx">
        <view class="relative mt-42rpx flex items-center justify-between">
          <view class="absolute left-[-24rpx] px-24rpx py-14rpx text-#FFF" :style="{ backgroundColor: themeVars.colorTheme, borderTopRightRadius: '16rpx', borderBottomRightRadius: '16rpx' }">
            {{ item.opinionType }}
          </view>
          <view class="absolute right-0 text-28rpx text-#AAA">
            {{ item.createTime }}
          </view>
        </view>
        <view class="mt-54rpx text-28rpx text-#AAA">
          {{ item.feedbackDesc }}
        </view>
        <view v-if="item.img" class="mt-50rpx flex items-center gap-20rpx">
          <image
            v-for="(url, imgIndex) in item.img.split(',')"
            :key="imgIndex"
            class="h-120rpx w-120rpx rounded-32rpx"
            :src="url"
            mode="scaleToFill"
            @click="previewImage(item.img.split(','), url)"
          />
        </view>
        <view v-if="item.replyContent" class="mt-20rpx rounded-16rpx bg-#F0F0F0 p-20rpx text-24rpx">
          <text>回复：{{ item.replyContent }}</text>
          <text class="py-60rpx" />
          <text class="ml-120rpx text-#AAA">
            {{ item.replyTime }}
          </text>
        </view>
      </view>
    </view>
    <StatusTip v-if="!feedbackList.length" tip="暂无反馈" />
  </view>
</template>

<style lang="scss" scoped></style>