merchapp/java-mall-app-shop-admin/pages/IM/IM.vue

<template>
  <view class="IM-container">
    <status-bar :backgroundColor="'#fff'" v-if="true"></status-bar>
    <view class="IM-setting">
      <view class="IM-status">
        <text>{{ msgInfo.mine.user_nickname }}</text>
        <text class="status-color"></text>
        <u-icon name="arrow-down">arrow-down</u-icon>
      </view>
      <view class="setting-icon-block">
        <u-icon name="photo">arrow-down</u-icon>
        <u-icon name="photo">arrow-down</u-icon>
      </view>
    </view>
    <view class="tabs-block">
      <!-- <tui-tabs
        :tabs="tabs"
        :currentTab="currentTab"
        bottom="50%"
        :backgroundColor="'#f2f2f2'"
        :width="300"
        :itemWidth="'50%'"
        :bold="true"
        color="#000"
        selectedColor="#fd806b"
        :sliderWidth="180"
        :sliderHeight="56"
        sliderBgColor="#fff"
        :unlined="true"
        @change="handleTab"
      ></tui-tabs> -->
      <view class="IM-msg-content">
        <view class="IM-msg-block">
          <scroll-view
            class="uni-swiper-list"
            scroll-y
            :scroll-top="0"
            enhanced
            :show-scrollbar="false"
          >
            <view
              class="user-info-block"
              v-for="(item, index) of msgList"
              :key="index"
            >
              <view class="user-img-content">
                <view class="user-img-block">
                  <image class="img" :src="item.avatar" />
                </view>
              </view>
              <view class="msg-info-block" @click="skiupMsg(item)">
                <view class="msg-title">{{ item.username }}</view>
                <u-icon name="arrow-right"></u-icon>
                <!-- <view class="msg-info"
                  >老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天老板你好，昨天</view
                > -->
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import tuiTabs from "../../components/tui-tabs.vue";
// import layui from './layui/layui.js'
import { GetImConfig } from "../../api/im";
import statusBar from "../../components/status-bar.vue";
import { mapState } from "vuex";
export default {
  components: {
    tuiTabs,
    statusBar,
  },
  data() {
    return {
      currentTab: 0,
      tabs: [
        {
          name: "今日未回复",
          num: 3,
        },
        {
          name: "顾客消息",
        },
        {
          name: "平台通知",
        },
      ],
      msgInfo: {
        mine: {
          user_nickname: "阿凡达",
        },
      },
      msgList: [],
    };
  },
  onShow() {
    this.getImConfig();
  },
  onLoad() {},
  computed: {
    ...mapState("user", ["uid"]),
  },
  methods: {
    async getImConfig() {
      let res = await GetImConfig({ type: "json", uid: this.uid });

      if (res && res.status == 200) {
        this.msgInfo = res.data;

        if (res.data.friend.length > 0) {
          this.msgList = res.data.friend[0].list;
        }
      }
    },
    handleTab(e) {
      this.currentTab = e.index;
    },
    skiupMsg(item) {
      uni.navigateTo({
        url: `/pages/IM/IMmsgContent?item=${JSON.stringify(item)}`,
      });
    },
  },
};
</script>

<style lang="scss">
.IM-container {
  .IM-setting {
    display: flex;
    justify-content: space-between;
    padding: 32rpx 40rpx;

    .IM-status {
      display: flex;
      align-items: center;
    }

    .setting-icon-block {
      display: flex;
    }
  }
  .tabs-block {
    background: #f2f2f2;
  }

  .IM-msg-content {
    .IM-msg-block {
      padding: 40rpx;
      background: #fff;
      .uni-swiper-list {
        height: calc(100vh - 190px);

        .user-info-block {
          display: flex;
          align-items: center;
          margin-bottom: 40rpx;

          .user-img-content {
            .user-img-block {
              width: 80rpx;
              height: 80rpx;
              border-radius: 50%;
              overflow: hidden;

              .img {
                width: 100%;
                height: 100%;
              }
            }
          }

          .msg-info-block {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: 24rpx;

            .msg-title {
              font-weight: bold;
            }

            .msg-info {
              color: #7f7f7f;
              width: 38%; /* 设置容器宽度 */
              white-space: nowrap; /* 防止文本换行 */
              overflow: hidden; /* 隐藏溢出的文本 */
              text-overflow: ellipsis; /* 显示省略号 */
            }
          }
        }
      }
    }
  }
}
</style>