af-mobile-client-vue3 1.4.14 → 1.4.16

package/src/components/common/otherCharge/PaymentMethodSelector.vue

@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import CardHeader from '@af-mobile-client-vue3/components/data/CardContainer/CardHeader.vue'
+import { computed, ref } from 'vue'
+// import useBusinessStore from '@/stores/modules/business'
+
+interface PaymentMethod {
+  label: string
+  value: string
+  icon: string
+  color: string
+}
+
+const props = defineProps({
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '支付方式',
+  },
+  allowedMethods: {
+    type: Array as () => string[],
+    default: null,
+  },
+  icon: {
+    type: String,
+    default: 'fa-credit-card',
+  },
+  user: {
+    type: Object,
+    default: () => {},
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+const businessStore = props.user
+const userInfo = ref({ ...businessStore })
+const defaultMethods: PaymentMethod[] = [
+  {
+    value: '现金缴费',
+    label: '现金缴费',
+    icon: 'i-fa6-solid-money-bill-wave',
+    color: 'red',
+  },
+  {
+    value: '扫码支付',
+    label: '扫码支付',
+    icon: 'i-fa6-solid-qrcode',
+    color: 'blue',
+  },
+  {
+    value: '微信支付',
+    label: '微信支付',
+    icon: 'i-fa-brands-weixin',
+    color: 'green',
+  },
+  {
+    value: '支付宝支付',
+    label: '支付宝支付',
+    icon: 'i-fa-brands-alipay',
+    color: 'blue',
+  },
+]
+
+const displayMethods = computed(() => {
+  if (userInfo.value.f_orgid === '1767') {
+    return defaultMethods.filter(method =>
+      method.value === '微信支付',
+    )
+  }
+  else {
+    if (!props.allowedMethods) {
+      return defaultMethods
+    }
+    return defaultMethods.filter(method =>
+      props.allowedMethods.includes(method.value),
+    )
+  }
+})
+
+function handleSelect(value: string) {
+  console.log(value)
+  emit('update:modelValue', value)
+}
+</script>
+
+<template>
+  <div class="payment-method-selector">
+    <div class="payment-method-selector__header">
+      <CardHeader :title="title" />
+    </div>
+    <div class="payment-method-selector__body">
+      <div class="payment-method-selector__grid">
+        <div
+          v-for="method in displayMethods"
+          :key="method.value"
+          class="payment-method-selector__item"
+          :class="{ 'payment-method-selector__item--active': modelValue === method.value }"
+          @click="handleSelect(method.value)"
+        >
+          <div class="payment-method-selector__icon-wrap" :class="`payment-method-selector__icon-wrap--${method.color}`">
+            <div class="payment-method-selector__icon" :class="[method.icon]" />
+          </div>
+          <span class="payment-method-selector__label" :class="{ 'payment-method-selector__label--active': modelValue === method.value }">
+            {{ method.label }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.payment-method-selector {
+  &__header {
+    margin-bottom: 12px;
+  }
+
+  &__grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(4, 1fr);
+    }
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    cursor: pointer;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    background-color: #fff;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: #f9fafb;
+    }
+
+    &--active {
+      background-color: #ebf5ff;
+      border-color: #3b82f6;
+      box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
+    }
+  }
+
+  &__icon-wrap {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+    flex-shrink: 0;
+
+    &--green {
+      background-color: #dcfce7;
+
+      .payment-method-selector__icon {
+        color: #16a34a;
+      }
+    }
+
+    &--blue {
+      background-color: #dbeafe;
+
+      .payment-method-selector__icon {
+        color: #2563eb;
+      }
+    }
+
+    &--red {
+      background-color: #fff0f0;
+
+      .payment-method-selector__icon {
+        color: #d32f2f;
+      }
+    }
+  }
+
+  &__icon {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+  }
+
+  &__label {
+    font-size: 12px;
+    font-weight: 500;
+    color: #6b7280;
+
+    &--active {
+      color: #2563eb;
+    }
+  }
+}
+</style>

