menduner/src/views/mall/components/confirm_order/index.vue

<!--  -->
<template>
  <div class="py-3" style="max-width: 900px; margin: 0 auto;min-width: 900px;">
    <v-card class=" pa-5">
      <v-btn class="mb-1" variant="text" size="x-large" prepend-icon="mdi-chevron-triple-left" color="primary" @click.stop="goBack">返回</v-btn>
      <div v-if="skuInfo">
        <confirm ref="confirmRef" :data="skuInfo" @orderCreated="orderCreated"></confirm>
        <div class="text-center">
          <v-btn color="primary" width="200" @click="onBuy">{{ confirmWord }}</v-btn>
        </div>
      </div>
      <div v-else>
        <Empty :elevation="false" message="结算已失效" />
        <div class="text-center my-5">
          <v-btn color="primary" width="200" to="/mall">返回商城首页</v-btn>
        </div>
      </div>

      <!-- 支付 -->
      <CtDialog :visible="showPay" titleClass="text-h6" :widthType="3" title="收银台" :footer="false" @close="payCancel">
        <pay ref="payRef" :id="payOrderId" @paySuccess="paySuccess"></pay>
      </CtDialog>
    </v-card>
  </div>
</template>

<script setup>
defineOptions({name: 'confirm_order-index'})
import Confirm from '@/plugins/confirm'
import Snackbar from '@/plugins/snackbar'
import { useI18n } from '@/hooks/web/useI18n'
import { useRouter, useRoute } from 'vue-router'; const router = useRouter()
import { ref } from 'vue'
import confirm from './confirm.vue'
import pay from './pay.vue'
const { t } = useI18n()

const route = useRoute()
const { spuId } = route.query
const skuInfo = ref(localStorage.getItem('confirm_order_data')) // 购买商品规格信息

const confirmRef = ref()
// onMounted(() => {
//   confirmRef.value.onConfirm()
// })
const onBuy = () => {
  if (payOrderId.value) {
    showPay.value = true
  } else {
    confirmRef.value.onConfirm()
  }
}


// 创建订单完成
const payRef = ref()
const showPay = ref(false)
const payOrderId = ref('')
const orderId = ref('')
const orderCreated = (id, order) => {
  payOrderId.value = id
  orderId.value = order
  showPay.value = true
}
const confirmWord = ref('立即支付') // '立即购买' : '立即支付'

let closeConfirm = false // 关闭路由拦截

const paySuccess = (e) => {
  closeConfirm = true
  closeConfirm = true
  router.replace({ path: '/mall/payOver', query: { price: e.price, orderId: orderId.value, spuId } })
  // setTimeout(() => { router.replace('/recruit/personal/personalCenter/tradeOrder?key=1') }, 500);
}
const payCancel = () => {
  Snackbar.warning('您已取消支付！')
  showPay.value = false
  closeConfirm = true
  setTimeout(() => { router.replace('/recruit/personal/personalCenter/tradeOrder?key=1') }, 500);
}

const goBack = () => {
  if (!orderId.value) return router.go(-1)
  // 已经提交订单了则跳转到订单中心
  router.replace('/recruit/personal/personalCenter/tradeOrder?key=1')
}

router.beforeEach((to, from, next) => {
  if (!orderId.value || closeConfirm) {
    next()
    return
  }
  Confirm(t('common.confirmTitle'), '您尚未支付成功，是否确定离开？').then(async () => {
    closeConfirm = true
    router.replace('/recruit/personal/personalCenter/tradeOrder?key=1')
  })
})

</script>
<style lang="scss" scoped>
</style>