ctms-client/pages/ctms/order/index/index.vue

<template>
    <view class="content">
        <view class="uni-common-mt uni-form">
            <form @submit="formSubmit" @reset="formReset">
                <view class="uni-form-item ">
                    <view class="title">车牌号:</view>
                    <input class="uni-input" name="carno" v-model="search.carno"
                        :placeholder="'车牌号或车架号,如 '+demoCarno" />
                </view>

                <view class="uni-form-item ">
                    <view class="title">手机号:</view>
                    <input class="uni-input" name="phone" readonly="readonly" disabled="disabled" :value="search.phone"
                        type="text" placeholder="发车人或收车人的手机号" />
                </view>

                <view class="uni-form-item" v-if="false">
                    <view class="title">运单号:</view>
                    <input class="uni-input" name="ordersn" v-model="search.ordersn" type="text"
                        placeholder="完整的运单号码" />
                </view>

                <view class="uni-form-item">
                    <view class="help-block">
                        如果搜索不出结果，可尝试检查一下搜索条件是否正确无误。
                    </view>
                </view>
                <uni-notice-bar text="手机号为自动获取您登陆时使用的手机号，如果需要更换查询用的手机号，请退出账号并使用新手机号登陆."></uni-notice-bar>

                <view class="uni-btn-v">
                    <button class="btn btn-success" form-type="submit">查询</button>
                    <button class="btn btn-error" type="default" form-type="reset">重置</button>
                </view>
            </form>
        </view>

    </view>
</template>

<script>
    import config from "@/config/ctms.config.js";
    import store from '@/store/index.js';
    import utils from "@/utils/common.js";
    import ctms from '@/apis/ctms/index.js';
    export default {
        data() {
            return {
                search: {
                    carno: '',
                    phone: '',
                    ordersn: ''
                },
                demoCarno: config.demoCarno,
                lsIndex: 'OrderSearchTabbar'
            }
        },
        computed: {

        },
        methods: {
            checkLogin() {
                return ctms.user.checkLogin()
            },
            formSubmit: function(e) {
                var _that = this;
                // utils.debug('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))
                //进行表单检查
                var formData = e.detail.value;

                ctms.order.search(formData, 0, 5).then(
                    function(res) {
                        if (res.code == 200) {
                            uni.showToast({
                                title: "查询完成!",
                                icon: "success"
                            });
                            _that.goTo('order/list/list');
                        } else {
                            uni.showToast({
                                title: "没有查询到相关订单!",
                                icon: "fail"
                            });
                        }
                    }
                );
            },
            formReset: function(e) {
                utils.debug('清空数据')
            },
            goTo(page) {
                page = config.pageDir + page;
                uni.navigateTo({
                    url: page
                });
            }

        },
        onLoad() {
            var user = ctms.user.getInfo();
            // var user = store.state.userCloud;
            this.search.phone = user.mobile;
        },
        onShow: function() {}
    }
</script>

<style>
    body {
        background-color: #e6e6e60e;
    }

    radio,
    checkbox,
    switch {
        transform: scale(1.5);
        margin-left: 1rem;
        margin-right: 1rem;
        margin-top: 36rpx;
    }

    input {
        margin-left: 1rem;
        margin-right: 1rem;
        margin-top: 66rpx;
        border-bottom: 1upx #333 dashed;
    }

    .uni-input {
        padding: 0;
    }

    .content {
        padding-bottom: 50rpx;
    }

    .header {
        text-align: center;
    }

    .header>image {
        width: 300rpx;
        height: 300rpx;
    }

    .uni-form {
        width: 94%;
        margin: 0rpx 3% 0 3%;
    }

    .uni-form-item {
        width: 100%;
        display: inline-flex;
        height: 96rpx;
        line-height: 96rpx;
    }

    .uni-form-item .title,
    .uni-form-item .data {}

    /**不生效**/
    .uni-form-item .title {
        width: 150rpx;
        padding: 40rpx 20rpx;
        text-align: justify;
        text-align-last: justify;
    }

    .uni-form .uni-btn-v {
        margin-top: 50rpx;
    }

    .radio {
        width: auto;
    }

    .btn {
        margin: 40rpx 30rpx;
    }

    .btn-success {
        background-color: #09BB07;
        color: #fff;
    }

    .btn-error {
        background-color: #fc0107;
        color: #fff;
    }

    .footer {
        display: block;
        /* width: 100%; */
        font-size: 1rem;
        height: 1rem;
        line-height: 1.5rem;
        margin: 1.5rem;
    }

    .help-block {
        display: block;
        width: 100%;
        color: #666666;
        font-size: 0.8rem;
        line-height: 1rem;
        margin: 1.5rem;
    }
</style>