商品详情页

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

步骤如下：

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