aec3825a3b
- 重构 x-message 组件，支持更多自定义选项 - 添加 artDetail 页面用于展示艺术品详情 - 修改 liveRoom 页面，接入新的消息提示功能- 优化 profile 页面布局，增加去支付按钮 - 调整 home 页面，集成新的消息系统 - 修改 websocket 插件，支持携带 token 认证
111 lines
2.3 KiB
Vue
111 lines
2.3 KiB
Vue
<script setup>
|
|
|
|
import error from '../images/error.png'
|
|
import success from '../images/success.png'
|
|
import warning from '../images/warning.png'
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
default: 'success'
|
|
},
|
|
message: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
title: {
|
|
type: Object,
|
|
default: () => ({
|
|
text: '',
|
|
color: '',
|
|
align: 'left'
|
|
})
|
|
},
|
|
subTitle: {
|
|
type: Object,
|
|
default: () => ({
|
|
text: '',
|
|
color: '',
|
|
align: 'left'
|
|
})
|
|
},
|
|
showIcon: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
customStyle: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
|
|
const typeConfig = {
|
|
success: {
|
|
imgSrc: success,
|
|
borderColor: '#C5E7D5',
|
|
bgColor: '#EDF7F2',
|
|
},
|
|
error: {
|
|
imgSrc: error,
|
|
borderColor: '#FFD4D4',
|
|
bgColor: '#FFF0F0',
|
|
},
|
|
warning: {
|
|
imgSrc: warning,
|
|
borderColor: '#FFE2BA',
|
|
bgColor: '#FFF7EC',
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="`box-border flex items-center border rounded-[4px] px-[15px] shadow-sm py-8px ${!message?'justify-center':''}`"
|
|
:style="{
|
|
borderColor: typeConfig[type].borderColor,
|
|
backgroundColor: typeConfig[type].bgColor,
|
|
width: customStyle.width || '343px',
|
|
height: customStyle.height || 'auto',
|
|
minHeight: '46px'
|
|
}"
|
|
>
|
|
<div v-if="showIcon" class="mr-[12px]">
|
|
<img
|
|
:src="typeConfig[type].imgSrc"
|
|
class="w-20px h-20px"
|
|
style="object-fit: contain"
|
|
alt=""
|
|
>
|
|
</div>
|
|
<div class="flex flex-col justify-center">
|
|
<!-- 如果是简单文本模式 -->
|
|
<div v-if="message" class="text-[14px] line-height-none">
|
|
{{ message }}
|
|
</div>
|
|
<!-- 如果是标题+副标题模式 -->
|
|
<template v-else>
|
|
<div
|
|
v-if="title.text"
|
|
class="text-[14px] line-height-none"
|
|
:style="{
|
|
color: title.color || 'inherit',
|
|
textAlign: title.align || 'left'
|
|
}"
|
|
>
|
|
{{ title.text }}
|
|
</div>
|
|
<div
|
|
v-if="subTitle.text"
|
|
class="text-[12px] leading-normal mt-1"
|
|
:style="{
|
|
color: subTitle.color || '#939393',
|
|
textAlign: subTitle.align || 'left'
|
|
}"
|
|
>
|
|
{{ subTitle.text }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|