dvcp_v2_webapp/packages/wechat/AppMsgTemplate/components/Detail.vue

<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>