一个菜鸟的互联网技术分享博客
您的位置: 主页 > 使用vue全家桶高仿小米商城--产品站交互实现
advertisement

使用vue全家桶高仿小米商城--产品站交互实现

1、product.vue代码如下:
  1. <template>  
  2.   <div class="product">  
  3.     <product-params :title="product.name">  
  4.       <template v-slot:buy>  
  5.         <button class="btn" @click="buy">立即购买</button>    
  6.       </template>  
  7.     </product-params>  
  8.     <div class="content">  
  9.       <div class="item-bg">  
  10.         <h2>{{product.name}}</h2>  
  11.         <h3>{{product.subtitle}}</h3>  
  12.         <p>  
  13.           <a href="" id="">全球首款双频 GP</a>  
  14.           <span>|</span>  
  15.           <a href="" id="">骁龙845</a>  
  16.           <span>|</span>  
  17.           <a href="" id="">AI 变焦双摄</a>  
  18.           <span>|</span>  
  19.           <a href="" id="">红外人脸识别</a>  
  20.         </p>  
  21.         <div class="price">  
  22.           <span>¥<em>{{product.price}}</em></span>  
  23.         </div>  
  24.       </div>  
  25.       <div class="item-bg-2"></div>  
  26.       <div class="item-bg-3"></div>  
  27.       <div class="item-swiper">  
  28.         <swiper :options="swiperOption">  
  29.             <swiper-slide><img src="/images/product/gallery-2.png" alt=""></swiper-slide>  
  30.             <swiper-slide><img src="/images/product/gallery-3.png" alt=""></swiper-slide>  
  31.             <swiper-slide><img src="/images/product/gallery-4.png" alt=""></swiper-slide>  
  32.             <swiper-slide><img src="/images/product/gallery-5.jpg" alt=""></swiper-slide>  
  33.             <swiper-slide><img src="/images/product/gallery-6.jpg" alt=""></swiper-slide>  
  34.             <!-- Optional controls -->  
  35.             <div class="swiper-pagination"  slot="pagination"></div>  
  36.         </swiper>  
  37.         <p class="desc">小米8 AI变焦双摄拍摄</p>  
  38.       </div>  
  39.       <div class="item-video">  
  40.         <h2>60帧超慢动作摄影<br/>慢慢回味每一瞬间的精彩</h2>  
  41.         <p>后置960帧电影般超慢动作视频,将眨眼间的美妙展现得淋漓尽致!<br/>更能AI 精准分析视频内容,15个场景智能匹配背景音效。</p>  
  42.         <div class="video-bg" @click="showSlide='slideDown'"></div>  
  43.         <div class="video-box" v-show="showSlide">  
  44.           <div class="overlay"></div>  
  45.           <div class="video" :class="showSlide">  
  46.             <span class="icon-close" @click="closeVideo"></span>  
  47.             <video src="/images/product/video.mp4" loop muted autoplay controls="controls" id="playvideo"></video>  
  48.           </div>  
  49.         </div>  
  50.       </div>  
  51.     </div>  
  52.   </div>  
  53. </template>  
  54.   
  55. <script>  
  56. import {swiper, swiperSlide} from 'vue-awesome-swiper'  
  57. import ProductParams from '../components/ProductParams'  
  58.   
  59. export default {  
  60.   name: 'product',  
  61.   components: {  
  62.     swiper,  
  63.     swiperSlide,  
  64.     ProductParams  
  65.   },  
  66.   data () {  
  67.     return {  
  68.       showSlide: '',  //控制动画信息  
  69.       swiperOption:{  
  70.         autoplay:true,  
  71.         slidesPerView:3,  
  72.         spaceBetween: 30,  
  73.         freeMode: true,  
  74.         pagination: {  
  75.           el: '.swiper-pagination',  
  76.           clickable :true,  
  77.         }  
  78.       },  
  79.       product: {}   //商品信息  
  80.     }  
  81.   },  
  82.   mounted () {  
  83.     this.getProductInfo()  
  84.   },  
  85.   methods: {  
  86.     getProductInfo () {  
  87.       let id = this.$route.params.id  
  88.       this.axios.get(`/products/${id}`).then(res => {  
  89.         this.product = res  
  90.       })  
  91.     },  
  92.     buy () {  
  93.       let id = this.$route.params.id  
  94.       this.$router.push(`/detail/${id}`)  
  95.     },  
  96.     closeVideo () {//解决屏幕小的时候视频暴露在页面上  
  97.         //点击关闭视频播放时候暂停播放  
  98.         let thisvideo = document.getElementById('playvideo');  
  99.         thisvideo.pause();  
  100.         this.showSlide = 'slideUp';  
  101.         setTimeout(() => {  
  102.             this.showSlide = ''  
  103.         }, 600)  
  104.     }  
  105.   }  
  106. }  
  107. </script>  
  108.   
  109. <style lang="scss">  
  110.   @import '../assets/scss/mixin.scss';  
  111.   @import '../assets/scss/config.scss';  
  112.   
  113.   .product{  
  114.     .content{  
  115.       .item-bg{  
  116.         background:url('/images/product/product-bg-1.png') no-repeat center;  
  117.         height:718px;  
  118.         text-align:center;  
  119.         h2{  
  120.           font-size:80px;  
  121.           padding-top:55px;  
  122.         }  
  123.         h3{  
  124.           font-size:24px;  
  125.           letter-spacing: 10px;  
  126.         }  
  127.         p{  
  128.           margin-top:21px;  
  129.           margin-bottom:40px;  
  130.           a{  
  131.             font-size:16px;  
  132.             color:#333333;  
  133.           }  
  134.           span{  
  135.             margin:0 15px;  
  136.           }  
  137.         }  
  138.         .price{  
  139.           font-size:30px;  
  140.           color:#333333;  
  141.           em{  
  142.             font-style:normal;  
  143.             font-size:38px;  
  144.           }  
  145.         }  
  146.       }  
  147.       .item-bg-2{  
  148.         background:url(/images/product/product-bg-2.png) no-repeat center;  
  149.         height:480px;  
  150.         background-size:1226px 397px;  
  151.       }  
  152.       .item-bg-3{  
  153.         background:url(/images/product/product-bg-3.png) no-repeat center;  
  154.         height:638px;  
  155.         background-size:cover;  
  156.       }  
  157.       .item-swiper{  
  158.         margin:36px auto 52px;  
  159.         .desc{  
  160.           font-size:18px;  
  161.           color:#333333;  
  162.           text-align:center;  
  163.         }  
  164.         img{  
  165.           width:100%;  
  166.         }  
  167.       }  
  168.       .item-video{  
  169.         height:1044px;  
  170.         background-color:#070708;  
  171.         margin-bottom:76px;  
  172.         color:#FFFFFF;  
  173.         text-align:center;  
  174.         h2{  
  175.           font-size:60px;  
  176.           padding-top:82px;  
  177.           margin-bottom:47px;  
  178.         }  
  179.         p{  
  180.           font-size:24px;  
  181.           margin-bottom:58px;  
  182.         }  
  183.         .video-bg{  
  184.           background:url('/images/product/gallery-1.png') no-repeat center;  
  185.           background-size:cover;  
  186.           width:1226px;  
  187.           height:540px;  
  188.           margin:0 auto 120px;  
  189.           cursor:pointer;  
  190.         }  
  191.         .video-box{  
  192.           .overlay{  
  193.             @include position(fixed);  
  194.             background-color: $colorB;  
  195.             opacity: .4;  
  196.             z-index: 10;  
  197.           }  
  198.           @keyframes slideDown{  
  199.             from{  
  200.               top: -50%;  
  201.               opacity: 0;  
  202.             }  
  203.             to{  
  204.               top: 50%;  
  205.               opacity: 1;  
  206.             }  
  207.           }  
  208.           @keyframes slideUp {  
  209.             from{  
  210.               top: 50%;  
  211.               opacity: 1;  
  212.             }  
  213.             to{  
  214.               top: -50%;  
  215.               opacity: 0;  
  216.             }  
  217.           }  
  218.           .video{  
  219.             // position: fixed;  
  220.             @include position(fixed);  
  221.             top: 50%;  
  222.             left: 50%;  
  223.             transform: translate(-50%, -50%);  
  224.             z-index: 10;  
  225.             width: 1000px;  
  226.             height: 536px;  
  227.             opacity: 1;  
  228.             &.slideDown{  
  229.               animation: slideDown .6s linear;  
  230.               top: 50%;  
  231.             }  
  232.             &.slideUp{  
  233.               animation: slideUp .6s linear;  
  234.             }  
  235.             // transition: all .6s;  
  236.             // &.slide{  
  237.             //   top: 50%;  
  238.             //   opacity: 1;  
  239.             // }  
  240.             .icon-close{  
  241.               @include bgImg(20px, 20px, '/images/icon-close.png');  
  242.               position: absolute;  
  243.               top: 20px;  
  244.               right: 20px;  
  245.               cursor: pointer;  
  246.               z-index: 11;  
  247.             }  
  248.             video{  
  249.               width: 100%;  
  250.               height: 100%;  
  251.               object-fit: cover; // background-size  
  252.               outline: none;  
  253.             }  
  254.           }  
  255.         }  
  256.       }  
  257.     }  
  258.     .btn{  
  259.       margin-left: 10px;  
  260.     }  
  261.   }  
  262. </style>  
