|  | @@ -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>
 |