基於Vue的WebApp項目開發（六）

實現商品購買列表頁面

步驟一：新建goodslist.vue文件

<template>
  <div id="tml">
    <!--利用mui中的圖文表格組件實現-->
    <div id="mui-content" class="mui-content" style="background-color:#fff">
      <ul class="mui-table-view mui-grid-view">
        <li v-for="item in list" class="mui-table-view-cell mui-media mui-col-xs-6">
          <router-link v-bind="{to:'/goods/goodsinfo/'+item.id}">
            <img class="mui-media-object" :src="item.img_url" style="height: 250px;">
            <div class="mui-media-body" v-text="item.title"></div>
            <div class="desc">
              <p>
                <span>￥{{item.sell_price}}</span>
                <s>￥{{item.market_price}}</s>
              </p>
              <p>
                <h6 class="left">熱賣中</h6>
                <h6 class="right">剩餘{{item.stock_quantity}}件</h6>
              </p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  // 表明vm
  export default {
    data() {
      return {
        list: []
      }
    },
    created() {
      this.getlist();
    },
    methods: {
      getlist() {
        //獲取到商品列表數據
        var url = '../../../statics/json/goodslist.json';
        this.$http.get(url).then(function(res) {
          if(res.body.status != 0) {
            Toast(res.body.message);
            return;
          }
          //當服務器返回了正常數據的時候作賦值操做
          this.list = res.body.message;
        });
      }
    }
  }
</script>

<style scoped>
  #mui-content li {
    border: 1px solid rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 4px #000;
    -moz-box-shadow: 0 0 4px #000;
    box-shadow: 0 0 4px #000;
    margin-left: 4px;
    padding: 0px;
    background-color: #fff;
    margin-bottom: 6px;
  }  
  #mui-content .mui-media-body {
    color: #0094ff;
  } 
  #mui-content .desc {
    height: 60px;
    background-color: rgba(0, 0, 0, 0.2);
    margin-top: 10px;
    padding: 5px;
    text-align: left;
  } 
  #mui-content .desc span {
    color: #a22b2b;
    margin-right: 15px;
  }  
  #mui-content a {
    padding-left: 0px;
    margin-left: 0px;
  }  
  #mui-content .desc .right {
    position: absolute;
    right: 10px;
    bottom: 0px;
    font-weight: bold;
  }  
  #mui-content .desc .left {
    position: absolute;
    left: 10px;
    bottom: 0px;
    color: red;
    font-weight: bold;
  }
</style>

View Code

步驟二：新建goodslist.json文件

{
  "status": 0,
  "message": [
    {
      "id": 1,
      "title": "動漫被套牀單",
      "add_time": "2017-12-25",
      "zhaiyao": "尺寸圖樣皆能夠訂製，若是在店鋪展現頁面沒有喜歡的角色，能夠諮詢客服，查看圖庫，進行選取！",
      "click": 30,
      "img_url": "../../statics/imgs/goodslist/goodslist01.jpg",
      "sell_price": 78,
      "market_price": 68,
      "stock_quantity": 200,
      "goods_no": "SD13313123"
    }, {
      "id": 2,
      "title": "二次元毛絨抱枕",
      "add_time": "2017-12-25",
      "zhaiyao": "此優惠限5件，超出則該商品所有恢復非活動價",
      "click": 33,
      "img_url": "../../statics/imgs/goodslist/goodslist02.jpg",
      "sell_price": 58,
      "market_price": 63,
      "stock_quantity": 500
    }, {
      "id": 3,
      "title": "逍遙宅品貓咪痛包",
      "add_time": "2017-12-25",
      "zhaiyao": "一共是一個外包+印花貓咪內包+純色內包+肩帶+手拎帶。自由發揮自主搭配！帶子以後會換成皮的！",
      "click": 34,
      "img_url": "../../statics/imgs/goodslist/goodslist03.jpg",
      "sell_price": 57,
      "market_price": 63,
      "stock_quantity": 500
    }, {
      "id": 4,
      "title": "動漫周邊保溫杯",
      "add_time": "2017-12-25",
      "zhaiyao": "採用304不鏽鋼 雙層真空內膽 保溫久不燙手 支持來圖定製 買就送杯套",
      "click": 36,
      "img_url": "../../statics/imgs/goodslist/goodslist04.jpg",
      "sell_price": 80,
      "market_price": 100,
      "stock_quantity": 300
    }, {
      "id": 5,
      "title": "雪初音衛衣棉服",
      "add_time": "2017-12-25",
      "zhaiyao": "此優惠限5件，超出則該商品所有恢復非活動價",
      "click": 63,
      "img_url": "../../statics/imgs/goodslist/goodslist05.jpg",
      "sell_price": 66,
      "market_price": 80,
      "stock_quantity": 300
    }, {
      "id": 6,
      "title": "Monchhichi萌趣趣",
      "add_time": "2017-12-25",
      "zhaiyao": "Monchhichi萌趣趣十二生肖狗雞小兔馬羊龍老虎豬小雞公仔送人禮品",
      "click": 38,
      "img_url": "../../statics/imgs/goodslist/goodslist06.jpg",
      "sell_price": 75,
      "market_price": 90,
      "stock_quantity": 800
    }
  ]
}

View Code

步驟三：在入口文件main.js中配置好路由規則

//導入vue核心包
import Vue from 'vue';

//導入App.vue的vue對象
import App from './App.vue';

//導入vue-router
import vueRouter from 'vue-router';

//將vueRouter對象綁定到Vue對象上
Vue.use(vueRouter);

//導入路由規則對應的組件對象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import newslist from './components/news/newslist.vue';
import newsinfo from './components/news/newsinfo.vue';
import photolist from './components/photo/photolist.vue';
import photoinfo from './components/photo/photoinfo.vue';
import goodslist from './components/goods/goodslist.vue';

//定義路由規則
var router1 = new vueRouter({
    //改變路由激活時的class名稱
  linkActiveClass: 'mui-active', 
  routes: [{
      path: '/',
      component: home 
    }, {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    },
    {
      path: '/news/newslist',
      component: newslist
    },
    {
      path: '/news/newsinfo/:id',
      component: newsinfo
    },
    {
      path: '/photo/photolist',
      component: photolist
    },
    {
      path: '/photo/photoinfo/:id',
      component: photoinfo
    },
    {
      path: '/goods/goodslist',
      component: goodslist
    }
  ]
});