2、ProductParams.vue代码如下:
  1. <template>  
  2.   <div class="nav-bar" :class="{'is_fixed': isFixed}">  
  3.     <div class="container">  
  4.       <div class="pro-title">  
  5.         {{title}}  
  6.       </div>  
  7.       <div class="pro-params">  
  8.         <a href="">概述</a>  
  9.         <span>|</span>  
  10.         <a href="">参数</a>  
  11.         <span>|</span>  
  12.         <a href="">用户评价</a>  
  13.         <slot name="buy"></slot>  
  14.       </div>  
  15.     </div>  
  16.   </div>  
  17. </template>  
  18.   
  19. <script>  
  20. export default {  
  21.   name: 'nav-bar',  
  22.   props: {  
  23.     title: String  
  24.   },  
  25.   data () {  
  26.     return {  
  27.       isFixed: false  
  28.     }  
  29.   },  
  30.   mounted () {  
  31.     window.addEventListener('scroll', this.initHeight)  
  32.   },  
  33.   methods: {  
  34.     initHeight () {  
  35.       let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop  
  36.       this.isFixed = scrollTop > 152 ? true : false  
  37.     }  
  38.   },  
  39.   destroyed () {  
  40.     window.removeEventListener('scroll', this.initHeight, false)  
  41.   }  
  42. }  
  43. </script>  
  44.   
  45. <style lang="scss">  
  46.   @import '../assets/scss/config.scss';  
  47.   @import '../assets/scss/mixin.scss';  
  48.   
  49.   .nav-bar{  
  50.     height: 70px;  
  51.     line-height: 70px;  
  52.     border-top: 1px solid $colorH;  
  53.     background-color: $colorG;  
  54.     z-index: 10;  
  55.     &.is_fixed{  
  56.       position: fixed;  
  57.       top: 0;  
  58.       width: 100%;  
  59.       box-shadow: 0 5px 5px $colorE;  
  60.     }  
  61.     .container{  
  62.       @include flex();  
  63.       .pro-title{  
  64.         color: $colorB;  
  65.         font-size: $fontH;  
  66.         font-weight: bold;  
  67.       }  
  68.       .pro-params{  
  69.         font-size: $fontJ;  
  70.         a{  
  71.           color: $colorC;  
  72.         }  
  73.         span{  
  74.           margin: 0 10px;  
  75.         }  
  76.       }  
  77.     }  
  78.       
  79.   }  
  80. </style>  
3、在未登入状态下访问产品站页面会报错,原因如下:
因为我们在app.vue中将username的值通过vuex对数据读取,而res是不能为null的(如下图所示)

因此,我们需要给res一个空字符串,代码如下所示:

zhangren.online
上一篇:使用vue全家桶高仿小米商城--组件吸顶实现(原生)
下一篇:使用vue全家桶高仿小米商城--产品详情交互实现

您可能喜欢

回到顶部