<x-button type="default" @click.native="bck()">返回(回传参数)</x-button>
</flexbox-item>
</flexbox>
</box>
</group>
</template>
<script type="text/ecmascript-6">
import demoMixin from '../demo-mixin'
import { paramsStack } from 'vue-viewplus'
import { XInput, FormPreview, Flexbox, FlexboxItem } from 'vux'
export default {
mixins: [paramsStack, demoMixin],
components: {
FormPreview,
Flexbox,
FlexboxItem,
XInput
},
data() {
return {
// 1. 回显上一个页面录入的手机号
list: [
{
label: '手机号',
value: ''
}
],
// 2. 自定义需要传递到下一个页面的参数
dataParams: {
phoneNumb: '',
amount: '50元'
}
}
},
methods: {
/**
* 4.提交表单方式1
* 如果需要下一个页面点击返回，任然要回显当前页面，就调用该方法
* /
next() {
this.$vp.psPageNext('/Demo/PageStack/Page4', { params: this.dataParams })
},
/**
* 4.提交表单方式2
* 一般确认页面都无需被“保留”，故这里使用`this.$vp.psPageReplace`接口完成跳转，底层将会使用
* `router.replace({location})`完成跳转
*/
replace() {
this.$vp.psPageReplace('/Demo/PageStack/Page4', {params: this.dataParams})
},
bck() {
this.$vp.psPageGoBack({
// 3.设置回传参数
backParams: {
phoneNumb: '13222222222'
}
})
}
},
created() {
this.list[0].value = this.params.phoneNumb
this.dataParams.phoneNumb = this.params.phoneNumb
}
}
</script>
表单结果页面(简称：Page4)
<template>
<div>
<msg title="操作成功" :description="description" :buttons="buttons"></msg>
</div>
</template>
<script type="text/ecmascript-6">
import demoMixin from '../demo-mixin'
import { paramsStack } from 'vue-viewplus'
import { FormPreview, Msg } from 'vux'
export default {
mixins: [paramsStack, demoMixin],
components: {
FormPreview,
Msg
},
data() {
return {
description: '',
buttons: [{
type: 'primary',
text: '在做一笔',
onClick: ((that) => {
return () => {
// 返回栈顶页面
that.$vp.psPageGoBack()
}
})(this)
}, {
type: 'default',
text: '完成',
onClick: ((that) => {
return () => {
// 返回指定页面，并清空参数栈
// that.$vp.psPageGoBack({
// backPopPageNumbs: -2,
// clearParamsStack: true
// })
that.$vp.psPageNext('/Demo', {