//導入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//導入mint-ui組件對象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//註冊mui的css樣式
import '../statics/mui/css/mui.css';

//導入一個當前系統的全局基本樣式
import '../statics/css/site.css';

//將vue-resource在vue中綁定，自動在vue對象實例上注入一個$http對象就可使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//定義一個全局過濾器實現日期的格式化
import moment from 'moment';
Vue.filter('datefmt', function(input, fmtstring) {
  //使用momentjs這個日期格式化類庫實現日期的格式化功能
  //input表明左值（原始時間格式），fmtstring表明右值括號內的規則
  return moment(input).format(fmtstring);
});

//使用圖片預覽組件vue-preview
import VuePreview from 'vue-preview';
Vue.use(VuePreview);

//利用Vue對象進行解析渲染
new Vue({
  el: '#app',
  //使用路由對象實例
  router: router1,
  render: c => c(App) //es6寫法
})

View Code

 項目結構圖：

 

商品詳情頁開發（一）

步驟一：建立goodsinfo.vue文件

<template>
  <div id="tml">
    商品詳情
  </div>
</template>

<script>
</script>

<style>

</style>

View Code

步驟二：修改goodslist.vue文件

<template>
  <div id="tml">
    <!--利用mui中的圖文表格組件實現-->
    <div id="mui-content" class="mui-content" style="background-color:#fff">
      <ul class="mui-table-view mui-grid-view">
        <li v-for="item in list" class="mui-table-view-cell mui-media mui-col-xs-6">
          <router-link v-bind="{to:'/goods/goodsinfo/'+item.id}">
            <img class="mui-media-object" :src="item.img_url" style="height: 250px;">
            <div class="mui-media-body" v-text="item.title"></div>
            <div class="desc">
              <p>
                <span>￥{{item.sell_price}}</span>
                <s>￥{{item.market_price}}</s>
              </p>
              <p>
                <h6 class="left">熱賣中</h6>
                <h6 class="right">剩餘{{item.stock_quantity}}件</h6>
              </p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  // 表明vm
  export default {
    data() {
      return {
        list: []
      }
    },
    created() {
      this.getlist();
    },
    methods: {
      getlist() {
        //獲取到商品列表數據
        var url = '../../../statics/json/goodslist.json';
        this.$http.get(url).then(function(res) {
          if(res.body.status != 0) {
            Toast(res.body.message);
            return;
          }
          //當服務器返回了正常數據的時候作賦值操做
          this.list = res.body.message;
        });
      }
    }
  }
</script>

<style scoped>
  #mui-content li {
    border: 1px solid rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 0 4px #000;
    -moz-box-shadow: 0 0 4px #000;
    box-shadow: 0 0 4px #000;
    margin-left: 4px;
    padding: 0px;
    background-color: #fff;
    margin-bottom: 6px;
  }  
  #mui-content .mui-media-body {
    color: #0094ff;
  } 
  #mui-content .desc {
    height: 60px;
    background-color: rgba(0, 0, 0, 0.2);
    margin-top: 10px;
    padding: 5px;
    text-align: left;
  } 
  #mui-content .desc span {
    color: #a22b2b;
    margin-right: 15px;
  }  
  #mui-content a {
    padding-left: 0px;
    margin-left: 0px;
  }  
  #mui-content .desc .right {
    position: absolute;
    right: 10px;
    bottom: 0px;
    font-weight: bold;
  }  
  #mui-content .desc .left {
    position: absolute;
    left: 10px;
    bottom: 0px;
    color: red;
    font-weight: bold;
  }
</style>

View Code

步驟三：配置入口文件mian.js的路由規則

//導入vue核心包
import Vue from 'vue';

//導入App.vue的vue對象
import App from './App.vue';

//導入vue-router
import vueRouter from 'vue-router';

//將vueRouter對象綁定到Vue對象上
Vue.use(vueRouter);

//導入路由規則對應的組件對象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import newslist from './components/news/newslist.vue';
import newsinfo from './components/news/newsinfo.vue';
import photolist from './components/photo/photolist.vue';
import photoinfo from './components/photo/photoinfo.vue';
import goodslist from './components/goods/goodslist.vue';
import goodsinfo from './components/goods/goodsinfo.vue';

//定義路由規則
var router1 = new vueRouter({
    //改變路由激活時的class名稱
  linkActiveClass: 'mui-active', 
  routes: [{
      path: '/',
      component: home 
    }, {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    },
    {
      path: '/news/newslist',
      component: newslist
    },
    {
      path: '/news/newsinfo/:id',
      component: newsinfo
    },
    {
      path: '/photo/photolist',
      component: photolist
    },
    {
      path: '/photo/photoinfo/:id',
      component: photoinfo
    },
    {
      path: '/goods/goodslist',
      component: goodslist
    },
    {
      path: '/goods/goodsinfo/:id',
      component: goodsinfo
    }
  ]
});

//導入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//導入mint-ui組件對象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//註冊mui的css樣式
import '../statics/mui/css/mui.css';

//導入一個當前系統的全局基本樣式
import '../statics/css/site.css';

//將vue-resource在vue中綁定，自動在vue對象實例上注入一個$http對象就可使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//定義一個全局過濾器實現日期的格式化
import moment from 'moment';
Vue.filter('datefmt', function(input, fmtstring) {
  //使用momentjs這個日期格式化類庫實現日期的格式化功能
  //input表明左值（原始時間格式），fmtstring表明右值括號內的規則
  return moment(input).format(fmtstring);
});

//使用圖片預覽組件vue-preview
import VuePreview from 'vue-preview';
Vue.use(VuePreview);

//利用Vue對象進行解析渲染
new Vue({
  el: '#app',
  //使用路由對象實例
  router: router1,
  render: c => c(App) //es6寫法
})

View Code

 

案例四（商品詳情頁輪播圖實現）

步驟一：在subcom文件夾中封裝一個公用輪播組件slider.vue

<template>
  <div id="tml">
    <mt-swipe :auto="2000">
      <mt-swipe-item v-for="item in imgs">
        <img :src="item.img">
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
  export default {
    //用來接收父組件傳入過來的數據
    props: ['imgs']
  }
</script>

<style scoped>
  /*重寫輪播圖樣式*/
  
  .mint-swipe {
    height: 310px;
  }
  .mint-swipe-item {
    width: 100%;
    height: 300px;
  }
  .mint-swipe-item img {
    width: 100%;
    height: 80%;
  }
