结果页组件
注意事项
- 结果页可包含错误页面,操作成功提示页等多种类型
- 结果页可配置标题,描述与提示图片
效果
使用方法
<template>
<div class="wxc-demo">
<lc-result :icon="icon"
:title="title"
:desc="desc"
padding-top="116"
@onResultClick="resultClicked"
class="result"
></lc-result>
</div>
</template>
<style scoped>
.wxc-demo {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background-color: #fff;
}
.result{
background-color: rgb(242, 243, 244);
}
</style>
<script>
import TYPE from 'result.js';
export default {
data: () => ({
icon: TYPE['error']['icon'],
title: TYPE['error']['title'],
desc: TYPE['error']['desc'],
}),
methods: {
resultClicked (e) {
this.$toast.text(`${e.title}`);
}
}
};
</script>
result.js
export default {
success: {
icon: 'https://dqloa7ej5.lightyy.com/images/lightui/error.png',
desc: '付款成功,请耐心等待商品发货',
title: '付款成功'
},
error: {
icon: 'https://dqloa7ej5.lightyy.com/images/lightui/error.png',
desc: '银行卡余额不足',
title: '付款失败'
},
warning: {
icon: 'https://dqloa7ej5.lightyy.com/images/lightui/error.png',
desc: '哎呀,没有网络了......',
title: '付款异常'
}
}
可配置参数
Prop | Type | Required | Default | Description |
---|---|---|---|---|
data |
Object |
Y |
- |
结果页包含的标题,描述与图片 |
data
中包含title
,desc
,icon
。