print-wrapper.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <view class="pd-24">
  3. <up-form class="p-rtv bg-#fff" labelPosition="top" :model="form" :rules="rules" labelWidth="auto"
  4. ref="upFormRef">
  5. <view>
  6. <image src="" mode="widthFix" />
  7. </view>
  8. <up-form-item label="打印规格" prop="printSpec" required>
  9. <ut-radio :options="specs" v-model="form.printSpec"></ut-radio>
  10. </up-form-item>
  11. <up-form-item :label="`打印数量:${printCount}`"></up-form-item>
  12. </up-form>
  13. <view>
  14. <up-button :disabled="!form.printSpec" @click="printClick" class="mb-24" type="primary">确认打印</up-button>
  15. <up-button @click="clickPrintTest" :disabled="!form.printSpec" class="mb-24" color="#18BECA">打印测试</up-button>
  16. <up-button @click="prevSteps" type="primary" plain>上一步</up-button>
  17. </view>
  18. </view>
  19. </template>
  20. <script lang="ts" setup>
  21. const emit = defineEmits(['test', 'prev', 'print']);
  22. const props = defineProps({
  23. info: {
  24. type: Object,
  25. required: true
  26. },
  27. nextStepValue: {
  28. type: String,
  29. default: 'print'
  30. },
  31. prevStepValue: {
  32. type: String,
  33. default: 'connect'
  34. },
  35. printCount: {
  36. type: Number,
  37. default: 1
  38. }
  39. });
  40. const specs = reactive([
  41. {
  42. label: '60 X 60',
  43. value: '60x60'
  44. },
  45. {
  46. label: '60 X 40',
  47. value: '60x40'
  48. },
  49. {
  50. label: '30 X 30',
  51. value: '30x30'
  52. }
  53. ])
  54. const form = ref<any>({
  55. printSpec: '',
  56. });
  57. const rules = reactive({
  58. printSpec: [{ required: true, message: '请选择打印规格' }],
  59. });
  60. // 点击打印测试
  61. const clickPrintTest = () => {
  62. if (!form.value.printSpec) {
  63. return uni.showToast({ icon: 'none', title: '请选择打印规格' });
  64. }
  65. emit('test', form.value)
  66. }
  67. const printClick = () => {
  68. if (!form.value.printSpec) {
  69. return uni.showToast({ icon: 'none', title: '请选择打印规格' });
  70. }
  71. emit('print', form.value)
  72. };
  73. const prevSteps = () => {
  74. emit('prev', {
  75. prevStepValue: props.prevStepValue || 'confirm',
  76. });
  77. };
  78. </script>