|
|
@@ -0,0 +1,147 @@
|
|
|
+<route lang="yaml">
|
|
|
+style:
|
|
|
+ navigationBarTitleText: '详情'
|
|
|
+ navigationBarBackgroundColor: '#fff'
|
|
|
+</route>
|
|
|
+<script setup lang="ts">
|
|
|
+import SectionHeading from '@/components/section-heading.vue'
|
|
|
+import Tag from '@/components/tag.vue'
|
|
|
+import { getMoment } from '@/core/libs/requests'
|
|
|
+import { thumbsUp } from '@/core/libs/svgs'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import CommentItem from '../components/comment-item.vue'
|
|
|
+import AvatarGroupCasual from '@/components/avatar-group-casual/avatar-group-casual.vue'
|
|
|
+
|
|
|
+const { data, run } = useRequest(getMoment)
|
|
|
+const current = ref(0)
|
|
|
+const swiperSizes = ref()
|
|
|
+const swiperStyle = 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.images.map((src) => uni.getImageInfo({ src })))
|
|
|
+ ).map(({ width, height }) => ({ width: screenWidth, height: height / (width / screenWidth) }))
|
|
|
+ swiperStyle.value = {
|
|
|
+ height: swiperSizes.value[0].height + 'px',
|
|
|
+ }
|
|
|
+}
|
|
|
+onMounted(async () => {
|
|
|
+ await run()
|
|
|
+ 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?.images" :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]">
|
|
|
+ 用心做好设计，为客户创造美好家居环境
|
|
|
+ </div>
|
|
|
+ <view class="my-5.5">
|
|
|
+ <!-- <TiltedButton>按钮</TiltedButton> -->
|
|
|
+ <template v-for="it of data?.tags" :key="it">
|
|
|
+ <Tag>{{ it }}</Tag>
|
|
|
+ </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]">
|
|
|
+ {{ `评论 ${data?.comments}` }}
|
|
|
+ </div>
|
|
|
+ <view class="flex-1"></view>
|
|
|
+ <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>
|
|
|
+ <template v-for="it of data?.commentList" :key="it.id">
|
|
|
+ <CommentItem :options="it" :isChild="false"></CommentItem>
|
|
|
+ <template v-for="child of it.childrens" :key="child.id">
|
|
|
+ <CommentItem :options="child" :isChild="true"></CommentItem>
|
|
|
+ </template>
|
|
|
+ </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></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.shares }}</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.shares }}</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="thumbsUp"></wd-img>
|
|
|
+ <view>{{ data.shares }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </div>
|
|
|
+ </view>
|
|
|
+</template>
|