</style>

View Code

此時Home.vue的代碼爲

<template>
  <div id="tml">
      <!--使用組件結合mint-ui實現輪播圖-->
    <silder :imgs="list"></silder>

    <!--使用MUI的九宮格-->
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/news/newslist">
            <span class="mui-icon mui-icon-home"></span>
            <div class="mui-media-body">新聞資訊</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/photo/photolist">
            <span class="mui-icon mui-icon-email"></span>
            <div class="mui-media-body">圖片分享</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/goods/goodslist">
            <span class="mui-icon mui-icon-chatbubble"></span>
            <div class="mui-media-body">商品購買</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/feedback">
            <span class="mui-icon mui-icon-location"></span>
            <div class="mui-media-body">留言反饋</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/vide">
            <span class="mui-icon mui-icon-search"></span>
            <div class="mui-media-body">視頻專區</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/callme">
            <span class="mui-icon mui-icon-phone"></span>
            <div class="mui-media-body">聯繫咱們</div>
          </router-link>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  import silder from './subcom/slider.vue';

  export default {
    components: {
      silder
    },
    data() {
      return {
        list: []
      }
    },
    created() {
      // 當頁面中的data和methods對象都建立完畢之後，就會自動調用created
      this.getimgs();
    },
    methods: {
      getimgs() {
        // 實現輪播組件中的數據請求
        // 1.0 肯定url
        var url = '../../statics/json/homeslide.json'
        console.log(url);
        // 2.0 調用$http.get()
        this.$http.get(url).then(function(response) {
          var data = response.body;
          //錯誤處理
          if(data.status != 0) {
            Toast(data.message);
            return;
          }
          // 若是服務器返回的數據正常則賦值給list
          this.list = data.message;
        });
      }
    }
  }
</script>

<style scoped>
  /*重寫九宮格樣式*/  
  .mui-content,
  .mui-content ul li a {
    background: #fff;
  }
  /*改變九宮格圖標樣式*/ 
  .mui-grid-9 .mui-icon-home:before,
  .mui-grid-9 .mui-icon-email:before,
  .mui-grid-9 .mui-icon-chatbubble:before,
  .mui-grid-9 .mui-icon-location:before,
  .mui-grid-9 .mui-icon-search:before,
  .mui-grid-9 .mui-icon-phone:before {
    content: '';
    display: inline-block;
    width: 50px;
    height: 50px;
    background-repeat: round;
  }
  .mui-grid-9 .mui-icon-home:before {
    background-image: url(../../statics/imgs/Hgrid/1.png);
  }
  .mui-grid-9 .mui-icon-email:before {
    background-image: url(../../statics/imgs/Hgrid/2.png);
  }
  .mui-grid-9 .mui-icon-chatbubble:before {
    background-image: url(../../statics/imgs/Hgrid/3.png);
  }
  .mui-grid-9 .mui-icon-location:before {
    background-image: url(../../statics/imgs/Hgrid/4.png);
  }
  .mui-grid-9 .mui-icon-search:before {
    background-image: url(../../statics/imgs/Hgrid/5.png);
  }
  .mui-grid-9 .mui-icon-phone:before {
    background-image: url(../../statics/imgs/Hgrid/6.png);
  }
</style>

View Code

步驟二：建立goodslunbo1.json和goodslunbo.json用來存放輪播圖片

{
  "status": 0,
  "message": [
    {
      "src": "../../statics/imgs/goodsinfo/lunbo01.jpg",
      "url": "#",
      "img": "../../statics/imgs/goodsinfo/lunbo01.jpg"
    }, {
      "src": "../../statics/imgs/goodsinfo/lunbo02.jpg",
      "url": "#",
      "img": "../../statics/imgs/goodsinfo/lunbo02.jpg"
    }, {
      "src": "../../statics/imgs/goodsinfo/lunbo03.jpg",
      "url": "#",
      "img": "../../statics/imgs/goodsinfo/lunbo03.jpg"
    }
  ]
}

View Code

{
  "status": 0,
  "message": [
    {
      "src": "../../statics/imgs/goodsinfo/lunbo04.jpg",
      "url": "#",
      "img": "../../statics/imgs/goodsinfo/lunbo04.jpg"
    }, {
      "src": "../../statics/imgs/goodsinfo/lunbo05.jpg",
      "url": "#",
      "img": "../../statics/imgs/goodsinfo/lunbo05.jpg"
    }, {
      "src": "../../statics/imgs/goodsinfo/lunbo06.jpg",
      "url": "#",
      "img": "../../statics/imgs/goodsinfo/lunbo06.jpg"
    }
  ]
}

View Code

步驟三：修改goodsinfo.vue文件

<template>
  <div id="tml">
    <!--1.0 商品輪播圖-->
    <silder :imgs="imgs"></silder>

    <!--2.0 實現商品購買區-->

    <!--3.0 圖文詳情-->

    <!--4.0 商品評論-->
  </div>
</template>

<script>
  import silder from '../subcom/slider.vue';

  export default {
    components: {
      silder
    },
    data() {
      return {
        id: 0, //表示商品id
        imgs: []
      }
    },
    created() {
      //獲取url傳入的商品id值
      this.id = this.$route.params.id;
      this.getimgs();
    },
    methods: {
      getimgs() {
        var url = '../../../statics/json/goodslunbo' + this.id + '.json';
        this.$http.get(url).then(function(res) {
          if(res.body.status != 0) {
            Toast(res.body.message);
            return;
          }
          //當服務器返回了正常數據的時候作賦值操做
          this.imgs = res.body.message;
        });
      }
    }
  }
</script>

<style scoped>

</style>

View Code

 

實現商品購買區

步驟一：修改goodsinfo.vue文件

<template>
  <div id="tml">
    <!--1.0 商品輪播圖-->
    <div class="silder">
      <silder :imgs="imgs"></silder>
    </div>

    <!--2.0 實現商品購買區-->
    <div id="buy">
      <h4 v-text="info.title"></h4>
      <p class="line"></p>
      <ul>
        <li class="price">
          市場價: <s>￥{{info.market_price}}</s> 銷售價：<span>￥{{info.sell_price}}</span>
        </li>
        <li>
          購買數量：
        </li>
        <li>
          <mt-button type="primary" size="small">當即購買</mt-button>
          <mt-button type="danger" size="small">加入購物車</mt-button>
        </li>
      </ul>
    </div>

    <div id="params">
      <h6>商品參數</h6>
      <p class="line"></p>
      <ul>
        <li>商品貨號：{{info.goods_no}}</li>
        <li>庫存狀況：{{info.stock_quantity}}</li>
        <li>上架時間：{{info.add_time}}</li>
      </ul>
    </div>

    <!--3.0 圖文詳情-->
    <!--4.0 商品評論-->
    <div id="other">
      <mt-button plain class="imgdesc" type="primary" size="large">圖文詳情</mt-button>
      <mt-button plain type="danger" size="large">商品評論</mt-button>
    </div>
  </div>
