From b374691a8b4467ec13a7509810615f34b2c4ef10 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Mon, 22 Nov 2021 16:13:03 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E6=96=B0=E5=A2=9E=E5=88=86?=
 =?UTF-8?q?=E6=AD=A5=E8=A1=A8=E5=8D=95=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/model/system.js         |   2 +-
 src/views/template/stepform.vue | 150 ++++++++++++++++++++++++++++++++
 2 files changed, 151 insertions(+), 1 deletion(-)
 create mode 100644 src/views/template/stepform.vue

diff --git a/src/api/model/system.js b/src/api/model/system.js
index d541ae3c..db28e91a 100644
--- a/src/api/model/system.js
+++ b/src/api/model/system.js
@@ -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);
diff --git a/src/views/template/stepform.vue b/src/views/template/stepform.vue
new file mode 100644
index 00000000..df1c6352
--- /dev/null
+++ b/src/views/template/stepform.vue
@@ -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>