xdd-uniapp-new/pkg_common/views/roomLogs.vue

<template>
  <view class="common-roomLogs">
    <view v-if="list.length > 0">
      <view
        
      >
        <u-swipe-action
          class="v12-mt-3"
        >
          <u-swipe-action-item
            :options="options1"
            v-for="(item) in list"
            :key="item.room_id" 
            :name="item.room_id"
            style="margin-bottom: 10px;"
            @click.stop="removeRoom(item.room_id)"
          >
          <view  class="item v12-pa-3">
            <view class="v12-justify-start flex" @click="goRoom(item)">
              <image class="cover flex-0" :src="item.store_avatar || webUrl+'/20221114155314348118.png'"/>
              <view>
                <view class="flex jc-between ai-center" style="position: relative">
                  <view class="v12-align-center">
                    <view class="name more-t">{{ item.store_name }}</view>
                    <view v-if="item.is_official" class="guanfang">官方</view>
                    <view v-else class="shangjia">商家</view>
                  </view>
                  <view class="datetime" v-if="item.last_msg">{{ item.last_msg.created_at }}</view>
                </view>
                <view class="sub v12-align-center v12-justify-between" v-if="item.last_msg">
                  <view class="one-t">{{ item.last_msg.msg_type===0?item.last_msg.msg_content:'[图片]' }}</view>
                  <view v-if="item.unread_num > 0" class="unread-num v12-primary"> {{ item.unread_num < 99 ? item.unread_num : '99+' }}</view>
                </view>
              </view>
            </view>
          </view>
          </u-swipe-action-item>
        </u-swipe-action>
      </view>
    </view>
    <view class="v4-nodata" v-if="list.length===0">
      <image src="@/static/images/img_nodata.png" mode="scaleToFill"/>
      <view class="text">暂无数据</view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'RoomLogs',
  data() {
    return {
      webUrl:this.$VUE_APP_RESOURCES_URL,
      uid: null,
      list: [],
      options1: [{text: '删除', style: {color: '#fff', backgroundColor: '#C52733'} }]
    }
  },
  computed: mapGetters(['userInfo']),
  onShow() {
    this.uid = this.userInfo.uid
    this.fetchList()
  },
  methods: {
    goRoom(item) {
      uni.navigateTo({url: `/pkg_common/views/room?id=${item.store_id}&name=${item.store_name}`})
    },
    fetchList() {
      const _this = this
      uni.request({
        url: _this.$SERVICE_API_URL + '/customer-chat-list',
        method: 'POST',
        data: {uid: _this.uid},
        success: res => {
          if (res.data.status_code === 200) {
            _this.list = res.data.content
          }
        }
      })
    },
    removeRoom(id) {
      const _this = this
      uni.showModal({
        title:'确定删除消息？',
        success:(res)=>{
          if(res.confirm) {
            uni.request({
              url: _this.$SERVICE_API_URL + '//chat-remove',
              method: 'POST',
              data: {room_id: id},
              success:(res)=>{
                if(res.data.status_code === 200) {
                  _this.fetchList()
                }
              },
            })
          }
        },
      })
      
    }
  }
}
</script>
<style>
.common-roomLogs .u-swipe-action-item{
  margin-bottom: 20rpx;
}
</style>
<style scoped lang="less">
.unread-num{
  color: #FFFFFF;
  height: 38rpx;
  width: 38rpx;
  border-radius: 50%;
  line-height: 38rpx;
  text-align: center;
  font-size: 20rpx;
}
.guanfang{
  color: #ee6f6e;
  background: #fad7d7;
  width: fit-content;
  font-size: 16rpx;
  padding: 0 4rpx;
  border-radius: 4rpx;
  z-index: 9;
  top: 0;
  white-space: nowrap;
}
.shangjia{
  color: #5791fe;
  background: #dce9ff;
  width: fit-content;
  font-size: 16rpx;
  padding: 0 4rpx;
  border-radius: 4rpx;
  z-index: 9;
  top: 0;
  white-space: nowrap;
}
.common-roomLogs {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 32rpx;
  background: #F5F5F5;

  .item {
    border-radius: 8rpx;
    background: #FFFFFF;

    .cover {
      width: 80rpx;
      height: 80rpx;
      margin-right: 18rpx;
      border-radius: 16rpx;
    }

    .name {
      font-size: 26rpx;
      font-weight: bold;
      line-height: 38rpx;
      color: #333333;
    }

    .datetime {
      font-size: 22rpx;
      line-height: 32rpx;
      color: #999999;
      width: 240rpx;
      flex-wrap: nowrap;
      white-space: nowrap;
      text-align: center;
    }

    .sub {
      width: 548rpx;
      margin-top: 12rpx;
      font-size: 24rpx;
      line-height: 34rpx;
      color: #666666;
    }
  }
}
</style>