dvcp_v2_wxcp_app/src/apps/AppVillageDiscuss/Detail.vue

<template>
  <div class="Detail">
    <AiTopFixed>
      <div flex class="w-100">
        <div class="avatar" v-text="data.avatar"/>
        <div flex class="column start fill">
          <b class="color-333" v-text="data.createUserName"/>
          <span class="color-999" v-text="data.createTime"/>
        </div>
        <div class="statusTag" :class="{over:data.status>0}"
             v-text="data.status==0? data.type==0?'征集中':'投票中':$dict.getLabel('discussStatus',data.status)"/>
      </div>
      <div class="header-middle">
        <div class="contsnts">
          <u-parse :html="data.content"></u-parse>
        </div>
      </div>
      <div class="img-list" v-if="data.images && data.images.length && data.contentType != 1">
        <img :src="item.accessUrl" alt="" v-for="(item, index) in data.images" :key="index"
             @click="previewImage(data.images, item.accessUrl)"/>
      </div>
      <div class="img-list" v-if="data.images && data.images.length && data.contentType == 1">
        <video class="video" :src="data.images[0].url"></video>
      </div>
    </AiTopFixed>
    <div v-if="data.type==0" class="comments">
      <b class="total" v-text="`全部评论(${commentCount})`"/>
      <div v-for="op in data.messages" :key="op.id">
        <div flex class="header">
          <u-avatar :src="op.avatar" size="48"/>
          <b class="fill" v-text="op.createUserName"/>
          <u-icon name="thumb-up" :label="op.suport"/>
        </div>
        <div class="content" v-text="op.content"/>
        <div class="content color-999" v-text="op.createTime"/>
      </div>
    </div>
    <div v-else-if="data.type==1" class="comments">

    </div>
    <div class="bottomBar">
      <div v-if="data.status<2" @click="handleComplete">结束公示</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  props: {},
  data() {
    return {
      data: {},
      id: '',
    }
  },
  computed: {
    commentCount() {
      return this.data.messages?.length || 0
    }
  },
  watch: {},
  onLoad(o) {
    this.id = o.id
    this.getDetail()
    this.$dict.load("discussStatus")
  },
  onShow() {
    document.title = "议事详情"
  },
  methods: {
    previewImage(images, img) {
      uni.previewImage({
        urls: images.map(v => v.url),
        current: img
      })
    },
    getDetail() {
      this.$http.post(`/app/appvillagediscuss/queryDetailById?id=${this.id}`).then((res) => {
        if (res?.data) {
          this.data = {
            ...res.data,
            avatar: res.data.createUserName?.substr(0, 2) || "游客",
            images: JSON.parse(res.data.images),
            messages: res.data.messages || []
          }
        }
      })
    },
    handleSubmitComment(content) {
      if (!!content) {
        let {id} = this
        this.$http.post("/app/appvillagediscussmessage/addOrUpdate", {
          id, content
        }).then(res => {
          if (res?.code == 0) {
            this.$u.toast("提交成功!")
            this.getDetail()
          }
        })
      } else {
        this.$u.toast("不能提交空评论!")
      }
    },
    handleComplete() {
      this.$confirm("是否要结束公示").then(() => {
        let {id} = this
        this.$http.post("/app/appvillagediscuss/finishPublic", {id}).then(res => {
          if (res?.code == 0) {
            this.$u.toast("已结束公示!")
            this.getDetail()
          }
        })
      }).catch(() => 0)
    }
  },
}
</script>

<style scoped lang="scss">
.Detail {
  height: 100vh;
  background: #fff;
  padding-bottom: 112px;

  ::v-deep.AiTopFixed {
    border-bottom: 16px solid #F6F7F9;

    .avatar {
      height: 64px;
      width: 64px;
      color: #fff;
      background: $uni-color-primary;
      border-radius: 50%;
      font-size: 24px;
      text-align: center;
      line-height: 64px;
      margin-right: 16px;
    }

    .color-999 {
      color: #999999;
    }

    .color-333 {
      color: #333;
    }

    .w-100 {
      width: 100%;
    }

    .statusTag {
      padding: 0 12px;
      line-height: 30px;
      border: 1px solid #2573FF;
      color: #2573FF;
      font-size: 22px;

      &.over {
        border-color: #666;
        color: #666;
      }
    }

    .header-middle {
      padding: 32px 0 48px 0;

      .contsnts {
        font-size: 26px;
        line-height: 1.5;
        word-break: break-all;
      }

      img {
        margin-top: 30px;
        width: 686px;
        height: 486px;
      }
    }

    .img-list {
      img {
        width: calc(33vw - 6px - 24px);
        height: calc(33vw - 6px - 24px);
        margin: 0 12px 12px 0;

        &:nth-of-type(3n) {
          margin-right: 0;
        }
      }

      .title {
        width: 100%;
        line-height: 112px;
        background: #FFF;
        font-size: 32px;
        font-family: PingFangSC-Regular, PingFang SC;
        color: #999;
      }
    }
  }

  ::v-deep uni-video {
    width: 100%;
  }

  .comments {
    padding: 0 32px;
    font-size: 28px;

    .total {
      display: block;
      font-size: 30px;
      height: 120px;
      padding-top: 44px;
      box-sizing: border-box;
    }

    .u-avatar {
      margin-right: 24px;
    }

    .content {
      color: #333;
      margin-left: 72px;
      margin-top: 10px;

      &.color-999 {
        color: #999999;
        font-size: 24px;
        margin-bottom: 48px;
      }
    }
  }
}
</style>