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

<template>
  <view @click="toDetails" class="location_message_container">
    <view class="desc_container">
      <view class="location_title">
        {{ locationDetails.name }}
      </view>
      <view class="location_subTitle">
        {{ locationDetails.addr }}
      </view>
    </view>
    <u--image
      :showLoading="true"
      :src="locationDetails.url"
      width="444rpx"
      height="222rpx"
      @click="toDetails"
    ></u--image>
  </view>
</template>

<script>
import { PageEvents } from "../../../../../constant";
export default {
  name: "LocationMessageRender",
  components: {},
  props: {
    message: Object,
  },
  computed: {
    locationDetails() {
      let info = {};
      try {
        info = JSON.parse(this.message.locationElem.description);
      } catch (e) {}
      return info;
    },
  },
  data() {
    return {};
  },
  methods: {
    toDetails() {
      this.$emit('enterSubPage');
      uni.navigateTo({
        url: `/pages/conversation/previewLocation/index?latng=${this.locationDetails.latng}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.location_message_container {
  width: 444rpx;
  border-radius: 12rpx;
  border-width: 1px;
  border-style: solid;
  border-color: #e6e6e6;
  background-color: #fff !important;
}

.location_title {
  lines: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #0c1c33;
}

.location_subTitle {
  lines: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #999;
  font-size: 24rpx;
}

.desc_container {
  padding: 24rpx;
}
</style>