</template>

<script>
  import silder from '../subcom/slider.vue';

  export default {
    components: {
      silder
    },
    data() {
      return {
        id: 0, //表示商品id
        imgs: [],
        info: {} //存儲商品詳細信息
      }
    },
    created() {
      //獲取url傳入的商品id值
      this.id = this.$route.params.id;
      this.getimgs();
      this.getinfo();
    },
    methods: {
      getimgs() {
        var url = '../../../statics/json/goodslunbo' + this.id + '.json';
        this.$http.get(url).then(function(res) {
          //判斷狀態
          this.imgs = res.body.message;
        });
      },
      getinfo() {
        var url = '../../../statics/json/goodslist.json';
        this.$http.get(url).then(function(res) {
          var body = res.body;
          if(body.status != 0) {
            alert(body.message);
            return;
          }

          for(var i = 0; i < body.message.length; i++) {
            if(this.id == body.message[i].id) {
              console.log(body.message[i])
              this.info = body.message[i];
              console.log(this.info);
            }
          }
        });
      }

    }
  }
</script>

<style scoped>
  .silder {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
  }
  
  #buy,
  #params,
  #other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
  }
  
  .line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  
  #buy ul,
  #params ul {
    padding-left: 0px;
  }
  
  #buy h4 {
    color: #0094ff;
    padding: 5px;
  }
  
  #buy li,
  #params li {
    list-style: none;
    padding: 8px;
  }
  
  #buy .price span {
    color: red;
  }
  
  #other .imgdesc {
    margin-bottom: 20px;
  }
</style>

View Code

步驟二：建立goodslist.json文件

{
  "status": 0,
  "message": [
    {
      "id": 1,
      "title": "動漫被套牀單",
      "add_time": "2017-12-25",
      "zhaiyao": "尺寸圖樣皆能夠訂製，若是在店鋪展現頁面沒有喜歡的角色，能夠諮詢客服，查看圖庫，進行選取！",
      "click": 30,
      "img_url": "../../statics/imgs/goodslist/goodslist01.jpg",
      "sell_price": 78,
      "market_price": 68,
      "stock_quantity": 200,
      "goods_no": "SD13313123"
    }, {
      "id": 2,
      "title": "二次元毛絨抱枕",
      "add_time": "2017-12-25",
      "zhaiyao": "此優惠限5件，超出則該商品所有恢復非活動價",
      "click": 33,
      "img_url": "../../statics/imgs/goodslist/goodslist02.jpg",
      "sell_price": 58,
      "market_price": 63,
      "stock_quantity": 500,
      "goods_no": "SD13313123"
    }, {
      "id": 3,
      "title": "逍遙宅品貓咪痛包",
      "add_time": "2017-12-25",
      "zhaiyao": "一共是一個外包+印花貓咪內包+純色內包+肩帶+手拎帶。自由發揮自主搭配！帶子以後會換成皮的！",
      "click": 34,
      "img_url": "../../statics/imgs/goodslist/goodslist03.jpg",
      "sell_price": 57,
      "market_price": 63,
      "stock_quantity": 500,
      "goods_no": "SD13313123"
    }, {
      "id": 4,
      "title": "動漫周邊保溫杯",
      "add_time": "2017-12-25",
      "zhaiyao": "採用304不鏽鋼 雙層真空內膽 保溫久不燙手 支持來圖定製 買就送杯套",
      "click": 36,
      "img_url": "../../statics/imgs/goodslist/goodslist04.jpg",
      "sell_price": 80,
      "market_price": 100,
      "stock_quantity": 300,
      "goods_no": "SD13313123"
    }, {
      "id": 5,
      "title": "雪初音衛衣棉服",
      "add_time": "2017-12-25",
      "zhaiyao": "此優惠限5件，超出則該商品所有恢復非活動價",
      "click": 63,
      "img_url": "../../statics/imgs/goodslist/goodslist05.jpg",
      "sell_price": 66,
      "market_price": 80,
      "stock_quantity": 300,
      "goods_no": "SD13313123"
    }, {
      "id": 6,
      "title": "Monchhichi萌趣趣",
      "add_time": "2017-12-25",
      "zhaiyao": "Monchhichi萌趣趣十二生肖狗雞小兔馬羊龍老虎豬小雞公仔送人禮品",
      "click": 38,
      "img_url": "../../statics/imgs/goodslist/goodslist06.jpg",
      "sell_price": 75,
      "market_price": 90,
      "stock_quantity": 800,
      "goods_no": "SD13313123"
    }
  ]
}

View Code

 

實現商品圖文詳情

步驟一：建立一個goodsdesc.json文件

{
  "status": 0,
  "message": [
    {
      "id": 1,
      "title": "動漫被套牀單",
      "content": "尺寸圖樣皆能夠訂製，若是在店鋪展現頁面沒有喜歡的角色，能夠諮詢客服，查看圖庫，進行選取！"
    }, {
      "id": 2,
      "title": "二次元毛絨抱枕",
      "content": "此優惠限5件，超出則該商品所有恢復非活動價"
    }
  ]
}

View Code

步驟二：建立goodsdesc.vue文件

<template>
  <div id="tml">
    <h4 v-text="info.title" style="padding-top: 10px;"></h4>
    <p class="line"></p>
    <p v-html="info.content"></p>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        id: 0, // 表明的是當前商品的id
        info: {}
      }
    },
    created() {
      this.id = this.$route.params.id;
      this.getinfo();
    },
    methods: {
      getinfo() {
        //1.0 定義url
        var url = '../../../statics/json/goodsdesc.json';
        //2.0 發出ajax請求獲取數據
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            alert(body.message);
            return;
          }
          //3.0 賦值
          for (var i = 0; i < body.message.length; i++) {
            if (this.id == body.message[i].id) {
              console.log(body.message[i])
              this.info = body.message[i];
              console.log(this.info);
            }
          }
        });
      }
    }
  }
