chelvc-custom/src/pagesMessage/orderNotify.vue

<template>
  <view class="orderNotice">
    <view class="order-list" v-for="(item, index) in init_list" :key="index">
      <view class="fl-flex-item order-top">
        <view class="fl-flex chelvc-chelvc-align-center">
          <image :src="item.orderDetailDTO.orderItemList[0].goodsPic" mode="scaleToFill" />
          <view class="f-s-28 margin-left-xs">
            {{ item.orderDetailDTO.orderItemList[0].goodsName }}
          </view>
        </view>
        <u-icon name="arrow-right" color="#cbcbcb" size="15" />
      </view>
      <view>
        <view class="fl-flex-item title">
          <view class="text-bold text-333">订单{{ item.orderType }}</view>
          <view class="f-s-20 text-gray">{{ item.createTimeText }}</view>
        </view>
        <view class="fl-flex content">
          <view class="img">
            <image :src="item.orderDetailDTO.merchantInfo.logo" mode="scaleToFill" />
          </view>
          <view class="text apostrophe">
            <span> 订单号:{{ item.orderId }} </span>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
			<!-- 0->待付款；1-已付款；2->待发货；3->已发货；4->已完成；5->已关闭；6->无效订单 -->
<script>
import { getOrderInform, clearInformFlag } from '@/api/client/message.js';
export default {
  data() {
    return {
      queryParams: {
        paging: '1,10',
        counting: true,
      },
      current: 1,
      size: 10,
      init_list: [],
      typeEnum: [
        { type: 0, name: '待付款' },
        { type: 1, name: '已付款' },
        { type: 2, name: '待发货' },
        { type: 3, name: '已发货' },
        { type: 4, name: '已完成' },
        { type: 5, name: '已关闭' },
        { type: 6, name: '无效订单' },
      ],
    };
  },
  mounted() {
    this.handlerInitList();
  },
  onShow() {
    // 已读消息
    clearInformFlag({ type: 'ORDER' }).then(res => {});
  },
  methods: {
    handlerInitList() {
      getOrderInform(this.queryParams).then(res => {
        this.init_list = res.data.records;
        this.init_list.map(rs => {
          this.typeEnum.map(rc => {
            if (rs.orderStatus == rc.type) {
              rs.orderType = rc.name;
            }
          });
        });
        this.init_list.map(rs => {
          rs.createTimeText = uni.$u.timeFormat(rs.createTime, 'yyyy-mm-dd');
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.apostrophe {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.orderNotice {
  min-height: 100vh;
  padding: 20rpx;
  box-sizing: border-box;
  .order-list {
    height: 280rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 0 15rpx 0 rgba(0, 0, 0, 0.2);
    .order-top {
      height: 50rpx;
      border-bottom: 2rpx solid #fbfbfb;
      padding-bottom: 10rpx;
      image {
        height: 40rpx;
        width: 40rpx;
      }
    }
    .title {
      margin: 20rpx 0;
    }
    .content {
      height: 140rpx;
      background-color: #f8f8f8;
      .img {
        height: 140rpx;
        width: 140rpx;
        image {
          height: 140rpx;
          width: 140rpx;
        }
      }
      .text {
        color: #949494;
        font-size: 30rpx;
        height: 80rpx;
        margin: 30rpx 40rpx 20rpx 20rpx;
      }
    }
  }
}
</style>