自定义充值

src/components/personalRecharge/index.vue

@@ -18,29 +18,25 @@
         style="width: 200px;"
         @click="handleSelect(item, index)"
       >
-        <div class="d-flex flex-column align-center pb-5" style="position: relative;">  
+        <div class="d-flex flex-column align-center pb-5" style="position: relative;">
           <div
             class="my-4 mt-6 font-size-16 font-weight-bold titleColor"
+            style="z-index: 2;"
             :style="{'color': current === (index + 1) ? '#ff4747' : '#000'}"
           >
             {{ item.name }}
           </div>  
-          <!-- <div class="font-weight-bold priceBox">
+          <div class="dailyPrice font-size-12 mt-1">
             <span v-if="item.custom">
-              <input 
-                v-model="item.payPrice" 
-                type="text" 
-                class="custom-input-num" 
+              <input
+                v-model="inputValue" 
+                type="text"
+                class="custom-input-num"
+                :placeholder="item.placeholder"
                 :style="{'color': current === (index + 1) ? '#ff4747' : '#000'}" 
-                @keyup.enter="handleCustomEnter"
-                @focus="item.tip = '输入完成后请按Enter键确认'"
               >
             </span>
-            <span class="font28" v-else>{{ item.payPrice }}</span>
-          </div>   -->
-          <div class="dailyPrice font-size-12 mt-1">
-            <span v-if="!item.custom">￥{{ FenYuanTransform(item.payPrice) }}</span>
-            <span v-else>{{ item.tip }}</span>
+            <span v-else>￥{{ FenYuanTransform(item.payPrice) }}</span>
           </div>
           <div class="vip">
             <svg-icon v-if="current === (index+1)" name="diamond-active" size="50"></svg-icon>
@@ -72,46 +68,51 @@ defineProps({
   }
 })
 
-import { useRoute, useRouter } from 'vue-router'; const route = useRoute(); const router = useRouter()
+import { useRoute, useRouter } from 'vue-router';import { watch } from 'vue';
+ const route = useRoute(); const router = useRouter()
 const fullShow = ref(route.path === '/personalRecharge' ? true : false)
 
 const current = ref(0)
 
-const price = ref(0)
-
 const list = ref([])
 
 const getListData = async () => {
   const data = await getUserWalletRechargeList()
-  list.value = data || []
+  const end = { name: '自定义金额', id: 'custom', placeholder: '请输入', custom: true }
+  list.value = data ? [...data, end] : [end]
+  // list.value = data || []
   // 默认选中
   if (data?.length && data[0]) handleSelect(data[0], 0)
-  // const end = { name: '自定义充值', payPrice: 100, custom: true, tip: '输入完成后请按Enter键确认' }
-  // list.value = data ? [...data, end] : [end]
 }
 getListData()
 
-// 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 timer = ref(null)
 const itemInfo = ref(null)
-// let count = 1; const interval = 2000;
 const handleSelect = (item, index) => {
-  // count = 1
-  itemInfo.value = item
+  if (item.custom) return inputChange()
   current.value = index + 1
-  price.value = item.payPrice
+  itemInfo.value = item
 }
 
+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
+  itemInfo.value = item
+}
+watch(
+  () => inputValue.value,
+  (val) => {
+    const num = val && val !=='0' ? (val.match(/\d+/g)?.join('') || null) : null
+    inputValue.value = num
+    clearTimeout(timeout.value)
+    timeout.value = setTimeout(() => inputChange(), 500) // 防抖
+  }
+)
+
 </script>
 
 <style scoped lang="scss">
@@ -147,9 +148,10 @@ const handleSelect = (item, index) => {
   border: none;
   outline: none;
   background-color: transparent;
-  max-width: 100%;
+  width: 65px;
+  max-width: 65px;
   text-align: center;
-  font-weight: 700;
+  // font-weight: 700;
 }
 .vip {
   width: 50px; 
@@ -158,7 +160,8 @@ const handleSelect = (item, index) => {
   top: 0; 
   right: 0;
   overflow: hidden;
-  border-radius: 8px
+  border-radius: 8px;
+  z-index: 1;
 }
 :deep(.v-slide-group__content) {
   background: none !important;

src/components/personalRecharge/initPay.vue

@@ -142,11 +142,11 @@ const payOrder = ref({})
 const getUnpaidOrderList = async () => {
   try {
     //* 充值
-    if (props.info.payPrice === undefined && props.info.packageId === undefined) return
+    if (props.info.payPrice === undefined) return
     const params = {
       payPrice: (props.info.payPrice-0),
-      packageId: props.info.id,
     }
+    if (!props.info.id?.includes('custom')) params.packageId = props.info.id
     const data = await setWalletRecharge(params)
     payOrder.value = data || {}
     if (isQrCodePay.value) paySubmit()
@@ -203,7 +203,6 @@ const getCodeList = async () => {
 watch(
   () => props.info.id, 
   (newVal, oldVal) => {
-    if (!newVal) return
     if (!oldVal && newVal) getCodeList() // 初始化时要从获取支付方式列表开始
     if (oldVal && newVal) getUnpaidOrderList() // 切换充值金额，从创建新充值订单开始
   },