</script>

<style scoped>
  #tmpl {
    padding: 5px;
    margin-top: 60px;
  }
  #tmpl h4 {
    color: #0094ff;
  }
  #tmpl .line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.3);
  }
</style>

View Code

步驟三：修改goodsinfo.vue文件

<template>
  <div id="tml">
    <!--1.0 商品輪播圖-->
    <div class="silder">
      <silder :imgs="imgs"></silder>
    </div>

    <!--2.0 實現商品購買區-->
    <div id="buy">
      <h4 v-text="info.title"></h4>
      <p class="line"></p>
      <ul>
        <li class="price">
          市場價: <s>￥{{info.market_price}}</s> 銷售價：<span>￥{{info.sell_price}}</span>
        </li>
        <li>
          購買數量：
        </li>
        <li>
          <mt-button type="primary" size="small">當即購買</mt-button>
          <mt-button type="danger" size="small">加入購物車</mt-button>
        </li>
      </ul>
    </div>

    <div id="params">
      <h6>商品參數</h6>
      <p class="line"></p>
      <ul>
        <li>商品貨號：{{info.goods_no}}</li>
        <li>庫存狀況：{{info.stock_quantity}}</li>
        <li>上架時間：{{info.add_time}}</li>
      </ul>
    </div>

    <!--3.0 圖文詳情-->
    <!--4.0 商品評論-->
    <div id="other">
      <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
            <mt-button class="imgdesc" type="primary" size="large">圖文詳情</mt-button>
            </router-link>
            <mt-button type="danger" size="large">商品評論</mt-button>
    </div>
  </div>
</template>

<script>
  import silder from '../subcom/slider.vue';

  export default {
    components: {
      silder
    },
    data() {
      return {
        id: 0, //表示商品id
        imgs: [],
        info: {} //存儲商品詳細信息
      }
    },
    created() {
      //獲取url傳入的商品id值
      this.id = this.$route.params.id;
      this.getimgs();
      this.getinfo();
    },
    methods: {
      getimgs() {
        var url = '../../../statics/json/goodslunbo' + this.id + '.json';
        this.$http.get(url).then(function(res) {
          //判斷狀態
          this.imgs = res.body.message;
        });
      },
      getinfo() {
        var url = '../../../statics/json/goodslist.json';
        this.$http.get(url).then(function(res) {
          var body = res.body;
          if(body.status != 0) {
            alert(body.message);
            return;
          }

          for(var i = 0; i < body.message.length; i++) {
            if(this.id == body.message[i].id) {
              this.info = body.message[i];
            }
          }
        });
      }

    }
  }
</script>

<style scoped>
  .silder {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
  }  
  #buy,
  #params,
  #other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
  } 
  .line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }  
  #buy ul,
  #params ul {
    padding-left: 0px;
  }  
  #buy h4 {
    color: #0094ff;
    padding: 5px;
  } 
  #buy li,
  #params li {
    list-style: none;
    padding: 8px;
  }  
  #buy .price span {
    color: red;
  }  
  #other .imgdesc {
    margin-bottom: 20px;
  }
</style>

View Code

步驟四：配置入口文件main.js的路由規則

//導入vue核心包
import Vue from 'vue';

//導入App.vue的vue對象
import App from './App.vue';

//導入vue-router
import vueRouter from 'vue-router';
//將vueRouter對象綁定到Vue對象上
Vue.use(vueRouter);

//使用圖片預覽組件vue-preview
import VuePreview from 'vue-preview';
Vue.use(VuePreview);

//導入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//導入mint-ui組件對象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//註冊mui的css樣式
import '../statics/mui/css/mui.css';

//導入一個當前系統的全局基本樣式
import '../statics/css/site.css';

//將vue-resource在vue中綁定，自動在vue對象實例上注入一個$http對象就可使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//導入路由規則對應的組件對象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';
import newslist from './components/news/newslist.vue';
import newsinfo from './components/news/newsinfo.vue';
import photolist from './components/photo/photolist.vue';
import photoinfo from './components/photo/photoinfo.vue';
import goodslist from './components/goods/goodslist.vue';
import goodsinfo from './components/goods/goodsinfo.vue';
import goodsdesc from './components/goods/goodsdesc.vue';

//定義路由規則
var router1 = new vueRouter({
    //改變路由激活時的class名稱
  linkActiveClass: 'mui-active', 
  routes: [{
      path: '/',
      component: home 
    }, {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    },
    {
      path: '/news/newslist',
      component: newslist
    },
    {
      path: '/news/newsinfo/:id',
      component: newsinfo
    },
    {
      path: '/photo/photolist',
      component: photolist
    },
    {
      path: '/photo/photoinfo/:id',
      component: photoinfo
    },
    {
      path: '/goods/goodslist',
      component: goodslist
    },
    {
      path: '/goods/goodsinfo/:id',
      component: goodsinfo
    },
    {
      path: '/goods/goodsdesc/:id',
      component: goodsdesc
    }
  ]
});

//定義一個全局過濾器實現日期的格式化
import moment from 'moment';
Vue.filter('datefmt', function(input, fmtstring) {
  //使用momentjs這個日期格式化類庫實現日期的格式化功能
  //input表明左值（原始時間格式），fmtstring表明右值括號內的規則
  return moment(input).format(fmtstring);
});

//利用Vue對象進行解析渲染
new Vue({
  el: '#app',
  //使用路由對象實例
  router: router1,
  render: c => c(App) //es6寫法
})

View Code

 

實現購買功能區

步驟一：建立一個組件inputNumber.vue

<template>
  <div id="subtmpl">
    <div class="inleft div" @click="substrict">-</div>
    <div class="incenter div" v-text="count"></div>
    <div class="inright div" @click="add">+</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 1 //表明購買商品的數量
      }
    },
    methods: {
      substrict() {
        this.count--;
        //                確保最小值爲1
        if(this.count < 1) {
          this.count = 1;
        }
        this.sendmessage();
      },
      add() {
        this.count++;
        this.sendmessage();
      },
      sendmessage() {
        this.$emit('dataobj', this.count);
      }
    }
  }
</script>

<style scoped>
  #subtmpl .div {
    width: 40px;
    height: 25px;
    line-height: 25px;
    border: 1px solid #000;
    display: inline-block;
    text-align: center;
  }
</style>

View Code

步驟二：修改goodsinfo.vue文件

