vue2-client 1.16.54 → 1.16.55

package/src/base-client/components/his/XCharge/XCharge.vue

@@ -1,5 +1,10 @@
 <template>
   <div class="xcharge-wrapper">
+    <!-- 标题 -->
+    <x-title :title="config.title || '结算-收费方式'" :dot="true" />
+    <!-- 分割线 -->
+    <div class="top-divider"></div>
+
     <!-- 顶部金额信息区（表单行风格，宽度固定，每行4个） -->
     <a-row :gutter="0" class="amount-info">
       <a-col v-for="item in config.amountFields" :key="item.field" :span="6" class="form-row">
@@ -13,50 +18,60 @@
       </a-col>
     </a-row>
 
-    <a-divider/>
-
-    <!-- 支付方式选择区 -->
-    <div class="payment-methods">
-      <a-button
-        v-for="method in config.paymentMethods"
-        :key="method.key"
-        :class="['payment-btn', {
-          active: isMixedPaymentEnabled ? selectedMethods.includes(method.key) : selectedMethod === method.key
-        }]"
-        @click="isMixedPaymentEnabled ? toggleMethod(method.key) : selectMethod(method.key)"
-      >
-        <div>
-          <div class="pay-label">{{ method.label }}</div>
+    <!-- 支付方式选择区和支付详情容器 -->
+    <div class="payment-container">
+      <!-- 支付方式选择区 -->
+      <div class="payment-methods">
+        <div
+          v-for="method in config.paymentMethods"
+          :key="method.key"
+          :class="['payment-option', {
+            active: isMixedPaymentEnabled ? selectedMethods.includes(method.key) : selectedMethod === method.key
+          }]"
+          @click="isMixedPaymentEnabled ? toggleMethod(method.key) : selectMethod(method.key)"
+        >
+          <!-- 图标区域 -->
+          <div class="payment-icon" :class="{ multiple: getMethodIcons(method).length > 1 }">
+            <template v-if="getMethodIcons(method).length">
+              <img
+                v-for="(src, idx) in getMethodIcons(method)"
+                :key="idx"
+                :src="src"
+                :alt="method.label"
+                class="icon-image"
+              />
+            </template>
+            <div v-else class="icon-placeholder">{{ method.label.charAt(0) }}</div>
+          </div>
+          <!-- 标签区域 -->
+          <div class="payment-label">{{ method.label }}</div>
+          <!-- 选中指示器 -->
           <div v-if="isMixedPaymentEnabled && selectedMethods.includes(method.key)" class="selected-indicator">✓</div>
         </div>
-      </a-button>
-    </div>
+      </div>
 
-    <a-divider v-if="isMixedPaymentEnabled && selectedMethods.length > 1"/>
-
-    <!-- 支付详情（同一行展示，仅在混合支付且选择方式>1时出现） -->
-    <div v-if="isMixedPaymentEnabled && selectedMethods.length > 1" class="mixed-payment-section simple">
-      <div class="payment-operation-row">
-        <div class="payment-inline">
-          <div v-for="method in selectedMethods" :key="method" class="inline-field">
-            <label class="form-label">{{ getAmountLabel(method) }}</label>
-            <a-input
-              v-model="paymentAmounts[method]"
-              type="number"
-              placeholder="请输入金额"
-              class="form-input"
-              @change="updatePaymentAmount(method, $event)"
-            />
+      <!-- 支付详情（同一行展示，仅在混合支付手动模式且选择方式>1时出现） -->
+      <div v-if="isMixedPaymentManualMode && selectedMethods.length > 1" class="mixed-payment-section simple">
+        <div class="payment-operation-row">
+          <div class="payment-inline">
+            <div v-for="method in selectedMethods" :key="method" class="inline-field">
+              <label class="form-label">{{ getAmountLabel(method) }}</label>
+              <a-input
+                v-model="paymentAmounts[method]"
+                type="number"
+                placeholder="请输入金额"
+                class="form-input"
+                @change="updatePaymentAmount(method, $event)"
+              />
+            </div>
           </div>
         </div>
       </div>
     </div>
 
-    <a-divider/>
-
     <!-- 底部金额和操作区（表单行风格，宽度固定） -->
     <a-row :gutter="0" class="bottom-info">
-      <a-col v-for="item in config.bottomFields" :key="item.field" :span="8" class="form-row">
+      <a-col v-for="item in config.bottomFields" :key="item.field" :span="6" class="form-row">
         <label class="form-label">{{ item.label }}</label>
         <a-input
           v-model="data[item.field]"
