Feat(非遗文化):增加商品+视频展示

2024-06-26 15:33:02 +08:00
parent 2b15e320f4
commit 86422f0f14
1 changed files with 103 additions and 0 deletions
@@ -0,0 +1,103 @@
+<script>
+import {getICHDetails} from '@/api/product'
+import { pageListenMixins } from '@/mixins/pageListenMixins'
+export default {
+  name: 'HeritageGoodAndVideo',
+  mixins: [pageListenMixins],
+  data() {
+    return {
+      id: null,
+      info: null,
+      pageKeyId: ''
+    }
+  },
+  onLoad(options) {
+    const id = options.id
+    this.id = id
+    this.pageKeyId = `ichContent_id_${id}`
+    this.getDetails()
+  },
+  methods: {
+    getDetails() {
+      getICHDetails(this.id).then(({data}) => this.info = data)
+    },
+    goGoods(id) {
+      uni.navigateTo({
+        url: '/pages/shop/GoodsCon/index?id=' + id + '&from=ich'
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <view class="heritage-video" v-if="info">
+    <image
+      :src="info.backgroundImage"
+      class="page-bg"
+      mode="widthFix"
+    />
+    <video :src="info.video" autoplay show-center-play-btn />
+    <view class="list-box flex flex-wrap">
+      <view
+        v-for="(item,index) in info.products"
+        :key="index"
+        class="item flex flex-col jc-between"
+        @click="goGoods(item.productId)"
+      >
+        <view class="flex flex-col ai-center">
+          <image :src="item.productImage" mode="scaleToFill" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped lang="less">
+.heritage-video {
+  position: relative;
+  min-height: 100vh;
+
+  .page-bg {
+    width: 100vw;
+    height: auto;
+    vertical-align: middle;
+  }
+
+  video {
+    position: absolute;
+    left: 33rpx;
+    top: 880rpx;
+    width: 684rpx;
+    height: 424rpx;
+  }
+}
+
+.list-box {
+  position: absolute;
+  top: 10986rpx;
+  left: 0;
+  width: 100vw;
+  box-sizing: border-box;
+  padding: 0 32rpx;
+
+  .item {
+    width: 332rpx;
+    height: 332rpx;
+    margin-right: 22rpx;
+    margin-bottom: 22rpx;
+    background: #FFFEF3;
+
+    image {
+      width: 332rpx;
+      height: 332rpx;
+      border-radius: 8rpx;
+      vertical-align: middle;
+    }
+  }
+
+  .item:nth-child(2n) {
+    margin-right: 0;
+  }
+}
+</style>