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

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

功能需求:

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

主要函数:

sub() {
                uni.showToast({
                    title: '上传成功',
                    icon: 'success',
                    duration: 1000
                })
                setTimeout(() => {
                    uni.switchTab({
                        url: "../main",
                    });
                }, 600);
            },

参考代码:

<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>
相关文章
|
7月前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转企业微信客户聊天窗口如何操作?
|
Swift iOS开发 开发者
iOS - 跳转App Store下载 app 的两种方式
iOS - 跳转App Store下载 app 的两种方式
2274 0
iOS - 跳转App Store下载 app 的两种方式
|
移动开发 安全 PHP
微信分享和微信H5跳转到APP开放标签wx-open-launch-app使用及样式设置
微信分享和微信H5跳转到APP开放标签wx-open-launch-app使用及样式设置
1525 0
|
3月前
|
小程序 开发工具
app跳转微信小程序,使用明文scheme拉起
app跳转微信小程序,使用明文scheme拉起
659 4
路由不跳转,只留在首页,写的样式写到了App.vue中,没使用router-view
路由不跳转,只留在首页,写的样式写到了App.vue中,没使用router-view
路由不跳转,只留在首页,写的样式写到了App.vue中,没使用router-view
|
7月前
|
XML JSON Java
Android App网络通信中通过okhttp调用HTTP接口讲解及实战(包括GET、表单格式POST、JSON格式POST 附源码)
Android App网络通信中通过okhttp调用HTTP接口讲解及实战(包括GET、表单格式POST、JSON格式POST 附源码)
1014 0
|
7月前
|
Java C# Android开发
Xamarin.Android | 界面跳转到手机自带的自启动管理界面,引导用户将APP加入自启动
为了帮助用户在使用 APP 时提高其稳定性和使用体验,有时候我们需要让安卓手机的界面跳转到手机自带的自启动管理界面,以此来引导用户将 APP 加入自启动,确保应用程序在后台运行时不被系统杀死,从而保证应用程序服务的稳定性和可靠性。同时,这也可以提高用户的使用体验,使用户能够更好地享受应用程序的功能和服务。
369 0
Xamarin.Android | 界面跳转到手机自带的自启动管理界面,引导用户将APP加入自启动
|
JSON JavaScript 前端开发
uni-app渲染新闻列表,跳转详情页
uni-app渲染新闻列表,跳转详情页
165 1
|
7月前
|
Android开发
Android Studio APP开发入门之活动Activity中启停活动页面的讲解及实战(附源码,包括Activity的启动结束、生命周期、跳转等)
Android Studio APP开发入门之活动Activity中启停活动页面的讲解及实战(附源码,包括Activity的启动结束、生命周期、跳转等)
131 0
|
7月前
|
移动开发 小程序
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?
微信小程序web-view嵌入uni-app H5页面,通过H5页面跳转其他小程序如何操作?

热门文章

最新文章