前端秒杀商品详情显示实现

<template>
  <div>
    <el-container>
      <el-header height="120px">
        <miao-sha-header></miao-sha-header>
      </el-header>
      <el-main>
        <p class="goods_head">秒杀商品详情</p>
        <el-form label-position="left" label-width="120px">
            <el-form-item label="商品名称：">
                {{this.miaoShaGoods.goods.name}}
            </el-form-item>
          <el-form-item label="商品图片：">
                <img :src="getSrcUrl(this.miaoShaGoods.goods.image)"/>
          </el-form-item>
          <el-form-item label="商品原价：">
                {{this.miaoShaGoods.goods.price+'元'}}
          </el-form-item>
          <el-form-item label="秒杀价：">
                {{this.miaoShaGoods.price+'元'}}
          </el-form-item>
          <el-form-item label="库存数量：">
            {{this.miaoShaGoods.stock}}
          </el-form-item>
          <el-form-item label="秒杀开始时间：">
            {{this.miaoShaGoods.startTime}}
          </el-form-item>
          <el-form-item label="秒杀结束时间：">
            {{this.miaoShaGoods.endTime}}
          </el-form-item>
          <el-form-item>
              <el-button type="primary" size="small">立即秒杀</el-button>
          </el-form-item>
        </el-form>
      </el-main>
      <el-footer>
        <miao-sha-footer></miao-sha-footer>
      </el-footer>
    </el-container>
  </div>
</template>

<script>

import MiaoShaHeader from './common/Header';
import MiaoShaFooter from './common/Footer';
import axios from 'axios';
import {getServerUrl} from '@/config/sys';

export default {
  name: 'Detail',
  data() {
    return {
      miaoShaGoods:{
         goods:{
           name:'',
           image:'default.jpg',
           price:0
         }
      }
    }
  },
  components: {
    MiaoShaHeader,
    MiaoShaFooter
  },
  methods: {
    getSrcUrl(t) {
      return getServerUrl('image/' + t);
    },
    getInfo(){
      let url = getServerUrl("miaoShaGoods/detail");
      let token = window.sessionStorage.getItem("token");
      axios.defaults.headers.common['token'] = token;
      axios.get(url,{
        params:{
          id:this.$route.params.id
        }
      }).then(response=>{
          console.log(response.data.data);
          this.miaoShaGoods = response.data.data;
        }).catch(error=>{
        alert(error+"-请联系管理员");
      })
    }
  },
  mounted() {
    this.getInfo();
  }
}
</script>

<style scoped>

.goods_head{
  font-weight: bold;
  font-size: 20px;
}
</style>