Files
dvcp_v2_webapp/project/tianfuxing/AppCarousel/components/Detail.vue
2023-01-05 16:06:20 +08:00

77 lines
1.8 KiB
Vue

<template>
<section class="detail">
<ai-title slot="title" title="轮播图详情" isShowBottomBorder :isShowBack="true" @onBackClick="cancel(false)"/>
<ai-card>
<ai-title slot="title" title="基本信息"/>
<template #content>
<ai-wrapper label-width="80px" :columnsNumber="1">
<ai-info-item label="首页封面">
<span><img :src="dialogInfo.imgUrl" alt="" style="width:100px;height:100px;"/></span>
</ai-info-item>
<ai-info-item label="标题">
<span>{{ dialogInfo.title }}</span>
</ai-info-item>
<ai-info-item label="链接类型">
<span>{{ dict.getLabel('bannerType', dialogInfo.type) }}</span>
</ai-info-item>
<ai-info-item label="内容" isLine v-if="dialogInfo.type == 3">
<div v-html="dialogInfo.rtf"></div>
</ai-info-item>
<ai-info-item label="链接" v-else>
<span>{{ dialogInfo.linkUrl }}</span>
</ai-info-item>
</ai-wrapper>
</template>
</ai-card>
</section>
</template>
<script>
export default {
name: "detail",
data() {
return {
dialogInfo: {}
}
},
props: {
instance: Function,
dict: Object,
permissions: Function,
params: Object,
},
created() {
this.getDetail()
},
methods: {
getDetail() {
this.instance.post(`/app/appbanner/detail?id=${this.params.id}`).then((res) => {
if (res?.data) {
this.dialogInfo = {...res.data}
}
})
},
cancel(isRefresh) {
this.$emit('change', {
type: 'List',
isRefresh: !!isRefresh
})
}
},
}
</script>
<style lang="scss" scoped>
.detail {
width: 100%;
height: 100%;
padding: 0 20px;
box-sizing: border-box;
overflow-y: scroll;
}
</style>