web-test/src/views/detail/semDetail.vue

<template>
  <div id="semDetail">
    <el-row>
      <div class="w_1200">
        <el-col :span="24" class="main">
          <el-col :span="24" class="one">
            <el-image :src="gongqiuImage"></el-image>
          </el-col>
          <el-col :span="24" class="two">
            <el-col :span="24" class="twoTop">
              <el-col :span="3" class="left">
                浏览次数：1
              </el-col>
              <el-col :span="21" class="right"> [专题] {{ detail.title }} </el-col>
            </el-col>
            <el-col :span="24" class="twoInfo">
              <el-col :span="24" class="list">
                <el-col :span="3" class="left">
                  <el-col :span="24" class="leftTop">
                    会员名称
                  </el-col>
                  <el-col :span="24" class="leftDown">
                    <el-image :src="squareImage"></el-image>
                    <el-col :span="24" class="jobname">
                      {{ detail.uname }}
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="21" class="right">
                  <el-col :span="24" class="date">
                    <i class="el-icon-user icon"></i>
                    <span>文章发表于{{ detail.meta | getDate }}</span>
                    <span>1楼</span>
                  </el-col>
                  <el-col :span="24" class="info">
                    <p v-html="detail.content"></p>
                  </el-col>
                  <el-col :span="24" class="jubao">
                    <span>举报</span>
                  </el-col>
                </el-col>
              </el-col>
              <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
                <el-col :span="3" class="left">
                  <el-col :span="24" class="leftTop">
                    会员名称
                  </el-col>
                  <el-col :span="24" class="leftDown">
                    <el-image :src="squareImage"></el-image>
                    <el-col :span="24" class="jobname">
                      {{ item.uname }}
                    </el-col>
                  </el-col>
                </el-col>
                <el-col :span="21" class="right">
                  <el-col :span="24" class="date">
                    <i class="el-icon-user icon"></i>
                    <span>评论发布于{{ item.meta | getDate }}</span>
                    <span>{{ index + 2 }}楼</span>
                  </el-col>
                  <el-col :span="24" class="info">
                    <p v-html="item.content"></p>
                  </el-col>
                  <el-col :span="24" class="jubao">
                    <span>举报</span>
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="24" class="twoPage">
              <page :total="total" :limit="limit" position="right" @query="search"></page>
            </el-col>
            <el-col :span="24" class="twoInput">
              <el-col :span="3" class="left"> </el-col>
              <el-col :span="21" class="right">
                <el-col :span="24" class="waneditor">
                  <wang-editor v-model="form.content" ref="editor"></wang-editor>
                </el-col>
                <el-col :span="24" class="btn">
                  <el-button type="primary" @click="submit">发表评论</el-button>
                </el-col>
              </el-col>
            </el-col>
          </el-col>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import wangEditor from '@/components/wang-editor.vue';
