未登录用户支付订单，未跳转至登录页面

ajax.js

import axios from 'axios'
// import qs from 'qs'

// 自定义请求头
export const ajax = axios.create({
  headers: {
    source: 'h5',
    // 请求头，防伪校验码
    icode: 'abcd',
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  /**
   * 对请求的参数进行格式化处理
   */
  // transformRequest: function (data, headers) {
  //   return qs.stringify(data)
  // },
  // 默认携带上一次的cookie
  withCredentials: true
})

// 请求拦截
ajax.interceptors.request.use(function (config) {
  // 在发送请求前做些什么
  console.log('请求拦截到了')
  /* 获取Vue实例：加载loading动画 */
  window.app.$toast.loading({
    message: '加载中...',
    forbidClick: true,
    loadingType: 'spinner'
  })
  return config
}, function (error) {
  // 对 请求错误做些什么
  /* 消失loading动画 */
  window.app.$toast.clear()
  return Promise.reject(error)
})

// 响应拦截
// （---------- response.use 是响应拦截器 -----------）
ajax.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  console.log('响应拦截到了')
  /* 消失loading动画 */
  window.app.$toast.clear()

  const status = response.status
  if (status === 401) {
    // window.alert('未登录，即将跳转到登录页面')
    window.app.$notify({
      type: 'danger',
      message: '未登录，即将跳转到登录页面'
    })
    window.app.$router.replace({ name: 'AccountLogin' })
  } else if (status === 500) {
    // window.alert('服务器正忙，请稍后重试')
    window.app.$notify({
      type: 'danger',
      message: '服务器正忙，请稍后重试'
    })
  } else if (status === 400) {
    const data = status.data
    let msg = data.error_msg ? data.error_msg : '参数错误'
    if (data.error_list) {
      const keys = Object.keys(data.error_list)
      const errObj = data.error_list[keys[0]][0]
      msg = `${errObj.message}, ${errObj.code}`
      window.app.$notify(msg)
    }
  }

  /* 消失loading动画 */
  window.app.$toast.clear()
  return response
})

Submit.vue

<template>
  <div class="page-order-submit">
    <!-- 页面导航 -->
    <van-nav-bar title="订单"
      left-text="返回"
      left-arrow
      @click-left="goBack"
    />
    <!-- 描述信息 -->
    <div class="order-info">
      <div class="left">
        <h3>门票标题</h3>
        <div class="tips">23:00可订明日</div>
        <div class="tags">
          <span>
            <van-icon name="clock-o"/>明日可定
          </span>
          <span>
            <van-icon name="clock-o"/>条件退
          </span>
        </div>
      </div>
      <div class="right">
        <div class="text-warning">￥{{ price }}/张</div>
        <van-button plain hairline type="info" size="mini" @click="showPopup=true">
          预定须知
        </van-button>
        <van-popup
          v-model="showPopup"
          round
          position="bottom"
          :style="{ height: '80%' }"
        />
      </div>
    </div>
    <!-- 提交表单 -->
    <van-form @submit="onSubmit" class="form-box">
      <van-cell-group inset class="form-group">
        <van-cell title="选择出行日期"
          :value="form.play_date"
          @click="showCalendar = true"
        />
        <van-calendar v-model="showCalendar" @confirm="onConfirm" />
      </van-cell-group>
      <van-cell-group inset class="form-group">
        <van-field name="stepper" label="购买数量">
          <template #input>
            <van-stepper v-model="form.buy_count" />
          </template>
        </van-field>
      </van-cell-group>
      <van-cell-group inset class="form-group">
        <van-field
          v-model="form.to_user"
          type="text"
          label="收件人"
          placeholder="收件人"
          :rules="[{ required: true, message: '请填写收件人' }]"
        />
        <van-field
          v-model="form.to_phone"
          type="text"
          label="手机号码"
          placeholder="手机号码"
          :rules="[{ required: true, message: '请填写手机号码' }]"
        />
      </van-cell-group>
      <!-- 提交表单 -->
      <van-submit-bar :price="totalPrice" button-text="提交订单" @submit="onSubmit" />
    </van-form>
  </div>
</template>

<script>
import { ajax } from '@/utils/ajax'
import { OrderApis } from '@/utils/apis'

export default {
  data () {
    return {
      // 门票ID
      id: '',
      // 预定须知弹框显示
      showPopup: false,
      // 日期选择弹框
      showCalendar: false,
      price: 98,
      form: {
        play_date: '',
        buy_count: 1,
        to_user: '',
        to_phone: ''
      }
    }
  },
  methods: {
    goBack () {
      // 返回上一个页面
      this.$router.go(-1)
    },
    // 选择日期
    formatDate (date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm (date) {
      // 隐藏日历弹框
      this.showCalendar = false
      // 保存数据
      this.form.play_date = this.formatDate(date)
    },
    // 提交表单
    onSubmit () {
      console.log('提交表单')
      // ajax接口调用
      ajax.post(OrderApis.ticketSubmitUrl, {
        ticket_id: this.id,
        ...this.form
      }).then(({ data }) => {
        // 提示用户
        this.$notify({
          type: 'success',
          message: '提交成功，请支付'
        })
        // 跳转到支付页面
        this.$router.replace({ name: 'OrderPay', params: { sn: data.sn } })
      })
    }
  },
  created () {
    // 门票ID
    this.id = this.$route.params.id
  },
  computed: {
    // 计算总价（单位为：分）
    totalPrice () {
      return this.price * this.form.buy_count * 100
    }
  }
}
</script>

<style lang="less">
.page-order-submit{
  .order-info{
    display: flex;
    padding: 10px;
    background: white;
    .left{
      flex: 1;
      text-align: left;
      h3{
        padding: 5px 0;
        margin: 0 auto;
      }
      .tips{
        padding: 10px 0;
        color: #999;
        font-size: 12px;
      }
    }
    .right{
      width: 20%;
      text-align: right;
    }
  }
  /* 表单区域 */
  .form-box{
    .form-group{
      margin-top: 10px;
      background: white;
      .van-cell__title{
        text-align: left;
      }
    }
  }
}
</style>