relatedFlow.vue 3.24 KB
Newer Older
Step_by_step's avatar
Step_by_step committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161
<template>
  <div class="container">
    <NavBar title="关联项目" left-arrow @click-left="lastStep" />

    <div class="content">
      <section class="form-area">
        <template v-if="(step == 1)">
          <AuForm v-model="firstFormConfig" />
        </template>

        <template v-else-if="(step == 2)">
          <Field v-model="tel" type="tel" label="手机号" input-align="right" />
          <Field v-model="sms" center clearable label="验证码" placeholder="请输入短信验证码">
            <template #button>
              <Button size="small" type="primary">获取验证码</Button>
            </template>
          </Field>
        </template>

        <template v-else-if="(step == 3)">
          <AuForm v-model="lastFormConfig" />
        </template>
      </section>

      <section class="sub">
        <Button v-if="(step < 3)" type="primary" block @click="nextStep">下一步</Button>
        <Button v-else type="primary" block @click="nextStep">确认绑定</Button>
      </section>
    </div>
  </div>
</template>

<script setup>
import { goBack } from "@/utils/globalFun"
import { NavBar, Button, Field } from "vant";
import AuForm from '@/components/AuForm.vue';
import AuFormClass from "@/components/useAuForm";


const step = $ref(1);

const firstFormConfig = $ref(new AuFormClass([
  {
    title: '项目编号  ',
    propName: 'paymentReqDate',
    type: 'input',
    value: '',
    isRequired: true
  },
  {
    title: '机型',
    propName: 'nput',
    type: 'input',
    value: '',
    isRequired: true
  },
  {
    title: '机号',
    propName: 'paymentReqDat3e',
    type: 'input',
    value: '',
    isRequired: true
  }
]))
const secondFormConfig = $ref(new AuFormClass([
  {
    title: '合同经办人手机号',
    propName: 'paymentReqDate',
    type: 'input',
    value: '',
    isRequired: true
  },
  {
    title: '验证码',
    propName: 'paymentReqDate',
    type: 'input',
    value: '',
    isRequired: true
  },
]))
const lastFormConfig = $ref(new AuFormClass([
  {
    title: '项目编号',
    propName: 'paymentReqDate',
    type: 'input',
    value: '33333333333333',
    isRequired: true,
    disabled: true
  },
  {
    title: '机型',
    propName: 'paymentReqDate',
    type: 'input',
    value: '洛基亚',
    isRequired: true,
    disabled: true
  },
  {
    title: '机号',
    propName: 'paymentReqDate',
    type: 'input',
    value: '309937',
    isRequired: true,
    disabled: true
  },
  {
    title: '承租人名称',
    propName: 'paymentReqDate',
    type: 'input',
    value: '张三',
    isRequired: true,
    disabled: true
  },
  {
    title: '代理店名称',
    propName: 'paymentReqDate',
    type: 'input',
    value: '将来发扽代理店',
    isRequired: true,
    disabled: true
  },
  {
    title: '融资金额',
    propName: 'paymentReqDate',
    type: 'currency',
    value: '80000000',
    isRequired: true,
    disabled: true
  },
]))

const nextStep = () => {
  if (step < 3) {
    step += 1
  }
}

const lastStep = () => {
  if (step > 1) {
    step -= 1
  } else {
    goBack()
  }
}
</script>

<style lang="less" scoped>
.sub {
  width: 70%;
  margin: 50px auto 5px;
}

.form-area {
  padding: 10px;
}

.content {
  height: calc(100% - var(--van-nav-bar-height));
  overflow-y: auto;
}
</style>