职位发布余额不足时弹窗提示充值

components.d.ts

@@ -41,6 +41,7 @@ declare module 'vue' {
     PreviewImg: typeof import('./src/components/PreviewImg/index.vue')['default']
     PublicRecruitment: typeof import('./src/components/publicRecruitment/index.vue')['default']
     RadioGroup: typeof import('./src/components/FormUI/radioGroup/index.vue')['default']
+    Recharge: typeof import('./src/components/Recharge/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SimilarPositions: typeof import('./src/components/Position/similarPositions.vue')['default']

src/components/Recharge/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <CtForm ref="CtFormRef" :items="formItems">
+    <template #tips>
+      <div class="my-3">
+        <v-icon color="warning">mdi-information</v-icon>
+        <span class="color-warning ml-3">当前余额不足，请先充值后再试</span>
+      </div>
+    </template>
+    <template #paymentAmount>
+      <div class="d-flex align-center justify-space-between" style="width: 100%;">
+        <div class="color-666">支付金额</div>
+        <div class="font-size-20 color-error font-weight-bold">￥{{ paymentAmount }}</div>
+      </div>
+    </template>
+  </CtForm>
+</template>
+
+<script setup>
+defineOptions({ name: 'Recharge-index'})
+import { ref, computed } from 'vue'
+import CtForm from '@/components/CtForm/index.vue'
+
+// 余额充值
+const CtFormRef = ref()
+const formItems = ref({
+  options: [
+    {
+      noParam: true,
+      slotName: 'tips'
+    },
+    {
+      type: 'ifRadio',
+      key: 'rechargeType',
+      value: true,
+      label: '充值类型 *',
+      items: [
+        { label: '金额', value: true },
+        { label: '积分', value: false }
+      ],
+      rules: [v => !!v || '请选择充值类型']
+    },
+    {
+      type: 'number',
+      key: 'count',
+      value: 100,
+      label: '充值数量 *',
+      rules: [
+        value => {
+          if (value) return true
+          return '请输入要充值的数量'
+        },
+        value => {
+          if (value && value > 0) return true
+          return '充值数量不得等于0'
+        }
+      ]
+    },
+    {
+      slotName: 'paymentAmount',
+      noParam: true
+    }
+  ]
+})
+
+const paymentAmount = computed(() => {
+  return formItems.value.options.find(e => e.key === 'count').value
+})
+
+const getQuery = () => {
+  const obj = {}
+  formItems.value.options.forEach(e => {
+    if (e.noParam) return
+    obj[e.key] = e.value
+  })
+  return obj
+}
+
+defineExpose({
+  CtFormRef,
+  getQuery,
+  formItems
+})
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/styles/index.css

@@ -73,6 +73,10 @@
   color: #00897B;
 }
 
+.color-warning {
+  color: #fb8c00;
+}
+
 .font-size-12 {
   font-size: 12px;
 }

src/styles/index.min.css

@@ -1 +1 @@
-:root{--zIndex-dialog:999;--default-bgc:#f2f4f7;--v-primary-base:#00897B;--v-error-base:#fe574a;--v-primary-lighten1:#26A69A;--v-primary-lighten2:#4DB6AC;--v-primary-lighten3:#80CBC4;--v-primary-lighten4:#B2DFDB;--color-222:#222;--color-333:#333;--color-666:#666;--color-777:#777;--color-999:#999;--color-ccc:#ccc;--color-f3:#f3f3f3;--color-f2f4f742:#f2f4f742;--color-f8:#f8f8f8;--color-f2f4f7:#f2f4f7;--color-d5e6e8:#d5e6e8;--zIndex-breadcrumbs:999}.color-222{color:#222}.color-333{color:#333}.color-666{color:#666}.color-777{color:#777}.color-999{color:#999}.color-ccc{color:#ccc}.color-f3f3f3{color:#f3f3f3}.color-f2f4f742{color:#f2f4f742}.color-f8f8f8{color:#f8f8f8}.color-f2f4f7{color:#f2f4f7}.color-d5e6e8{color:#d5e6e8}.color-error{color:#fe574a}.color-primary{color:#00897B}.font-size-12{font-size:12px}.font-size-13{font-size:13px}.font-size-14{font-size:14px}.font-size-15{font-size:15px}.font-size-16{font-size:16px}.font-size-17{font-size:17px}.font-size-18{font-size:18px}.font-size-19{font-size:19px}.font-size-20{font-size:20px}.buttons{height:36px;width:224px}.half-button{height:36px;width:88px}.default-width{width:1184px;min-width:1184px;max-width:1184px;margin:0 auto}.defaultLink{color:#008978;cursor:pointer}.default-active{color:var(--v-primary-base) !important}.border-bottom-dashed{border-bottom:1px dashed var(--color-ccc)}.white-bgc{background-color:#fff}.ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.septal-line{display:inline-block;width:1px;height:10px;vertical-align:middle;background-color:#e0e0e0;margin:0 10px}.resume-box{border-radius:5px;padding:20px 30px;background-color:#fff}.resume-header{display:flex;justify-content:space-between;align-items:center;height:36px}.resume-title{font-weight:700;font-size:18px;border-left:5px solid #00897B;padding-left:12px;line-height:17px}.resumeNoDataText{color:var(--color-666);font-size:14px}.card-box{width:100%;height:100%;min-height:70vh}
+:root{--zIndex-dialog:999;--default-bgc:#f2f4f7;--v-primary-base:#00897B;--v-error-base:#fe574a;--v-primary-lighten1:#26A69A;--v-primary-lighten2:#4DB6AC;--v-primary-lighten3:#80CBC4;--v-primary-lighten4:#B2DFDB;--color-222:#222;--color-333:#333;--color-666:#666;--color-777:#777;--color-999:#999;--color-ccc:#ccc;--color-f3:#f3f3f3;--color-f2f4f742:#f2f4f742;--color-f8:#f8f8f8;--color-f2f4f7:#f2f4f7;--color-d5e6e8:#d5e6e8;--zIndex-breadcrumbs:999}.color-222{color:#222}.color-333{color:#333}.color-666{color:#666}.color-777{color:#777}.color-999{color:#999}.color-ccc{color:#ccc}.color-f3f3f3{color:#f3f3f3}.color-f2f4f742{color:#f2f4f742}.color-f8f8f8{color:#f8f8f8}.color-f2f4f7{color:#f2f4f7}.color-d5e6e8{color:#d5e6e8}.color-error{color:#fe574a}.color-primary{color:#00897B}.color-warning{color:#fb8c00}.font-size-12{font-size:12px}.font-size-13{font-size:13px}.font-size-14{font-size:14px}.font-size-15{font-size:15px}.font-size-16{font-size:16px}.font-size-17{font-size:17px}.font-size-18{font-size:18px}.font-size-19{font-size:19px}.font-size-20{font-size:20px}.buttons{height:36px;width:224px}.half-button{height:36px;width:88px}.default-width{width:1184px;min-width:1184px;max-width:1184px;margin:0 auto}.defaultLink{color:#008978;cursor:pointer}.default-active{color:var(--v-primary-base) !important}.border-bottom-dashed{border-bottom:1px dashed var(--color-ccc)}.white-bgc{background-color:#fff}.ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.septal-line{display:inline-block;width:1px;height:10px;vertical-align:middle;background-color:#e0e0e0;margin:0 10px}.resume-box{border-radius:5px;padding:20px 30px;background-color:#fff}.resume-header{display:flex;justify-content:space-between;align-items:center;height:36px}.resume-title{font-weight:700;font-size:18px;border-left:5px solid #00897B;padding-left:12px;line-height:17px}.resumeNoDataText{color:var(--color-666);font-size:14px}.card-box{width:100%;height:100%;min-height:70vh}

src/styles/index.scss

@@ -34,6 +34,7 @@
 .color-d5e6e8 { color: #d5e6e8; }
 .color-error { color: #fe574a; }
 .color-primary { color: #00897B; }
+.color-warning { color: #fb8c00; }
 
 .font-size-12 { font-size: 12px; }
 .font-size-13 { font-size: 13px; }

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

@@ -17,9 +17,13 @@
       </v-timeline>
       <div class="text-center mb">
         <v-btn class="half-button mr-3" color="primary" variant="outlined" @click="handleCancel">{{ $t('common.cancel') }}</v-btn>
-        <v-btn class="half-button" color="primary" @click="handleSave">{{ $t('common.release') }}</v-btn>
+        <v-btn class="half-button" color="primary" @click="recharge = true">{{ $t('common.release') }}</v-btn>
       </div>
     </v-card>
+
+    <CtDialog :visible="recharge" :widthType="2" titleClass="text-h6" title="确认支付" @close="handleClose" @submit="handleSubmit">
+      <Recharge ref="rechargeRef"></Recharge>
+    </CtDialog>
   </div>
 </template>
 
@@ -42,6 +46,19 @@ const userStore = useUserStore()
 const baseInfoRef = ref()
 const jobRequirementsRef = ref()
 const itemData = ref({})
+
+// 充值
+const rechargeRef = ref()
+const handleClose = () => {
+  recharge.value = false
+  rechargeRef.value.formItems.options.find(e => e.key === 'count').value = 100
+}
+
+const handleSubmit = () => {
+  recharge.value = false
+  Snackbar.warning('此功能还在开发中')
+}
+
 const list = [
   {
     color: '#00897B',
@@ -61,6 +78,9 @@ const list = [
   }
 ]
 
+// 余额充值
+const recharge = ref(false)
+
 // 取消
 const handleCancel = () => {
   itemData.value = {}
@@ -81,9 +101,15 @@ const handleSave = async () => {
   const query = Object.assign(baseInfo, requirement)
   // 有id则为编辑
   if (route.query && route.query.id) query.id = route.query.id
-  await saveJobAdvertised(query)
-  Snackbar.success(route.query.id ? t('common.editSuccessMsg') : t('common.publishSuccessMsg'))
-  handleCancel()
+  try {
+    await saveJobAdvertised(query)
+    Snackbar.success(route.query.id ? t('common.editSuccessMsg') : t('common.publishSuccessMsg'))
+    handleCancel()
+  } catch (error) {
+    // 余额不足展示充值窗口
+    if (error === '用户余额不足') recharge.value = true
+  }
+  
 }
 
 // 获取编辑的职位详情