<template>
  <div id="tml">
    <!--1.0 商品輪播圖-->
    <div class="silder">
      <silder :imgs="imgs"></silder>
    </div>

    <!--2.0 實現商品購買區-->
    <div id="buy">
      <h4 v-text="info.title"></h4>
      <p class="line"></p>
      <ul>
        <li class="price">
          市場價: <s>￥{{info.market_price}}</s> 銷售價：<span>￥{{info.sell_price}}</span>
        </li>
        <li>
          <li class="inputli">
            購買數量：
            <inputnumber v-on:dataobj="getcount" class="inputnumber"></inputnumber>
          </li>
        </li>
        <li>
          <mt-button type="primary" size="small">當即購買</mt-button>
          <mt-button type="danger" size="small">加入購物車</mt-button>
        </li>
      </ul>
    </div>

    <div id="params">
      <h6>商品參數</h6>
      <p class="line"></p>
      <ul>
        <li>商品貨號：{{info.goods_no}}</li>
        <li>庫存狀況：{{info.stock_quantity}}</li>
        <li>上架時間：{{info.add_time}}</li>
      </ul>
    </div>

    <!--3.0 圖文詳情-->
    <!--4.0 商品評論-->
    <div id="other">
      <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
        <mt-button class="imgdesc" type="primary" size="large">圖文詳情</mt-button>
      </router-link>
      <mt-button type="danger" size="large">商品評論</mt-button>
    </div>
  </div>
</template>

<script>
  import silder from '../subcom/slider.vue';
  import inputnumber from '../subcom/inputNumber.vue';
  export default {
    components: {
      silder,
      inputnumber
    },
    data() {
      return {
        inputNumberCount: 1, //表示當前購買商品的數量
        id: 0, //表示商品id
        imgs: [],
        info: {} //存儲商品詳細信息
      }
    },
    created() {
      //獲取url傳入的商品id值
      this.id = this.$route.params.id;
      this.getimgs();
      this.getinfo();
    },
    methods: {
      //獲取inputnumber組件中傳入的值
      getcount(count) {
        this.inputNumberCount = count;
        console.log(count);
      },
      getimgs() {
        var url = '../../json/goodslunbo' + this.id + '.json';
        this.$http.get(url).then(function(res) {
          //判斷狀態
          this.imgs = res.body.message;
        });
      },
      getinfo() {
        var url = '../../json/goodslist.json';
        this.$http.get(url).then(function(res) {
          var body = res.body;
          if(body.status != 0) {
            alert(body.message);
            return;
          }

          for(var i = 0; i < body.message.length; i++) {
            if(this.id == body.message[i].id) {
              console.log(body.message[i])
              this.info = body.message[i];
              console.log(this.info);
            }
          }
        });
      }

    }
  }
</script>

<style scoped>
  .silder {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
  }
  
  #buy,
  #params,
  #other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
  }
  
  .line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  
  #buy ul,
  #params ul {
    padding-left: 0px;
  }
  
  #buy h4 {
    color: #0094ff;
    padding: 5px;
  }
  
  #buy li,
  #params li {
    list-style: none;
    padding: 8px;
  }
  
  #buy .price span {
    color: red;
  }
  
  #other .imgdesc {
    margin-bottom: 20px;
  }
  
  .inputli {
    position: relative;
  }
  
  .inputnumber {
    position: absolute;
    left: 100px;
    top: 5px;
  }
</style>

View Code

 

將底部的購物車圖標中數字疊加

步驟一：涉及到三個頁面的通訊，所以須要建立一個共同的Vue對象。

vm.js

import Vue from 'Vue';

export const COUNTSTR = 'inputNumberCount';
export var vm = new Vue();

步驟二：修改根組件App.vue

<!--之後項目的根組件-->
<template>
  <div>
    <!--1.0利用mint-ui中的header組件實現整個系統的頭部-->
    <mt-header fixed title="hello"></mt-header>

    <!--2.0利用vue-router的<router-view></router-view>進行佔位-->
    <router-view></router-view>

    <!--3.0利用mui中的tabbar組件實現系統的底部-->
    <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item" to="/home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首頁</span>
      </router-link>
      <router-link class="mui-tab-item" to="#tabbar-with-chat">
        <span class="mui-icon mui-icon-email"></span>
        <span class="mui-tab-label">會員</span>
      </router-link>
      <router-link class="mui-tab-item" to="/shopcar">
        <span class="mui-icon mui-icon-contact"><span id="badge" class="mui-badge">0</span></span>
        <span class="mui-tab-label">購物車</span>
      </router-link>
      <router-link class="mui-tab-item" to="/tabbar-with-map">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">搜索</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
  import { vm, COUNTSTR } from './kits/vm.js';
  // 利用 vm.$on() 來註冊 COUNT這個常量表明的事件
  vm.$on(COUNTSTR, function(count) {
    //1.0 將count值追加到購物車中
    var badgeobj = document.querySelector('#badge');
    badgeobj.innerText = parseInt(badgeobj.innerText) + count;
  });

  // 2.0負責導出.vue這個組件對象，它本質上是一個Vue對象
  // 因此Vue中該定義的元素均可以使用
  export default { // es6的導出對象的寫法
    data() { //等價於 es5的 data:function(){
      return {

      }
    },
    methods: {

    },
    created() {

    }
  }
</script>

<style scoped>
  /* 3.0當前頁面的CSS樣式寫到這裏，其中scoped表示這個裏面
      寫的CSS代碼知識在當前組件頁面上有效，不會影響到其餘組件頁面
     * */
</style>

View Code

步驟三：修改goodsinfo.vue文件

<template>
  <div id="tml">
    <!--1.0 商品輪播圖-->
    <div class="silder">
      <silder :imgs="imgs"></silder>
    </div>

    <!--2.0 實現商品購買區-->
    <div id="buy">
      <h4 v-text="info.title"></h4>
      <p class="line"></p>
      <ul>
        <li class="price">
          市場價: <s>￥{{info.market_price}}</s> 銷售價：<span>￥{{info.sell_price}}</span>
        </li>
        <li>
          <li class="inputli">
            購買數量：
            <inputnumber v-on:dataobj="getcount" class="inputnumber"></inputnumber>
          </li>
        </li>
        <li>
          <mt-button type="primary" size="small">當即購買</mt-button>
          <mt-button type="danger" size="small" @click="toshopcar">加入購物車</mt-button>
        </li>
      </ul>
    </div>

    <div id="params">
      <h6>商品參數</h6>
      <p class="line"></p>
      <ul>
        <li>商品貨號：{{info.goods_no}}</li>
        <li>庫存狀況：{{info.stock_quantity}}</li>
        <li>上架時間：{{info.add_time}}</li>
      </ul>
    </div>

    <!--3.0 圖文詳情-->
    <!--4.0 商品評論-->
    <div id="other">
      <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
        <mt-button class="imgdesc" type="primary" size="large">圖文詳情</mt-button>
      </router-link>
      <mt-button type="danger" size="large">商品評論</mt-button>
    </div>
  </div>
