• 商品详情页
    • 1. 新增路由
    • 2. 新增vue页面
    • 3. 添加物品到购物车
    • 看效果
    • 总结

    商品详情页

    当用户在商品列表页中点击时，就会跳转到该页面。

    步骤如下：

    1. 新增路由

    向src/router/index.js中增加： 

    1. import GoodsDetails from '@/views/shops/goods_details'
    3. Vue.use(Router)
    5. export default new Router({
    6.   routes: [
    7.     {
    8.       path: '/shops/goods_details',
    9.       name: 'GoodsDetails',
    10.       component: GoodsDetails
    11.     },
    12.   ]
    13. })

    2. 新增vue页面

    向 src/views/shops/goods_details 中增加：

    1. <template>
    2.   <div class="background">
    3.     <div class="goods_detail" style="height: 100%;">
    4.       <header class="top_bar">
    5.         <a onclick="window.history.go(-1)" class="icon_back"></a>
    6.         <h3 class="cartname">商品详情</h3>
    7.       </header>
    8.       <div class="tast_list_bd" style="padding-top: 44px;">
    9.         <main class="detail_box">
    11.         <!-- 轮播图 -->
    12.         <div class="home_ban">
    13.           <div class="m_banner clearfix" id="my_banner">
    14.             <ul class="banner_box" >
    15.               <div v-for="image in good_images">
    16.                 <li><img :src="image" alt="" style="height: 300px"/></li>
    17.               </div>
    18.             </ul>
    19.             <ul class="point_box" >
    20.               <li></li>
    21.             </ul>
    22.           </div>
    23.         </div>
    25.         <section class="product_info clearfix">
    26.           <div class="product_left">
    27.             <p class="p_name">{{good.name}}</p>
    28.             <div class="product_pric">
    29.               <span>￥</span>
    30.               <span class="rel_price">{{good.price}}</span>
    31.               <span></span>
    33.               <span style='color: grey;
    34.               text-decoration: line-through;
    35.               font-size: 18px;
    36.               margin-left: 14px;'>
    37.                 原价: ￥{{good.original_price}}
    38.               </span>
    39.             </div>
    40.             <!--
    41.             <div class="product_right">
    42.               降价通知
    43.             </div>
    44.             -->
    45.           </div>
    46.         </section>
    48.         <span class="divider" style="height: 2px;"></span>
    49.         <div id="choose_number" style= "height: 40px; background-color: #fff;">
    50.           <label style="font-size: 18px; float: left; margin-left: 10.5px; margin-top: 7.5px;">购买数量</label>
    51.           <div style= "padding-top: 5px;">
    52.             <img src="../../assets/add@2x.png" style="margin-right: 10px; display: inline;float:right;width:30px;" class="plus" @click="plus"/>
    53.             <input pattern="[0-9]*" v-model="buy_count" type="text" name="counts" style="width:30px;display: inline;float:right;border: 0.5px solid #e2e2e2;line-height:28px;text-align:center;"/>
    54.             <img src="../../assets/minus@2x.png" style="display: inline;float:right;width:30px;" class="minus" @click="minus"/>
    55.           </div>
    56.         </div>
    58.         <section class="product_intro">
    59.           <div class="pro_det" v-html="good.description" style='padding: 0 6.5px;'>
    60.           </div>
    61.         </section>
    62.         </main>
    63.       </div>
    65.     <footer class="cart_d_footer">
    66.       <div class="m">
    67.         <ul class="m_box">
    68.           <li class="m_item">
    69.             <a @click="toCart" class="m_item_link">
    70.               <em class="m_item_pic three"></em>
    71.               <span class="m_item_name">购物车</span>
    72.             </a>
    73.           </li>
    74.         </ul>
    75.         <div class="btn_box clearfix" >
    76.           <a @click="addToCart" class="buy_now">加入购物车</a>
    77.           <a @click="zhifu" class="buybuy">立即购买</a>
    78.         </div>
    79.       </div>
    80.     </footer>
    82.     </div>
    83.   </div>
    84. </template>
    85. <script>
    86. import { go } from '../../libs/router'
    87. //import { swiper, swiperSlide } from 'vue-awesome-swiper'
    88. import {scrollPic} from '../../libs/index.js'
    90.    export default{
    91.         data(){
    92.             return {
    93.                 good_images: [],
    94.                 good: "",
    95.                 buy_count: 1,
    96.                 good_id: this.$route.query.good_id,
    97.             }
    98.         },
    99.         watch:{
    100.         },
    101.         mounted(){
    102.           scrollPic();   //轮播图
    104.           this.$http.get(this.$configs.api + 'goods/goods_details?good_id=' + this.good_id).then((response)=>{
    105.             console.info(this.good_id)
    106.             console.info(response.body)
    107.             this.good = response.body.good
    108.             this.good_images = response.body.good_images
    110.           },(error) => {
    111.             console.error(error)
    112.           });
    113.         },
    114.         methods:{
    115.           addToCart () {
    116.             alert("商品已经加入到了购物车")
    117.             let goods = {
    118.               id: this.good_id,
    119.               title: this.good.name,
    120.               quantity: this.buy_count,
    121.               price: this.good.price,
    122.               image: this.good_images[0]
    123.             }
    124.             this.$store.dispatch('addToCart', goods)
    125.           },
    126.           toCart () {
    127.             go("/cart", this.$router)
    128.           },
    129.           plus () {
    130.             this.buy_count = this.buy_count + 1
    131.           },
    132.           minus () {
    133.             if(this.buy_count > 1) {
    134.               this.buy_count = this.buy_count - 1
    135.             }
    136.           },
    137.           zhifu () {
    138.             go("/shops/dingdanzhifu?good_id=" + this.good_id + "&buy_count=" + this.buy_count, this.$router)
    139.           },
    140.         },
    141.         components: {
    142.         },
    143.                 computed: {
    144.                 }
    145.     }
    146. </script>

    在上面的代码中，

    1. 实现了加入购物车的方法
    2. 实现了对于支付页面的跳转
    3. 实现了从远程接口读取数据

    3. 添加物品到购物车

    下面的代码是把某个商品添加到购物车中: 

    1. addToCart () {
    2.     console.info('加入购物车')
    3.     alert("商品已经加入到了购物车")
    4.     let goods = {
    5.         id: this.good_id,
    6.         title: this.good.name,
    7.         quantity: this.buy_count,
    8.         price: this.good.price,
    9.         image: this.good_images[0]
    10.     }
    11.     this.$store.dispatch('addToCart', goods)
    12. },

    同时，在 src/vuex/actions.js中，添加如下代码: 

    1. export const addToCart = ({ commit }, product) => {
    2.     commit(types.ADD_TO_CART, {
    3.       id: parseInt(product.id),
    4.       image: product.image,
    5.       title: product.title,
    6.       quantity: product.quantity,
    7.       price: product.price
    8.     })
    9. }

    看效果

    详情页

    总结

    • 购物车使用了Vuex来保存数据。 下一节会详述。
    • 进入到支付页面，在后面会详述。 这个页面我们只加上一个链接就好了
    • 本页面使用了后台提供的接口，会返回必要的数据。 接口结构略。