uni-app 商品详情页实现带主图视频及主图功能

在 uni-app 中实现商品详情页带主图视频及主图功能，可以利用 uni-app 提供的组件和API来实现。下面是一个简单的代码示例，展示如何在商品详情页中嵌入主图视频和主图图片。

首先，确保你的项目已经创建，并且在 pages.json 中配置了相应的页面路径。

商品详情页模板 (pages/productDetails/productDetails.vue)

<template>
  <view class="container">
    <!-- 主图视频 -->
    <video 
      class="video" 
      :src="product.mainVideo" 
      controls 
      autoplay="false" 
      loop="true"
      muted
    ></video>
    
    <!-- 主图图片 -->
    <image 
      class="main-image" 
      :src="product.mainImage" 
      mode="aspectFill"
      @click="previewImage"
    ></image>
    
    <!-- 商品详情 -->
    <view class="details">
      <text>{{ product.name }}</text>
      <text>{{ product.description }}</text>
      <!-- 其他详情信息 -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      product: {
        mainVideo: 'https://example.com/product-video.mp4',
        mainImage: 'https://example.com/product-image.jpg',
        name: '商品名称',
        description: '商品描述信息...'
        // 其他商品信息
      }
    }
  },
  methods: {
    previewImage() {
      uni.previewImage({
        current: this.product.mainImage, // 当前显示图片的http链接
        urls: [this.product.mainImage] // 需要预览的图片http链接列表
      });
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
}
.video {
  width: 100%;
  max-height: 300px;
  object-fit: cover;
  margin-bottom: 20px;
}
.main-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  margin-bottom: 20px;
}
.details {
  margin-top: 20px;
}
</style>

说明

1. 视频组件：使用 <video> 标签嵌入视频，通过 src 属性绑定视频链接。controls 属性显示播放控件，autoplay 属性控制是否自动播放（这里设置为 false），loop 属性控制是否循环播放，muted 属性设置静音播放（部分浏览器在自动播放时要求静音）。

2. 图片组件：使用 <image> 标签嵌入图片，通过 src 属性绑定图片链接。mode 属性设置为 aspectFill 以保持图片的宽高比，并填充容器。@click 事件绑定 previewImage 方法，用于预览图片。

3. 预览图片：previewImage 方法调用 uni.previewImage API，传入当前图片链接和预览图片链接列表。

这样，你就能够在 uni-app 的商品详情页中实现带主图视频和主图图片的功能。根据实际需求，你可以进一步扩展和优化代码。