优选库——优选主页，添加3D轮播组件~

王强
1 parent d305fdd9
Showing 8 changed files with 211 additions and 17 deletions
package.json
src/components/swiper3dCom/swiper3dCom.less
src/components/swiper3dCom/swiper3dCom.vue
src/pages/optimization2/optimization2.less
src/pages/optimization2/optimization2.vue
static/img/hot_img.jpg
static/img/hot_img_01.png
static/img/hot_img_bg.png
@@ -22,6 +22,7 @@
     "vant": "^2.8.1",
     "vue": "^2.6.11",
     "vue-bus": "^1.2.1",
+    "vue-carousel-3d": "^1.0.1",
     "vue-clipboard2": "^0.3.1",
     "vue-head": "^2.1.0",
     "vue-i18n": "^8.15.5",
+@charset "UTF-8";
+
+&.swiper-3d-com {
+    position: relative;
+    .bg-box {
+        width: 100%;
+        height: auto;
+        .bg-img {
+            display: block;
+            width: 100%;
+            height: auto;
+        }
+    }
+    .carousel-3d-box {
+        position: absolute;
+        top: 138px;
+        z-index: 1;
+        width: 100%;
+        height: 100%;
+        /deep/ .carousel-3d-container {
+            width: 100% !important;
+            height: auto !important;
+            .carousel-3d-slider {
+                width: 310px !important;
+                .carousel-3d-slide {
+                    background-color: transparent !important;
+                    width: 100% !important;
+                    height: auto !important;
+                    opacity: 0.2 !important;
+                    border: none;
+                    &.current {
+                        opacity: 1 !important;
+                    }
+                }
+            }
+        }
+    }
+}
 \ No newline at end of file
+<template>
+    <div class="swiper-3d-com" v-if="items && items.length">
+        
+        <!-- 背景图片 -->
+        <div class="bg-box" v-if="setOptions.bg">
+            <img :src="setOptions.bg + SIGN.BIG" class="bg-img" />
+        </div>
+        
+        <!-- 3D轮播 -->
+        <div class="carousel-3d-box">
+            <carousel-3d :autoplay="setOptions.autoplay" :autoplayTimeout="setOptions.autoplayTimeout" :autoplayHoverPause="setOptions.autoplayHoverPause" :display="setOptions.display" :width="getWidth()" :height="getHeight()" :inverseScaling="1000" :onMainSlideClick="onMainSlideClick">
+                <slide :index="index" v-for="(item, index) in items" :key="index">
+                    <img :src="item.img" class="img" />
+                </slide>
+            </carousel-3d>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    // 引入组件
+    import { Carousel3d, Slide } from 'vue-carousel-3d';
+
+    export default {
+        data: function () {
+            return {
+                setOptions: {
+                    bg: null,                   // 背景图片
+                    display: 3,                 // 展示数量
+                    autoplay: true,             // 自动切换
+                    autoplayTimeout: 5000,      // 自动切换时长
+                    autoplayHoverPause: true,   // 悬停自动暂停
+                    inverseScaling: 1000        // 反向缩放大小，数字越大缩放比例越大（暂时不使用这个参数，要配合width/height参数共同使用）
+                }
+            }
+        },
+        props: ["items", "options"],
+        components: {
+            Carousel3d,
+            Slide
+        },
+        computed: {
+
+            /**
+             * 计算宽度
+             */
+            getWidth() {
+                return () => {
+                    return (document.documentElement.clientWidth || document.body.clientWidth) * (760 / 750);
+                }
+            },
+
+            /**
+             * 计算高度
+             */
+            getHeight() {
+                return () => {
+                    return (document.documentElement.clientWidth || document.body.clientWidth) * (290 / 750);
+                }
+            }
+        },
+        methods: {
+
+            /**
+             * 合并选项
+             * @param {Object} options [配置选项]
+             */
+            mergeOptions(options) {
+
+                if (typeof options === 'object' && options !== null) {
+
+                    // 合并默认参数
+                    Object.assign(this.setOptions, options);
+                }
+            },
+
+            /**
+             * 活动项目点击事件
+             * @param {Object} item [数据对象]
+             */
+            onMainSlideClick(item) {
+                this.$emit('onMainSlideClick', item);
+            }
+        },
+        watch: {
+
+            /**
+             * 监听options参数变化
+             */
+            options(newVal, oldVal) {
+
+                // 合并选项
+                this.mergeOptions(newVal);
+            }
+        },
+        mounted() {
+
+            this.$nextTick(() => {
+
+                // 合并选项
+                this.mergeOptions(this.options);
+            });
+        }
+    }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less" scoped>
+    @import './swiper3dCom';
+</style>
@@ -73,6 +73,9 @@
                 align-items: center;
                 padding: 40px 0 30px 0;
             }
