QSY-lvjuxcx/pkgExplore/vr_preview/vr_preview.vue

<template>
  <view class="vr-preview-page">
    <tn-nav-bar
      :isBack="true"
      :bottomShadow="false"
      backgroundColor="transparent"
      :customBackStyle="navBarBackStyle"
      backIconColor="#FFFFFF"
      :fixed="true"
    >
    </tn-nav-bar>

    <view class="vr-stage">
      <image v-if="poster" :src="poster" mode="aspectFill" class="vr-poster"></image>
      <view v-else class="vr-empty tn-flex tn-flex-col-center tn-flex-row-center">{{ $tr('暂无VR预览画面') }}</view>
      <view class="vr-mask"></view>

      <view class="vr-mode-chip">{{ $tr('VR预览模式') }}</view>

      <view class="vr-center-indicator" @click="openPosterPreview">
        <view class="indicator-ring"></view>
        <view class="indicator-core">
          <text class="tn-icon-vr indicator-icon"></text>
        </view>
        <text class="indicator-text">{{ poster ? $tr('查看全屏预览') : $tr('等待素材接入') }}</text>
      </view>

      <view class="vr-bottom-bar tn-safe-area-inset-bottom">
        <view class="vr-title-area">
          <view class="vr-title">{{ resolvedPageTitle }}</view>
          <view class="vr-subtitle">{{ poster ? $tr('当前展示 VR 预览海报，可点击查看大图。') : $tr('当前房型已保留 VR 入口，后续可继续接入更完整的沉浸式资源。') }}</view>
        </view>
        
        <view class="vr-action-circle" @click="openPosterPreview">
          <text :class="poster ? 'tn-icon-image' : 'tn-icon-vr'"></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageTitleZh: '',
      pageTitleEn: '',
      rawPageTitle: '',
      poster: ''
    }
  },
  computed: {
    resolvedPageTitle() {
      if (this.$getLanguage() === 'en') {
        return this.pageTitleEn || this.pageTitleZh || this.rawPageTitle || this.$tr('VR看房')
      }
      return this.pageTitleZh || this.pageTitleEn || this.rawPageTitle || this.$tr('VR看房')
    },
    navBarBackStyle() {
      return {
        background: 'rgba(0, 0, 0, 0.4)',
        borderRadius: '50%',
        width: '64rpx',
        height: '64rpx',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: '12rpx'
      }
    }
  },
  onLoad(options) {
    this.pageTitleZh = options && (options.titleZh || options.title) ? decodeURIComponent(options.titleZh || options.title) : ''
    this.pageTitleEn = options && options.titleEn ? decodeURIComponent(options.titleEn) : ''
    this.rawPageTitle = options && options.title ? decodeURIComponent(options.title) : ''
    this.poster = options.poster ? decodeURIComponent(options.poster) : ''
  },
  onShareAppMessage() {
    return {
      title: this.resolvedPageTitle,
      path: `/pkgExplore/vr_preview/vr_preview?title=${encodeURIComponent(this.resolvedPageTitle)}&titleZh=${encodeURIComponent(this.pageTitleZh || this.resolvedPageTitle)}&titleEn=${encodeURIComponent(this.pageTitleEn || this.resolvedPageTitle)}&poster=${encodeURIComponent(this.poster || '')}`,
      imageUrl: this.poster || ''
    }
  },
  onShareTimeline() {
    return {
      title: this.resolvedPageTitle,
      query: `title=${encodeURIComponent(this.resolvedPageTitle)}&titleZh=${encodeURIComponent(this.pageTitleZh || this.resolvedPageTitle)}&titleEn=${encodeURIComponent(this.pageTitleEn || this.resolvedPageTitle)}&poster=${encodeURIComponent(this.poster || '')}`,
      imageUrl: this.poster || ''
    }
  },
  methods: {
    openPosterPreview() {
      if (!this.poster) {
        uni.showToast({
          title: this.$tr('暂无VR预览素材'),
          icon: 'none'
        })
        return
      }
      uni.previewImage({
        urls: [this.poster],
        current: this.poster
      })
    }
  }
}
</script>

<style scoped lang="scss">
.vr-preview-page {
  height: 100vh;
  width: 100vw;
  background: #000000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vr-stage {
  position: absolute;
  inset: 0;
}

.vr-poster,
.vr-empty {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vr-empty {
  background: #111111;
  color: rgba(255, 255, 255, 0.4);
  font-size: 28rpx;
}

.vr-mask {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
  pointer-events: none;
}

.vr-mode-chip {
  position: absolute;
  left: 32rpx;
  top: calc(120rpx + env(safe-area-inset-top));
  z-index: 10;
  padding: 12rpx 20rpx;
  border-radius: 999rpx;
  background: rgba(255, 255, 255, 0.16);
  border: 1rpx solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  font-size: 22rpx;
  letter-spacing: 2rpx;
  backdrop-filter: blur(12rpx);
}

.vr-center-indicator {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.indicator-ring {
  position: absolute;
  top: 14rpx;
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 2rpx solid rgba(255, 255, 255, 0.3);
  animation: vrRipple 2.5s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}

.indicator-core {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12rpx);
  border: 2rpx solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
  margin-bottom: 24rpx;
}

.indicator-icon {
  font-size: 48rpx;
  color: #ffffff;
}

.indicator-text {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 4rpx;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.6);
}

@keyframes vrRipple {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.vr-bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 0 40rpx calc(60rpx + env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.vr-title-area {
  flex: 1;
  padding-right: 40rpx;
}

.vr-title {
  font-size: 48rpx;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 12rpx;
  text-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.5);
  letter-spacing: 2rpx;
}

.vr-subtitle {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 1rpx;
  line-height: 1.7;
}

.vr-action-circle {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);
  transition: transform 0.2s;
  
  &:active {
    transform: scale(0.9);
  }
  
  text {
    font-size: 40rpx;
    color: #000000;
    margin-left: 6rpx; /* 微调播放图标居中 */
  }
}
</style>