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">
      <h1>产品详情</h1>
    </div>
  </header>
  <div id="sliderA" class="slider">
    <template v-for="(v,k) in goods_info.goods_big_imgs">
      <img :src="v" />
    </template>
  </div><!--sliderA/-->
  <table class="jia-len">
    <tr>
      <th><strong class="orange">¥{{goods_info.goods_selfprice}}</strong></th>
      <td>
        <input type="text" class="spinnerExample" />
      </td>
    </tr>
    <tr>
      <td>
        <strong>{{goods_info.goods_name}}</strong>
        <p class="hui">{{goods_info.goods_name}}</p>
      </td>
      <td align="right">
        <a href="javascript:;" class="shoucang"><span class="glyphicon glyphicon-star-empty"></span></a>
      </td>
    </tr>
  </table>
  <div class="height2"></div>
  <h3 class="proTitle">商品规格</h3>
  <ul class="guige">
    <li class="guigeCur"><a href="javascript:;">50ML</a></li>
    <li><a href="javascript:;">100ML</a></li>
    <li><a href="javascript:;">150ML</a></li>
    <li><a href="javascript:;">200ML</a></li>
    <li><a href="javascript:;">300ML</a></li>
    <div class="clearfix"></div>
  </ul><!--guige/-->
    <table class="jrgwc">
      <tr>
        <th>
          <a href="../../index.html"><span class="glyphicon glyphicon-home"></span></a>
        </th>
        <td><a href="car.html">加入购物车</a></td>
      </tr>
    </table>
  <div class="height2"></div>
  <div class="zhaieq">
    <a href="javascript:;" class="zhaiCur">商品简介</a>
    <a href="javascript:;">商品参数</a>
    <a href="javascript:;" style="background:none;">订购列表</a>
    <div class="clearfix"></div>
  </div><!--zhaieq/-->
  <div class="proinfoList">
    <img src="@/assets/images/image4.jpg" width="636" height="822" />
  </div><!--proinfoList/-->
  <div class="proinfoList">
    暂无信息....
  </div><!--proinfoList/-->
  <div class="proinfoList">
    暂无信息......
  </div><!--proinfoList/-->

    <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";
export default {
  name: 'Reg',
  components: { TabBar:TabBar},
  mixins:[ Common ],
  data () {
    return {
      goods_info:[]
    }
  },
  methods:{

  },
  watch:{

  },
  mounted(){
    console.log( this.$route.query.goods_id );
    this.ajaxPost( '/api/productDetail' , {goods_id:this.$route.query.goods_id} ).then( api_response=>{
      console.log( api_response );
      this.goods_info = api_response.data;
    }).then(function () {
      $("#sliderA").excoloSlider(
        {
          prevButtonImage: "@/assets/images/prev.png",
          nextButtonImage: "@/assets/images/next.png",
          pagerImage: "@/assets/images/pagericon.png"
        }
      );
    });
  }
}

</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>