更新记录

1.0.2(2023-06-13) 下载此版本

代码优化。

1.0.1(2023-04-12) 下载此版本

  • 这是一个通用的结果页组件,主要是对前一步操作的结果进行反馈。
  • 插件符合uni_modules和easycom规范,导入后可直接在页面通过标签引用。

平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.10 app-vue app-nvue
钉钉小程序 快手小程序 飞书小程序 京东小程序
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

kevy-result-page

介绍

这是一个全端通用的结果页组件,简单的设置完成一个反馈页面展示。 祝您使用愉快,本插件会长期维护更新,开源不易,如果本插件对您有帮助的话请及时点个好评吧或者赞赏一下,总之谢谢您的鼓励啦。

方法和属性

名称 类型 默认值 字段说明
type String 'success' 类型:可选参数为success、info、error、waiting、warning(用于改变顶部图标)
title String '' 标题
description String '' 描述
details Array [] 详细数量列表(可选),内部数据为Object类型,超过三条自动折叠,通过收缩按钮点击查看,数据格式见下方details说明
primarColor String #4fc08d 主题色(背景)
primaryBtnText String '' 底部主要按钮文字,不填不显示主要按钮
secondaryBtnText String '' 底部次要按钮文字,不填不显示次要按钮
primaryBtnClick Event 主要按钮点击事件
secondaryBtnClick Event 次要按钮点击事件

details字段说明(Object对象属性)

名称 类型 说明
label String 字段名
value String 字段值
bold Boolean 是否加粗,默认false

使用方式

插件详情页点击导入hbuilder即可。插件符合uni_modules和easycom规范,导入后可直接在页面通过标签引用。

代码使用示例

<template>
    <view class="content">
        <kevy-result-page v-if="type" :type="type" :title="title" :description="description" :details="details" primaryBtnText="主要操作" secondaryBtnText="次要操作" @primaryBtnClick="primaryBtnClick" @secondaryBtnClick="secondaryBtnClick"></kevy-result-page>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                //类型:可选参数为success、info、error、waiting、warning
                type:'',
                //标题
                title:'',
                //描述
                description:'',
                //详情数据列表
                details:[],
            }
        },
        onLoad() {
            //这里模拟请求到了数据后设置组件
            this.type = 'success';
            this.title = '预约成功';
            this.description = '这里是操作描述,内容会自动换行,建议最多设置两行更佳好';
            this.details = [{
                        label: '预约人',
                        value: '张某某',
                        bold: true,
                    },
                    {
                        label: '预约地点',
                        value: '秦岭野生动物园',
                    },
                    {
                        label: '预约时间',
                        value: '2023/4/8 13:23',
                    },
                    {
                        label: '流水号',
                        value: '1000802909309389',
                    },
                    {
                        label: '备注',
                        value: '携带相关证件享受优惠',
                    }
                ];

        },
        methods: {
            primaryBtnClick(){
                console.log("主要按钮被点击了");
            },
            secondaryBtnClick(){
                console.log("次要按钮被点击了");
            }
        }
    }
</script>

<style scoped>
    .content {
        box-sizing: border-box;
    }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问