package/src/components/common/otherCharge/PaymentMethodSelectorCard.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import CardContainer from '@af-mobile-client-vue3/components/data/CardContainer/CardContainer.vue'
+import PaymentMethodSelector from './PaymentMethodSelector.vue'
+
+defineProps({
+  modelValue: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    default: '支付方式',
+  },
+  allowedMethods: {
+    type: Array as () => string[],
+    default: null,
+  },
+  className: {
+    type: String,
+    default: '',
+  },
+  user: {
+    type: Object,
+    default: () => {},
+  },
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+function handleUpdate(value: string) {
+  emit('update:modelValue', value)
+}
+</script>
+
+<template>
+  <CardContainer :class="className">
+    <PaymentMethodSelector
+      :model-value="modelValue"
+      :title="title"
+      :allowed-methods="allowedMethods"
+      :user="user"
+      @update:model-value="handleUpdate"
+    />
+  </CardContainer>
+</template>

package/src/components/common/otherCharge/ReceiptModal.vue

@@ -0,0 +1,269 @@
+<script setup lang="ts">
+import { runLogic } from '@af-mobile-client-vue3/services/api/common'
+import { mobileUtil } from '@af-mobile-client-vue3/utils/mobileUtil'
+import { defineEmits, onUnmounted, ref, watch } from 'vue'
+
+interface PrintItem {
+  type?: string
+  text?: string
+  align?: 'left' | 'center' | 'right'
+  isbold?: boolean
+  fontsize?: number
+  value?: number
+  unit?: string
+  [key: string]: any
+}
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '电子凭证',
+  },
+  subTitle: {
+    type: String,
+    default: '',
+  },
+  showSaveButton: {
+    type: Boolean,
+    default: true,
+  },
+  saveButtonText: {
+    type: String,
+    default: '打印',
+  },
+  closeButtonText: {
+    type: String,
+    default: '完成',
+  },
+})
+
+const emit = defineEmits(['update:show', 'ok', 'close'])
+
+// 保存原始滚动位置和样式
+const scrollPosition = ref(0)
+const documentWidth = ref(0)
+// 是否显示弹窗
+const show = ref(false)
+// 打印列表
+const printList = ref<PrintItem[]>([])
+// 获取祖父组件的方法
+// const success = inject('success')
+
+// 锁定滚动
+function lockScroll() {
+  // 保存当前滚动位置
+  scrollPosition.value = window.pageYOffset
+  // 保存文档原始宽度以防止滚动条消失导致的页面抖动
+  documentWidth.value = document.documentElement.clientWidth
+  // 弹窗打开时，给body添加类以禁止滚动
+  document.body.classList.add('receipt-modal-open')
+  // 设置body的top位置，保持视觉位置不变
+  document.body.style.top = `-${scrollPosition.value}px`
+  // 保持页面宽度不变，防止滚动条消失导致的布局偏移
+  document.body.style.width = `${documentWidth.value}px`
+}
+
+// 解除滚动锁定
+function unlockScroll() {
+  // 弹窗关闭时，移除禁止滚动的类
+  document.body.classList.remove('receipt-modal-open')
+  // 恢复body样式
+  document.body.style.top = ''
+  document.body.style.width = ''
+  // 恢复滚动位置
+  window.scrollTo(0, scrollPosition.value)
+}
+
+// 调用Logic组织打印参数
+async function printParams(printLogic: string, printId: string, otherParams?: any) {
+  try {
+    printList.value = await runLogic(printLogic, { id: printId, otherParams })
+    console.log('打印参数==', printList.value)
+    if (printList.value.length > 0) {
+      show.value = true
+    }
+    else {
+      // 没查到数据默认不打印
+      close()
+    }
+  }
+  catch (error) {
+    console.error('Error calling logic:', error)
+  }
+}
+
+// 打印
+function ok() {
+  // 实际项目中应添加收据截图保存逻辑
+  mobileUtil.execute({
+    funcName: 'print',
+    param: { data: printList.value },
+    callbackFunc: (result) => {
+      // emit('ok', { status: true })
+      emit('close', { status: true })
+    },
+  })
+}
+
+// 关闭弹窗
+function close() {
+  show.value = false
+  emit('close', { status: true })
+  // if (typeof success === 'function') {
+  //   success()
+  // }
+}
+
+// 监听show变化，控制body滚动
+watch(() => show.value, (newVal, oldVal) => {
+  if (newVal && !oldVal) {
+    lockScroll()
+  }
+  else if (!newVal && oldVal) {
+    unlockScroll()
+  }
+}, { immediate: true })
+
+// 组件卸载时确保移除类和恢复滚动
+onUnmounted(() => {
+  if (document.body.classList.contains('receipt-modal-open')) {
+    unlockScroll()
+  }
+})
+
+// 暴露组织参数的给父组件调用
+defineExpose({ printParams, close })
+</script>
+
+<template>
+  <van-popup
+    :show="show"
+
+    :close-on-click-overlay="false"
+    position="center"
+    round lock-scroll
+    class="receipt-modal"
+    :style="{ width: '90%', maxWidth: '375px' }"
+  >
+    <div class="receipt-modal-container">
+      <div class="receipt-modal-header">
+        <div class="receipt-modal-title-container">
+          <div class="receipt-modal-title">
+            {{ props.title }}
+          </div>
+          <div v-if="subTitle" class="receipt-modal-subtitle">
+            {{ props.subTitle }}
+          </div>
+        </div>
+      </div>
+      <div class="receipt-modal-content">
+        <template v-for="(item, index) in printList" :key="index">
+          <div
+            v-if="item?.text !== undefined"
+            class="print-list-item"
+            :style="{
+              'text-align': item.align || undefined,
+              'font-weight': item.isbold ? 'bold' : undefined,
+              'font-size': item.fontsize ? `${item.fontsize * 7}px` : undefined,
+              'color': '#6b7280',
+            }"
+          >
+            {{ item.text }}
+          </div>
+        </template>
+      </div>
+      <div class="receipt-modal-footer">
+        <van-button
+          v-if="showSaveButton"
+          class="save-button"
+          type="primary"
+          @click="ok"
+        >
+          {{ saveButtonText }}
+        </van-button>
+        <van-button class="close-button" @click="close">
+          {{ closeButtonText }}
+        </van-button>
+      </div>
+    </div>
+  </van-popup>
+</template>
+
+<style lang="less">
+/* 全局样式，不使用scoped */
+body.receipt-modal-open {
+  overflow: hidden !important;
+  position: fixed !important;
+  width: 100% !important;
+  height: 100% !important;
+  left: 0 !important;
+  /* top设置由JS动态控制 */
+}
+</style>
+
+<style lang="less" scoped>
+.receipt-modal {
+  z-index: 1000;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.receipt-modal-container {
+  display: flex;
+  flex-direction: column;
+  max-height: 80vh;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+.receipt-modal-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.receipt-modal-title-container {
+  text-align: center;
+}
+
+.receipt-modal-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.receipt-modal-subtitle {
+  font-size: 14px;
+  color: #666;
+  margin-top: 4px;
+}
+
+.receipt-modal-content {
+  flex: 1;
+  overflow-y: auto;
+  max-height: 50vh;
+}
+
+.receipt-modal-footer {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 16px;
+  padding-bottom: 8px;
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.save-button,
+.close-button {
+  flex: 1;
+  height: 36px;
+  font-size: 14px;
+  max-width: 120px;
+}
+
+.print-list-item {
+  padding: 8px 0;
+  // border-bottom: 1px solid #eee;
+}
+</style>

package/src/components/common/otherCharge/index.ts

@@ -0,0 +1,43 @@
+import CardContainer from '@af-mobile-client-vue3/components/data/CardContainer/CardContainer.vue'
+import CardHeader from '@af-mobile-client-vue3/components/data/CardContainer/CardHeader.vue'
+import ChargePrintSelectorAndRemarks from './ChargePrintSelectorAndRemarks.vue'
+import CodePayment from './CodePayment.vue'
+import FileUploader from './FileUploader.vue'
+// import FormField from './FormField.vue'
+import GridFileUploader from './GridFileUploader.vue'
+// import InfoCard from './InfoCard.vue'
+import PaymentMethodSelector from './PaymentMethodSelector.vue'
+import PaymentMethodSelectorCard from './PaymentMethodSelectorCard.vue'
+import ReceiptModal from './ReceiptModal.vue'
+// import SafetyGuideModal from './SafetyGuideModal.vue'
+
+export {
+  CardContainer,
+  CardHeader,
+  ChargePrintSelectorAndRemarks,
+  CodePayment,
+  FileUploader,
+  // FormField,
+  GridFileUploader,
+  // InfoCard,
+  PaymentMethodSelector,
+  PaymentMethodSelectorCard,
+  ReceiptModal,
+  // SafetyGuideModal,
+}
+
+export default {
+  install(app: any) {
+    app.component('CardContainer', CardContainer)
+    app.component('CardHeader', CardHeader)
+    // app.component('FormField', FormField)
+    // app.component('InfoCard', InfoCard)
+    app.component('PaymentMethodSelector', PaymentMethodSelector)
+    app.component('PaymentMethodSelectorCard', PaymentMethodSelectorCard)
+    app.component('ChargePrintSelectorAndRemarks', ChargePrintSelectorAndRemarks)
+    app.component('FileUploader', FileUploader)
+    app.component('GridFileUploader', GridFileUploader)
+    app.component('ReceiptModal', ReceiptModal)
+    // app.component('SafetyGuideModal', SafetyGuideModal)
+  },
+}