确认支付

components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     Checkbox: typeof import('./src/components/FormUI/checkbox/index.vue')['default']
     Combobox: typeof import('./src/components/FormUI/combobox/index.vue')['default']
     ComboboxZhAndEn: typeof import('./src/components/FormUI/comboboxZhAndEn/index.vue')['default']
+    ConfirmPaymentDialog: typeof import('./src/components/pay/confirmPaymentDialog.vue')['default']
     copy: typeof import('./src/components/CtForm/index copy.vue')['default']
     CtBtn: typeof import('./src/components/CtVuetify/CtBtn/index.vue')['default']
     CtDialog: typeof import('./src/components/CtDialog/index.vue')['default']

src/api/common/index.js

@@ -272,3 +272,28 @@ export const getEnableCodeList = async (params) => {
     params
   })
 }
+
+// 获取待支付的订单
+export const getUnpaidOrder = async (params) => {
+  return await request.get({
+    url: '/app-admin-api/menduner/system/trade/order/get/unpaid',
+    params
+  })
+}
+
+// 提交支付订单
+export const payOrderSubmit = async (data) => {
+  return await request.post({
+    // url: '/app-admin-api/menduner/system/pay/order/submit',
+    url: '/app-admin-api/pay/order/submit',
+    data
+  })
+}
+
+// 获得支付订单
+export const getOrderPayStatus = async (params) => {
+  return await request.get({
+    url: '/app-admin-api/pay/order/get',
+    params
+  })
+}

src/components/pay/confirmPaymentDialog.vue

