vue-實現商品列表（列表+刷新+篩選）

<template>
  <div class="maincont">
    <header>
      <a href="javascript:history.back(-1)" class="back-off fl"><span class="glyphicon glyphicon-menu-left"></span></a>
      <div class="head-mid">
        <form action="#" method="get" class="prosearch"><input type="text" /></form>
      </div>
    </header>
    <ul class="pro-select">
      <li :class="{'pro-selCur':order_type==1}">
        <a href="javascript:;" @click="showOrder(1)" >新品</a>
      </li>
      <li :class="{'pro-selCur':order_type==2}">
        <a href="javascript:;" @click="showOrder(2)">銷量</a>
      </li>
      <li :class="{'pro-selCur':order_type==3}">
        <a href="javascript:;" @click="showOrder(3)">價格</a>
      </li>
    </ul><!--pro-select/-->
    <div class="prolist">
      <dl v-for=" (v,k) in goodsList">
        <dt>
          <router-link :to="{name:'GoodsDetail',query:{goods_id:v.goods_id}}">
            <img :src="v.goods_goods_img" width="100" height="100" />
          </router-link>
        </dt>
        <dd>
          <h3>
            <router-link :to="{name:'GoodsDetail',query:{goods_id:v.goods_id}}">
              {{v.goods_name}}
            </router-link>
          </h3>
          <div class="prolist-price"><strong>¥{{v.goods_selfprice}}</strong> <span>¥{{v.goods_marketprice}}</span></div>
          <div class="prolist-yishou"><span>{{v.discount}}折</span> <em>已售：{{v.sale_number}}</em></div>
        </dd>
        <div class="clearfix"></div>
      </dl>

    </div><!--prolist/-->
    <button  v-if="has_more == 1" @click="loadMore">點擊加載更多</button>
    <button class="nodata" v-else>我也是底限的。。。。</button>
    <div class="height1"></div>
    <tab-bar></tab-bar>
  </div><!--maincont-->

</template>
<script>
import  "@/assets/css/bootstrap.min.css"
import  "@/assets/css/style.css"
import  "@/assets/css/response.css"
import  "@/assets/js/jquery.min.js"
import  "@/assets/js/jquery.excoloSlider.js"
import  "@/assets/js/style.js"
import TabBar from "./Public/TabBar";
import Common from "../Mixins/Common";
import Index from "./Index";
export default {
  name: 'Reg',
  components: { TabBar:TabBar},
  mixins:[ Common ],
  data () {
    return {
      goodsList: [],
      page:1,
      has_more:1,
      order_type:1
    }
  },
  methods:{
    showOrder : function( order_type ){
      this.order_type = order_type;
      this.page = 1;
      this.getGoodsList();
    },
    loadMore: function () {
      this.getGoodsList( this.page);
    },
    getGoodsList:function ( ) {
      let api_req = {
        page:this.page,
        order_type:this.order_type
      };
      console.log( api_req);
      this.$http.post('api/getProductList', api_req ).then( (response) =>{
        if( response.body.status == 200 ){
          if( this.page == 1 ){
            this.goodsList = response.body.data.data;
          }else{
            this.goodsList =  this.goodsList.concat(response.body.data.data);
          }
          if( response.body.data.data.length < 10  ){
            this.has_more = 0;
          }
          this.page++;
        }
      },(error) => {
        alert(error);
      })
    }
  },
  watch:{
    goodsList:function ( val ) {
      console.log( val );
      for ( let i  in val  ){
        //parseFloat 轉成Float類型，toFixex 保留2位小數
        this.goodsList[i].discount =  parseFloat( val[i].goods_selfprice  /  val[i].goods_marketprice  ).toFixed(2)*10;
      }
    }
  },
  mounted(){
    this.getGoodsList();
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

button{
  margin-top: 5px;
  border: 0;
  width: 100%;
  background-color: rgba(0, 161, 255, 0.29);
}
.nodata{
  color: #cccccc;
  background-color:#3c763d;
}
</style>