129 lines
2.5 KiB
Vue
129 lines
2.5 KiB
Vue
|
<template>
|
||
|
|
<view
|
||
|
|
:style="tools._style([customStyle])"
|
||
|
|
:class="[
|
||
|
|
classPrefix + ' ' + classPrefix + '--theme-' + theme,
|
||
|
|
tClass
|
||
|
|
]"
|
||
|
|
>
|
||
|
|
<view
|
||
|
|
:aria-hidden="true"
|
||
|
|
:class="classPrefix + '__thumb'"
|
||
|
|
>
|
||
|
|
<t-image
|
||
|
|
v-if="image"
|
||
|
|
:t-class="tClassImage"
|
||
|
|
:src="image"
|
||
|
|
mode="aspectFit"
|
||
|
|
/>
|
||
|
|
<block
|
||
|
|
v-else-if="_icon"
|
||
|
|
name="icon"
|
||
|
|
>
|
||
|
|
<t-icon
|
||
|
|
:custom-style="_icon.style || ''"
|
||
|
|
:t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (_icon.activeIdx == _icon.index ? 'active ' : ' ')"
|
||
|
|
:prefix="_icon.prefix"
|
||
|
|
:name="_icon.name"
|
||
|
|
:size="_icon.size"
|
||
|
|
:color="_icon.color"
|
||
|
|
:aria-hidden="!!_icon.ariaHidden"
|
||
|
|
:aria-label="_icon.ariaLabel"
|
||
|
|
:aria-role="_icon.ariaRole"
|
||
|
|
/>
|
||
|
|
</block>
|
||
|
|
<slot name="image" />
|
||
|
|
</view>
|
||
|
|
<view
|
||
|
|
:class="[
|
||
|
|
classPrefix + '__title ',
|
||
|
|
tClassTitle
|
||
|
|
]"
|
||
|
|
>
|
||
|
|
<block v-if="title">
|
||
|
|
{{ title }}
|
||
|
|
</block>
|
||
|
|
<slot name="title" />
|
||
|
|
</view>
|
||
|
|
<view
|
||
|
|
:class="[
|
||
|
|
classPrefix + '__description ',
|
||
|
|
tClassDescription
|
||
|
|
]"
|
||
|
|
>
|
||
|
|
<block v-if="description">
|
||
|
|
{{ description }}
|
||
|
|
</block>
|
||
|
|
<slot name="description" />
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import TIcon from '../icon/icon';
|
||
|
|
import TImage from '../image/image';
|
||
|
|
import { uniComponent } from '../common/src/index';
|
||
|
|
import props from './props';
|
||
|
|
import { prefix } from '../common/config';
|
||
|
|
import { calcIcon } from '../common/utils';
|
||
|
|
import tools from '../common/utils.wxs';
|
||
|
|
|
||
|
|
|
||
|
|
const name = `${prefix}-result`;
|
||
|
|
const THEME_ICON = {
|
||
|
|
default: 'error-circle',
|
||
|
|
success: 'check-circle',
|
||
|
|
warning: 'error-circle',
|
||
|
|
error: 'close-circle',
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
export default uniComponent({
|
||
|
|
name,
|
||
|
|
options: {
|
||
|
|
styleIsolation: 'shared',
|
||
|
|
},
|
||
|
|
externalClasses: [
|
||
|
|
`${prefix}-class`,
|
||
|
|
`${prefix}-class-image`,
|
||
|
|
`${prefix}-class-title`,
|
||
|
|
`${prefix}-class-description`,
|
||
|
|
],
|
||
|
|
components: {
|
||
|
|
TIcon,
|
||
|
|
TImage,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
...props,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
prefix,
|
||
|
|
classPrefix: name,
|
||
|
|
tools,
|
||
|
|
|
||
|
|
_icon: null,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
icon: 'initIcon',
|
||
|
|
theme: 'initIcon',
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.initIcon();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
initIcon() {
|
||
|
|
const {
|
||
|
|
icon,
|
||
|
|
theme,
|
||
|
|
} = this;
|
||
|
|
this._icon = calcIcon(icon, THEME_ICON[theme]);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
@import './result.css';
|
||
|
|
</style>
|