|
@@ -34,6 +34,8 @@ import { getRect, addUnit } from 'wot-design-uni/components/common/util'
|
|
|
import Card from '@/components/card.vue'
|
|
|
import { get } from 'radash'
|
|
|
import { DictType } from '../../../core/libs/models'
|
|
|
+import MomentVideo from '@/pages/home/components/moment-video.vue'
|
|
|
+import {ComponentExposed} from "vue-component-type-helpers";
|
|
|
|
|
|
const { features, clickByPermission } = usePermissions()
|
|
|
const userStore = useUserStore()
|
|
@@ -42,11 +44,12 @@ const router = useRouter()
|
|
|
const dictStore = useDictStore()
|
|
|
const { getOptionLabel } = dictStore
|
|
|
const id = ref()
|
|
|
-const currentImg = ref(0)
|
|
|
+const current = ref(0)
|
|
|
const isShared = ref(false)
|
|
|
-const commeentRef = ref<InstanceType<typeof WdInput>>()
|
|
|
+const commentRef = ref<InstanceType<typeof WdInput>>()
|
|
|
const commentItemRef = ref<InstanceType<typeof CommentItem>[]>()
|
|
|
const instance = getCurrentInstance()
|
|
|
+const momentVideoRef = ref<ComponentExposed<typeof MomentVideo>[]>()
|
|
|
|
|
|
const focus = ref(false)
|
|
|
const { data, run } = useRequest(() => getCircle(id.value), { initialData: {} })
|
|
@@ -62,24 +65,25 @@ const { data: circleUpvotes, run: setCircleUpvotes } = useRequest(
|
|
|
() => getCircleUpvotes(id.value),
|
|
|
{ initialData: { list: [], total: 0 } },
|
|
|
)
|
|
|
-const swiperSizes = ref()
|
|
|
const swiperStyle = ref()
|
|
|
const reviewContent = ref('')
|
|
|
-const isVideo = ref(false)
|
|
|
const reviewId = ref()
|
|
|
const refreshIndex = ref<number>()
|
|
|
-const handleChange = ({ detail: { current } }) => {
|
|
|
- // console.log(current)
|
|
|
- currentImg.value = current;
|
|
|
- // swiperStyle.value = {
|
|
|
- // height: swiperSizes.value[current].height + 'px',
|
|
|
- // }
|
|
|
+const isVideo = computed(
|
|
|
+ () => data.value?.bannerUrls?.length && isImageOrVideo(data.value.bannerUrls.at(0)) === 'video',
|
|
|
+)
|
|
|
+const handleChange = ({ detail }) => {
|
|
|
+ console.log('current', current.value, detail.current)
|
|
|
+ console.log(momentVideoRef.value)
|
|
|
+ if (isVideo.value) {
|
|
|
+ momentVideoRef.value[current.value]?.videoContext.pause()
|
|
|
+ }
|
|
|
+ current.value = detail.current
|
|
|
}
|
|
|
const setSwiperStyle = async () => {
|
|
|
if (!data.value.bannerUrls.length) return
|
|
|
const { screenWidth } = await uni.getSystemInfo()
|
|
|
- if (data.value.bannerUrls.length === 1 && isImageOrVideo(data.value.bannerUrls[0]) === 'video') {
|
|
|
- isVideo.value = true
|
|
|
+ if (isImageOrVideo(data.value.bannerUrls[0]) === 'video') {
|
|
|
return
|
|
|
}
|
|
|
|
|
@@ -90,17 +94,19 @@ const setSwiperStyle = async () => {
|
|
|
height:
|
|
|
height > width
|
|
|
? addUnit(500)
|
|
|
- : height === width?addUnit(screenWidth):addUnit(
|
|
|
- screenWidth / width > 1
|
|
|
- ? height / (screenWidth / width)
|
|
|
- : height * (screenWidth / width),
|
|
|
- ),
|
|
|
+ : height === width
|
|
|
+ ? addUnit(screenWidth)
|
|
|
+ : addUnit(
|
|
|
+ screenWidth / width > 1
|
|
|
+ ? height / (screenWidth / width)
|
|
|
+ : height * (screenWidth / width),
|
|
|
+ ),
|
|
|
}
|
|
|
console.log('swiperStyle', swiperStyle.value)
|
|
|
}
|
|
|
const handleSend = async () => {
|
|
|
if (!reviewContent.value) {
|
|
|
- uni.showToast({ title: '请输入评论内容', icon: 'none' })
|
|
|
+ await uni.showToast({ title: '请输入评论内容', icon: 'none' })
|
|
|
return
|
|
|
}
|
|
|
const { code, msg } = await createCircleReview({
|
|
@@ -111,13 +117,13 @@ const handleSend = async () => {
|
|
|
replayReviewId: reviewId.value,
|
|
|
})
|
|
|
if (code !== 0) {
|
|
|
- uni.showToast({ title: msg, icon: 'none' })
|
|
|
+ await uni.showToast({ title: msg, icon: 'none' })
|
|
|
} else {
|
|
|
reviewContent.value = ''
|
|
|
- uni.showToast({ title: '评论成功', icon: 'none' })
|
|
|
+ await uni.showToast({ title: '评论成功', icon: 'none' })
|
|
|
if (refreshIndex.value) {
|
|
|
console.log(instance.refs)
|
|
|
- commentItemRef.value.at(refreshIndex.value).refresh()
|
|
|
+ await commentItemRef.value.at(refreshIndex.value).refresh()
|
|
|
reviewId.value = undefined
|
|
|
refreshIndex.value = undefined
|
|
|
} else {
|
|
@@ -133,14 +139,14 @@ const handleReplay = async (options) => {
|
|
|
}
|
|
|
const handleDelete = async (index?: number) => {
|
|
|
if (index !== undefined) {
|
|
|
- commentItemRef.value.at(index).refresh()
|
|
|
+ await commentItemRef.value.at(index).refresh()
|
|
|
} else {
|
|
|
await runGetReviews()
|
|
|
}
|
|
|
}
|
|
|
const handleUpvote = async (index?: number) => {
|
|
|
if (index !== undefined) {
|
|
|
- commentItemRef.value.at(index).refresh()
|
|
|
+ await commentItemRef.value.at(index).refresh()
|
|
|
} else {
|
|
|
await run()
|
|
|
}
|
|
@@ -196,18 +202,51 @@ onShareAppMessage(async ({ from, target }) => {
|
|
|
<template v-if="data.circleType === '1'">
|
|
|
<template v-if="!isVideo">
|
|
|
<div class="pos-relative">
|
|
|
- <div class="currentImg">{{ currentImg + 1 }}/{{data?.bannerUrls.length}}</div>
|
|
|
- <swiper :current="currentImg" :style="swiperStyle" @change="handleChange" :indicator-dots="true">
|
|
|
+ <div class="currentImg">{{ current + 1 }}/{{ data?.bannerUrls.length }}</div>
|
|
|
+ <swiper
|
|
|
+ :current="current"
|
|
|
+ :style="swiperStyle"
|
|
|
+ @change="handleChange"
|
|
|
+ :indicator-dots="true"
|
|
|
+ >
|
|
|
<template v-for="it of data?.bannerUrls" :key="it">
|
|
|
<swiper-item>
|
|
|
- <wd-img width="100%" height="100%" :src="it" mode="aspectFill" :enable-preview="true"></wd-img>
|
|
|
+ <wd-img
|
|
|
+ width="100%"
|
|
|
+ height="100%"
|
|
|
+ :src="it"
|
|
|
+ mode="aspectFill"
|
|
|
+ :enable-preview="true"
|
|
|
+ ></wd-img>
|
|
|
</swiper-item>
|
|
|
</template>
|
|
|
</swiper>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template v-if="isVideo">
|
|
|
- <video width="100%" class="w-full aspect-[1.64/1]" :src="data?.bannerUrls[0]"></video>
|
|
|
+ <div class="relative aspect-[1.64/1]">
|
|
|
+ <div class="currentImg">{{ current + 1 }}/{{ data?.bannerUrls.length }}</div>
|
|
|
+ <swiper @change="handleChange">
|
|
|
+ <template v-for="it of data?.bannerUrls" :key="it">
|
|
|
+ <swiper-item>
|
|
|
+ <!-- <video-->
|
|
|
+ <!-- ref="momentVideo"-->
|
|
|
+ <!-- width="100%"-->
|
|
|
+ <!-- class="w-full aspect-[1.64/1]"-->
|
|
|
+ <!-- :controls="'contimg'"-->
|
|
|
+ <!-- :loop="true"-->
|
|
|
+ <!-- :enable-progress-gesture="false"-->
|
|
|
+ <!-- :src="it"-->
|
|
|
+ <!-- ></video>-->
|
|
|
+ <MomentVideo
|
|
|
+ ref="momentVideoRef"
|
|
|
+ :src="it"
|
|
|
+ :enable-progress-gesture="false"
|
|
|
+ ></MomentVideo>
|
|
|
+ </swiper-item>
|
|
|
+ </template>
|
|
|
+ </swiper>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</template>
|
|
|
<template v-if="data.circleType === '2'">
|
|
@@ -342,7 +381,7 @@ onShareAppMessage(async ({ from, target }) => {
|
|
|
<div class="bg-white flex items-center">
|
|
|
<div class="w-[168px] bg-[#f6f6f6] rounded-[60px] px-3.5 py-2 flex items-center">
|
|
|
<wd-input
|
|
|
- ref="commeentRef"
|
|
|
+ ref="commentRef"
|
|
|
custom-class="bg-transparent!"
|
|
|
no-border
|
|
|
confirm-type="send"
|
|
@@ -405,15 +444,15 @@ onShareAppMessage(async ({ from, target }) => {
|
|
|
</view>
|
|
|
</template>
|
|
|
<style lang="scss" scope>
|
|
|
- .currentImg{
|
|
|
- position:absolute;
|
|
|
- z-index:2;
|
|
|
- color:#fff;
|
|
|
- background-color: rgba(0,0,0,.5);
|
|
|
- top:10rpx;
|
|
|
- right:10rpx;
|
|
|
- padding:4rpx 20rpx;
|
|
|
- font-size:24rpx;
|
|
|
- border-radius: 8rpx;
|
|
|
- }
|
|
|
-</style>
|
|
|
+.currentImg {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 2;
|
|
|
+ color: #fff;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ top: 10rpx;
|
|
|
+ right: 10rpx;
|
|
|
+ padding: 4rpx 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+}
|
|
|
+</style>
|