✨ 新增分步表单模板
This commit is contained in:
sc
parent
c7c39aff03
commit
b374691a8b
|
|
@ -4,7 +4,7 @@ import http from "@/utils/request"
|
|||
export default {
|
||||
menu: {
|
||||
myMenus: {
|
||||
url: `${config.API_URL}/system/menu/my/1.4.0`,
|
||||
url: `${config.API_URL}/system/menu/my/1.4.1`,
|
||||
name: "获取我的菜单",
|
||||
get: async function(){
|
||||
return await http.get(this.url);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,150 @@
|
|||
<template>
|
||||
<el-main>
|
||||
<el-card shadow="never" header="分步表单">
|
||||
<el-steps :active="active" align-center style="margin-bottom: 20px;">
|
||||
<el-step title="填写转账信息"></el-step>
|
||||
<el-step title="确认转账信息"></el-step>
|
||||
<el-step title="完成"></el-step>
|
||||
</el-steps>
|
||||
<el-row>
|
||||
<el-col :lg="{span: 8, offset: 8}">
|
||||
<el-form v-if="active==0" ref="stepForm_0" :model="form" :rules="rules" label-position="top">
|
||||
<el-form-item label="付款账户" prop="paymentAccount">
|
||||
<el-select v-model="form.paymentAccount" clearable>
|
||||
<el-option label="sakuya@scui.com" value="sakuya@scui.com"></el-option>
|
||||
<el-option label="lolicode@scui.com" value="lolicode@scui.com"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="收款账户" prop="collectionAccount">
|
||||
<el-input v-model="form.collectionAccount" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="收款人姓名" prop="collectionName">
|
||||
<el-input v-model="form.collectionName" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="转账金额" prop="amount">
|
||||
<el-input v-model="form.amount"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-form v-if="active==1" ref="stepForm_1" :model="form" :rules="rules" label-position="top">
|
||||
<el-alert title="确认转账后，资金将直接打入对方账户，无法退回。" type="warning" show-icon style="margin-bottom: 15px;"/>
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="付款账户">{{form.paymentAccount}}</el-descriptions-item>
|
||||
<el-descriptions-item label="收款账户">{{form.collectionAccount}}</el-descriptions-item>
|
||||
<el-descriptions-item label="收款人姓名">{{form.collectionName}}</el-descriptions-item>
|
||||
<el-descriptions-item label="转账金额">{{form.amount}} 元</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
<el-divider></el-divider>
|
||||
<el-form-item label="支付密码" prop="payPassword">
|
||||
<el-input v-model="form.payPassword" show-password placeholder="请输入"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div v-if="active==2">
|
||||
<el-result icon="success" title="操作成功" sub-title="预计两小时内到账">
|
||||
<template #extra>
|
||||
<el-button type="primary" @click="again">再转一笔</el-button>
|
||||
<el-button>查看账单</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
</div>
|
||||
<el-button v-if="active>0 && active<2" @click="pre" :disabled="submitLoading">上一步</el-button>
|
||||
<el-button v-if="active<1" type="primary" @click="next">下一步</el-button>
|
||||
<el-button v-if="active==1" type="primary" @click="submit" :loading="submitLoading">提交</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'stepform',
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
submitLoading: false,
|
||||
form: {
|
||||
paymentAccount: 'lolicode@scui.com',
|
||||
collectionAccount: 'test@example.com',
|
||||
collectionName: 'Lolowan',
|
||||
amount: '100',
|
||||
payPassword: ''
|
||||
},
|
||||
rules: {
|
||||
paymentAccount: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择付款账户',
|
||||
}
|
||||
],
|
||||
collectionAccount: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入收款账户',
|
||||
}
|
||||
],
|
||||
collectionName: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入收款人姓名',
|
||||
}
|
||||
],
|
||||
amount: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入转账金额',
|
||||
}
|
||||
],
|
||||
payPassword: [
|
||||
{
|
||||
required: true,
|
||||
message: '需要支付密码才能进行支付',
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//下一步
|
||||
next(){
|
||||
const formName = `stepForm_${this.active}`
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.active += 1
|
||||
}else{
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
//上一步
|
||||
pre(){
|
||||
this.active -= 1
|
||||
},
|
||||
//提交
|
||||
submit(){
|
||||
const formName = `stepForm_${this.active}`
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.submitLoading = true
|
||||
setTimeout(()=>{
|
||||
this.submitLoading = false
|
||||
this.active += 1
|
||||
},1000)
|
||||
}else{
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
//再来一次
|
||||
again(){
|
||||
this.active = 0
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-steps:deep(.is-finish) .el-step__line {background: var(--el-color-primary);}
|
||||
</style>
|
||||
Loading…
Reference in New Issue