import page from '@/components/pagination.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: comment } = createNamespacedHelpers('comment');
const { mapActions: news } = createNamespacedHelpers('news');
export default {
  name: 'semDetail',
  props: {},
  components: { page, wangEditor },
  data: () => ({
    gongqiuImage: require('@/assets/live/111.png'),
    squareImage: require('@/assets/live/222.png'),
    detail: {},
    list: [{ name: 'dsadas' }],
    total: 0,
    form: {},
    inputInfo: '',
    limit: 10,
  }),
  created() {
    this.search();
    this.searchinfo();
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  methods: {
    ...news(['fetch']),
    ...comment({ commentquery: 'query', commentCreate: 'create', commentUpdate: 'update' }),
    async searchinfo() {
      const res = await this.fetch(this.id);
      this.$set(this, `detail`, res.data);
    },
    async search({ skip = 0, limit = this.limit, newsid = this.id } = { skip: 0, limit: this.limit }) {
      let res = await this.commentquery({ skip, limit, newsid });
      console.log(res);
      this.$set(this, `list`, res.data);
      this.$set(this, `total`, res.total);
    },
    async submit() {
      this.form.newsid = this.id;
      this.form.uid = this.user.uid;
      let data = this.form;
      let res = await this.commentCreate(data);
      console.log(res);
      this.$checkRes(res, '评论成功', '评论失败');
      this.search();
    },
  },
  filters: {
    getDate(meta) {
      let createdAt = _.get(meta, `createdAt`);
      let date = new Date(createdAt)
        .toLocaleDateString()
        .replace('/', '-')
        .replace('/', '-');
      return date;
    },
  },
};
</script>

<style lang="less" scoped>
.w_1200 {
  width: 80%;
  margin: 0 auto;
}
.main {
  float: left;
  width: 100%;
  min-height: 600px;
  margin: 30px 0;
}
.main .one {
  float: left;
  width: 100%;
  height: 160px;
  margin: 0 0 30px 0;
}
.main .two {
  float: left;
  width: 100%;
}
.main .two .twoTop {
  float: left;
  width: 100%;
  height: 60px;
}

.main .two .twoTop .left {
  float: left;
  height: 60px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  color: #00316e;
  background: #a5d2f5;
  border-bottom: 10px solid #044b79;
}
.main .two .twoTop .right {
  float: left;
  height: 60px;
  line-height: 50px;
  padding: 0 15px;
  font-size: 20px;
  color: #023658;
  border-bottom: 10px solid #5096d2;
}
.main .two .twoInfo {
  float: left;
  width: 100%;
}
.main .two .twoInfo .left {
  background: #5096d2;
  border-bottom: 10px solid #044b79;
}
.main .two .twoInfo .left .leftTop {
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 22px;
  border-bottom: 1px dashed #ccc;
}
.main .two .twoInfo .left .leftDown {
  height: 420px;
}
.main .two .twoInfo .left .leftDown .el-image {
  margin: 40px 18px;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.main .two .twoInfo .left .leftDown .jobname {
  text-align: center;
  font-size: 22px;
  color: #fffcae;
}
.main .two .twoInfo .right {
  padding: 0 20px;
}
.main .two .twoInfo .right .date {
  padding: 0 20px;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px dashed #ccc;
}
.main .two .twoInfo .right .date .icon {
  font-size: 30px;
  color: #b6dd59;
}
.main .two .twoInfo .right .date span:nth-child(2) {
  font-size: 20px;
  padding: 0px 10px;
  position: relative;
  top: -2px;
}
.main .two .twoInfo .right .date span:last-child {
  font-size: 20px;
  float: right;
}
.main .two .twoInfo .right .info {
  height: 300px;
  border: 2px solid #044b79;
  border-radius: 10px;
  margin: 30px 0;
  padding: 20px;
}
.main .two .twoInfo .right .info p {
  font-size: 20px;
  overflow: auto;
  text-overflow: ellipsis;
  -webkit-line-clamp: 8;
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-height: 33px;
  height: 260px;
}
.main .two .twoInfo .right .jubao {
  height: 70px;
  line-height: 60px;
  border-top: 1px dashed #ff8b0f;
  border-bottom: 10px solid #5096d2;
}
.main .two .twoInfo .right .jubao span {
  float: right;
  color: #ff0000;
  font-size: 20px;
}
.main .two .twoPage {
  margin: 20px 0;
}
.main .two .twoInput {
  height: 270px;
  border: 2px solid #5096d2;
}
.main .two .twoInput .left {
  height: 266px;
  background-color: #5096d2;
}
.main .two .twoInput .right {
  padding: 20px 20px 0 20px;
}
/deep/.main .two .twoInput .right .waneditor .w-e-text-container {
  height: 140px !important;
}
.main .two .twoInput .right .btn {
  margin: 10px 0;
}
/deep/.main .two .twoInput .right .btn .el-button {
  margin: 10px 0;
}
</style>