FarmingWx_V2_message/pages/message/interactive.vue

<template>
  <view class="supply-hall">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <template slot="top">
        <view style="width: 100%; height: 50px; border-bottom: 1px solid #f1f1f1">
          <u-navbar
            @leftClick="leftClick"
            title="服务通知"
            bgColor="transparent"
            :autoBack="true"
            leftIconSize="20px"
          ></u-navbar>
        </view>
      </template>
      <view class="main" v-for="(item, index) in dataList" :key="index">
        <view class="item">
          <view class="left">
            <image :src="item.fromUserAvatar" style="width: 70px; height: 70px" />
          </view>
          <view class="right">
            <view>
              <view class="title">
                {{ item.refTitle }}
              </view>
              <view class="contont">
                {{ item.content }}
              </view>
              <view>
                {{ item.createTime ? $moment(item.createTime).format("YYYY-MM-DD") : "" }}
              </view>
            </view>
            <view>
              <image
                :src="item.extendInfo ? JSON.parse(item.extendInfo).refImg : ''"
                style="width: 70px; height: 70px"
                mode=""
              />
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      dataList: [],
      queryParams: {
        type: "1",
        toUserId: "",
        page: "1",
        size: "10",
      },
    };
  },
  mounted() {
    // #ifndef H5 || APP-PLUS || MP-ALIPAY
    const { windowHeight, screenHeight, safeArea, statusBarHeight } = uni.$u.sys(); // 获取页面高度
    let menuButtonObject = uni.getMenuButtonBoundingClientRect();
    let navHeight =
      menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
    this.statusBarHeight = navHeight + statusBarHeight + 4;
    let tabBarHeight = windowHeight - safeArea.bottom;
    this.bottomStatusHeight = screenHeight - this.statusBarHeight - tabBarHeight;
    // #endif
  },
  onLoad(option) {
    console.log("option", option);
  },

  onReady() {},
  methods: {
    leftClick() {
      uni.reLaunch({
        url: "/TUIKit/components/TUIConversation/index",
      });
    },
    queryList(pageNumber, pageSize) {
      this.queryParams.page = pageNumber;
      this.queryParams.size = pageSize;
      let dataList = [];
      this.$refs.paging.complete(dataList);
      this.api
        .noticeList(this.queryParams)
        .then((res) => {
          if (res.code === 200) {
            this.$refs.paging.complete(res.data.content);
            this.api.readAll();
          }
        })
        .catch((res) => {
          this.$refs.paging.complete(false);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.popup ::v-deep .u-button {
  width: 100% !important;
  height: 38px !important;
  background: linear-gradient(87deg, #28d141 0%, #28ef8c 100%) !important;
  border: none !important;
  border-radius: 29rpx !important;
  font-size: 28rpx !important;
  font-weight: bold !important;
  margin-top: 30px;
  color: white;
}
.main {
  .item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 20px;
    background: white;
    .left {
      width: 20%;
      margin-right: 10px;
      .img {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
      }
    }
    .right {
      width: 80%;
      line-height: 25px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      .contont {
        font-size: 26rpx;
        color: #333333;
      }
      .title {
        font-weight: 600;
        font-size: 36rpx;
        color: #333333;
      }
    }
  }
}
.supply-hall {
  width: 750rpx;
  height: 100vh;
  background-color: white;
  overflow: hidden;

  &-tabs {
    height: 70rpx;
    background-color: #ffffff;
    border-radius: 0rpx 0rpx 28rpx 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0rpx 24rpx;

    &-item {
      display: flex;
      align-items: center;
    }
  }

  &-screen {
    height: 70rpx;
    background-color: #ffffff;
    // border-radius: 0rpx 0rpx 28rpx 28rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;

    &-item {
      display: flex;
      align-items: center;
    }
  }
}

.ml6 {
  margin-left: 6rpx;
}

::v-deep .supply-hall-search .u-input.data-v-113bc24f {
  background-color: #fff !important;
  box-sizing: border-box !important;
  border-radius: 33rpx !important;
  height: 64rpx !important;
  padding-right: 2rpx !important;
}

::v-deep .popup-item .u-input.data-v-113bc24f {
  background-color: #fff !important;
  box-sizing: border-box !important;
  border-radius: 33rpx !important;
  height: 64rpx !important;
  padding-right: 2rpx !important;
  width: 200rpx !important;
}

::v-deep .u-button--primary.data-v-2bf0e569 {
  width: 110rpx !important;
  height: 56rpx !important;
  background: linear-gradient(87deg, #28d141 0%, #28ef8c 100%) !important;
  border: none !important;
  border-radius: 29rpx !important;
  font-size: 28rpx !important;
  font-weight: bold !important;
}
</style>