mirror of
https://github.com/jekip/naive-ui-admin.git
synced 2026-02-12 09:12:28 +08:00
新增示例页面
This commit is contained in:
Ah jung
131
src/views/form/stepForm/Step1.vue
Normal file
131
src/views/form/stepForm/Step1.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<n-form
|
||||
:label-width="90"
|
||||
:model="formValue"
|
||||
:rules="rules"
|
||||
label-placement="left"
|
||||
ref="form1Ref"
|
||||
style="max-width: 500px; margin: 40px auto 0;"
|
||||
>
|
||||
<n-form-item label="付款账户" path="myAccount">
|
||||
<n-select
|
||||
placeholder="请选择付款账户"
|
||||
:options="myAccountList"
|
||||
v-model:value="formValue.myAccount"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="收款账户" path="account">
|
||||
<n-input-group>
|
||||
<n-select
|
||||
placeholder="请选择"
|
||||
:options="accountTypeList"
|
||||
:style="{ width: '20%' }"
|
||||
v-model:value="formValue.accountType"
|
||||
/>
|
||||
<n-input placeholder="请输入收款账户" :style="{ width: '80%' }" v-model:value="formValue.account"/>
|
||||
</n-input-group>
|
||||
|
||||
|
||||
</n-form-item>
|
||||
<n-form-item label="收款人姓名" path="name">
|
||||
<n-input placeholder="请输入收款人姓名" v-model:value="formValue.name"/>
|
||||
</n-form-item>
|
||||
<n-form-item label="转账金额" path="money">
|
||||
<n-input placeholder="请输入转账金额" v-model:value="formValue.money">
|
||||
<template #prefix>
|
||||
<span class="text-gray-400">￥</span>
|
||||
</template>
|
||||
</n-input>
|
||||
</n-form-item>
|
||||
<div style="margin-left:80px">
|
||||
<n-space>
|
||||
<n-button type="primary" @click="formSubmit">下一步</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</n-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
|
||||
const myAccountList = [
|
||||
{
|
||||
label: 'NaiveUiAdmin@163.com',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: 'NaiveUiAdmin@qq.com',
|
||||
value: 2
|
||||
},
|
||||
]
|
||||
|
||||
const accountTypeList = [
|
||||
{
|
||||
label: '微信',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '支付宝',
|
||||
value: 2
|
||||
},
|
||||
]
|
||||
|
||||
export default defineComponent({
|
||||
emits: ['nextStep'],
|
||||
setup(_, { emit }) {
|
||||
const form1Ref: any = ref(null)
|
||||
const message = useMessage()
|
||||
const current = ref(1)
|
||||
|
||||
return {
|
||||
form1Ref,
|
||||
current,
|
||||
formValue: ref({
|
||||
accountType: 1,
|
||||
myAccount: null,
|
||||
account: 'xioama@qq.com',
|
||||
money: "1980",
|
||||
name: 'Ah jung',
|
||||
}),
|
||||
rules: {
|
||||
name: {
|
||||
required: true,
|
||||
message: '请输入收款人姓名',
|
||||
trigger: 'blur'
|
||||
},
|
||||
account: {
|
||||
required: true,
|
||||
message: '请输入收款账户',
|
||||
trigger: 'blur'
|
||||
},
|
||||
money: {
|
||||
required: true,
|
||||
message: '请输入转账金额',
|
||||
trigger: 'blur'
|
||||
},
|
||||
myAccount: {
|
||||
required: true,
|
||||
type: 'number',
|
||||
message: '请选择付款账户',
|
||||
trigger: 'change'
|
||||
},
|
||||
},
|
||||
myAccountList,
|
||||
accountTypeList,
|
||||
formSubmit() {
|
||||
form1Ref.value.validate((errors) => {
|
||||
if (!errors) {
|
||||
emit('nextStep')
|
||||
} else {
|
||||
message.error('验证失败，请填写完整信息')
|
||||
}
|
||||
})
|
||||
},
|
||||
resetForm() {
|
||||
form1Ref.value.restoreValidation()
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
81
src/views/form/stepForm/Step2.vue
Normal file
81
src/views/form/stepForm/Step2.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<n-form
|
||||
:label-width="90"
|
||||
:model="formValue"
|
||||
:rules="rules"
|
||||
label-placement="left"
|
||||
ref="form2Ref"
|
||||
style="max-width: 500px; margin: 40px auto 0;"
|
||||
>
|
||||
<n-form-item label="付款账户" path="myAccount">
|
||||
<span>NaiveUiAdmin@163.com</span>
|
||||
</n-form-item>
|
||||
<n-form-item label="收款账户" path="account">
|
||||
<span>NaiveUiAdmin@qq.com</span>
|
||||
</n-form-item>
|
||||
<n-form-item label="收款人姓名" path="name">
|
||||
<span>Ah jung</span>
|
||||
</n-form-item>
|
||||
<n-form-item label="转账金额" path="money">
|
||||
<span>￥1980</span>
|
||||
</n-form-item>
|
||||
<n-divider/>
|
||||
<n-form-item label="支付密码" path="password">
|
||||
<n-input type="password" v-model:value="formValue.password"/>
|
||||
</n-form-item>
|
||||
<div style="margin-left:80px">
|
||||
<n-space>
|
||||
<n-button type="primary" :loading="loading" @click="formSubmit">提交</n-button>
|
||||
<n-button @click="prevStep">上一步</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</n-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
|
||||
export default defineComponent({
|
||||
emits: ['prevStep', 'nextStep'],
|
||||
setup(_, { emit }) {
|
||||
const form2Ref: any = ref(null)
|
||||
const message = useMessage()
|
||||
const loading = ref(false)
|
||||
|
||||
function prevStep() {
|
||||
emit('prevStep')
|
||||
}
|
||||
|
||||
function formSubmit() {
|
||||
loading.value = true
|
||||
form2Ref.value.validate((errors) => {
|
||||
if (!errors) {
|
||||
setTimeout(() => {
|
||||
emit('nextStep')
|
||||
}, 1500)
|
||||
} else {
|
||||
message.error('验证失败，请填写完整信息')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
form2Ref,
|
||||
loading,
|
||||
formValue: ref({
|
||||
password: '086611'
|
||||
}),
|
||||
rules: {
|
||||
password: {
|
||||
required: true,
|
||||
message: '请输入支付密码',
|
||||
trigger: 'blur'
|
||||
},
|
||||
},
|
||||
prevStep,
|
||||
formSubmit,
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
89
src/views/form/stepForm/Step3.vue
Normal file
89
src/views/form/stepForm/Step3.vue
Normal file
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-result status="success" title="操作成功" description="预计两小时内到账" class="step-result">
|
||||
<template #default>
|
||||
<div class="information">
|
||||
<n-grid cols="2 s:2 m:3 l:3 xl:3 2xl:3" responsive="screen" class="my-1">
|
||||
<n-gi>付款账户：</n-gi>
|
||||
<n-gi>NaiveUiAdmin@163.com</n-gi>
|
||||
</n-grid>
|
||||
<n-grid cols="2 s:2 m:3 l:3 xl:3 2xl:3" responsive="screen" class="my-1">
|
||||
<n-gi>收款账户：</n-gi>
|
||||
<n-gi>xiaoma@qq.com</n-gi>
|
||||
</n-grid>
|
||||
<n-grid cols="2 s:2 m:3 l:3 xl:3 2xl:3" responsive="screen" class="my-1">
|
||||
<n-gi>收款人姓名：</n-gi>
|
||||
<n-gi>啊俊</n-gi>
|
||||
</n-grid>
|
||||
<n-grid cols="2 s:2 m:3 l:3 xl:3 2xl:3" responsive="screen" class="my-1">
|
||||
<n-gi>转账金额：</n-gi>
|
||||
<n-gi>￥<span class="money">1980</span> 元</n-gi>
|
||||
</n-grid>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<div class="flex justify-center">
|
||||
<n-button type="primary" @click="finish" class="mr-4">再转一笔</n-button>
|
||||
<n-button @click="prevStep">查看账单</n-button>
|
||||
</div>
|
||||
</template>
|
||||
</n-result>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
export default defineComponent({
|
||||
emits: ['finish', 'prevStep'],
|
||||
setup(_, { emit }) {
|
||||
const router = useRouter()
|
||||
|
||||
function prevStep() {
|
||||
emit('prevStep')
|
||||
}
|
||||
|
||||
function finish() {
|
||||
emit('finish')
|
||||
}
|
||||
|
||||
function toOrderList() {
|
||||
router.push('/form/step-form')
|
||||
}
|
||||
|
||||
return {
|
||||
prevStep,
|
||||
finish,
|
||||
toOrderList
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.step-result {
|
||||
max-width: 560px;
|
||||
margin: 40px auto 0;
|
||||
|
||||
::v-deep(.n-result-content) {
|
||||
background-color: #fafafa;
|
||||
padding: 24px 40px;
|
||||
}
|
||||
|
||||
.information {
|
||||
line-height: 22px;
|
||||
|
||||
.ant-row:not(:last-child) {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.money {
|
||||
font-family: "Helvetica Neue", sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
76
src/views/form/stepForm/stepForm.vue
Normal file
76
src/views/form/stepForm/stepForm.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="n-layout-page-header">
|
||||
<n-card :bordered="false" title="分步表单">
|
||||
将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
|
||||
</n-card>
|
||||
</div>
|
||||
<n-card :bordered="false" class="proCard mt-4">
|
||||
<n-space vertical class="steps">
|
||||
<n-steps :current="currentTab" :status="currentStatus">
|
||||
<n-step
|
||||
title="填写转账信息"
|
||||
description="确保填写正确"
|
||||
/>
|
||||
<n-step
|
||||
title="确认转账信息"
|
||||
description="确认转账信息"
|
||||
/>
|
||||
<n-step
|
||||
title="完成"
|
||||
description="恭喜您，转账成功"
|
||||
/>
|
||||
</n-steps>
|
||||
<step1 v-if="currentTab === 1" @nextStep="nextStep"/>
|
||||
<step2 v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep"/>
|
||||
<step3 v-if="currentTab === 3" @prevStep="prevStep" @finish="finish"/>
|
||||
</n-space>
|
||||
</n-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import step1 from './Step1.vue'
|
||||
import step2 from './Step2.vue'
|
||||
import step3 from './Step3.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: { step1, step2, step3 },
|
||||
setup() {
|
||||
const currentTab = ref(1)
|
||||
const currentStatus = ref('process')
|
||||
|
||||
function nextStep() {
|
||||
if (currentTab.value < 3) {
|
||||
currentTab.value += 1
|
||||
}
|
||||
}
|
||||
|
||||
function prevStep() {
|
||||
if (currentTab.value > 1) {
|
||||
currentTab.value -= 1
|
||||
}
|
||||
}
|
||||
|
||||
function finish() {
|
||||
currentTab.value = 1
|
||||
}
|
||||
|
||||
return {
|
||||
currentTab,
|
||||
currentStatus,
|
||||
nextStep,
|
||||
prevStep,
|
||||
finish
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.steps {
|
||||
max-width: 750px;
|
||||
margin: 16px auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user