hlm_pl_mall_h5/pages/member/chat/ChatList.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
    <member-base :show="false" ><view class="div container">
        <view class="div common-header-wrap">
            <view :style="'height:'+navHeight+'px'"></view>
            <view class="common-header-holder"></view>
            <view class="common-header-fixed">
            <title-header />
            <uni-nav-bar title="最近消息" class="common-header" left-icon="back" @clickLeft="goBack()">
            </uni-nav-bar>
        </view>
        </view>
        <view class="div">
            <view class="ul dstouch-message-list">

                <view  class="li" v-for="(item,index) in list" :key="index">
                    <view class="a" @click="goNavigate('/pages/member/chat/ChatInfo',{t_id:item.u_id,t_name:item.u_name})">
                    <view class="div avatar">
                        <image mode="aspectFit" class="img" :src="item.avatar+'?'+time">
                        <sup v-if="item.r_state == 2"></sup>
                    </view>
                    <view class="dl">
                        <view class="dt">{{item.u_name}}</view>
                        <view class="dd">{{item.message}}</view>
                    </view>
                    <time>{{item.time}}</time>
                </view>
                </view>

            </view>
        </view>
    </view></member-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import { urlencode } from '@/util/common'
import MemberBase from '../MemberBase'
import { getChatList } from '../../../api/memberInstantMessage'
export default {
  mounted(){
  // #ifdef  MP-WEIXIN
  this.navHeight = uni.getMenuButtonBoundingClientRect().top
  // #endif
  },
  computed:{
  fontSize(){
    return getFontSize()
  },
  },
  data(){
    return {
      navHeight: 0,
      time:'',
      list: false
    }
  },
  components:{
    TitleHeader,
    MemberBase,
  },
  created () {
    this.time = new Date().getTime();
    uni.showLoading({ title: '加载中' });
    getChatList().then(res => {
      this.list = res.result.list
      uni.hideLoading()
    }).catch(function (error) {
      uni.hideLoading()
      uni.showToast({icon:'none',title: error.message})
    })
  },
  watch: {

  },
  methods:{
    goNavigate(path,query=false){
      uni.navigateTo({url:path+(query?('?'+urlencode(query)):'')})
    },


  goBack(){uni.navigateBack({delta:1})},

  }

}
</script>

<style scoped lang="scss">

    .dstouch-message-list { background-color: #FFF;}
    .dstouch-message-list .li { position: relative; z-index: 1; height: 3rem; border-bottom: solid 0.05rem #EEE; margin: 0 $pageSpace 0 3.2rem;}
    .dstouch-message-list .li .avatar { position: absolute; z-index: 1; top: 0.4rem; bottom: 0.4rem; left: -2.7rem; display: block; width: 2.2rem; height: 2.2rem; background-color: #EEE; border-radius: 100%;}
    .dstouch-message-list .li .avatar .img { width: 100%; height: 100%; border-radius: 100%;}
    .dstouch-message-list .li .avatar sup { position: absolute; z-index: 1; top: 0; right: 0; width: 0.4rem; height: 0.4rem; background-color: #f23030; border-radius: 100%;}
    .dstouch-message-list .li .dl { display: block; padding: 0.4rem 0;}
    .dstouch-message-list .li .dt { display: block; height: 1.2rem; font-size:$subFontSize; line-height: 1.2rem; color: #111;}
    .dstouch-message-list .li .dd { display: block; height: 1rem; font-size:$fontSize; line-height: 1rem; color: #666; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
    .dstouch-message-list .li time { position: absolute; z-index: 1; top: 0.4rem; right: 0; font-size:$h6; line-height: 0.9rem; color: #BBB;}

</style>