初始化

packages/wechat/AppMsgTemplate/components/Detail.vue

@@ -0,0 +1,194 @@
+<template>
+  <!-- <div> -->
+  <ai-detail class="detail">
+    <template slot="title">
+      <ai-title
+        title="详情"
+        :isShowBack="true"
+        @onBackClick="onBack"
+        isShowBottomBorder
+      >
+      </ai-title>
+
+      <ai-wrapper label-width="80px" :columnsNumber="1">
+        <!-- 消息类型 -->
+        <ai-info-item label="消息类型">
+          <span v-for="(item, index) in types" :key="index">
+            <span v-if="item.label == infoList.msgtype">
+              {{ item.name }}
+            </span>
+          </span>
+        </ai-info-item>
+
+        <!-- 名称 -->
+        <ai-info-item label="名称">
+          <span>{{ infoList.name }}</span>
+        </ai-info-item>
+
+        <!-- 文本 -->
+        <ai-info-item label="消息内容" v-if="infoList.msgtype == 'text'">
+          <span>{{ infoList.content }}</span>
+        </ai-info-item>
+
+        <!-- 图片 -->
+        <ai-info-item label="消息内容" v-if="infoList.msgtype == 'image'">
+          <img
+            :src="infoList.media.file.accessUrl"
+            alt=""
+            style="width:100px;height:100px;"
+          />
+        </ai-info-item>
+
+        <!-- 视频 -->
+        <ai-info-item label="消息内容" v-if="infoList.msgtype == 'video'">
+          <video
+            :src="infoList.media.file.accessUrl"
+            alt=""
+            style="width:100px;height:100px;"
+          />
+        </ai-info-item>
+
+        <!-- 音频 -->
+        <ai-info-item label="消息内容" v-if="infoList.msgtype == 'voice'">
+          <ai-audio
+            :src="infoList.media.file.accessUrl"
+            alt=""
+            style="width:100px;height:100px;"
+          ></ai-audio>
+        </ai-info-item>
+
+        <ai-info-item
+          label="标题"
+          v-if="
+            infoList.msgtype == 'video' ||
+              infoList.msgtype == 'voice' ||
+              infoList.msgtype == 'news'
+          "
+        >
+          <span>{{ infoList.title }}</span>
+        </ai-info-item>
+
+        <ai-info-item
+          label="文件描述"
+          v-if="
+            infoList.msgtype != 'text' &&
+              infoList.msgtype != 'image' &&
+              infoList.msgtype != 'voice'
+          "
+        >
+          <span>{{ infoList.description }}</span>
+        </ai-info-item>
+
+        <ai-info-item label="跳转地址" v-if="infoList.msgtype == 'news'">
+          <span>{{ infoList.url }}</span>
+        </ai-info-item>
+
+        <ai-info-item label="创建人">
+          <span>{{ infoList.createUserName }}</span>
+        </ai-info-item>
+
+        <ai-info-item label="创建时间">
+          <span>{{ infoList.createTime }}</span>
+        </ai-info-item>
+
+        <ai-info-item label="图片链接" v-if="infoList.msgtype == 'news'">
+          <span>{{ infoList.picurl }}</span>
+        </ai-info-item>
+
+        <ai-info-item label="是否启用">
+          <span>{{
+            this.dict.getLabel('wxAppMsgTemplateStatus', infoList.status)
+          }}</span>
+        </ai-info-item>
+      </ai-wrapper>
+    </template>
+  </ai-detail>
+  <!-- </div> -->
+</template>
+
+<script>
+export default {
+  name: 'Detail',
+  // 组件
+  components: {},
+  props: {
+    instance: Function,
+    dict: Object,
+    params: Object
+  },
+  data() {
+    return {
+      infoList: []
+    }
+  },
+  // 计算
+  computed: {
+    types() {
+      return [
+        { name: '文本', label: 'text' },
+        { name: '图片', label: 'image' },
+        { name: '视频', label: 'video' },
+        // { name: '附件', label: 'file' },
+        { name: '音频', label: 'voice' },
+        { name: '文本卡片', label: 'textcard' },
+        { name: '图文', label: 'news' }
+        // { name: '图文消息', label: 'mpnews' }
+      ]
+    }
+  },
+  // 监听
+  watch: {},
+  // 实例创建后
+  onShow() {},
+  created() {
+    this.dict.load('wxAppMsgTemplateStatus').then(() => {
+      this.getList()
+    })
+  },
+  // 实例渲染后
+  mounted() {},
+  // 方法
+  methods: {
+    getList(id) {
+      this.instance
+        .post(`/app/wxcp/wxapplicationmsgtemplate/detail?id=${this.params.id}`)
+        .then(res => {
+          if (res.code === 0) {
+            this.infoList = res.data
+            // this.grooupTableData = res.data.groupInfos
+          }
+        })
+    },
+    onBack() {
+      this.$emit('change', {
+        type: 'list'
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.detail {
+  .AiTitle {
+    ::v-deep.ai-detail__title {
+      // padding: 10px 0 0 10px;
+      background-color: #fff;
+    }
+  }
+
+  .ai-wrapper {
+    margin-top: 10px;
+    padding-top: 20px;
+    background-color: #fff;
+    .ai-info-item {
+      .ai-info-item__right {
+        video {
+          width: 85px;
+          height: 150px;
+        }
+      }
+    }
+  }
+}
+</style>