@@ -82,9 +97,13 @@
 
 <script>
 import { getConfigByName, runLogic } from '@vue2-client/services/api/common'
+import XTitle from '../XTitle/XTitle.vue'
 
 export default {
   name: 'XCharge',
+  components: {
+    XTitle
+  },
   props: {
     queryParamsName: {
       type: String,
@@ -98,11 +117,13 @@ export default {
   data () {
     return {
       config: {
+        title: '', // 标题配置
         amountFields: [],
         paymentMethods: [],
         bottomFields: [],
-        actionButtons: [],
-        enableMixedPayment: false // 默认关闭混合支付
+        actionButtons: [], // 操作按钮
+        enableMixedPayment: false, // 默认关闭混合支付
+        mixedPaymentMode: 'manual' // 混合支付模式：'manual'手动输入，'auto'自动模式
       },
       data: {},
       selectedMethod: '', // 保持向后兼容
@@ -110,14 +131,13 @@ export default {
       paymentAmounts: {}, // 各支付方式的金额
       // 事件名配置（可通过配置覆盖）
       eventNames: {
-        method: 'method',
-        methods: 'methods',
-        totalPaymentAmount: 'totalPaymentAmount',
-        action: 'action',
-        // 新增：单个支付方式金额变更事件
-        paymentAmountChange: 'paymentAmountChange'
+        method: 'method', // 单选支付方式变更事件
+        methods: 'methods', // 多选支付方式变更事件
+        totalPaymentAmount: 'totalPaymentAmount', // 总支付金额变更事件
+        action: 'action', // 操作按钮点击事件
+        paymentAmountChange: 'paymentAmountChange' // 新增：单个支付方式金额变更事件
       },
-      hasInitialized: false
+      hasInitialized: false // 是否已初始化
     }
   },
   emits: ['init'],
@@ -126,6 +146,14 @@ export default {
     isMixedPaymentEnabled () {
       return this.config && this.config.enableMixedPayment === true
     },
+    // 是否为混合支付自动模式
+    isMixedPaymentAutoMode () {
+      return this.isMixedPaymentEnabled && this.config.mixedPaymentMode === 'auto'
+    },
+    // 是否为混合支付手动模式
+    isMixedPaymentManualMode () {
+      return this.isMixedPaymentEnabled && this.config.mixedPaymentMode === 'manual'
+    },
     // 预计算：金额标签映射（仅基于 paymentMethods 配置）
     amountLabelMap () {
       const map = {}
@@ -135,7 +163,7 @@ export default {
         const key = m && m.key
         const label = m && m.label
         if (!key) return
-        map[key] = m && m.amountLabel ? m.amountLabel : `${label || key}金额`
+        map[key] = `${label || key}金额`
       })
       return map
     }
@@ -147,6 +175,44 @@ export default {
     if (hasParam) this.hasInitialized = true
   },
   methods: {
+    // -------- 金额精度工具：使用「分」进行运算，避免浮点精度问题 --------
+    // 解析金额为分（整数）；非法输入按 0 处理
+    parseAmountToCents (value) {
+      if (value === null || value === undefined || value === '') return 0
+      // 允许字符串或数字，移除非数字与小数点字符
+      const str = String(value).replace(/[^0-9.-]/g, '')
+      if (str === '' || str === '-' || isNaN(Number(str))) return 0
+      // 四舍五入到分
+      return Math.round(Number(str) * 100)
+    },
+    // 将分格式化为金额（保留两位小数）
+    formatCentsToAmount (cents) {
+      const v = Number(cents) / 100
+      // 使用 toFixed 返回字符串，再转为数字，避免 0.30000000000004
+      return Number(v.toFixed(2))
+    },
+    // 规范化金额：返回保留两位小数的数字
+    normalizeAmount (value) {
+      return this.formatCentsToAmount(this.parseAmountToCents(value))
+    },
+    // 解析多图标：支持 method.icons 数组；否则回退到单个 icon
+    getMethodIcons (method) {
+      if (!method) return []
+      const icons = Array.isArray(method.icons) ? method.icons : (method.icon ? [method.icon] : [])
+      const resolved = icons.map(n => {
+        if (!n || typeof n !== 'string') return ''
+        if (n.startsWith('/') || n.startsWith('http')) return n
+        const baseName = n.replace(/\.(png|jpg|jpeg|webp|svg)$/i, '')
+        // 仅使用 @vue2-client 资源解析
+        try { return require('@vue2-client/assets/img/paymentMethod/' + baseName + '.png') } catch (e) {}
+        try { return require('@vue2-client/assets/img/paymentMethod/' + baseName + '.jpg') } catch (e) {}
+        try { return require('@vue2-client/assets/img/paymentMethod/' + baseName + '.jpeg') } catch (e) {}
+        try { return require('@vue2-client/assets/img/paymentMethod/' + baseName + '.webp') } catch (e) {}
+        try { return require('@vue2-client/assets/img/paymentMethod/' + baseName + '.svg') } catch (e) {}
+        return ''
+      }).filter(Boolean)
+      return resolved
+    },
     // 同步 data 中的 selectedMethods / paymentAmounts 到本地状态；并补回缺失的 data 字段
     hydrateFromData () {
       const incomingMethods = Array.isArray(this.data && this.data.selectedMethods) ? this.data.selectedMethods : undefined
@@ -231,17 +297,16 @@ export default {
       const method = this.config.paymentMethods.find(m => m.key === methodKey)
       return method ? method.label : methodKey
     },
-    // 获取支付金额字段标签（优先配置映射，其次方法自带 amountLabel，最后回退）
+    // 获取支付金额字段标签（优先使用映射，否则回退为“{label}金额”）
     getAmountLabel (methodKey) {
       const mapped = (this.config.paymentAmountLabels && this.config.paymentAmountLabels[methodKey]) || ''
       if (mapped) return mapped
       const method = this.config.paymentMethods.find(m => m.key === methodKey)
-      if (method && method.amountLabel) return method.amountLabel
       return `${method ? method.label : methodKey}金额`
     },
     // 新增：更新支付金额
     updatePaymentAmount (methodKey, event) {
-      const amount = parseFloat(event.target.value) || 0
+      const amount = this.normalizeAmount(event && event.target ? event.target.value : event)
       this.$set(this.paymentAmounts, methodKey, amount)
       if (!this.data.paymentAmounts || typeof this.data.paymentAmounts !== 'object') this.$set(this.data, 'paymentAmounts', {})
       this.$set(this.data.paymentAmounts, methodKey, amount)
@@ -251,12 +316,31 @@ export default {
     },
     // 新增：计算总支付金额
     calculateTotalPayment () {
-      const total = Object.values(this.paymentAmounts).reduce((sum, amount) => {
-        return sum + (parseFloat(amount) || 0)
+      const totalCents = Object.values(this.paymentAmounts).reduce((sumCents, amount) => {
+        return sumCents + this.parseAmountToCents(amount)
       }, 0)
+      const total = this.formatCentsToAmount(totalCents)
       this.data.totalPaymentAmount = total
       this.$emit(this.eventNames.totalPaymentAmount, total)
     },
+    // 新增：设置支付金额（由外部调用）
+    setPaymentAmounts (amounts) {
+      if (!this.isMixedPaymentEnabled || !amounts || typeof amounts !== 'object') return
+      // 更新本地状态
+      Object.keys(amounts).forEach(method => {
+        const normalized = this.normalizeAmount(amounts[method])
+        this.$set(this.paymentAmounts, method, normalized)
+      })
+      // 更新数据模型
+      if (!this.data.paymentAmounts || typeof this.data.paymentAmounts !== 'object') {
+        this.$set(this.data, 'paymentAmounts', {})
+      }
+      Object.keys(amounts).forEach(method => {
+        const normalized = this.normalizeAmount(amounts[method])
+        this.$set(this.data.paymentAmounts, method, normalized)
+      })
+      this.calculateTotalPayment()
+    },
     getConfig (configName, param) {
       if (configName) {
         console.log('configName', configName)
@@ -268,11 +352,13 @@ export default {
             return
           }
           this.config = {
+            title: res.title || '', // 标题配置
             amountFields: res.amountFields || [],
             paymentMethods: res.paymentMethods || [],
             bottomFields: res.bottomFields || [],
             actionButtons: res.actionButtons || [],
-            enableMixedPayment: res.enableMixedPayment === true
+            enableMixedPayment: res.enableMixedPayment === true,
+            mixedPaymentMode: res.mixedPaymentMode || 'manual' // 默认手动模式
           }
           // 事件名覆盖（fronImport风格）
           if (res.eventNames && typeof res.eventNames === 'object') {
@@ -340,14 +426,14 @@ export default {
     // 使用默认数据
     useDefaultData () {
       this.data = {
-        f_amount: 100,
+        f_amount: 0,
         f_insurance_amount: 0,
-        f_self_amount: 100,
-        f_balance: 100,
+        f_self_amount: 0,
+        f_balance: 0,
         out_of_pocket_amount: 0,
         biscount_amount: 0,
         billing_amount: 0,
-        received: 100,
+        received: 0,
         change: 0
       }
     },
@@ -399,10 +485,14 @@ export default {
 <style scoped>
 .xcharge-wrapper {
   background: #fff;
-  padding: 24px;
+  padding: 12px;
   border-radius: 8px;
 }
 
+.charge-title {
+  margin-bottom: 16px;
+}
+
 .amount-info {
   margin-bottom: 20px;
   display: flex;
@@ -410,26 +500,34 @@ export default {
   row-gap: 16px;
 }
 
+/* 顶部分割线 */
+.top-divider {
+  height: 2px;
+  opacity: 1;
+  background: #0057FE;
+  margin-top: 8px;
+  margin-bottom: 12px;
+}
+
 .form-row {
   display: flex;
   align-items: center;
-  margin-bottom: 30px;
 }
 
 .form-label {
   width: 100px;
-  font-size: 18px;
+  font-size: 16px;
   color: #333;
   font-weight: bold;
-  text-align: left;
+  text-align: center;
   letter-spacing: 1px;
   flex-shrink: 0;
 }
 
 .form-input {
-  width: 180px;
-  height: 40px;
-  font-size: 18px;
+  width: 200px;
+  height: 30px;
+  font-size: 16px;
   border-radius: 8px;
   border: 1.5px solid #dcdfe6;
   background: #fff;
@@ -442,44 +540,103 @@ export default {
   background: #f5f5f5;
 }
 
+/* 支付容器 */
+.payment-container {
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  margin-bottom: 10px;
+  height: 464px;
+  padding: 112px 31px 0px;
+}
+
 .payment-methods {
   display: flex;
   justify-content: space-around;
-  margin: 32px 0;
+  margin: 0 0 16px 0;
+  gap: 20px;
 }
 
-.payment-btn {
-  width: 180px;
-  height: 120px;
-  margin: 0 16px;
+.payment-option {
+  width: 220px;
+  height: 200px;
   display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
-  background: #f7f8fa;
   border: 1.5px solid #e4e7ed;
-  color: #333;
-  font-weight: bold;
-  font-size: 24px;
-  transition: all 0.2s;
-  box-shadow: none;
   border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.payment-option:hover {
+  background: #0057FE;
+  border-color: #0057FE;
+  box-shadow: 0 2px 8px rgba(0, 87, 254, 0.2);
+}
+
+.payment-option.active {
+  background: #587EDF;
+  border-color: #587EDF;
+  color: #fff;
 }
 
-.payment-btn.active {
-  background: #409eff;
-  border-color: #409eff;
+.payment-option:hover .payment-label {
   color: #fff;
 }
 
-.pay-label {
+.payment-icon {
+  position: relative;
+  width: 65px;
+  height: 65px;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.payment-icon.multiple {
+  gap: 12px;
+}
+
+.icon-image {
+  width: 65px;
+  height: 65px;
+  object-fit: contain;
+  border-radius: 8px;
+}
+
+.icon-placeholder {
+  width: 100%;
+  height: 100%;
+  background: #ddd;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 24px;
   font-weight: bold;
+  color: #666;
+}
+
+/* 移除徽章样式：模板已不再使用 */
+
+.payment-label {
+  font-size: 36px;
+  font-weight: 500;
+  text-align: center;
+  color: #333;
+}
+
+.payment-option.active .payment-label {
+  color: #fff;
 }
 
 .selected-indicator {
   position: absolute;
-  top: 8px;
-  right: 8px;
+  top: 12px;
+  right: 12px;
   background: #52c41a;
   color: #fff;
   border-radius: 50%;
@@ -493,11 +650,10 @@ export default {
 }
 
 .mixed-payment-section {
-  margin: 24px 0;
-  padding: 20px;
-  background: #f8f9fa;
-  border-radius: 8px;
-  border: 1px solid #e9ecef;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: none;
 }
 
 .mixed-payment-section.simple {
@@ -510,7 +666,7 @@ export default {
   border: none;
   background: transparent;
   padding: 0;
-  margin-bottom: 12px;
+  margin: 0;
 }
 
 .section-title {
@@ -560,11 +716,11 @@ export default {
 
 .payment-inline {
   display: flex;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   column-gap: 32px;
-  overflow-x: auto;
+  row-gap: 16px;
 }
 
 .inline-field {
@@ -576,6 +732,7 @@ export default {
 
 .payment-inline .form-label {
   width: auto;
+  font-size: 16px;
 }
 
 .pay-shortcut {
@@ -607,4 +764,5 @@ export default {
   height: 38px;
   min-width: 90px;
 }
+
 </style>

package/src/base-client/components/his/XCharge/XChargeDemo.vue

@@ -10,22 +10,96 @@ export default {
       methods: [],
       total: 0,
       lastAmountChange: null,
-      lastAction: null
+      lastAction: null,
+      currentMode: 'manual' // 当前模式：manual, auto, single
     }
   },
   methods: {
     onMethod (value) { console.log('【事件】单选支付方式(method)：', value) },
-    onMethods (values) { console.log('【事件】多选支付方式(methods)：', values); this.methods = values },
+    onMethods (values) { 
+      console.log('【事件】多选支付方式(methods)：', values); 
+      this.methods = values
+      // 在自动模式下，由外部决定金额分配
+      if (this.currentMode === 'auto') {
+        this.autoDistributeAmounts(values)
+      }
+    },
     onTotal (total) { console.log('【事件】合计金额变更(totalPaymentAmount)：', total); this.total = total },
     onAmountChange (payload) { console.log('【事件】单个方式金额变更(paymentAmountChange)：', payload, '→ 方式：', payload.method, ' 金额：', payload.amount); this.lastAmountChange = payload },
-    onAction (payload) { console.log('【事件】操作(action)：', payload); this.lastAction = payload }
+    onAction (payload) { console.log('【事件】操作(action)：', payload); this.lastAction = payload },
+    switchMode (mode) {
+      this.currentMode = mode
+      // 根据模式切换配置
+      switch (mode) {
+        case 'manual':
+          this.queryParamsName = 'testChargeConfig'
+          break
+        case 'auto':
+          this.queryParamsName = 'testAutoMixedChargeConfig'
+          break
+        case 'single':
+          this.queryParamsName = 'testSingleChargeConfig'
+          break
+      }
+    },
+    getModeText (mode) {
+      const modeMap = {
+        'manual': '混合支付-手动模式',
+        'auto': '混合支付-自动模式',
+        'single': '单选模式'
+      }
+      return modeMap[mode] || mode
+    },
+    // 外部金额分配逻辑（示例：平均分配）
+    autoDistributeAmounts (selectedMethods) {
+      if (!selectedMethods || selectedMethods.length === 0) return
+      
+      // 示例：假设总金额为100，平均分配
+      const totalAmount = 100
+      const amountPerMethod = totalAmount / selectedMethods.length
+      
+      const amounts = {}
+      selectedMethods.forEach(method => {
+        amounts[method] = amountPerMethod
+      })
+      
+      // 调用组件的setPaymentAmounts方法
+      this.$refs.xCharge.setPaymentAmounts(amounts)
+    }
   }
 }
 </script>
 
 <template>
   <div class="demo">
+    <!-- 模式切换按钮 -->
+    <div class="mode-switcher">
+      <h3>XCharge 组件测试 - 混合支付模式切换</h3>
+      <div class="mode-buttons">
+        <a-button 
+          :type="currentMode === 'manual' ? 'primary' : 'default'"
+          @click="switchMode('manual')"
+        >
+          混合支付-手动模式
+        </a-button>
+        <a-button 
+          :type="currentMode === 'auto' ? 'primary' : 'default'"
+          @click="switchMode('auto')"
+        >
+          混合支付-自动模式
+        </a-button>
+        <a-button 
+          :type="currentMode === 'single' ? 'primary' : 'default'"
+          @click="switchMode('single')"
+        >
+          单选模式
+        </a-button>
+      </div>
+      <p class="current-mode">当前模式：{{ getModeText(currentMode) }}</p>
+    </div>
+
     <x-charge
+      ref="xCharge"
       :queryParamsName="queryParamsName"
       @method="onMethod"
       @methods="onMethods"
@@ -44,6 +118,28 @@ export default {
 
 <style scoped>
 .demo { padding: 16px; }
+.mode-switcher {
+  margin-bottom: 24px;
+  padding: 16px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  border: 1px solid #e9ecef;
+}
+.mode-switcher h3 {
+  margin: 0 0 16px 0;
+  color: #333;
+  font-size: 18px;
+}
+.mode-buttons {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+.current-mode {
+  margin: 0;
+  color: #666;
+  font-weight: 500;
+}
 .info { margin-top: 16px; color: #333; }
 .info p { margin: 6px 0; }
 </style>