|
@@ -1,220 +0,0 @@
|
|
-<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>
|
|
|