af-mobile-client-vue3 1.4.67 → 1.4.69

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

@@ -1,202 +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>
+<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

@@ -1,45 +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>
+<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>