+            &.hot-box {
+                
+            }
             &.goods-list {
                 background-color: transparent;
                 .title-box {
@@ -80,17 +80,16 @@
                 </div>
             </div>
-
-
             <!-- 热销排行 -->
-            <div class="section">
+            <div class="section hot-box">
-                <!-- 临时，热销排行占位图片 -->
-                <img src="static/img/hot_img.jpg" style="display: block;width: 100%;" />
+                <!-- 3D轮播 -->
+                <swiper-3d-com @onMainSlideClick="toHotSaleList"
+                    :items="swiper3dItems"
+                    :options="swiper3dOptions">
+                </swiper-3d-com>
             </div>
-
-
             <!-- 积分商城 -->
             <div class="section shop-list">
@@ -155,6 +154,7 @@
     import countDownCom from "@/components/countDownCom/countDownCom";
     import goodsItem2 from "@/components/goodsItem_2/goodsItem_2";
     import iconsCom from "@/components/iconsCom/iconsCom";
+    import swiper3dCom from "@/components/swiper3dCom/swiper3dCom";
     import moreCom from "@/components/moreCom/moreCom";
     import textTitleBox from "@/components/textTitleBox/textTitleBox";
     import columnListBox from "@/components/columnListBox/columnListBox";
@@ -164,16 +164,15 @@
         name: 'optimization',
         data () {
             return {
-                title: "",          // 标题
-                backs: null,        // 后退按钮组
-                navs: null,         // 导航
-                goodsLists: null,   // 折扣专区数据
-                shopLists: null,    // 品质优选
-                points: null,       // 用户积分
-                likeLists: null,    // 猜你喜欢列表
-
-
-
+                title: "",              // 标题
+                backs: null,            // 后退按钮组
+                navs: null,             // 导航
+                goodsLists: null,       // 折扣专区数据
+                shopLists: null,        // 品质优选
+                swiper3dItems: null,    // 3D轮播数据数组
+                swiper3dOptions: null,  // 3D轮播配置选项
+                points: null,           // 用户积分
+                likeLists: null         // 猜你喜欢列表
             }
         },
         components: {
@@ -183,6 +182,7 @@
             countDownCom,
             goodsItem2,
             iconsCom,
+            swiper3dCom,
             moreCom,
             textTitleBox,
             columnListBox,
@@ -333,6 +333,24 @@
+            // 临时，3D轮播参数设置
+            this.$set(this, 'swiper3dItems', [
+                {
+                    img: 'static/img/hot_img_01.png'
+                },
+                {
+                    img: 'static/img/hot_img_01.png'
+                },
+                {
+                    img: 'static/img/hot_img_01.png'
+                }
+            ]);
+            this.$set(this, 'swiper3dOptions', {
+                bg: 'static/img/hot_img_bg.png'
+            });
+
+
+
             // 临时，用户积分数据设置
             this.$set(this, 'points', {
                 key: '我的积分',
@@ -574,6 +592,29 @@
             },
             /**
+             * 跳转热销排行列表
+             * @param {Object} item [通用跳转对象]
+             */
+            toHotSaleList(item) {
+
+
+                console.log('toHotSaleList', item);
+
+
+                // 跳转封装
+                if (typeof this.$parent.navBarJump === 'function') {
+
+                    // 设置跳转参数
+                    let params = {
+
+                    };
+
+                    // 页面跳转
+                    this.$parent.navBarJump(params);
+                }
+            },
+
+            /**
              * 查看更多积分
              * @param {Object} item [数据对象]
              */