3

tj

2025-05-22 14764dd7679369a650ad1d60be62aacc863755a1

 sub-pages/film-list/film-official-detail.vue

@@ -1,66 +1,83 @@
<template>
  <view class="container">
  <view>
    <view class="container">
      <view class="movie-title">
        <view><u-text text="破.地狱" size="30"></u-text></view>
        <view><u-text text="The Last Dance" size="20"></u-text></view>
      </view>

    <view class="movie-title">
      <view><u-text text="破.地狱" size="30"></u-text></view>
      <view><u-text text="The Last Dance" size="20"></u-text></view>
    </view>
      <scroll-view scroll-y class="content">
        <view class="movie-info">

    <scroll-view scroll-y class="content">
      <view class="movie-info">

        <image class="movie-poster" src="https://ai-public.mastergo.com/ai/img_res/1ef11f7a594da679d35cddf809a63ec7.jpg"
          mode="aspectFill" />
        <view class="movie-details">
          <view class="scene-number">
            <text>片场</text>
            <text>17</text>
          <image class="movie-poster"
            src="https://ai-public.mastergo.com/ai/img_res/1ef11f7a594da679d35cddf809a63ec7.jpg" mode="aspectFill" />
          <view class="movie-details">
            <view class="scene-number">
              <text>片场</text>
              <text>17</text>
            </view>
            <view class="movie-tags">
              <text class="tag">剧情/家庭</text>
              <text class="tag">中国香港</text>
              <text class="tag">2024</text>
            </view>
            <u-button text="more" size="normal" icon="play-right-fill" plain type="info"></u-button>
          </view>
          <view class="movie-tags">
            <text class="tag">剧情/家庭</text>
            <text class="tag">中国香港</text>
            <text class="tag">2024</text>
        </view>

        <view class="movie-desc">
          <text class="desc-text">聚焦香港殡葬文化下的人际关系和生死观念，多数取景地都在殡仪服务扎堆的红磡。</text>
          <text class="desc-text">主要拍摄的殡仪馆外景是万国殡仪馆，不过根据电影官方发布的制作花絮，殡仪馆内景大厅是另外搭建的。</text>
          <text
            class="desc-text">道生接手的"长生店"是位于九龙城福佬村道的百年老字号合昌殡仪，"Hello文"吃宵夜的地方在九龙湾的康乐茶居，火化延姐的地方在葵涌火葬场，甄小姐存户的东华义庄是香港目前唯一仍在运营的义庄。</text>
        </view>

        <view class="map-container">
          <map style="width: 100%; height: 500rpx;" :latitude="latitude" :longitude="longitude" :markers="markers"
            scale="16" show-location></map>
        </view>
        <view>
          <u-tabs v-if="tabList.length" :list="tabList" :current="current" @change="onTabChange" @click="onTabChange"
            lineColor="#2979ff" activeStyle="color: #2979ff">
            <view slot="left" style="padding-left: 4px;" @tap="">
              <u-icon name="/static/common/order.png" size="40" bold></u-icon>
            </view>
            <view slot="right" style="padding-left: 4px;" @tap="$u.toast('插槽被点击')">
              <u-icon name="list" size="40" bold></u-icon>
            </view>
          </u-tabs>
          <swiper class="swiper-box" :current="current" @change="onSwiperChange" duration="300">
            <swiper-item v-for="(item, index) in tabList" :key="index" class="swiper-item">
              <film-official-timeline></film-official-timeline>
            </swiper-item>
          </swiper>
        </view>
        <view class="comment">

          <comment-item avatar="https://img.yzcdn.cn/vant/cat.jpeg" nickname="图墙精选" :isAuthor="true"
            content="如果路线里全是常规景区，没一个特殊的点位，那就是普通团，除非他的住宿安排的很好。。要不然和普通团没任何区别，都是去景区挤，然后上车赶路" :images="urls2" date="2天前"
            address="湖北" :likes="30" @reply="showCommentLayer" />
        </view>
      </scroll-view>

      <view class="back-to-top" @click="scrollToTop">
        <u-icon name="arrow-up" size="24" color="#666666" />
      </view>

      <view class="comment-box">

        <view class="input-row">
          <view class="comment-input" @click="showCommentLayer">
            <u-text size="12px" text="说点什么......" margin="0rpx 0rpx 0rpx 20rpx" color="#B9B9B9"
              confirmType="send"></u-text>
          </view>
          <u-button text="more" size="normal" icon="play-right-fill" plain type="info"></u-button>
          <u-icon name="heart" size="60" color="#B9B9B9" label="11"></u-icon>
          <u-icon name="star" size="60" color="#B9B9B9" label="22"></u-icon>
          <u-icon name="chat" size="60" color="#B9B9B9" label="33"></u-icon>
        </view>
      </view>

      <view class="movie-desc">
        <text class="desc-text">聚焦香港殡葬文化下的人际关系和生死观念，多数取景地都在殡仪服务扎堆的红磡。</text>
        <text class="desc-text">主要拍摄的殡仪馆外景是万国殡仪馆，不过根据电影官方发布的制作花絮，殡仪馆内景大厅是另外搭建的。</text>
        <text
          class="desc-text">道生接手的"长生店"是位于九龙城福佬村道的百年老字号合昌殡仪，"Hello文"吃宵夜的地方在九龙湾的康乐茶居，火化延姐的地方在葵涌火葬场，甄小姐存户的东华义庄是香港目前唯一仍在运营的义庄。</text>
      </view>

      <view class="map-container">
        <map style="width: 100%; height: 500rpx;" :latitude="latitude" :longitude="longitude" :markers="markers"
          scale="16" show-location></map>
      </view>
      <view>
        <u-tabs v-if="tabList.length" :list="tabList" :current="current" @change="onTabChange" @click="onTabChange"
          lineColor="#2979ff" activeStyle="color: #2979ff">
          <view slot="left" style="padding-left: 4px;" @tap="">
            <u-icon name="/static/common/order.png" size="40" bold></u-icon>
          </view>
          <view slot="right" style="padding-left: 4px;" @tap="$u.toast('插槽被点击')">
            <u-icon name="list" size="40" bold></u-icon>
          </view>
        </u-tabs>
        <swiper class="swiper-box" :current="current" @change="onSwiperChange" duration="300">
          <swiper-item v-for="(item, index) in tabList" :key="index" class="swiper-item">
            <film-official-timeline></film-official-timeline>
          </swiper-item>
        </swiper>
      </view>

      <view class="comment-section">
        <u-button class="comment-btn" type="primary" plain>我要发言</u-button>
      </view>
    </scroll-view>

    <view class="back-to-top" @click="scrollToTop">
      <u-icon name="arrow-up" size="24" color="#666666" />
    </view>
    <comment-popup v-model="commentShow" />
  </view>
</template>
<script>
@@ -114,6 +131,8 @@
        { name: '距离' },
        { name: '城市' },
      ],

      commentShow: false,
    };
  },
  methods: {
@@ -131,6 +150,9 @@
    },
    onSwiperChange(e) {
      this.current = e.detail.current; // 同步 tabs
    },
    showCommentLayer(e) {
      this.commentShow = true
    },
  }
};
@@ -270,4 +292,43 @@
    /* 允许滚动内容 */
  }
}
</style>
<style lang="scss" scoped>
.comment-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 20rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 999;
  height: 100rpx;

  .input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80%;

    .comment-input {
      width: 300rpx;
      background-color: #F4F4F6;
      border-radius: 50rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
    }
  }

  .flex-input {
    flex: 1;
    margin-right: 10rpx;
  }
}

.comment{
  margin: 10rpx;
  margin-bottom: 180rpx;
}
</style>