</template>

<script>
  import silder from '../subcom/slider.vue';
  import inputnumber from '../subcom/inputNumber.vue';
  //使用vm對象
  import { vm, COUNTSTR } from '../../kits/vm.js';
  export default {
    components: {
      silder,
      inputnumber
    },
    data() {
      return {
        inputNumberCount: 1, //表示當前購買商品的數量
        id: 0, //表示商品id
        imgs: [],
        info: {} //存儲商品詳細信息
      }
    },
    created() {
      //獲取url傳入的商品id值
      this.id = this.$route.params.id;
      this.getimgs();
      this.getinfo();
    },
    methods: {
      //加入購物車方法
      toshopcar() {
        //觸發事件
        vm.$emit(COUNTSTR, this.inputNumberCount);
      },

      //獲取inputnumber組件中傳入的值
      getcount(count) {
        this.inputNumberCount = count;
        console.log(count);
      },
      getimgs() {
        var url = '../../json/goodslunbo' + this.id + '.json';
        this.$http.get(url).then(function(res) {
          //判斷狀態
          this.imgs = res.body.message;
        });
      },
      getinfo() {
        var url = '../../json/goodslist.json';
        this.$http.get(url).then(function(res) {
          var body = res.body;
          if(body.status != 0) {
            alert(body.message);
            return;
          }

          for(var i = 0; i < body.message.length; i++) {
            if(this.id == body.message[i].id) {
              console.log(body.message[i])
              this.info = body.message[i];
              console.log(this.info);
            }
          }
        });
      }

    }
  }
</script>

<style scoped>
  .silder {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
  }
  
  #buy,
  #params,
  #other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
  }
  
  .line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  
  #buy ul,
  #params ul {
    padding-left: 0px;
  }
  
  #buy h4 {
    color: #0094ff;
    padding: 5px;
  }
  
  #buy li,
  #params li {
    list-style: none;
    padding: 8px;
  }
  
  #buy .price span {
    color: red;
  }
  
  #other .imgdesc {
    margin-bottom: 20px;
  }
  
  .inputli {
    position: relative;
  }
  
  .inputnumber {
    position: absolute;
    left: 100px;
    top: 5px;
  }
</style>

View Code

項目結構：

 

本地存儲購物數據

步驟一：建立一個負責操做localStorage的js文件

localSg.js

// 負責操做localStorage的文件
/*
 *  獲取數據：var Str  =localStorage.getItem(key);
 *  添加和追加數據： localStorage.setItem(key,value) ,value 是一個字符串
 *  移除數據 ： localStorage.removeItem(key);
 * */

// 1.0 定義常量key,未來操做的localStorage中的數據都以這個key來做爲標識
export const KEY = 'goodsdata';
export var valueObj = {
  goodsid: 0,
  count: 0
};

// 2.0 實現數據的增長
// value;格式： {goodsid:87,count:10}
export function setItem(value) {
  //1.0 獲取json格式
  var jsonString = localStorage.getItem(KEY);
  jsonString = jsonString || '[]';
  var arr = JSON.parse(jsonString);
  // 2.0 將value追加進入arr
  arr.push(value);
  // 3.0 將arr 轉換成json字符串保存起來
  localStorage.setItem(KEY, JSON.stringify(arr));
}

// 3.0 獲取數據
export function getItem() {
  var jsonString = localStorage.getItem(KEY);
  //將json格式字符串轉換成 js對象
  // jsonString：是一個標準的json格式
  jsonString = jsonString || '[]';

  return JSON.parse(jsonString);
}

// 4.0 移除數據
export function remoteItem() {

}

View Code

步驟二：修改goodsinfo.vue文件

<template>
  <div id="tml">
    <!--1.0 商品輪播圖-->
    <div class="silder">
      <silder :imgs="imgs"></silder>
    </div>

    <!--2.0 實現商品購買區-->
    <div id="buy">
      <h4 v-text="info.title"></h4>
      <p class="line"></p>
      <ul>
        <li class="price">
          市場價: <s>￥{{info.market_price}}</s> 銷售價：<span>￥{{info.sell_price}}</span>
        </li>
        <li>
          <li class="inputli">
            購買數量：
            <inputnumber v-on:dataobj="getcount" class="inputnumber"></inputnumber>
          </li>
        </li>
        <li>
          <mt-button type="primary" size="small">當即購買</mt-button>
          <mt-button type="danger" size="small" @click="toshopcar">加入購物車</mt-button>
        </li>
      </ul>
    </div>

    <div id="params">
      <h6>商品參數</h6>
      <p class="line"></p>
      <ul>
        <li>商品貨號：{{info.goods_no}}</li>
        <li>庫存狀況：{{info.stock_quantity}}</li>
        <li>上架時間：{{info.add_time}}</li>
      </ul>
    </div>

    <!--3.0 圖文詳情-->
    <!--4.0 商品評論-->
    <div id="other">
      <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
        <mt-button class="imgdesc" type="primary" size="large">圖文詳情</mt-button>
      </router-link>
      <mt-button type="danger" size="large">商品評論</mt-button>
    </div>
  </div>
</template>

