init
This commit is contained in:
zzc
66
src/views/mall/pay/components/Step1.vue
Normal file
66
src/views/mall/pay/components/Step1.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" label-width="120px" :model="form" :rules="rules">
|
||||
<el-form-item label-width="0">
|
||||
<el-alert show-icon>请务必仔细填写并核对</el-alert>
|
||||
</el-form-item>
|
||||
<el-form-item label="付款账户" prop="payAccount">
|
||||
<el-input v-model="form.payAccount" />
|
||||
</el-form-item>
|
||||
<el-form-item label="收款账户" prop="gatheringAccount">
|
||||
<el-input v-model="form.gatheringAccount" />
|
||||
</el-form-item>
|
||||
<el-form-item label="收款人姓名" prop="gatheringName">
|
||||
<el-input v-model="form.gatheringName" />
|
||||
</el-form-item>
|
||||
<el-form-item label="转账金额" prop="price">
|
||||
<el-input v-model="form.price" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="pay-button-group">
|
||||
<el-button type="primary" @click="handleSubmit">下一步</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
payAccount: 'XXXXXXXXXXXXXXXX',
|
||||
gatheringAccount: '',
|
||||
gatheringName: 'zxwk1998',
|
||||
price: '100',
|
||||
},
|
||||
rules: {
|
||||
payAccount: [{ required: true, message: '请选择付款账户', trigger: 'blur' }],
|
||||
gatheringAccount: [
|
||||
{ required: true, message: '请输入收款账户', trigger: 'blur' },
|
||||
{ type: 'email', message: '账户名应为邮箱格式', trigger: 'blur' },
|
||||
],
|
||||
gatheringName: [{ required: true, message: '请输入收款人姓名', trigger: 'blur' }],
|
||||
price: [
|
||||
{ required: true, message: '请输入转账金额', trigger: 'blur' },
|
||||
{ pattern: /^(\d+)((?:\.\d+)?)$/, message: '请输入合法金额数字' },
|
||||
],
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.$emit('change-step', 2, this.form)
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.pay-button-group {
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
78
src/views/mall/pay/components/Step2.vue
Normal file
78
src/views/mall/pay/components/Step2.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form ref="form" label-width="120px" :model="form" :rules="rules">
|
||||
<el-form-item label-width="0">
|
||||
<el-alert show-icon>确认转账后，资金将直接打入对方账户，无法退回。</el-alert>
|
||||
</el-form-item>
|
||||
<el-form-item label="付款账户：">
|
||||
{{ infoData.payAccount }}
|
||||
</el-form-item>
|
||||
<el-form-item label="收款账户：">
|
||||
{{ infoData.gatheringAccount }}
|
||||
</el-form-item>
|
||||
<el-form-item label="收款人姓名：">
|
||||
{{ infoData.gatheringName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="转账金额：">
|
||||
<strong>
|
||||
{{ infoData.price }}
|
||||
</strong>
|
||||
</el-form-item>
|
||||
<el-form-item label="支付密码：" prop="password">
|
||||
<el-input v-model="form.password" type="password" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="pay-button-group">
|
||||
<el-button :loading="loading" type="primary" @click="handleSubmit">提交</el-button>
|
||||
<el-button @click="handlePrev">上一步</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
infoData: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
password: '123456',
|
||||
},
|
||||
rules: {
|
||||
password: [{ required: true, message: '请输入支付密码', trigger: 'blur' }],
|
||||
},
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.$emit('change-step', 3)
|
||||
this.loading = false
|
||||
}, 2000)
|
||||
} else {
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
handlePrev() {
|
||||
this.$emit('change-step', 1)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.pay-button-group {
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
93
src/views/mall/pay/components/Step3.vue
Normal file
93
src/views/mall/pay/components/Step3.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="pay-top-content">
|
||||
<vab-icon class="pay-success" :icon="['fas', 'check-circle']" />
|
||||
<p>支付成功</p>
|
||||
</div>
|
||||
<el-form ref="form" class="pay-bottom" label-width="120px" :model="form" :rules="rules">
|
||||
<el-form-item label="付款账户：">
|
||||
{{ infoData.payAccount }}
|
||||
</el-form-item>
|
||||
<el-form-item label="收款账户：">
|
||||
{{ infoData.gatheringAccount }}
|
||||
</el-form-item>
|
||||
<el-form-item label="收款人姓名：">
|
||||
{{ infoData.gatheringName }}
|
||||
</el-form-item>
|
||||
<el-form-item label="转账金额：">
|
||||
<strong>
|
||||
{{ infoData.price }}
|
||||
</strong>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="pay-button-group">
|
||||
<el-button type="primary" @click="handlePrev">再转一笔</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
infoData: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
password: '123456',
|
||||
},
|
||||
rules: {
|
||||
password: [{ required: true, message: '请输入支付密码', trigger: 'blur' }],
|
||||
},
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSubmit() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true
|
||||
setTimeout(() => {
|
||||
this.$emit('change-step', 3)
|
||||
this.loading = false
|
||||
}, 2000)
|
||||
} else {
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
handlePrev() {
|
||||
this.$emit('change-step', 1)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.pay-top-content {
|
||||
text-align: center;
|
||||
|
||||
.pay-success {
|
||||
display: block;
|
||||
margin: 20px auto 5px auto;
|
||||
font-size: 40px;
|
||||
color: $base-color-green;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-bottom {
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
background: #f5f7f8;
|
||||
border: 1px dashed $base-color-gray;
|
||||
}
|
||||
|
||||
.pay-button-group {
|
||||
display: block;
|
||||
margin: 20px auto;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
53
src/views/mall/pay/index.vue
Normal file
53
src/views/mall/pay/index.vue
Normal file
@@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="pay-container">
|
||||
<el-row :gutter="20">
|
||||
<el-col
|
||||
:lg="{ span: 14, offset: 5 }"
|
||||
:md="{ span: 20, offset: 2 }"
|
||||
:sm="{ span: 20, offset: 2 }"
|
||||
:xl="{ span: 12, offset: 6 }"
|
||||
:xs="24"
|
||||
>
|
||||
<el-steps :active="active" align-center class="steps" :space="200">
|
||||
<el-step title="填写转账信息" />
|
||||
<el-step title="确认转账信息" />
|
||||
<el-step title="完成" />
|
||||
</el-steps>
|
||||
<step1 v-if="active === 1" @change-step="handleSetStep" />
|
||||
<step2 v-if="active === 2" :info-data="form" @change-step="handleSetStep" />
|
||||
<step3 v-if="active === 3" :info-data="form" @change-step="handleSetStep" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Step1 from './components/Step1'
|
||||
import Step2 from './components/Step2'
|
||||
import Step3 from './components/Step3'
|
||||
|
||||
export default {
|
||||
name: 'Pay',
|
||||
components: { Step1, Step2, Step3 },
|
||||
data() {
|
||||
return {
|
||||
active: 1,
|
||||
form: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetStep(active, form) {
|
||||
this.active = active
|
||||
if (form) this.form = Object.assign(this.form, form)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.pay-container {
|
||||
.steps {
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user