小程序产品库完成

src/mods/AppTopic/detail.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="topic-detail" v-if="pageShow">
+    <div class="topic-header">
+      <h2>{{ info.title }}</h2>
+      <p>{{ info.publishTime }}</p>
+      <div class="topic-tags">
+        <span v-for="(item, index) in info.keyWords" :key="index">{{ item }}</span>
+      </div>
+    </div>
+    <div class="topic-list">
+      <div class="topic-item" v-for="(item, index) in info.contents" :key="index">
+        <div class="topic-item__top">
+          <image src="/static/img/rmht.png"/>
+          <div class="topic-item__top--right">
+            <h2>{{ item.question }}</h2>
+            <p>{{ item.questionSource }}</p>
+          </div>
+        </div>
+        <div class="topic-item__bottom">
+          <h2 v-if="item.answerSource">
+            <span style="color:#000;"> {{ item.answerSource }} </span>
+            回复
+          </h2>
+          <h2 v-else>话题回复</h2>
+          <p>{{ item.answer }}</p>
+          <div class="topic-item__img">
+            <image v-for="(img, i) in item.files" :key="i" :src="img.url" mode="aspectFill" hover-class="text-hover"
+                   @click="preview(img.url, item.files)"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      info: {},
+      id: '',
+      pageShow: false
+    }
+  },
+
+  onLoad(query) {
+    this.$loading()
+    this.id = query.id
+    this.getInfo()
+  },
+
+  methods: {
+    getInfo() {
+      this.$instance.post(`/app/apphotsubject/detailForWx?id=${this.id}`).then(res => {
+        if (res.code === 0) {
+          this.info = res.data
+          if (res.data.keyWords) {
+            this.info.keyWords = res.data.keyWords.split(',')
+          }
+
+          this.$nextTick(() => {
+            this.pageShow = true
+          })
+          this.$hideLoading()
+        }
+      })
+    },
+
+    preview(img, imgs) {
+      uni.previewImage({
+        current: img,
+        urls: imgs.map(v => v.url)
+      })
+    }
+  },
+
+  onShareAppMessage() {
+    return {
+      title: this.info.title,
+      path: `/mods/AppTopic/detail?id=${this.id}`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.topic-detail {
+  * {
+    box-sizing: border-box;
+  }
+
+  .topic-list {
+    margin-top: 16px;
+  }
+
+  .topic-item__bottom {
+    margin-top: 22px;
+    padding: 24px 24px;
+    background: #FFFFFF;
+    border-radius: 16px;
+    border: 1px solid #D8DDE6;
+
+    .topic-item__img {
+      margin-top: 16px;
+      font-size: 0;
+
+      image {
+        width: 206px;
+        height: 206px;
+        margin: 0 10px 10px 0;
+        border-radius: 8px;
+
+        &:nth-of-type(3n) {
+          margin-right: 0;
+        }
+      }
+    }
+
+    p {
+      color: #333333;
+      font-size: 32px;
+      text-align: justify;
+    }
+
+    h2 {
+      margin-bottom: 16px;
+      color: #1365DD;
+      font-size: 26px;
+    }
+  }
+
+  .topic-item {
+    margin-bottom: 16px;
+    padding: 32px;
+    background: #fff;
+
+    .topic-item__top--right {
+      flex: 1;
+
+      h2 {
+        line-height: 1.3;
+        margin-bottom: 16px;
+        font-size: 32px;
+        color: #333;
+        text-align: justify;
+        white-space: pre-line;
+      }
+
+      p {
+        color: #343D65;
+        font-size: 28px;
+      }
+    }
+
+    .topic-item__top {
+      display: flex;
+
+      image {
+        position: relative;
+        top: 6px;
+        width: 32px;
+        height: 32px;
+        margin-right: 16px;
+      }
+    }
+  }
+
+  .topic-header {
+    padding: 32px 32px 16px;
+    background: #FFFFFF;
+    border-bottom: 1px solid #D8DDE6;
+
+    .topic-tags {
+      font-size: 0;
+
+      span {
+        display: inline-block;
+        height: 48px;
+        line-height: 48px;
+        margin: 0 16px 16px 0;
+        padding: 016px;
+        color: #6179A7;
+        font-size: 28px;
+        background: #F4F5FA;
+        border-radius: 24px;
+      }
+    }
+
+    h2 {
+      line-height: 1.3;
+      margin-bottom: 16px;
+      font-size: 40px;
+      color: #333333;
+      text-align: justify;
+    }
+
+    p {
+      margin-bottom: 16px;
+      color: #999999;
+      font-size: 28px;
+    }
+  }
+}
+</style>