heshanApp/pages_im/pages/conversation/chating/components/MessageItem/MergeMessageRender.vue

<template>
  <view @click="toPreview" class="merge_message_container">
    <view class="merge_title">
      <text class="merge_title_text">{{ title }}</text>
    </view>
    <view class="merge_desc">
      <text
        v-for="(item, idx) in message.mergeElem.abstractList"
        v-if="idx < 4"
        :key="idx"
        class="merge_item">
        {{ item }}
      </text>
    </view>
  </view>
</template>

<script>
export default {
  name: "MergeMessageRender",
  components: {},
  props: {
    message: Object,
  },
  data() {
    return {};
  },
  computed: {
    title() {
      // const sessionType = this.message.mergeElem.multiMessage[0].sessionType;
      // if (sessionType === 1) {
      //   return this.message.mergeElem.title;
      // }
      return this.message.mergeElem.title;
    },
  },
  methods: {
    toPreview() {
	  console.log("qxj toPreview");
      uni.$u.route("/pages_im/pages/conversation/previewMerge/index", {
        mergeData: encodeURIComponent(JSON.stringify(this.message.mergeElem)),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.merge_message_container {
  padding: 0 !important;
  width: 444rpx;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  border-radius: 12rpx;
  border-width: 1px;
  border-style: solid;
  border-color: #ececec;
  background-color: #fff;

  .merge_title {
    padding: 12rpx 24rpx;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #ececec;

    text {
      lines: 1;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .merge_desc {
    display: flex;
    flex-direction: column;
    padding: 12rpx 24rpx;
    font-size: 24rpx;
    color: #666;

    .merge_item {
      lines: 3;
      text-overflow: ellipsis;
      overflow: hidden;
      padding: 4rpx 0;
    }
  }
}
</style>