轮播图片编辑，详情

project/tianfuxing/AppCarousel/components/Detail.vue

@@ -0,0 +1,76 @@
+<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>