designer-hub/packages/merchant/src/pages/home/moment/index.vue

<route lang="yaml">
style:
  navigationBarTitleText: '详情'
  navigationBarBackgroundColor: '#fff'
</route>
<script setup lang="ts">
import Tag from '@/components/tag.vue'
import {
  createCircleReview,
  getCircle,
  getCircleReviews,
  getMoment,
} from '../../../core/libs/requests'
import { handleUpvoteClick } from '../../../core/libs/actions'
import { thumbsUp } from '../../../core/libs/svgs'
import CommentItem from '../components/comment-item.vue'
import AvatarGroupCasual from '@/components/avatar-group-casual/avatar-group-casual.vue'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const id = ref()
const { data, run } = useRequest(() => getCircle(id.value), { initialData: {} })
const { data: reviews, run: runGetReviews } = useRequest(
  () => getCircleReviews({ circleId: id.value }),
  {
    initialData: {
      list: [],
    },
  },
)
const current = ref(0)
const swiperSizes = ref()
const swiperStyle = ref()
const reviewContent = ref('')
const handleChange = ({ detail: { current } }) => {
  swiperStyle.value = {
    height: swiperSizes.value[current].height + 'px',
  }
}
const setSwiperStyle = async () => {
  const { screenWidth } = await uni.getSystemInfo()
  swiperSizes.value = (
    await Promise.all(data.value.bannerUrls.map((src) => uni.getImageInfo({ src })))
  ).map(({ width, height }) => ({ width: screenWidth, height: height / (width / screenWidth) }))
  swiperStyle.value = {
    height: swiperSizes.value[0].height + 'px',
  }
}
const handleSend = async () => {
  const { code, msg } = await createCircleReview({
    circleId: id.value,
    userId: userInfo.value.userId,
    userName: userInfo.value.nickname,
    reviewContent: reviewContent.value,
  })
  if (code !== 0) {
    uni.showToast({ title: msg, icon: 'none' })
  } else {
    reviewContent.value = ''
    uni.showToast({ title: '评论成功', icon: 'none' })
  }
}
onMounted(async () => {})
onLoad(async (query: { id: string }) => {
  id.value = query.id
  await run()
  await runGetReviews()
  await setSwiperStyle()
})
</script>
<template>
  <view class="bg-white flex-grow">
    <!-- <div class="my-4 text-black/90 text-lg font-normal font-['PingFang SC'] leading-[10.18px]">
      {{ data?.content }}
    </div> -->
    <template v-if="swiperSizes">
      <swiper :style="swiperStyle" @change="handleChange">
        <template v-for="it of data?.bannerUrls" :key="it">
          <swiper-item>
            <wd-img width="100%" :src="it" mode="widthFix"></wd-img>
          </swiper-item>
        </template>
      </swiper>
    </template>
    <!-- <wd-swiper
      v-model="current"
      custom-class="my-1"
      autoplay="false"
      :list="data?.images"
      :indicator="{ type: 'fraction' }"
      indicatorPosition="top-right"
      imageMode="widthFix"
    ></wd-swiper> -->
    <view class="m-3.5">
      <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[10.18px]">
        {{ data?.circleDesc }}
      </div>
      <view class="my-5.5 flex gap-3.5">
        <!-- <TiltedButton>按钮</TiltedButton> -->
        <template v-if="data?.tagName !== ''">
          <template v-for="it of data?.tagName?.split(',')" :key="it">
            <Tag>{{ it }}</Tag>
          </template>
        </template>
      </view>
      <div class="text-black/30 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
        2024-5-31 10:06
      </div>
      <view class="flex items-center my-4">
        <view class="flex items-center">
          <avatar-group-casual
            :show-number="3"
            :urls="[
              'https://via.placeholder.com/20x20',
              'https://via.placeholder.com/20x20',
              'https://via.placeholder.com/20x20',
            ]"
          ></avatar-group-casual>
          <div
            class="ml-1 text-black/60 text-sm font-normal font-['PingFang SC'] leading-[10.18px]"
          >
            40人赞过
          </div>
        </view>
        <view class="flex-1"></view>
        <view><wd-icon class="text-black/65" name="arrow-right" size="22px"></wd-icon></view>
      </view>
      <!-- <SectionHeading :title="`评论 ${data.comments}`"></SectionHeading> -->
      <view class="flex items-center my-8">
        <div class="text-black/90 text-base font-normal font-['PingFang SC'] leading-[10.18px]">
          <span>评论</span>
          <!-- <span v-if="data?.comments">{{ data?.comments }}</span> -->
        </div>
        <view class="flex-1"></view>
        <view v-if="reviews?.list" class="flex">
          <div class="text-black/90 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
            按热度
          </div>
          <div
            class="mx-2 text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]"
          >
            |
          </div>
          <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
            按时间
          </div>
        </view>
      </view>

      <view>
        <template v-if="reviews?.list.length">
          <template v-for="it of reviews?.list" :key="it.id">
            <CommentItem :options="it" :isChild="false" @upvote="runGetReviews()"></CommentItem>
            <template v-for="child of it.childrens" :key="child.id">
              <CommentItem :options="child" :isChild="true"></CommentItem>
            </template>
          </template>
        </template>
        <template v-else>
          <view class="flex items-center justify-center mt-26 mb-36">
            <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
              这里空空的
            </div>
            <div
              class="ml-1.5 text-[#2f4471]/90 text-xs font-normal font-['PingFang SC'] leading-[10.18px]"
            >
              点击评论~
            </div>
          </view>
        </template>
      </view>
    </view>
    <div
      class="fixed bottom-0 left-0 right-0 border-t border-t-solid border-[#ececec] h-[54px] bg-white flex items-center px-3.5"
    >
      <div class="w-[168px] bg-[#f6f6f6] rounded-[60px] px-3.5 py-2 flex items-center">
        <wd-input
          custom-class="bg-transparent!"
          no-border
          confirm-type="send"
          v-model="reviewContent"
          @confirm="handleSend"
        ></wd-input>
      </div>
      <view class="flex justify-around flex-1">
        <view
          class="flex flex-col items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5"
        >
          <wd-img width="15" height="15" src="/static/svgs/share.svg"></wd-img>
          <view class="">{{ data?.shareCount }}</view>
        </view>
        <view
          class="flex flex-col items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5"
        >
          <wd-img width="15" height="15" src="/static/svgs/comment.svg"></wd-img>
          <view class="">{{ data?.reviewCount }}</view>
        </view>
        <view
          class="flex flex-col items-center text-[rgba(0,0,0,0.85)] text-3.5 font-400 line-height-5.5"
          @click="
            handleUpvoteClick(
              {
                upvote: data.ownUpvote,
                circleId: data.id,
                userId: userInfo.userId,
                userName: userInfo.nickname,
              },
              () => run(),
            )
          "
        >
          <wd-img width="15" height="15" :src="thumbsUp"></wd-img>
          <view>{{ data.upvoteCount }}</view>
        </view>
      </view>
    </div>
  </view>
</template>