tj
2025-06-05 b84ced02cc40cad7cdd99d80b54638f72ccab7e6
sub-pages/film-list/film-detail.vue
@@ -20,25 +20,26 @@
                <view class="swiper-container">
                    <swiper :current="currentNum" @change="onSwiperChange" circular :autoplay="false"
                        class="custom-swiper">
                        <swiper-item v-for="(item, index) in list6" :key="index" class="swiper-item">
                        <swiper-item v-for="(item, index) in filmPictureList" :key="index" class="swiper-item">
                            <image :src="item" mode="aspectFill" class="swiper-image" @tap="previewImage(index)" />
                        </swiper-item>
                    </swiper>
                    <view class="indicator-num">
                        <text class="indicator-num__text">{{ currentNum + 1 }}/{{ list6.length }}</text>
                        <text class="indicator-num__text">{{ currentNum + 1 }}/{{ filmPictureList.length }}</text>
                    </view>
                </view>
                <view class="article-content">
                    <view class="title content-item">
                        <text>我是标题标题我是标题标题我是标题标题我是标题标题</text>
                        <text>{{ filmInfo.coverTitle }}</text>
                    </view>
                    <view class="content-item">
                        <rich-text :nodes="desc" />
                        <!-- <rich-text :nodes="filmInfo.filmContent" /> -->
                        <up-parse :content="filmInfo.filmContent"></up-parse>
                    </view>
                    <view class="annotation content-item">
                        <text>4分钟前 美国</text>
                        <text>{{ formatRelativeTime(filmInfo.createTime) }} 美国</text>
                    </view>
                </view>
@@ -46,7 +47,7 @@
                <view class="comment">
                    <view class="writer-view" @click="showCommentLayer">
                        <up-icon name="chat-fill" size="60rpx"  />
                        <up-icon name="chat-fill" size="60rpx" />
                        <view class="comment-operation">
                            <up-text size="12px" text="说点什么......" margin="0 0 0 20rpx" color="#B9B9B9" />
                        </view>
@@ -77,8 +78,15 @@
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { onLoad } from '@dcloudio/uni-app'
import { useGlobal } from '@/composables/useGlobal'
const { $http, $message, $store } = useGlobal()
import { FilmInfo,FilmPicture } from '@/types/index'
import { formatRelativeTime } from '@/utils/time'
// Swiper 当前页
const currentNum = ref(0)
@@ -90,12 +98,6 @@
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg'
})
const list6 = ref<string[]>([
    'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg',
    'https://img.yzcdn.cn/vant/cat.jpeg',
    'https://ai-public.mastergo.com/ai/img_res/6a226f9e9652c51cd535c3490535dfeb.jpg'
])
const urls2 = ref<string[]>([
    'https://img.yzcdn.cn/vant/cat.jpeg'
])
@@ -106,9 +108,20 @@
  #新疆是个好地方 #新疆旅行攻略...
  `)
onLoad(() => {
onLoad((options:any) => {
    const theme = uni.getStorageSync('theme') || 'light'
    console.log('theme:', theme)
    // 获取传递来的参数
    console.log('传入参数:', options)
    // 示例:你传过来的参数可能是这样 ?id=123&type=test
    const id = options.id
    const type = options.type
    console.log('id:', id, 'type:', type)
    if(id){
        getFilmInfoById(id)
    }
})
const onSwiperChange = (e: any) => {
@@ -117,14 +130,54 @@
const previewImage = (index: number) => {
    uni.previewImage({
        current: list6.value[index],
        urls: list6.value
        current: filmPictureList.value[index],
        urls: filmPictureList.value
    })
}
const showCommentLayer = () => {
    commentShow.value = true
}
onShow(() => {
});
const filmInfo = ref<FilmInfo>()
const filmPictureList = ref<string[]>([])
const getFilmInfoById  = async (id:String)=>{
    const {
    code, data
  } = await $http.request('get', '/api/filmWorks/list/view', {
    params: {
      id: id
    }
  })
  if (code == 0) {
    filmInfo.value=data
    console.log("详情",filmInfo.value)
    if(data && data.filmPictures){
        // 只获取里面的url
        // filmPictureList.value=JSON.parse(data.filmPictures) as Array<FilmPicture>
        const tmpPicture = JSON.parse(data.filmPictures) as FilmPicture[]
        filmPictureList.value = tmpPicture.map(item => item.url)
        // 如果 filmPictureList.value是空的情况下,则把封面放入到图片列表中
        // debugger;
        if (filmPictureList.value.length === 0) {
          filmPictureList.value.push(data.coverUrl)
        }
    }else{
        if (filmPictureList.value.length === 0) {
          filmPictureList.value.push(data.coverUrl)
        }
    }
    console.log("图片列表",filmPictureList.value)
  } else {
    $message.showToast('系统异常,无法获取数据')
    return null;
  }
}
</script>