秒杀订单页面实现

    getMiaoShaResult(miaoShaGoodsId){
      let url = getServerUrl("miaoSha/result");
      let token = window.sessionStorage.getItem("token");
      axios.defaults.headers.common['token'] = token;
      axios.get(url,{
        params:{
          miaoShaGoodsId:this.$route.params.id
        }
      }).then(response=>{
        let data = response.data;
        if(data.code!=0){
          alert(data.msg);
          this.miaoShaResult=data.msg;
        }else{
          let result=data.result;
          if(result=="0"){  // 排队中，继续轮询
              setTimeout(function (){
                  this.getMiaoShaResult(miaoShaGoodsId)
              },50);
          }else if(result=="-1"){
              this.miaoShaResult="秒杀失败";
          }else{
            alert("秒杀成功! ");
            this.$router.push({name:'OrderInfo',params:{id:result}});
          }
        }
      }).catch(error=>{
        alert(error+"-请联系管理员");
      })
    },

<template>
  <div>
    <el-container>
      <el-header height="120px">
        <miao-sha-header></miao-sha-header>
      </el-header>
      <el-main>
        <p class="order_head">订单详情</p>
        <el-form label-position="left" label-width="120px">
          <el-form-item label="订单号：">
            {{this.order.id}}
          </el-form-item>
          <el-form-item label="商品名称：">
            {{this.order.miaoShaGoods.goods.name}}
          </el-form-item>
          <el-form-item label="商品图片：">
            <img :src="getSrcUrl(this.order.miaoShaGoods.goods.image)"/>
          </el-form-item>
          <el-form-item label="订单价：">
            {{this.order.totalPrice+'元'}}
          </el-form-item>
          <el-form-item label="订单状态：">
            <span v-show="this.order.status==0">待支付</span>
            <span v-show="this.order.status==1">已支付</span>
            <span v-show="this.order.status==2">已发货</span>
            <span v-show="this.order.status==3">已收货</span>
          </el-form-item>
          <el-form-item label="收货人：">
            {{this.order.user.name}}
          </el-form-item>
          <el-form-item label="联系电话：">
            {{this.order.user.phoneNumber}}
          </el-form-item>
          <el-form-item label="收货地址：">
            {{this.order.user.address}}
          </el-form-item>
        </el-form>
        <el-button type="primary" size="small">立即支付</el-button>
      </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: 'OrderInfo',
  data() {
      return{
        order:{
          miaoShaGoods:{
            name:'',
            image:'default.jpg'
          }
        },
        user:{
          name:'',
          phoneNumber:'',
          address:''
        }
      }
  },
  components: {
    MiaoShaHeader,
    MiaoShaFooter
  },
  methods: {
    getSrcUrl(t) {
      return getServerUrl('image/' + t);
    },
    getInfo(){
      let url = getServerUrl("order/detail");
      let token = window.sessionStorage.getItem("token");
      axios.defaults.headers.common['token'] = token;
      axios.get(url,{
        params:{
          id:this.$route.params.id
        }
      }).then(response=>{
          this.order=response.data.data;
        }).catch(error=>{
        alert(error+"-请联系管理员");
      })
    }
  },
  mounted() {
    this.getInfo();
  }
}
</script>

<style scoped>

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

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/Login'
import Main from '@/components/Main'
import Detail from '@/components/Detail'
import OrderInfo from '../components/OrderInfo'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/main',
      name: 'Main',
      component: Main
    },
    {
      path: '/detail/:id',
      name: 'Detail',
      component: Detail
    },
    {
      path: '/orderInfo/:id',
      name: 'OrderInfo',
      component: OrderInfo
    }
  ]
})

package com.java1234.miaosha.entity;

import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.databind.annotation.JsonSerialize;
import lombok.Data;

import java.io.Serializable;
import java.util.Date;

/**
 * 订单实体
 * @author java1234_小锋
 * @site www.java1234.com
 * @company Java知识分享网
 * @create 2020-12-20 17:04
 */
@TableName("t_order")
@Data
public class Order implements Serializable {

    private String id; // 编号

    private User user; // 购买用户

    private MiaoShaGoods miaoShaGoods; // 购买的秒杀商品

    @JsonSerialize(using=CustomDateTimeSerializer.class)
    private Date createDate; // 创建日期

    private Date payDate; // 支付日期

    private Integer count; // 购买数量

    private double totalPrice; // 订单总金额

    private String payMethod; // 支付方式

    private Integer status; // 订单状态   0:订单生成  1：已支付  2 已发货  3：已收货



}

package com.java1234.miaosha.controller;

import com.java1234.miaosha.constant.Constant;
import com.java1234.miaosha.entity.Order;
import com.java1234.miaosha.entity.R;
import com.java1234.miaosha.service.IMiaoShaGoodsService;
import com.java1234.miaosha.service.IOrderService;
import com.java1234.miaosha.util.RedisUtil;
import com.java1234.miaosha.vo.MiaoShaGoodsVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * 秒杀商品控制器
 */
@RestController
@RequestMapping("/order")
public class OrderController {

    @Autowired
    private IOrderService orderService;




    /**
     * 根据id查询秒杀商品详情
     * @param id
     * @return
     */
    @RequestMapping("/detail")
    public R detail(String id){
        Order order = orderService.findById(id);

        Map<String,Object> map=new HashMap<>();
        map.put("data",order);
        return R.ok(map);
    }
}