article-mobile/src/views/community/detail.vue

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="top">
          <top topType="2" @upBack="upBack"></top>
        </el-col>
        <el-col :span="24" class="info" :style="{ height: clientHeight + 'px' }">
          <el-col :span="24" class="one">
            <info :detailInfo="detailInfo"></info>
          </el-col>
          <el-col :span="24" class="two">
            <el-tabs v-model="active">
              <el-tab-pane label="用户评论" name="first">
                <comment :list="commentList"></comment>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-col>
        <el-col :span="24" class="foot">
          <el-col :span="12" class="button" @click.native="chatBtn"><i class="el-icon-chat-line-round"></i>评论</el-col>
          <el-col :span="12" class="button zan" @click.native="zanBtn"><img :src="detailInfo.thumbs ? zan2 : zan" /><span>点赞</span></el-col>
        </el-col>
      </el-col>
    </el-row>
    <van-dialog class="dialog" v-model="dialog" title="填写评论" :close-on-click-overlay="true" :show-confirm-button="false">
      <van-form @submit="onSubmit">
        <van-field v-model="form.content" rows="4" autosize label="评论内容" type="textarea" maxlength="100" placeholder="请输入内容" show-word-limit />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">发送</van-button>
        </div>
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
import info from './parts/info.vue';
import comment from './parts/comment.vue';
import top from '@/layout/common/top.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: mapTopic } = createNamespacedHelpers('topic');
const { mapActions: mapThumbs } = createNamespacedHelpers('thumbs');
const { mapActions: reply } = createNamespacedHelpers('reply');
const moment = require('moment');
export default {
  name: 'detail',
  props: {},
  components: {
    info,
    comment,
    top,
  },
  data: function() {
    return {
      clientHeight: '',
      // 话题正文
      detailInfo: {},
      // 评论
      active: 'first',
      // 用户评论列表
      commentList: [],
      // 点赞
      zan: require('@a/zan.png'),
      zan2: require('@a/zan2.png'),
      // 评论
      dialog: false,
      form: {},
    };
  },
  async created() {
    await this.search();
  },
  mounted() {
    let clientHeight = (document.documentElement.clientHeight || document.body.clientHeight) - 80;
    this.$set(this, `clientHeight`, clientHeight);
  },
  methods: {
    ...mapTopic(['fetch']),
    ...mapThumbs(['create']),
    ...reply({ replyQuery: 'query', replyCreate: 'create' }),
    async search() {
      if (this.id) {
        let res = await this.fetch(this.id);
        if (this.$checkRes(res)) {
          this.$set(this, `detailInfo`, res.data);
        }
        res = await this.replyQuery({ article_id: this.id });
        if (this.$checkRes(res)) {
          this.$set(this, `commentList`, res.data);
        }
      }
    },
    // 返回上一页
    upBack() {
      this.$router.push({ path: '/community/index' });
    },
    // 点赞
    async zanBtn() {
      let data = {
        openid: this.user.openid,
        type: '1',
        article_id: this.detailInfo.id,
      };
      let res = await this.create(data);
      if (this.$checkRes(res)) {
        this.$set(this.detailInfo, `thumbs`, res.data);
        this.$toast({ type: 'success', message: this.detailInfo.thumbs ? '取消点赞' : '点赞成功' });
      }
    },
    // 打开评论
    chatBtn() {
      this.dialog = true;
    },
    // 发送评论
    async onSubmit() {
      let data = this.form;
      data.name = this.user.name;
      data.icon = this.user.icon;
      data.openid = this.user.openid;
      data.reply_time = moment().format('YYYY-MM-DD HH:mm:ss');
      data.article_id = this.id;
      let res = await this.replyCreate(data);
      if (this.$checkRes(res)) {
        this.$toast({ type: 'success', message: '评论成功' });
        this.dialogClose();
        this.search();
      }
    },
    // 关闭弹框
    dialogClose() {
      this.form = {};
      this.dialog = false;
    },
  },
  computed: {
    ...mapState(['user']),
    id() {
      return this.$route.query.id;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {},
};
</script>

<style lang="less" scoped>
.main {
  .top {
    height: 40px;
    overflow: hidden;
    border-bottom: 1px solid #f1f1f1;
  }
  .info {
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #f1f1f1;
    .one {
      background-color: #ffffff;
      margin: 6px 0;
    }
    .two {
      padding: 0 10px;
      min-height: 50px;
      background-color: #ffffff;
      /deep/.el-tabs__header {
        margin: 0;
      }
    }
  }
  .foot {
    height: 40px;
    overflow: hidden;
    background-color: #ffffff;
    border-top: 1px solid #f1f1f1;
    padding: 10px 0;
    .button {
      text-align: center;
      height: 20px;
      border-right: 1px solid #ccc;
      line-height: 20px;
      font-size: 14px;
    }
    .button:last-child {
      border-right: none;
    }
    // 点赞
    .zan {
      img {
        width: 15px;
        height: 15px;
        position: relative;
        top: 2px;
      }
    }
  }
}
</style>