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

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

detail.vue代码如下:
  1. <template>  
  2.   <div class="detail">  
  3.     <product-params :title="product.name"></product-params>  
  4.     <div class="wrapper">  
  5.       <div class="container clearfix">  
  6.         <div class="swiper">  
  7.           <swiper :options="swiperOption">  
  8.               <swiper-slide><img src="/images/detail/phone-1.jpg" alt=""></swiper-slide>  
  9.               <swiper-slide><img src="/images/detail/phone-2.jpg" alt=""></swiper-slide>  
  10.               <swiper-slide><img src="/images/detail/phone-3.jpg" alt=""></swiper-slide>  
  11.               <swiper-slide><img src="/images/detail/phone-4.jpg" alt=""></swiper-slide>  
  12.               <!-- Optional controls -->  
  13.               <div class="swiper-pagination"  slot="pagination"></div>  
  14.           </swiper>  
  15.         </div>  
  16.         <div class="content">  
  17.           <h2 class="item-title">{{product.name}}</h2>  
  18.           <p class="item-info">相机全新升级 / 960帧超慢动作 / 手持超级夜景 / 全球首款双频GPS / 骁龙845处理器 / 红<br/>外人脸解锁 / AI变焦双摄 / 三星 AMOLED 屏</p>  
  19.           <div class="delivery">小米自营</div>  
  20.           <div class="item-price">{{product.price}}元<span class="del">1999元</span></div>  
  21.           <div class="line"></div>  
  22.           <div class="item-addr">  
  23.             <i class="icon-loc"></i>  
  24.             <div class="addr">北京 北京市 朝阳区 安定门街道</div>  
  25.             <div class="stock">有现货</div>  
  26.           </div>  
  27.           <div class="item-version clearfix">  
  28.             <h2>选择版本</h2>  
  29.             <div class="phone fl" :class="{'checked': version === 1}" @click="version = 1">6GB+64GB 全网通</div>  
  30.             <div class="phone fr" :class="{'checked':version === 2}" @click="version = 2">4GB+64GB 移动4G</div>  
  31.           </div>  
  32.           <div class="item-color">  
  33.             <h2>选择颜色</h2>  
  34.             <div class="phone checked">  
  35.               <span class="color"></span>  
  36.               深空灰  
  37.             </div>  
  38.           </div>  
  39.           <div class="item-total">  
  40.             <div class="phone-info clearfix">  
  41.               <div class="fl">{{product.name}} {{version === 1 ? '6GB+64GB 全网通' : '4GB+64GB 移动4G'}} 深灰色</div>  
  42.               <div class="fr">{{product.price}}元</div>  
  43.             </div>  
  44.             <div class="phone-total">总计:{{product.price}}元</div>  
  45.           </div>  
  46.           <div class="btn-group">  
  47.             <a href="javascript:;" class="btn btn-huge fl" @click="addCart">加入购物车</a>  
  48.           </div>  
  49.         </div>  
  50.       </div>  
  51.     </div>  
  52.     <div class="price-info">  
  53.       <div class="container">  
  54.         <h2>价格说明</h2>  
  55.         <div class="desc">  
  56.           <img src="/images/detail/item-price.jpeg" alt="">  
  57.         </div>  
  58.       </div>  
  59.     </div>  
  60.     <service-bar></service-bar>  
  61.   </div>  
  62. </template>  
  63.   
  64. <script>  
  65. import {swiper, swiperSlide} from 'vue-awesome-swiper'  
  66. import ProductParams from '../components/ProductParams'  
  67. import ServiceBar from '../components/ServiceBar'  
  68.   
  69. export default {  
  70.   name: 'detail',  
  71.   components: {  
  72.     swiper,  
  73.     swiperSlide,  
  74.     ProductParams,  
  75.     ServiceBar  
  76.   },  
  77.   data () {  
  78.     return {  
  79.       id: this.$route.params.id,  //获取商品ID  
  80.       version: 1,  //商品版本  
  81.       product: {},  //商品信息  
  82.       swiperOption:{  
  83.         autoplay:true,  
  84.         loop: true,  
  85.         pagination: {  
  86.           el: '.swiper-pagination',  
  87.           clickable :true,  
  88.         }  
  89.       },  
  90.     }  
  91.   },  
  92.   mounted () {  
  93.     this.getProductInfo()  
  94.   },  
  95.   methods: {  
  96.     getProductInfo () {  
  97.       // let id = this.$route.params.id  
  98.       this.axios.get(`/products/${this.id}`).then(res => {  
  99.         this.product = res  
  100.       })  
  101.     },  
  102.     addCart () {  
  103.       this.axios.post('/carts', {  
  104.         productId: this.id,  
  105.         selected: true  
  106.       }).then((res={cartProductVoList: 0}) => {  
  107.         //派发  
  108.         this.$store.dispatch('saveCartCount', res.cartTotalQuantity)  
  109.         this.$router.push('/cart')  
  110.       })  
  111.     }  
  112.   }  
  113. }  
  114. </script>  
  115.   
  116. <style lang="scss">  
  117.   @import '../assets/scss/config.scss';  
  118.   @import '../assets/scss/mixin.scss';  
  119.   .detail{  
  120.     .wrapper{  
  121.       .swiper{  
  122.         float:left;  
  123.         width:642px;  
  124.         height:617px;  
  125.         margin-top:5px;  
  126.         img{  
  127.           width:100%;  
  128.           height:100%;  
  129.         }  
  130.       }  
  131.       .content{  
  132.         float:right;  
  133.         width:584px;  
  134.         height:870px;  
  135.         .item-title{  
  136.           font-size:28px;  
  137.           padding-top:30px;  
  138.           padding-bottom:16px;  
  139.           height: 26px;  
  140.         }  
  141.         .item-info{  
  142.           font-size:14px;  
  143.           height: 36px;  
  144.         }  
  145.         .delivery{  
  146.           font-size:16px;  
  147.           color:#FF6700;  
  148.           margin-top:26px;  
  149.           margin-bottom:14px;  
  150.           height: 15px;  
  151.         }  
  152.         .item-price{  
  153.           font-size:20px;  
  154.           color:#FF6700;  
  155.           height: 19px;  
  156.           .del{  
  157.             font-size:16px;  
  158.             color:#999999;  
  159.             margin-left:10px;  
  160.             text-decoration:line-through;  
  161.           }  
  162.         }  
  163.         .line{  
  164.           height:0;  
  165.           margin-top:25px;  
  166.           margin-bottom:28px;  
  167.           border-top:1px solid #E5E5E5;  
  168.         }  
  169.         .item-addr{  
  170.           height:108px;  
  171.           background-color:#FAFAFA;  
  172.           border:1px solid #E5E5E5;  
  173.           box-sizing:border-box;  
  174.           padding-top:31px;  
  175.           padding-left:64px;  
  176.           font-size:14px;  
  177.           line-height:14px;  
  178.           position:relative;  
  179.           .icon-loc{  
  180.             position: absolute;  
  181.             top: 27px;  
  182.             left: 34px;  
  183.             @include bgImg(20px,20px,'/images/detail/icon-loc.png');  
  184.           }  
  185.           .addr{  
  186.             color:#666666;  
  187.           }  
  188.           .stock{  
  189.             margin-top:15px;  
  190.             color:#FF6700;  
  191.           }  
  192.         }  
  193.         .item-version,.item-color{  
  194.           margin-top:30px;  
  195.           h2{  
  196.             font-size:18px;  
  197.             margin-bottom:20px;  
  198.           }  
  199.         }  
  200.         .item-version,.item-color{  
  201.           .phone{  
  202.             width:287px;  
  203.             height:50px;  
  204.             line-height:50px;  
  205.             font-size:16px;  
  206.             color:#333333;  
  207.             border:1px solid #E5E5E5;  
  208.             box-sizing: border-box;  
  209.             text-align:center;  
  210.             cursor:pointer;  
  211.             span{  
  212.               color:#666666;  
  213.               margin-left:15px;  
  214.             }  
  215.             .color{  
  216.               display:inline-block;  
  217.               width:14px;  
  218.               height:14px;  
  219.               background-color:#666666;  
  220.             }  
  221.             &.checked{  
  222.               border:1px solid #FF6600;  
  223.               color:#FF6600;  
  224.             }  
  225.           }  
  226.         }  
  227.         .item-total{  
  228.           height: 108px;  
  229.           background: #FAFAFA;  
  230.           padding: 24px 33px 29px 30px;  
  231.           font-size: 14px;  
  232.           margin-top:50px;  
  233.           margin-bottom:30px;  
  234.           box-sizing: border-box;  
  235.           .phone-total{  
  236.             font-size: 24px;  
  237.             color: #FF6600;  
  238.             margin-top: 18px;  
  239.           }  
  240.         }  
  241.       }  
  242.     }  
  243.     .price-info{  
  244.       background-color:#F3F3F3;  
  245.       height:340px;  
  246.       h2{  
  247.         font-size:24px;  
  248.         color:#333333;  
  249.         padding-top:38px;  
  250.         margin-bottom:30px;  
  251.       }  
  252.     }  
  253.   }  
  254. </style>  
附加:首页之前预留加入购物车功能,如图所示:

新增代码片段如下图所示:


zhangren.online
上一篇:使用vue全家桶高仿小米商城--产品站交互实现
下一篇:使用vue全家桶高仿小米商城--购物车页面

您可能喜欢

​vue中父子组件传值

​vue中父子组件传值

​vue中ref的使用

​vue中ref的使用

回到顶部