init

uni_modules/nutui-uni/components/invoice/index.scss

@@ -0,0 +1,42 @@
+@import '../button/index';
+@import '../radiogroup/index';
+@import '../radio/index';
+@import '../form/index';
+@import '../formitem/index';
+
+.nut-theme-dark {
+  .nut-invoice {
+    .nut-invoice__submit {
+      background: $dark-background2;
+    }
+  }
+}
+
+.nut-invoice {
+  position: relative;
+  width: 100%;
+
+  .nut-cell {
+    align-items: baseline;
+  }
+
+  &__submit {
+    position: fixed;
+    bottom: 0;
+    bottom: constant(safe-area-inset-bottom);
+    bottom: env(safe-area-inset-bottom);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: $invoice-padding;
+    background: #fff;
+  }
+
+  .nut-radio {
+    display: inline-block;
+    margin-right: 6px;
+    margin-bottom: 0;
+  }
+}

uni_modules/nutui-uni/components/invoice/index.ts

@@ -0,0 +1 @@
+export type * from './invoice'

uni_modules/nutui-uni/components/invoice/invoice.ts

@@ -0,0 +1,32 @@
+import type { ExtractPropTypes } from 'vue'
+import { commonProps, isBoolean, makeArrayProp, truthProp } from '../_utils'
+import type { ErrorMessage } from '../form'
+
+export const invoiceProps = {
+  ...commonProps,
+  /**
+   * @description 发票数据
+   */
+  data: makeArrayProp<any>([]),
+  /**
+   * @description 表单数据对象(使用表单校验时，_必填_)
+   */
+  formValue: {
+    type: Object,
+    require: true,
+    default: {},
+  },
+  /**
+   * @description 是否显示提交按钮
+   */
+  submit: truthProp,
+}
+
+export type InvoiceProps = ExtractPropTypes<typeof invoiceProps>
+
+export const invoiceEmits = {
+  onSubmit: (valid: boolean | object, errors: (boolean | ErrorMessage)[]) => (isBoolean(valid) || valid instanceof Object) && (isBoolean(errors) || errors instanceof Object),
+  scrollBottom: () => true,
+}
+
+export type InvoiceEmits = typeof invoiceEmits

uni_modules/nutui-uni/components/invoice/invoice.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, defineComponent, onMounted, ref, watch } from 'vue'
+import { PREFIX } from '../_constants'
+import { getMainClass } from '../_utils'
+import NutButton from '../button/button.vue'
+import type { FormInst } from '../form'
+import NutForm from '../form/form.vue'
+import NutFormItem from '../formitem/formitem.vue'
+import NutRadio from '../radio/radio.vue'
+import NutRadioGroup from '../radiogroup/radiogroup.vue'
+import { invoiceEmits, invoiceProps } from './invoice'
+
+const props = defineProps(invoiceProps)
+
+const emit = defineEmits(invoiceEmits)
+const formRef = ref<FormInst>()
+
+const list: any = ref([])
+
+const classes = computed(() => {
+  return getMainClass(props, componentName)
+})
+
+onMounted(() => {
+  init()
+})
+
+function init() {
+  list.value = props.data
+}
+
+function submitFun() {
+  formRef.value?.validate().then(({ valid, errors }) => {
+    emit('onSubmit', valid, errors)
+  })
+}
+
+watch(
+  () => props.data,
+  () => init(),
+  { deep: true },
+)
+</script>
+
+<script lang="ts">
+const componentName = `${PREFIX}-invoice`
+
+export default defineComponent({
+  name: componentName,
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared',
+  },
+})
+</script>
+
+<template>
+  <view :class="classes" :style="customStyle">
+    <NutForm ref="formRef" :model-value="formValue">
+      <NutFormItem
+        v-for="(item, index) of list"
+        :key="index"
+        :label="item.label"
+        :required="item.required"
+        :rules="item.rules"
+        :prop="item.formItemProp"
+      >
+        <template v-if="item.type === 'radio'">
+          <NutRadioGroup v-model="formValue[item.formItemProp]">
+            <NutRadio
+              v-for="(radioItem, radioIndex) of item.radioLabel"
+              :key="radioIndex"
+              shape="button"
+              :label="radioItem.label"
+            >
+              {{ radioItem.label }}
+            </NutRadio>
+          </NutRadioGroup>
+        </template>
+        <template v-else>
+          <input
+            v-model="formValue[item.formItemProp]"
+            class="nut-input-text"
+            :placeholder="item.placeholder"
+            type="text"
+          >
+        </template>
+      </NutFormItem>
+    </NutForm>
+    <div v-if="submit" class="nut-invoice__submit">
+      <NutButton type="primary" block @click="submitFun">
+        提交审批
+      </NutButton>
+    </div>
+  </view>
+</template>
+
+<style lang="scss">
+@import './index';
+</style>