初始化

packages/wechat/AppProjectActivities/components/Detail.vue

@@ -0,0 +1,100 @@
+<template>
+  <ai-detail class="event-detail">
+    <template #title>
+      <ai-title title="活动详情" :isShowBack="true" @onBackClick="onBack" isShowBottomBorder>
+      </ai-title>
+    </template>
+    <template #content>
+      <ai-card :title="info.title" titlePosition="center">
+        <template #title>
+          <h2>{{ info.title }}</h2>
+          <p class="subTitle">活动：{{ dict.getLabel("activityAirticleType",info.type)}}</p>
+        </template>
+        <template #content>
+          <p class="wrap">摘要：{{info.description}}</p>
+          <ai-article :value="info.content"></ai-article>
+          <ai-file-list v-if="info.files && info.files.length" :fileList="info.files"
+                        :fileOps="{name: 'fileName', size: 'postfix'}"></ai-file-list>
+        </template>
+      </ai-card>
+      <ai-card title="封面信息" v-if="info.thumbUrl">
+        <template slot="content">
+          <ai-wrapper label-width="40px">
+            <ai-info-item label="封面">
+              <img class="cover" :src="info.thumbUrl[0].url" v-viewer>
+            </ai-info-item>
+          </ai-wrapper>
+        </template>
+      </ai-card>
+    </template>
+  </ai-detail>
+</template>
+
+<script>
+  import Viewer from 'v-viewer' ;
+  import Vue from 'vue' ;
+
+  Vue.use(Viewer);
+  export default {
+    name: 'detail',
+
+    props: {
+      instance: Function,
+      dict: Object,
+      permissions: Function,
+      params: Object
+    },
+
+    data() {
+      return {
+        info: {}
+      }
+    },
+
+    mounted() {
+      this.dict.load("activityAirticleType").then(() => this.getInfo())
+    },
+
+    methods: {
+      getInfo() {
+        this.instance.post(`/app/appactivity/queryDetailById?id=${this.params.id}`).then(res => {
+          if (res.code === 0) {
+            this.info = res.data
+            if (res.data.thumbUrl) {
+              this.info.thumbUrl = JSON.parse(res.data.thumbUrl)
+            }
+          }
+        })
+      },
+
+      onBack() {
+        this.$emit('change', {
+          type: 'list'
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .cover {
+    display: block;
+    width: 320px;
+    height: 180px;
+  }
+
+  .wrap {
+    font-size: 16px;
+    color: #2D4C86;
+    line-height: 32px;
+    background: #F5F6F9;
+    box-sizing: border-box;
+    padding: 24px 40px;
+  }
+
+  .subTitle {
+    text-align: center;
+    font-size: 12px;
+    font-weight: normal;
+  }
+</style>