<!--
  @description: 收银
  @Modifier：sxm
  @routerPath:/order/cashier
  @date：  2019/10/12-10:00
-->
<template>
  <div>
    <headerSteps :steps-active="stepsActive" />
    <div class="middle_width1200 cashier">
      <div class="or_top">
        <div class="order_icon">
          <img src="@/assets/img/shopmall/cashier.png">
          <div class="success_box">
            <p class="success_hint">
              您已成功提交订单，待订单审批通过后自动下单！
            </p>
            <p>
              订单编号：
              <span class="order_number">{{ number }}</span>
              <span class="copy_order_number" @click="cloneCode">复制</span>
              <input id="content" :value="number" type="text">
            </p>
          </div>
        </div>
        <div class="order_success">
          <div class="or_bottom">
            <div class="btn" title="查看订单" @click="lookOrder">
              查看订单
            </div>
            <div class="btn" title="返回购物车" @click="backCart">
              返回购物车
            </div>
            <div class="btn" title="返回商城" @click="backHome">
              返回商城
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerSteps from './headerSteps'
export default {
  components: {
    headerSteps
  },
  data() {
    return {
      stepsActive: 2, // 传给子组件步骤条选中状态
      number: ''
    }
  },
  mounted() {
    this.number = this.$route.query.number
  },
  methods: {
    cloneCode() {
      const content = document.getElementById('content')
      content.select()
      document.execCommand('Copy')
      this.$message({
        type: 'success',
        message: '复制成功'
      })
    },
    lookOrder() {
      this.$router.replace('/personalCenter/myorder')
    },
    backCart() {
      this.$router.replace('/shop/myshoppingCart')
    },
    backHome() {
      this.$router.replace('/shop/shopHome')
    }
  }
}
</script>

<style scoped lang="less">
@import "./index";
</style>
