uniapp/pages_promotion/message/index.vue

<template>
  <page-meta :page-style="themeColor"></page-meta>
  <view class="message-index">
    <!--顶部内容-->
    <view class="top">
      <image class="top-image" :src="$util.img('public/static/img/futures/my_shop_top_bg.png')" mode="widthFix"></image>
    </view>
    <!--消息内容-->
    <view class="message-content">
      <!--顶部标题-->
      <view class="titles">
        <view class="titles-block" v-for="(item,index) in titles" :key="index">
          <view class="titles-block-icon">
            <image class="top-image" :src="$util.img(item.icon)" mode="widthFix"></image>
          </view>
          <view class="titles-block-title">{{ item.title }}</view>
        </view>
      </view>
      <!--消息列表-->
      <mescroll-uni ref="mescroll" @getData="getList" top="350">
        <block slot="list">
          <view class="message-list">
            <view class="message-block" v-for="(item,index) in list" :key="index">
              <view class="message-block-top">
                <view class="message-block-top-image">
                  <image class="top-image" :src="$util.img('public/static/img/message/business.png')" mode="widthFix"></image>
                </view>
                <view class="message-block-top-title">交易信息</view>
              </view>
              <view class="message-block-message">
                消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容
              </view>
              <view class="message-block-bottom">
                <view class="message-block-bottom-left">查看详情</view>
                <view class="message-block-bottom-right">2023-02-27 10:45</view>
              </view>
            </view>
          </view>
        </block>
      </mescroll-uni>
    </view>
    <!--登录弹框-->
    <ns-login ref="login"></ns-login>
    <!--加载动画-->
    <loading-cover ref="loadingCover"></loading-cover>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 顶部标题
      titles:[
        { title: '交易信息', icon: 'public/static/img/message/business.png' },
        { title: '系统消息', icon: 'public/static/img/message/system.png' },
        { title: '通知消息', icon: 'public/static/img/message/notice.png' },
        { title: '留言反馈', icon: 'public/static/img/message/words.png' },
      ],
      list: [],




    };
  },
  components: {},
  mixins: [],
  onLoad(option) {},
  onShow() {},
  onReady(){
    // 判断是否登录
    if (!uni.getStorageSync('token')) this.$refs.login.open('/pages_promotion/message/index');
  },
  methods: {
    // 获取消息列表  todo:这里是订单列表  修改修改为消息列表
    getList(mescroll) {
      this.$api.sendRequest({
        url: '/futures/api/futures/myList',
        data: {
          page: mescroll.num || 1,
          page_size: mescroll.size || 10,
          status: this.tabs_active,
        },
        success: res => {
          if(parseInt(res.code) === 0){
            mescroll.endSuccess(Object.keys(res.data.list).length);

            //设置列表数据
            if (parseInt(mescroll.num) === 1){
              this.list = []; //如果是第一页需手动制空列表
            }
            this.list = this.list.concat(res.data.list); //追加新数据
          }else {
            this.msg = res.message;
          }

          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        },
        fail: res => {
          mescroll.endErr();
          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        }
      });
    },







  },
  onBackPress(options) {
    if (options.from === 'navigateBack') return false;
    this.$util.redirectTo('/pages/member/index');
    return true;
  }
};
</script>

<style lang="scss" scoped>
.message-index{
  background-color: #f0a71d;
  min-height: 100vh;

  .top{
    width: 100vw;
    height: 240rpx;
    .top-image{
      width: 100% !important;
      height: 100% !important;
    }
  }
  .message-content{
    padding: 30rpx;
    width: calc(100% - (30rpx * 2));
    position: absolute;
    top: 90rpx;

    .titles{
      width: calc(100% - (20rpx * 2));
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-evenly;
      align-content: center;
      padding: 20rpx;
      background-color: #FFFFFF;
      border-radius: 20rpx;
      .titles-block{
        width: calc(100% / 4);
        display: inline-flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: center;
        .titles-block-icon{
          width: 60%;
          .top-image{
            width: 100% !important;
          }
        }
        .titles-block-title{}
      }
    }

    .message-list{
      padding:0 20rpx;
      background-color: red;

      .message-block{


      }



    }



  }
}







</style>