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"
              @click="$util.redirectTo('/pages_promotion/message/list', { message_type: item.type })"
        >
          <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="320">
        <block slot="list">
          <view class="message-list" v-if="Object.keys(list).length > 0">
            <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(titles[item.type].icon)" mode="widthFix"></image>
                  <text class="top-drop" v-if="parseInt(item.is_see) === 0"></text>
                </view>
                <view class="message-block-top-title">{{ titles[item.type].title }}</view>
              </view>
              <view class="message-block-message">{{ item.message_content }}</view>
              <view class="message-block-bottom" @click="seeDetails(item,index)">
                <view class="message-block-bottom-left">查看详情</view>
                <view class="message-block-bottom-right">
                  {{ $util.timeStampTurnTime(item.created_time) }}<i class="icondiy icon-system-arrow-right-s-line"></i>
                </view>
              </view>
            </view>
          </view>
          <view v-else>
            <ns-empty :isIndex="false" text="暂无消息通知"></ns-empty>
          </view>
        </block>
      </mescroll-uni>
    </view>
    <!-- 消息详情 -->
    <uni-popup ref="messageContent" type="dialog" class="order-remarks-content">
      <uni-popup-dialog mode="base" :content="message" @close="$refs.messageContent.close()" @confirm="$refs.messageContent.close()"></uni-popup-dialog>
    </uni-popup>
    <!--登录弹框-->
    <ns-login ref="login"></ns-login>
    <!--加载动画-->
    <loading-cover ref="loadingCover"></loading-cover>
  </view>
</template>

<script>
import uniPopup from '@/components/uni-popup-new/uni-popup.vue';
import uniPopupDialog from '@/components/uni-popup-dialog/uni-popup-dialog.vue';
export default {
  components: {
    uniPopup,
    uniPopupDialog
  },
  data() {
    return {
      // 顶部标题 消息类型：1=交易信息，2=系统消息，3=通知消息，4=留言反馈
      titles: {
        1: {title: '交易信息', type: 'business', icon: 'public/static/img/message/business.png'},
        2: {title: '系统消息', type: 'system', icon: 'public/static/img/message/system.png'},
        3: {title: '通知消息', type: 'notice', icon: 'public/static/img/message/notice.png'},
        4: {title: '留言反馈', type: 'words', icon: 'public/static/img/message/words.png'},
      },
      list: [],
      message: '',
    };
  },
  mixins: [],
  onLoad(option) {},
  onShow() {},
  onReady(){
    // 判断是否登录
    if (!uni.getStorageSync('token')) this.$refs.login.open('/pages_promotion/message/index');
  },
  methods: {
    // 获取消息列表
    getList(mescroll) {
      this.$api.sendRequest({
        url: '/message/api/message/messageList',
        data: {
          page: mescroll.num || 1,
          page_size: mescroll.size || 10,
        },
        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); //追加新数据
          }

          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        },
        fail: res => {
          mescroll.endErr();
          if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
        }
      });
    },
    // 查看详情
    seeDetails(item,index){
      // 显示消息
      this.message = item.message_content;
      this.$refs.messageContent.open();
      // 判断：如果当前消息未查看 则修改为已查看
      if(parseInt(item.is_see) === 0 && parseInt(item.type) !== 4){
        this.list[index].is_see = 1;
        this.$api.sendRequest({
          url: '/message/api/message/see',
          data: {
            id: item.id,
          },
          success: res => {},
          fail: res => {}
        });
      }
    }
  },
  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: #f5f5f5;
  min-height: 100vh;

  .top{
    width: 100vw;
    height: 240rpx;
    .top-image{
      width: 100% !important;
      height: 100% !important;
    }
  }
  .message-content{
    padding: 0 30rpx 30rpx 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 30rpx;
      .message-block{
        background: #fff;
        border-radius: 20rpx;
        padding: 30rpx 30rpx 20rpx 30rpx;
        margin-bottom: 30rpx;
        .message-block-top{
          --top-height--: 60rpx;
          height: var(--top-height--);
          width: 100%;
          display: inline-flex;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: flex-start;
          align-items: center;
          .message-block-top-image{
            height: var(--top-height--);
            width: var(--top-height--);
            position: relative;

            .top-image{
              width: 100% !important;
              height: 100% !important;
            }
            .top-drop{
              position: absolute;
              top: 0;
              right: 4rpx;
              width: 10rpx;
              height: 10rpx;
              background: #fb3146;
              border-radius: 50%;
              border: 2rpx solid #f6e1e8;

            }
          }
          .message-block-top-title{
            font-size: 32rpx;
            font-weight: bold;
            color: #353535;
            margin-left: 20rpx;
          }
        }
        .message-block-message{
          height: 80rpx;
          line-height: 40rpx;
          font-size: 28rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          margin: 20rpx 0;
          color: #828282;
        }
        .message-block-bottom{
          display: inline-flex;
          width: 100%;
          height: 60rpx;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: flex-end;
          padding-top: 10rpx;
          border-top: 2rpx solid #ededed;
          .message-block-bottom-left{
            font-size: 28rpx;
            height: 60rpx;
            line-height: 60rpx;
          }
          .message-block-bottom-right{
            height: 60rpx;
            line-height: 60rpx;
            font-size: 26rpx;
            color: #bababa;
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-end;
            align-items: baseline;
            i{
              height: 60rpx;
              line-height: 60rpx;
              font-size: 32rpx;
            }
          }
        }
      }
    }
  }
}
</style>