<script>
  import silder from '../subcom/slider.vue';
  import inputnumber from '../subcom/inputNumber.vue';
  //使用vm對象
  import { vm, COUNTSTR } from '../../kits/vm.js';
  import {setItem,valueObj} from '../../kits/localSg.js';
  export default {
    components: {
      silder,
      inputnumber
    },
    data() {
      return {
        inputNumberCount: 1, //表示當前購買商品的數量
        id: 0, //表示商品id
        imgs: [],
        info: {} //存儲商品詳細信息
      }
    },
    created() {
      //獲取url傳入的商品id值
      this.id = this.$route.params.id;
      this.getimgs();
      this.getinfo();
    },
    methods: {
      //加入購物車方法
      toshopcar() {
        //觸發事件
        vm.$emit(COUNTSTR, this.inputNumberCount);
        //2.0 將數據保存到localStroage中
                valueObj.goodsid = this.id;
                valueObj.count = this.inputNumberCount;
                setItem(valueObj);
      },

      //獲取inputnumber組件中傳入的值
      getcount(count) {
        this.inputNumberCount = count;
        console.log(count);
      },
      getimgs() {
        var url = '../../json/goodslunbo' + this.id + '.json';
        this.$http.get(url).then(function(res) {
          //判斷狀態
          this.imgs = res.body.message;
        });
      },
      getinfo() {
        var url = '../../json/goodslist.json';
        this.$http.get(url).then(function(res) {
          var body = res.body;
          if(body.status != 0) {
            alert(body.message);
            return;
          }

          for(var i = 0; i < body.message.length; i++) {
            if(this.id == body.message[i].id) {
              console.log(body.message[i])
              this.info = body.message[i];
              console.log(this.info);
            }
          }
        });
      }

    }
  }
</script>

<style scoped>
  .silder {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
  }
  
  #buy,
  #params,
  #other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
  }
  
  .line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  
  #buy ul,
  #params ul {
    padding-left: 0px;
  }
  
  #buy h4 {
    color: #0094ff;
    padding: 5px;
  }
  
  #buy li,
  #params li {
    list-style: none;
    padding: 8px;
  }
  
  #buy .price span {
    color: red;
  }
  
  #other .imgdesc {
    margin-bottom: 20px;
  }
  
  .inputli {
    position: relative;
  }
  
  .inputnumber {
    position: absolute;
    left: 100px;
    top: 5px;
  }
</style>

View Code

 

實現加入購物車動態效果

<template>
  <div id="tml">
    <!--1.0 商品輪播圖-->
    <div class="silder">
      <silder :imgs="imgs"></silder>
    </div>

    <!--2.0 實現商品購買區-->
    <div id="buy">
      <h4 v-text="info.title"></h4>
      <p class="line"></p>
      <ul>
        <li class="price">
          市場價: <s>￥{{info.market_price}}</s> 銷售價：<span>￥{{info.sell_price}}</span>
        </li>
        <li class="inputli">
          購買數量：
          <inputnumber v-on:dataobj="getcount" class="inputnumber"></inputnumber>
          <transition name="show" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div v-if="isshow" class="ball"></div>
          </transition>
        </li>
        <li>
          <mt-button type="primary" size="small">當即購買</mt-button>
          <mt-button type="danger" size="small" @click="toshopcar">加入購物車</mt-button>
        </li>
      </ul>
    </div>

    <div id="params">
      <h6>商品參數</h6>
      <p class="line"></p>
      <ul>
        <li>商品貨號：{{info.goods_no}}</li>
        <li>庫存狀況：{{info.stock_quantity}}</li>
        <li>上架時間：{{info.add_time}}</li>
      </ul>
    </div>

    <!--3.0 圖文詳情-->
    <!--4.0 商品評論-->
    <div id="other">
      <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
        <mt-button class="imgdesc" type="primary" size="large">圖文詳情</mt-button>
      </router-link>
      <mt-button type="danger" size="large">商品評論</mt-button>
    </div>
  </div>
</template>

<script>
  import silder from '../subcom/slider.vue';
  import inputnumber from '../subcom/inputNumber.vue';
  //使用vm對象
  import { vm, COUNTSTR } from '../../kits/vm.js';
  import { setItem, valueObj } from '../../kits/localSg.js';
  export default {
    components: {
      silder,
      inputnumber
    },
    data() {
      return {
        isshow: false, //控制小球的顯示狀態
        inputNumberCount: 1, //表示當前購買商品的數量
        id: 0, //表示商品id
        imgs: [],
        info: {} //存儲商品詳細信息
      }
    },
    created() {
      //獲取url傳入的商品id值
      this.id = this.$route.params.id;
      this.getimgs();
      this.getinfo();
    },
    methods: {
      //動畫3個方法
      beforeEnter(el) {
        //設定小球的初始位置
        el.style.transform = "translate(0px,0px)";
      },
      enter(el, done) {
        //保證小球出現動畫
        el.offsetWidth;

        //設置小球的結束位置
        el.style.transform = "translate(75px,366px)";

        //結束動畫
        done();
      },
      afterEnter(el) {
        //重置小球的初始狀態
        this.isshow = !this.isshow;
      },
      //加入購物車方法
      toshopcar() {
        //觸發事件
        vm.$emit(COUNTSTR, this.inputNumberCount);
        //2.0 將數據保存到localStroage中
        valueObj.goodsid = this.id;
        valueObj.count = this.inputNumberCount;
        setItem(valueObj);
        //3.0 實現小球動畫
        this.isshow = !this.isshow;
      },

      //獲取inputnumber組件中傳入的值
      getcount(count) {
        this.inputNumberCount = count;
        console.log(count);
      },
      getimgs() {
        var url = '../../json/goodslunbo' + this.id + '.json';
        this.$http.get(url).then(function(res) {
          //判斷狀態
          this.imgs = res.body.message;
        });
      },
      getinfo() {
        var url = '../../json/goodslist.json';
        this.$http.get(url).then(function(res) {
          var body = res.body;
          if(body.status != 0) {
            alert(body.message);
            return;
          }

          for(var i = 0; i < body.message.length; i++) {
            if(this.id == body.message[i].id) {
              console.log(body.message[i])
              this.info = body.message[i];
              console.log(this.info);
            }
          }
        });
      }

    }
  }
</script>

<style scoped>
  .silder {
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    margin: 5px;
  }
  
  #buy,
  #params,
  #other {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 5px;
  }
  
  .line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  
  #buy ul,
  #params ul {
    padding-left: 0px;
  }
  
  #buy h4 {
    color: #0094ff;
    padding: 5px;
  }
  
  #buy li,
  #params li {
    list-style: none;
    padding: 8px;
  }
  
  #buy .price span {
    color: red;
  }
  
  #other .imgdesc {
    margin-bottom: 20px;
  }
  
  .inputli {
    position: relative;
  }
  
  .inputnumber {
    position: absolute;
    left: 100px;
    top: 5px;
  }
  
  .ball {
    background-color: red;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: absolute;
    left: 150px;
    top: 10px;
    transition: all 0.4s ease;
    z-index: 100;
  }
</style>

View Code