page-query-form 查询类服务模板

解释：本模板适用于成绩查询、证书查询等查询类服务项开发工作，模板内包含的组件丰富，覆盖大多数查询类服务项场景，开发者仅需通过调整组件属性以及排序即可快速完成前端开发工作。

扫码体验

代码示例

请使用百度APP扫码

模板包含两个页面：查询参数填写页、。

包括信息输入操作常用组件，例如输入框、日期选择器、位置选择器等，同时结合政务查询类服务特性，模板内包含了弹窗组件，当用户进入服务页面时，可通过弹窗对用户进行强提醒，加强信息的触达效果，保障用户办理查询类服务时的使用体验。

页面路径：pages/index/index

代码示例

• SWAN
• JSON

    "navigationBarTitleText": "标题文字",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "dark",
    "usingComponents": {
        "gov-picker": "@smt-ui/component-gov/src/picker",
        "gov-notice-bar": "@smt-ui/component-gov/src/notice-bar",
        "gov-sms-input": "@smt-ui/component-gov/src/sms-input",
        "gov-prompt": "@smt-ui/component-gov/src/prompt",
        "gov-captcha": "@smt-ui/component-gov/src/captcha",
        "gov-button": "@smt-ui/component-gov/src/button",
        "gov-input": "@smt-ui/component-gov/src/input"
    }
}

• 页面初始化。可进行办理前提示和初始化数据等操作

• JS

onLoad() {
    // 初始化图形验证码
    this.reloadImg();
    // 办理前提示
    swan.showModal({
        title: '提示',
        content: '此弹窗可在业务办理前对用户进行预先提醒',
        showCancel: false,
        confirmText: '我知道了'
    });
}

• 输入框事件。包含普通输入框、密码输入框、身份证输入框、手机号输入框、短信验证码输入框、图形验证码输入框。

• JS

/**
 * 输入框的 input 事件
 *
 * @param {Event} e 事件对象
 */
bindInput(e) {
    // 将 input 输入的值赋给 model 中对应属性的 iptValue 字段， 用于后续校验和提交表单使用
    this.setData({
        ['model.' + e.currentTarget.dataset.id + '.iptValue']: e.detail.iptvalue
    });
    // 每次输入完成时判断查询按钮是否高亮显示
    this.buttonImportant({});
}
/**
 * 输入框的 blur 事件，失焦时通过 validata 方法对当前输入框的值进行校验
 *
 * @param {Event} e 事件对象
 */
bindBlur(e) {
    let iptvalue = e.detail.iptvalue;
    let iptid = e.currentTarget.dataset.id;
    let rulse = this.data.model[iptid].rulse;
    this.validata(rulse, iptvalue, iptid);
}
/**
 * 点击输入框右侧清除按钮事件，短信验证码输入框、图形验证码输入框没有该事件
 *
 * @param {Event} e 事件对象
 */
cleanRoad(e) {
    // 清空当前表单内数据
    this.setData({['model.' + e.currentTarget.dataset.id + '.iptValue']: ''});

• 选择器的 change 事件处理。包含普通选择器、日期选择器、地区选择器

• JS

• 点击图形验证码事件

/**
 * 图形验证码的点击事件，可以增加刷新图片验证码或者其他需要的操作
 */
    swan.request({
        // 仅为示例，并非真实的接口地址
        url: 'http://www.baidu.com',
        success: res => {
            this.setData({
                // codeImg 字段根据业务自行调整
                'model.govCaptcha.codeImg': res.data.codeImg
            })
        },
        fail: err => {
            // 接口异常的处理代码
        }
    })
}

• 获取手机验证码事件

• JS

/**
 * 手机号验证码组件点击获取验证码的事件
 */
smssend() {
    // 该方法模拟收到短信验证码的toast效果，实际场景请使用开发者自己的短信验证码服务
    swan.showToast({
        title: '验证码：123456',
        icon: 'none'
    });
}

• 页面下方“温馨提示”的“点击查看”的事件

• JS

/**
 * 页面下方“温馨提示”的 “点击查看” 事件处理
 */
toView() {
    // 此处仅为示例，您可以自定义该事件的逻辑，比如跳转到某个页面等
    swan.navigateTo({url: '/pages/index/index'});
}

• 查询按钮点击事件

• JS

查询结果页

页面用于承载查询结果，将查询结果信息结构化呈现，便于用户阅读理解。
页面路径：pages/result/result

• SWAN
• JSON
• JS

<view class="{{checkFullScreen ? 'container container-bottom' : 'container'}}">
    <smt-page-status
        s-if="{{statePageType}}"
        class="page-status"
        icon="{{statePageConfig[statePageType].icon}}"
        title="{{statePageConfig[statePageType].title}}"
        desc="{{statePageConfig[statePageType].desc}}"
        showBtn="{{statePageConfig[statePageType].showBtn}}"
        smtreloading="{{reLoad}}"
        loading="{{statePageType === 'loading'}}"
    ></smt-page-status>
    <view s-else>
        <gov-page-title title="{{dataList.data.title}}" size="large" hasBorder="{{true}}"></gov-page-title>
        <block s-for="item, index in dataList.data.list">
            <gov-list-item
                label-width="6em"
                label="{{item.name}}"
                gov-label="list-label"
                border
            >
                <view slot="content" class="list-content">
                    <view s-if="{{item.name === '联系电话'}}" class="phone">
                        <text
                            bindtap="callPhone"
                            data-phoneNum="{{ele}}"
                        >{{ele}} </text>
                    </view>
                    <gov-text-collapse
                        s-else
                        text="{{item.value}}"
                        gov-text-collapse-content="list-text"
                    ></gov-text-collapse>
                </view>
            </gov-list-item>
        </block>
        <view class="prompt">
            <gov-prompt>
                <view slot="title">温馨提示：</view>
                <view slot="content">
                    这里是温馨提示这里是温馨提示这里是温馨提示这里是温馨提示这里是温馨提示这里是温馨提示
                    <text class="prompt-text" bindtap="toView">点击查看</text>
                </view>
            </gov-prompt>
        </view>
    </view>
</view>

{
    "navigationBarTitleText": "查询结果",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "dark",
    "usingComponents": {
        "gov-page-title":"@smt-ui/component-gov/src/page-title",
        "gov-list-item": "@smt-ui/component-gov/src/list-item",
        "gov-text-collapse": "@smt-ui/component-gov/src/text-collapse",
        "smt-page-status": "@smt-ui/component/src/page-status",
        "gov-prompt": "@smt-ui/component-gov/src/prompt"
    }
}

Page({
    data: {
        // warning 服务开小差、noContent 未查询到信息、noNetwork 无网络、不显示错误页则为空字符串
        statePageType: 'loading'
    },
    onLoad() {
        // 使用定时器模拟请求，模拟 loading 显示两秒钟
        setTimeout(() => {
            this.data.statePageType = '';
        }, 2000)
    },
    /**
     * 点击电话调起拨号
     *
     * @param {Event} e 事件对象
     */
    callPhone(e) {
        swan.makePhoneCall({
            phoneNumber: e.currentTarget.dataset.phoneNum
        });
    },
    /**
     * 页面下方“温馨提示”的 “点击查看” 事件处理
     */
    toView() {
        swan.showToast({
            title: '点击查看',
            icon: 'none'
        });
    }
});

• Tip：该模板使用了 ES6 语法，需要开启开发者工具的增强编译，操作步骤参看；同时也需开启上传代码时样式自动补全。
• Tip：模板中使用的是测试数据，你需要从接口中获取真实的数据。