前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >uni-app提交表单成功之后跳转首页

uni-app提交表单成功之后跳转首页

作者头像
王小婷
发布2020-01-15 16:59:14
2.7K0
发布2020-01-15 16:59:14
举报
文章被收录于专栏:编程微刊编程微刊

功能需求: 1:填写表单内容,点击提交审批按钮,提交成功之后,弹出弹框,提示已经提交成功。2:提交成功之后,两秒钟之后自动跳转到首页

主要函数:

代码语言:javascript
复制
sub() {
                uni.showToast({
                    title: '上传成功',
                    icon: 'success',
                    duration: 1000
                })

                setTimeout(() => {
                    uni.switchTab({
                        url: "../main",

                    });
                }, 600);
            },

参考代码:

代码语言:javascript
复制
<template>
    <view>
        <form>
            <view class="cu-form-group margin-top">
                <view class="title">补卡原因</view>
                <picker @change="PickerChange" :value="index" :range="picker">
                    <view class="picker">
                        {{index>-1?picker[index]:'出差'}}
                    </view>
                </picker>
            </view>
            <!-- #endif -->
            <view class="cu-form-group">
                <view class="title">时间选择</view>
                <picker mode="time" :value="time" start="09:01" end="21:01" @change="TimeChange">
                    <view class="picker">
                        {{time}}
                    </view>
                </picker>
            </view>
            <view class="cu-form-group">
                <view class="title">日期选择</view>
                <picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
                    <view class="picker">
                        {{date}}
                    </view>
                </picker>
            </view>
            <view class="cu-form-group align-start">
                <view class="title">补卡事由</view>
                <textarea maxlength="-1" :disabled="modalName!=null" @input="textareaBInput" placeholder="多行文本输入框"></textarea>
            </view>
            <view class="uni-btn-v uni-common-mt">
                <button class="btn-submit" formType="submit" type="primary" @click="sub">提交审批</button>
            </view>
        </form>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                index: -1,
                picker: ['出差', '年休', '忘记打卡', '病假', '事假', '外勤'],
                // multiIndex: [0, 0, 0],
                time: '12:01',
                date: '2018-12-25',
                modalName: null,
                textareaBValue: ''
            };
        },
        methods: {
            PickerChange(e) {
                this.index = e.detail.value
            },

            sub() {
                uni.showToast({
                    title: '上传成功',
                    icon: 'success',
                    duration: 1000
                })

                setTimeout(() => {
                    uni.switchTab({
                        url: "../main",

                    });
                }, 600);
            },
            TimeChange(e) {
                this.time = e.detail.value
            },
            DateChange(e) {
                this.date = e.detail.value
            },
            textareaBInput(e) {
                this.textareaBValue = e.detail.value
            }
        }
    }
</script>

<style>
    .cu-form-group .title {
        min-width: calc(4em + 15px);
    }

    .btn-submit {
        background-color: #1C2A86;
        margin: 100upx 20upx;
        color: #fff;

    }
</style>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档