企业自定充值点数

src/components/pay/index.vue

@@ -186,11 +186,11 @@ const getUnpaidOrderList = async () => {
   try {
     if ((props.appId - 0) === 11) {
       //* 充值
-      if (props.rechargeInfo.payPrice === undefined && props.rechargeInfo.packageId === undefined) return
+      if (props.rechargeInfo.payPrice === undefined) return
       const params = {
         payPrice: (props.rechargeInfo.payPrice-0),
-        packageId: props.rechargeInfo.id,
       }
+      if (!props.rechargeInfo.id?.includes('custom')) params.packageId = props.rechargeInfo.id
       const data = await rechargeOrderCreate(params)
       payOrder.value = data || {}
     } else {
@@ -312,10 +312,10 @@ const handleRechargeClose = () => {
   loading.value = false
 }
 
-// 点数发生支付时点充值
+// 充值成功
 const RechargePaySuccess = () => {
   showRecharge.value = false
-  // updateAccountInfo()
+  updateAccountInfo() // 充值成功后需要刷新点数支付弹窗数据
 }
 
 const handleRecharge = () => {

src/components/personalRecharge/index.vue

@@ -60,6 +60,7 @@ import { FenYuanTransform } from '@/utils/position'
 import { ref } from 'vue'
 import { getUserWalletRechargeList } from '@/api/recruit/personal/myWallet.js'
 import initPay from './initPay.vue'
+import Snackbar from '@/plugins/snackbar'
 
 defineProps({
   showTitle: {
@@ -106,7 +107,11 @@ const inputChange = () => {
 watch(
   () => inputValue.value,
   (val) => {
-    const num = val && val !=='0' ? (val.match(/\d+/g)?.join('') || null) : null
+    let num = val && val !=='0' ? (val.match(/\d+/g)?.join('') || null) : null
+    if (num > 100000000) {
+      num = '100000000'
+      Snackbar.warning('最多不可超过一亿元')
+    }
     inputValue.value = num
     clearTimeout(timeout.value)
     timeout.value = setTimeout(() => inputChange(), 500) // 防抖

src/views/recruit/enterprise/tradingOrder/components/pointsAndBalance.vue

@@ -13,16 +13,15 @@
         @click="current = index + 1; price = item.price"
       >
         <div class="d-flex flex-column align-center pb-5" style="position: relative;">  
-          <div class="my-5 font-size-16 font-weight-bold titleColor">{{ item.name }}</div>  
-          <div class="font-weight-bold priceBox mt-3">
+          <div class="my-5 font-size-16 font-weight-bold titleColor" style="z-index: 2;">{{ item.name }}</div>  
+          <div class="font-weight-bold priceBox mt-3" style="position: relative;">
             <span v-if="item.custom">
-              <input 
-                v-model="item.payPrice" 
-                type="text" 
-                class="custom-input-num" 
-                :style="{'color': current === (index + 1) ? '#ff4747' : '#000'}" 
-                @keyup.enter="handleCustomEnter"
-                @focus="item.tip = '输入完成后请按Enter键确认'"
+              <div v-if="inputValue" class="custom-point-show" style="position: absolute; top: -24px;">{{ inputValue*10 }}点</div>
+              <input
+                v-model="inputValue" 
+                type="text"
+                class="custom-input-num"
+                :placeholder="item.placeholder"
               >
             </span>
             <span class="font28" v-else>￥{{ FenYuanTransform(item.payPrice) }}</span>
@@ -91,11 +90,11 @@
 
 <script setup>
 defineOptions({ name: 'myAccount-pointsAndBalance'})
-import { ref } from 'vue'
+import { watch, ref } from 'vue'
 import Public from './public.vue'
-// import QrCode from '@/components/QrCode'
 import { getEnterpriseRechargePackageList } from '@/api/recruit/enterprise/member/points'
 import { FenYuanTransform } from '@/utils/position'
+import Snackbar from '@/plugins/snackbar'
 
 const emits = defineEmits(['paySuccess'])
 defineProps({
@@ -111,29 +110,11 @@ const price = ref(200)
 
 const list = ref([])
 
-// const payment = ref('wx_native')
-// const paymentList = [
-//   { label: '微信扫码', icon: 'weChat', size: 21, color: 'success', value: 'wx_native' },
-//   { label: '支付宝扫码', icon: 'alipay', size: 23, color: '#3383c6', value: 'alipay_qr' }
-// ]
-
-const handleCustomEnter = (e) => {
-  const num = e.target.value
-  const custom = list.value.find(k => k.custom)
-  if (num < 100) {
-    custom.tip = '最低充值金额为100元'
-    custom.price = 100
-    return
-  }
-  price.value = num
-}
-
 const getData = async () => {
-  // const params = {}
   const data = await getEnterpriseRechargePackageList()
-  list.value = data || []
-  // const end = { name: '自定义充值', payPrice: 100, custom: true, tip: '输入完成后请按Enter键确认' }
-  // list.value = data ? [...data, end] : [end]
+  const end = { name: '自定义金额', id: 'custom', placeholder: '请输入', custom: true }
+  list.value = data ? [...data, end] : [end]
+  // list.value = data || []
 }
 getData()
 
@@ -141,6 +122,7 @@ getData()
 const rechargeDataItem = ref(null)
 const showConfirmPaymentDialog = ref(false)
 const handleRecharge = (item) => {
+  if (item.custom) item.payPrice = FenYuanTransform(inputValue.value, 'toCent')
   rechargeDataItem.value = { ...item }
   // 打开支付弹窗
   showConfirmPaymentDialog.value = true
@@ -157,6 +139,31 @@ const stopInterval = async () => {
   showConfirmPaymentDialog.value = false
 }
 
+const inputValue = ref(null)
+watch(
+  () => inputValue.value,
+  (val) => {
+    let num = val && val !=='0' ? (val.match(/\d+/g)?.join('') || null) : null
+    if (num > 100000000) {
+      num = '100000000'
+      Snackbar.warning('最多不可超过一亿元')
+    }
+    inputValue.value = num
+  }
+)
+
+// const inputValue = ref(null)
+// // const timeout = ref(null)
+// const inputChange = () => {
+//   if (!inputValue.value) return
+//   current.value = list.value.length
+//   const item = list.value[list.value.length-1]
+//   item.payPrice = FenYuanTransform(inputValue.value, 'toCent')
+//   item.id = 'custom' + inputValue.value
+//   // rechargeDataItem.value = { ...item }
+//   // // 打开支付弹窗
+//   // showConfirmPaymentDialog.value = true
+// }
 
 </script>
 
@@ -187,9 +194,12 @@ const stopInterval = async () => {
   border: none;
   outline: none;
   background-color: transparent;
-  max-width: 100%;
+  width: 120px;
+  max-width: 120px;
   text-align: center;
-  font-weight: 700;
+  background-color: #d9d9d98c;
+  border-radius: 20px;
+  // font-weight: 700;
 }
 .code {
   max-width: 1100px;
@@ -218,6 +228,13 @@ const stopInterval = async () => {
   overflow: hidden;
   border-radius: 8px
 }
+.custom-point-show {
+  width: 100%;
+  text-align: center;
+  font-weight: normal;
+  color: gray;
+  font-size: 13px; 
+}
 :deep(.v-slide-group__content) {
   background: none !important;
 }