@uxda/appkit 4.3.28 → 4.3.30

package/src/payment/components/RechargeView.vue

@@ -1,233 +1,420 @@
-<template>
-  <view class="view recharge-view">
-    <view class="flex-grow">
-      <amount-picker :items="amounts" :selected="state.selected" @change="onAmountSelect" />
-
-      <slot name="banner"></slot>
-    </view>
-    <view class="amount-footer">
-      <view class="agreement">
-        <nut-checkbox v-model="state.agreed">我已阅读并同意<a v-track-click class="link inline"
-            @click="onAgreementLinkClick">《大道云平台云豆充值服务协议》</a></nut-checkbox>
-      </view>
-      <nut-button block shape="square" :loading="state.buttonLoading" v-track-click @click="onPayClick"
-        class="recharge-button">立即充值</nut-button>
-    </view>
-  </view>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, reactive, ref } from 'vue'
-import AmountPicker from './AmountPicker.vue'
-import { useHttp, endpoints } from '../api'
-import { requestBrandWCPay, requestPayment } from '../services'
-import Taro, { showToast, useRouter } from '@tarojs/taro'
-import { isAlipay, isAndroid, isChrome, isIOS, isSafari, isWechat } from '../../shared/composables/useDeviceEnv'
-
-// 充值用户界面
-// 配置了必须的属性后
-// 自动获取支付套餐包列表
-// 并发起微信支付
-export interface RechargeViewProps {
-  /**
-   * 应用
-   **/
-  app: string,
-  /**
-   * 充值场景
-   */
-  // stage?: string, // 这个参数暂时不用
-  /**
-   * 租户
-   */
-  tenant: string,
-  /**
-   * h5支付完成后跳转地址
-   */
-  payFinishJumpUrl?: ''
-}
-
-const props = defineProps<RechargeViewProps>()
-const { params } = useRouter()
-
-const emit = defineEmits<{
-  (event: 'complete', value: boolean): void,
-  (event: 'agree'): void,
-  (event: 'loaded'): void,
-}>()
-
-const state = reactive({
-  agreed: false,
-  selected: 0,
-  agreementOpen: false,
-  buttonLoading: false,
-  thirdPayId: '',
-})
-
-const amounts = ref<any[]>([])
-
-const onAgreementLinkClick = (e) => {
-  e.preventDefault()
-  e.stopImmediatePropagation()
-  emit('agree')
-  // state.agreementOpen = true
+<template>
+  <view class="view recharge-view">
+    <view class="flex-grow">
+      <amount-picker :items="rechargeAmountItems" :selected="state.selected" @change="onAmountSelect" />
+      <view class="custom-amount-panel" v-if="isCustomAmountSelected">
+        <view class="custom-amount-title">
+          <text>输入充值金额</text>
+          <text class="custom-amount-tag">自定义大额</text>
+        </view>
+        <view class="custom-amount-input">
+          <text class="currency">¥</text>
+          <input
+            class="custom-amount-control"
+            type="number"
+            :value="state.customAmountText"
+            placeholder="最低1w元起,最高5w元"
+            placeholder-class="custom-amount-placeholder"
+            placeholder-style="color: #b8b8b8; font-size: 26px; font-weight: 700;"
+            inputmode="numeric"
+            pattern="[0-9]*"
+            step="1"
+            :min="CUSTOM_RECHARGE_AMOUNT_MIN"
+            :max="CUSTOM_RECHARGE_AMOUNT_MAX"
+            maxlength="6"
+            @input="onCustomAmountInput"
+          />
+        </view>
+        <view class="custom-amount-tip">
+          <text class="custom-amount-tip-icon">i</text>
+          <text>自定义大额充值将根据充值金额即时换算云豆，比例为 1:1。</text>
+        </view>
+      </view>
+
+      <slot name="banner"></slot>
+    </view>
+    <view class="amount-footer">
+      <view class="agreement">
+        <nut-checkbox v-model="state.agreed">我已阅读并同意<a v-track-click class="link inline"
+            @click="onAgreementLinkClick">《大道云平台云豆充值服务协议》</a></nut-checkbox>
+      </view>
+      <nut-button block shape="square" :loading="state.buttonLoading" v-track-click @click="onPayClick"
+        class="recharge-button">立即充值</nut-button>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import AmountPicker from './AmountPicker.vue'
+import { useHttp, endpoints } from '../api'
+import { requestBrandWCPay, requestPayment } from '../services'
+import Taro, { showToast, useRouter } from '@tarojs/taro'
+import { isAlipay, isAndroid, isChrome, isIOS, isSafari, isWechat } from '../../shared/composables/useDeviceEnv'
+import {
+  CUSTOM_RECHARGE_AMOUNT_MAX,
+  CUSTOM_RECHARGE_AMOUNT_MIN,
+  appendCustomAmountOption,
+  normalizeCustomRechargeAmountInput,
+  resolveRechargeAmount,
+  validateCustomRechargeAmount,
+} from './recharge-amount'
+
+// 充值用户界面
+// 配置了必须的属性后
+// 自动获取支付套餐包列表
+// 并发起微信支付
+export interface RechargeViewProps {
+  /**
+   * 应用
+   **/
+  app: string,
+  /**
+   * 充值场景
+   */
+  // stage?: string, // 这个参数暂时不用
+  /**
+   * 租户
+   */
+  tenant: string,
+  /**
+   * h5支付完成后跳转地址
+   */
+  payFinishJumpUrl?: ''
+}
+
+const props = defineProps<RechargeViewProps>()
+const { params } = useRouter()
+
+const emit = defineEmits<{
+  (event: 'complete', value: boolean): void,
+  (event: 'agree'): void,
+  (event: 'loaded'): void,
+}>()
+
+const state = reactive({
+  agreed: false,
+  selected: 0,
+  agreementOpen: false,
+  buttonLoading: false,
+  thirdPayId: '',
+  customAmountText: '',
+})
+
+const amounts = ref<any[]>([])
+const rechargeAmountItems = computed(() => appendCustomAmountOption(amounts.value))
+const isCustomAmountSelected = computed(() => rechargeAmountItems.value[state.selected]?.custom === true)
+
+const onAgreementLinkClick = (e) => {
+  e.preventDefault()
+  e.stopImmediatePropagation()
+  emit('agree')
+  // state.agreementOpen = true
+}
+
+const onAmountSelect = (selected: number) => {
+  state.selected = selected
+
+  if (!rechargeAmountItems.value[selected]?.custom) {
+    state.customAmountText = ''
+  }
+}
+
+const onCustomAmountInput = (event: any) => {
+  const value = normalizeCustomRechargeAmountInput(event?.detail?.value ?? event?.target?.value)
+  state.customAmountText = value
+  return value
 }
-
-const onAmountSelect = (selected: number) => {
-  state.selected = selected
-}
-
-onMounted(async () => {
-  const $http = useHttp({ Appcode: props.app !== 'cloudkitPro' ? props.app : '', Tenant: props.tenant })
-
-  $http.get<any[]>(endpoints.获取充值金额列表, {
-    app: props.app,
-    tenant: props.tenant,
-    scene: isWechat() ? '' : 'APP'
-  }).then(response => {
-    amounts.value = response
-    emit('loaded')
-  })
-})
-
-const onPayClick = () => {
-  if (!state.agreed) {
-    showToast({
-      title: '请勾选《大道云平台云豆充值协议》',
-      icon: 'none',
-    })
-    return false
-  }
-  state.buttonLoading = true
-
-  if (Taro.getEnv() === 'WEB') {
-    // if (!isWechat()) {
-    //   showToast({
-    //     title: '请使用微信浏览器打开',
-    //     icon: 'none',
-    //   })
-    //   state.buttonLoading = false
-    //   return false
-    // }
-    requestBrandWCPay({
-      amount: amounts.value[state.selected].amount,
-      app: 'loankitMp',
-      tenant: props.tenant,
-      accountAuthFlag: false,
-      channelCode: getChannelCode(),
-      payFinishJumpUrl: props.payFinishJumpUrl,
-      fromMini: !!params.from,
-      clientInfo: 'H5'
-    }).then((result: any) => {
-      state.buttonLoading = false
-      if (typeof result === 'boolean' && result) {
-        window.location.href = props.payFinishJumpUrl as string
-      } else if (typeof result === 'object' && result?.paymentType === 'H5' && result?.prePayStr) {
-        state.thirdPayId = result?.thirdPayId || ''
-        window.location.href = result?.prePayStr;
-      } else {
-        emit('complete', result)
-      }
-    }).catch((error) => {
-      state.buttonLoading = false
-    })
-  } else {
-    wx.login({
-      success({ code }: { code: string }) {
-        requestPayment({
-          amount: amounts.value[state.selected].amount,
-          app: props.app,
-          tenant: props.tenant,
-          user: code
-        }).then(result => {
-          state.buttonLoading = false
-          if (result) {
-            emit('complete', true)
-          }
-        })
-      }
-    })
-  }
-}
-
-// 根据环境判断渠道编码
-function getChannelCode() {
-  if (isWechat()) {
-    return 'centergzh';
-  } else {
-    return 'YundouZfb';
-  }
-}
-
-const payResultCheck = () => {
-  if (!state.thirdPayId) return
-  
-  const $http = useHttp()
-  $http.get<any>(endpoints.获取支付结果, {
-    thirdPayId: state.thirdPayId
-  }).then(response => {
-    if (response.payStatus === 'paid') {
-      emit('complete', true)
-    }
-  })
-}
-
-defineExpose({
-  payResultCheck
-})
-</script>
-
-<style lang="scss">
-.recharge-view {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  --nut-primary-color: #017fff;
-
-  .flex-grow {
-    flex-grow: 1;
-  }
-
-  .amount-footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    background-color: #fff;
-    padding: 10px;
-    padding-bottom: 20px;
-    z-index: 10;
-
-    .agreement {
-      font-size: 12px;
-      display: flex;
-      justify-content: center;
-      align-items: cebter;
-      height: 40px;
-    }
-
-    .recharge-button {
-      background: linear-gradient(90deg, #FFEBC1 0%, #FFD7A7 52.29%, #FFB875 100%);
-      color: #353535;
-      margin: 12px 0;
+
+const getSelectedRechargeAmount = () => {
+  if (isCustomAmountSelected.value) {
+    return validateCustomRechargeAmount(state.customAmountText)
+  }
+
+  const amount = resolveRechargeAmount(rechargeAmountItems.value, state.selected, state.customAmountText)
+
+  if (!amount) {
+    return { valid: false, message: '请选择充值金额' } as const
+  }
+
+  return { valid: true, amount } as const
+}
+
+onMounted(async () => {
+  const $http = useHttp({ Appcode: props.app !== 'cloudkitPro' ? props.app : '', Tenant: props.tenant })
+
+  $http.get<any[]>(endpoints.获取充值金额列表, {
+    app: props.app,
+    tenant: props.tenant,
+    scene: isWechat() ? '' : 'APP'
+  }).then(response => {
+    amounts.value = response
+    emit('loaded')
+  })
+})
+
+const onPayClick = () => {
+  const selectedAmount = getSelectedRechargeAmount()
+
+  if (!selectedAmount.valid) {
+    showToast({
+      title: selectedAmount.message,
+      icon: 'none',
+    })
+    return false
+  }
+
+  if (!state.agreed) {
+    showToast({
+      title: '请勾选《大道云平台云豆充值协议》',
+      icon: 'none',
+    })
+    return false
+  }
+  state.buttonLoading = true
+
+  if (Taro.getEnv() === 'WEB') {
+    // if (!isWechat()) {
+    //   showToast({
+    //     title: '请使用微信浏览器打开',
+    //     icon: 'none',
+    //   })
+    //   state.buttonLoading = false
+    //   return false
+    // }
+    requestBrandWCPay({
+      amount: selectedAmount.amount,
+      app: 'loankitMp',
+      tenant: props.tenant,
+      accountAuthFlag: false,
+      channelCode: getChannelCode(),
+      payFinishJumpUrl: props.payFinishJumpUrl,
+      fromMini: !!params.from,
+      clientInfo: 'H5'
+    }).then((result: any) => {
+      state.buttonLoading = false
+      if (typeof result === 'boolean' && result) {
+        window.location.href = props.payFinishJumpUrl as string
+      } else if (typeof result === 'object' && result?.paymentType === 'H5' && result?.prePayStr) {
+        state.thirdPayId = result?.thirdPayId || ''
+        window.location.href = result?.prePayStr;
+      } else {
+        emit('complete', result)
+      }
+    }).catch((error) => {
+      state.buttonLoading = false
+    })
+  } else {
+    wx.login({
+      success({ code }: { code: string }) {
+        requestPayment({
+          amount: selectedAmount.amount,
+          app: props.app,
+          tenant: props.tenant,
+          user: code
+        }).then(result => {
+          state.buttonLoading = false
+          if (result) {
+            emit('complete', true)
+          }
+        })
+      }
+    })
+  }
+}
+
+// 根据环境判断渠道编码
+function getChannelCode() {
+  if (isWechat()) {
+    return 'centergzh';
+  } else {
+    return 'YundouZfb';
+  }
+}
+
+const payResultCheck = () => {
+  if (!state.thirdPayId) return
+  
+  const $http = useHttp()
+  $http.get<any>(endpoints.获取支付结果, {
+    thirdPayId: state.thirdPayId
+  }).then(response => {
+    if (response.payStatus === 'paid') {
+      emit('complete', true)
+    }
+  })
+}
+
+defineExpose({
+  payResultCheck
+})
+</script>
+
+<style lang="scss">
+.recharge-view {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  --nut-primary-color: #017fff;
+
+  .flex-grow {
+    flex-grow: 1;
+  }
+
+  .custom-amount-panel {
+    box-sizing: border-box;
+    display: block;
+    overflow: hidden;
+    margin: 8px 12px 12px;
+    padding: 12px;
+    background-color: rgb(255, 244, 223,.3);
+    border-radius: 5px;
+    border: 1px solid #fd6701;
+  }
+
+  .custom-amount-title,
+  .custom-amount-input,
+  .custom-amount-tip {
+    background: transparent;
+  }
+
+  .custom-amount-title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #262626;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 22px;
+  }
+
+  .custom-amount-tag {
+    color: #fd6701;
+    background: rgb(255, 244, 223);
+    border-radius: 12px;
+    padding: 3px 8px;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 14px;
+  }
+
+  .custom-amount-input {
+    display: flex;
+    align-items: center;
+    min-height: 50px;
+    margin-top: 8px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+
+    .currency {
+      flex: none;
+      margin-right: 10px;
+      color: #9a9a9a;
+      font-size: 26px;
+      font-weight: 600;
+      line-height: 36px;
+    }
+  }
+
+  .custom-amount-control {
+    flex: 1;
+    min-width: 0;
+    height: 42px;
+    padding: 0;
+    border: 0;
+    outline: none;
+    background: transparent;
+    color: #353535;
+    caret-color: #fd6701;
+    font-size: 28px;
+    font-weight: 700;
+    line-height: 42px;
+
+    &:focus,
+    &:focus-visible {
       border: 0;
-      border-radius: 8px;
+      outline: none;
+      box-shadow: none;
     }
 
-    .nut-checkbox {
-      line-height: 40px;
-    }
-
-    .nut-checkbox__label {
-      margin-left: 8px;
-      flex: flex;
-      font-size: 12px;
-    }
-
-    .link {
-      display: inline;
-      color: #FD6701;
+    &::placeholder,
+    &::-webkit-input-placeholder {
+      color: #b8b8b8;
+      font-size: 26px;
+      font-weight: 700;
     }
   }
-}
-</style>
+
+  .custom-amount-placeholder {
+    color: #b8b8b8;
+    font-size: 26px;
+    font-weight: 700;
+    line-height: 42px;
+  }
+
+  .custom-amount-tip {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 10px;
+    color: #a5a5a5;
+    font-size: 10px;
+    line-height: 15px;
+  }
+
+  .custom-amount-tip-icon {
+    flex: none;
+    width: 12px;
+    height: 12px;
+    border: 1px solid #b8b8b8;
+    border-radius: 50%;
+    color: #9a9a9a;
+    font-size: 9px;
+    line-height: 12px;
+    text-align: center;
+  }
+
+  .amount-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: #fff;
+    padding: 10px;
+    padding-bottom: 20px;
+    z-index: 10;
+
+    .agreement {
+      font-size: 12px;
+      display: flex;
+      justify-content: center;
+      align-items: cebter;
+      height: 40px;
+    }
+
+    .recharge-button {
+      background: linear-gradient(90deg, #FFEBC1 0%, #FFD7A7 52.29%, #FFB875 100%);
+      color: #353535;
+      margin: 12px 0;
+      border: 0;
+      border-radius: 8px;
+    }
+
+    .nut-checkbox {
+      line-height: 40px;
+    }
+
+    .nut-checkbox__label {
+      margin-left: 8px;
+      flex: flex;
+      font-size: 12px;
+    }
+
+    .link {
+      display: inline;
+      color: #FD6701;
+    }
+  }
+}
+</style>