@@ -0,0 +1,56 @@
+<!--  -->
+<template>
+  <div>
+    <CtDialog
+      :visible="payDialog"
+      :widthType="3"
+      titleClass="text-h6"
+      title="确认支付"
+      :footer="false"
+      submitText="确认"
+      @close="handleClose"
+    >
+      <pay
+        ref="payRef"
+        v-bind="$attrs"
+        @payTypeChange="null"
+        @paySubmit="paySubmit"
+      ></pay>
+    </CtDialog>
+  </div>
+</template>
+
+<script setup>
+defineOptions({name: 'pay-confirmPaymentDialog'})
+import pay from './index.vue'
+import { ref } from 'vue'
+
+const emit = defineEmits(['close'])
+
+const payDialog = ref(false)
+setTimeout(() => {
+  payDialog.value = true
+}, 500)
+
+const handleClose = () => {
+  payDialog.value = false
+  emit('close')
+}
+
+const paySubmit = async (payType) => {
+  try {
+    if (payType && payType !== '余额') {
+      // if (timer.value) clearInterval(timer.value); timer.value = null
+      // timer.value = setInterval(async () => { // 打开轮巡
+      //   console.log('setInterval->')
+      // }, 3000)
+    } else {
+      // if (timer.value) clearInterval(timer.value); timer.value = null
+    }
+  } catch (error) {
+    console.log('error', error)
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/components/pay/index.vue

@@ -1,10 +1,20 @@
 <!-- 支付方式 -->
 <template>
-  <div>
+  <v-card elevation="0" :loading="loading" :disabled="loading">
+    <!-- 加载样式 -->
+    <template v-slot:loader="{ isActive }">
+      <v-progress-linear
+        :active="isActive"
+        color="var(--v-primary-base)"
+        height="1"
+        indeterminate
+      ></v-progress-linear>
+    </template>
+
     <!-- 赏金所需 -->
     <div class="pt-3 pb-5" style="color: var(--v-error-base); font-weight: bold; text-align: center;">
       <span class="font-size-13">￥</span>
-      <span class="font-size-30">{{ needPrice }}</span>
+      <span class="font-size-30">{{ cost }}</span>
     </div>
     <radioGroupUI
       :modelValue="payType"
@@ -28,26 +38,29 @@
         <div v-if="isQrCodePay && payQrCodeTet" style="color: var(--v-error-base);">扫码支付时请勿离开</div>
       </div>
       <div class="mt-10" style="text-align: center;">
+        <!-- v-if="(isQrCodePay && payQrCodeTet) || isWalletPay" -->
         <v-btn
-          v-if="(isQrCodePay && payQrCodeTet) || isWalletPay"
+          v-if="isWalletPay"
           class="buttons" color="primary"
           :loading="payLoading"
           @click="paySubmit"
         >
-          {{ isWalletPay ? '确认' : '支付完成' }}
+          <!-- {{ isWalletPay ? '确认' : '支付完成' }} -->
+          确认
         </v-btn>
       </div>
     </div>
-  </div>
+  </v-card>
 </template>
 
 <script setup>
 defineOptions({ name: 'pay-index'})
-import { computed, ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import radioGroupUI from '@/components/FormUI/radioGroup'
 import QrCode from '@/components/QrCode'
 import { definePayTypeList, qrCodePay, walletPay } from './until/payType'
-import { getEnableCodeList } from '@/api/common'
+import { getEnableCodeList, getUnpaidOrder, payOrderSubmit, getOrderPayStatus } from '@/api/common'
+import { createTradeOrder } from '@/api/position'
 import { useSharedState } from '@/store/sharedState'
 const emit = defineEmits(['payTypeChange', ])
 const props = defineProps({
@@ -55,15 +68,24 @@ const props = defineProps({
     type: Object,
     default: () => {}
   },
-  // codeList: {
-  //   type: Array,
-  //   default: () => []
-  // },
-  needPrice: {
+  cost: {
     type: [String, Number],
     default: 0
   },
+  spuId: { // 原始数据id
+    type: String,
+    default: ''
+  },
+  spuName: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: Number,
+    default: 2 // 订单类型 0平台订单| 1发布职位订单| 2发布众聘职位订单,示例值(1)
+  },
 })
+const loading = ref(true)
 
 // 支付方式
 const payType = ref('')
@@ -86,7 +108,10 @@ const getCodeList = async () => {
       codeList.value.forEach(code => {
         const item = definePayTypeList.find(p => p.code === code)
         if (item) {
-          if (!payType.value) payType.value = code // 默认值赋值
+          if (!payType.value) {
+            // payType.value = code
+            payTypeChange(code) // 默认值赋值
+          }
           payTypeList.value.push(item)
         }
       })
@@ -95,18 +120,42 @@ const getCodeList = async () => {
 }
 getCodeList()
 
+const payOrder = ref({})
+let maxCount = 0
+// 获取待支付的订单
+const getUnpaidOrderList = async () => {
+  try {
+    const data = await getUnpaidOrder({ spuId: props.spuId, type: props.type })
+    // order:业务订单; payOrder:支付订单
+    console.log('获取待支付的订单', data)
+    if (!data) {
+      // 订单超时，重新提交订单
+      await createTradeOrder({
+        spuId: props.spuId,
+        spuName: props.spuName,
+        price: props.cost,
+        type:  props.type, // 发布众聘职位订单
+      })
+      if (maxCount > 3) return // 避免死循环
+      maxCount++
+      setTimeout(() => {
+        getUnpaidOrderList()
+      }, 1000)
+    }
+    // 
+    if (data?.payOrder) {
+      payOrder.value = data.payOrder
+      loading.value = false
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+getUnpaidOrderList() // getUnpaidOrder
+
 const payLoading = ref(false)
 const payQrCodeTet = ref('')
 
-const isQrCodePay = computed(() => {
-  const bool = qrCodePay.includes(payType.value)
-  if (bool) initPayQrCode() // 生成二维码内容
-  return bool
-})
-const isWalletPay = computed(() => {
-  return walletPay.includes(payType.value)
-})
-
 const payTypeItem = {
   label: '',
   width: 1,
@@ -118,22 +167,67 @@ const payTypeItem = {
 
 const balance = JSON.parse(localStorage.getItem('enterpriseUserAccount'))?.balance || 0
 const balanceNotEnough = computed(() => {
-  return (Number(props.needPrice) > Number(balance))
+  return (Number(props.cost) > Number(balance))
 })
 
+const isWalletPay = ref(true)
+const isQrCodePay = ref(false)
 const payTypeChange = (val) => {
   payType.value = val
+  isQrCodePay.value = qrCodePay.includes(payType.value)
+  isWalletPay.value = walletPay.includes(payType.value)
+  if (isQrCodePay.value) initPayQrCode() // 生成二维码内容
   emit('payTypeChange', val, balanceNotEnough)
 }
 
-const initPayQrCode = () => { // 生成二维码内容
-  setTimeout(() => { payQrCodeTet.value = '测试测试测试测试测试测试测试测试' }, 2000)
-}
-
 const paySubmit = () => {
   emit('paySubmit', payType.value)
 }
 
+// 生成二维码内容
+const timer = ref(null)
+onUnmounted(() => {
+  if (timer.value) clearInterval(timer.value); timer.value = null
+})
+const initPayQrCode = async () => {
+  if (timer.value) clearInterval(timer.value); timer.value = null
+  try {
+    if (payOrder.value) {
+      // 提交支付订单
+      const params = {
+        id: payOrder.value.id, // 支付单编号
+        channelCode: payType.value, // 支付渠道
+        displayMode: payOrder.value.notifyUrl, // 展示模式 notifyUrl
+        returnUrl: '',
+      }
+      const res = await payOrderSubmit(params)
+      payQrCodeTet.value = res?.displayContent || '' // 支付二维码
+      timer.value = setInterval(() => { payStatus() }, 1000) // 轮巡查询用户是否支付
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+import Snackbar from '@/plugins/snackbar'
+import { useRouter } from 'vue-router'; const router = useRouter()
+const payStatus = async () => {
+  try {
+    const data = await getOrderPayStatus({ id: payOrder.value.id })
+    if ((data?.status - 0) === 1) {
+      // 支付成功
+      if (timer.value) clearInterval(timer.value); timer.value = null
+      const query = { hire: true }
+      router.push({ path: '/recruit/enterprise/position', query }) // 返回到众聘页面
+      setTimeout(() => {
+        Snackbar.success('付款成功')
+      }, 1000);
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
 </script>
 <style lang="scss" scoped>
 .font-size-30 { font-size: 30px; }

src/views/recruit/enterprise/positionManagement/components/add.vue

@@ -20,16 +20,6 @@
         <v-btn class="half-button" color="primary" @click="handleSave">{{ $t('common.release') }}</v-btn>
       </div>
     </v-card>
-    <CtDialog :visible="recharge" :widthType="3" titleClass="text-h6" title="确认支付" :footer="false" submitText="确认" @close="handleClose" @submit="paySubmit">
-      <!-- <Recharge ref="rechargeRef"></Recharge> -->
-      <pay
-        ref="payRef"
-        :params="payParams"
-        :needPrice="needPrice"
-        @payTypeChange="null"
-        @paySubmit="paySubmit"
-      ></pay>
-    </CtDialog>
   </div>
 </template>
 
@@ -38,13 +28,12 @@ defineOptions({ name: 'enterprise-position-add'})
 import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { dealDictObjData } from '@/utils/position'
-import { saveJobAdvertised, getJobDetails } from '@/api/position'
+import { saveJobAdvertised, getJobDetails, createTradeOrder } from '@/api/position'
 import baseInfo from './baseInfo.vue'
 import jobRequirements from './jobRequirements.vue'
 import Snackbar from '@/plugins/snackbar'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useUserStore } from '@/store/user'
-import pay from '@/components/pay'
 
 const { t } = useI18n()
 const route = useRoute()
@@ -53,8 +42,6 @@ const userStore = useUserStore()
 const baseInfoRef = ref()
 const jobRequirementsRef = ref()
 const itemData = ref({})
-const payParams = ref({})
-
 
 const list = [
   {
@@ -75,9 +62,6 @@ const list = [
   }
 ]
 
-// 余额充值
-const recharge = ref(false)
-const needPrice = ref(0)
 
 let submitParams = {}
 // 发布
@@ -96,28 +80,26 @@ const handleSave = async () => {
     if (!baseInfo.hirePrice && !baseInfo.hirePoint) return Snackbar.warning('您选择的是众聘岗位，请填写奖励赏金或积分！')
     if (Number(baseInfo.hirePrice) === 0 && Number(baseInfo.hirePoint) === 0) return Snackbar.warning('填写的赏金/积分不得小于1')
     
+    const point = JSON.parse(localStorage.getItem('enterpriseUserAccount'))?.point
+    if (Number(baseInfo.hirePoint) && (Number(baseInfo.hirePoint) > Number(point))) {
+      // 积分不足
+      return Snackbar.warning('您所剩的积分不足，请修改奖励的积分！')
+    }
     saveEmit(submitParams) // 正常发布，到列表中发起支付（暂定解决方案）
-    // const point = JSON.parse(localStorage.getItem('enterpriseUserAccount'))?.point
-    // if (Number(baseInfo.hirePoint) && (Number(baseInfo.hirePoint) > Number(point))) {
-    //   // 积分不足
-    //   return Snackbar.warning('您所剩的积分不足，请修改奖励的积分！')
-    // }
     // needPrice.value = Number(baseInfo.hirePrice)
     // // 生成订单
-    // recharge.value = true // 支付弹窗
   }
 }
 
 const saveEmit = async () => {
   try {
     const res = await saveJobAdvertised(submitParams)
-    debugger
     Snackbar.success(submitParams.id ? t('common.editSuccessMsg') : t('common.publishSuccessMsg'))
     if (submitParams.hire) {
       // 生成订单
-      await saveJobAdvertised({
-        spuId: res.id,
-        spuName: res.name,
+      await createTradeOrder({
+        spuId: res,
+        spuName: submitParams.name,
         price: submitParams.hirePrice,
         type: 2, // 发布众聘职位订单
       })
@@ -128,33 +110,6 @@ const saveEmit = async () => {
   }
 }
 
-// const timer = ref(null)
-// const payLoading = ref(false)
-const payRef = ref()
-const paySubmit = async (payType) => {
-  try {
-    if (payType && payType !== '余额') {
-      // if (timer.value) clearInterval(timer.value); timer.value = null
-      // timer.value = setInterval(async () => { // 打开轮巡
-      //   console.log('setInterval->')
-      // }, 3000)
-    } else {
-      // if (timer.value) clearInterval(timer.value); timer.value = null
-      saveEmit(submitParams)
-    }
-  } catch (error) {
-    console.log('error', error)
-  }
-}
-
-// const payTypeChange = (val, balanceNotEnough) => {
-// }
-
-const handleClose = () => {
-  recharge.value = false
-  // rechargeRef.value.formItems.options.find(e => e.key === 'count').value = 100
-}
-
 // 获取编辑的职位详情
 const getPositionDetail = async (id) => {
   const data = await getJobDetails({ id })
@@ -166,7 +121,7 @@ const getPositionDetail = async (id) => {
 if (route.query && route.query.id) {
   if (route.query.id) getPositionDetail(route.query.id)
 }
-getPositionDetail('1821128788239142913') // 测试使用
+// getPositionDetail('1821466545251586050') // 测试使用
 
 // 取消
 const handleCancel = (hire) => { //  hire：是否是众聘岗位

src/views/recruit/enterprise/positionManagement/components/item.vue

@@ -50,6 +50,10 @@
         <div>{{ $t('position.refreshTime') }} ：{{ timesTampChange(val.updateTime, 'Y-M-D') }} {{ val.expireDay && Number(val.expireDay) >= 1 ? `（${ val.expireDay }天后到期）` : '' }}</div>
         <div class="d-flex">
           <div class="ml-10 d-flex">
+            <div v-if="tab === 4 && (val.status-0) === 99">
+               <span class="cursor-pointer defaultLink" style="color: primary;" @click="toPay(val)">去支付</span>
+              <span class="lines"></span>
+            </div>
             <div v-if="tab === 1">
               <span class="cursor-pointer" @click="handleAction(3, '', val)">{{ $t('common.topping') }}</span>
               <span class="lines"></span>
@@ -70,6 +74,14 @@
       </div>
     </div>
   </div>
+  <confirmPaymentDialog
+    v-if="showConfirmPaymentDialog"
+    :cost="cost"
+    :spuId="spuId"
+    :spuName="spuName"
+    :type="2"
+    @close="showConfirmPaymentDialog = false"
+  ></confirmPaymentDialog>
 </template>
 
 <script setup>
@@ -81,6 +93,7 @@ import { timesTampChange } from '@/utils/date'
 import { useI18n } from '@/hooks/web/useI18n'
 import { closeJobAdvertised, enableJobAdvertised, refreshJobAdvertised, topJobAdvertised } from '@/api/position'
 import Snackbar from '@/plugins/snackbar'
+import confirmPaymentDialog from '@/components/pay/confirmPaymentDialog.vue'
 
 const { t } = useI18n()
 const emit = defineEmits(['refresh'])
@@ -92,6 +105,20 @@ const props = defineProps({
   items: Array
 })
 
+const showConfirmPaymentDialog = ref(false)
+const cost = ref(0)
+const spuId = ref('')
+const spuName = ref('')
+const toPay = (val) => {
+  console.log('1', val)
+  //
+  spuId.value = val.id || ''
+  spuName.value = val.name || ''
+  cost.value = (val.hirePrice - 0) || 0
+  // 打开支付弹窗
+  showConfirmPaymentDialog.value = true
+}
+
 const selectAll = ref(false) // 全选
 const selectList = ref([]) // 选中列表
 const dealSelect = () => {