liedou_uniapp/pages/commonMoudle/orderList.vue

<template>
  <view class="orderWarp">
    <view class="orderBox" v-for="item in list" :key="item.goods_id">
      <view class="imgBox"><image class="orderImag" :src="item.img" mode="widthFix"></image></view>
      <view class="">
        <view class="title">
			<image class="shop-icon" v-if="item.shop_type == 0" src="https://ld.726p.com/ldyx_static/imgs/icon-tb.png" />
			<image class="shop-icon" v-else-if="item.shop_type == 1" src="https://ld.726p.com/ldyx_static/imgs/icon-tmall.png" />
			<image class="shop-icon" v-else-if="item.shop_type == 4" src="https://ld.726p.com/ldyx_static/imgs/jd-icon.png" />
			<image class="shop-icon" v-else-if="item.shop_type == 5" src="https://ld.726p.com/ldyx_static/imgs/icon-dy.png" />
			<image class="shop-icon" v-else-if="item.shop_type == 6" src="https://ld.726p.com/ldyx_static/imgs/pdd-icon.png" />
			{{item.name || '-'}}
		</view>
        <view class="time">
          <text>创建日: {{item.order_create_at || '-'}}</text>
		  <text v-if="item.maintain_power != 0">维权申请</text>
		  <text v-else-if="item.status == 0">已失效</text>
		  <text v-else-if="item.status == 1">已付款</text>
          <text v-else>结算日: {{item.order_balance_at || '-'}}</text>
        </view>
        <view class="money">
          <text>付款金额: ￥<text class="f30">{{item.money || '-'}}</text></text>
          <text class="c-2564e2" v-if="item.status == 1">预估佣金: ￥<text class="f30">{{item.rebate || '-'}}</text></text>
		  <text class="c-f13641" v-else :class="item.status == '0' ? 'text_line' : ''">已结算佣金: ￥<text class="f30">{{item.rebate || '-'}}</text></text>
		</view>
      </view>
    </view>
    <view class="loadinfo" v-if="list.length > 0 && !loading && noMoreShow">没有更多了</view>
    <!-- <view class="loadinfo"><u-loading size="36" :show="loading" mode="flower"></u-loading></view> -->
	<!-- 无数据展示 -->
	<view class="no-data-blcok" v-if="list.length <= 0 && !loading" style="margin-top: 200rpx;">
		<image class="no-data-img" src="https://ld.726p.com/ldyx_static/imgs/no-order.png" mode="widthFix"></image>
		<view class="no-data-hint">您还没有订单～</view>
	</view>
  </view>
</template>
<script>
export default {
  props:{
    list:{
      type:Array,
      default:[]
    },
    noMoreShow:{
      type:Boolean,
      default:false
    },
    loading:{
      type:Boolean,
      default:true
    },
  },
  data(){
    return{


    }
  },
  methods: {

  },
}
</script>
<style lang="scss" scoped>
.orderWarp{
  .orderBox{
    display: flex;
    align-items: center;
    padding: 20rpx;
    border-bottom: 3rpx solid #f1f1f1;
    background: #fff;
    .imgBox{
      width: 180rpx;
      height: 180rpx;
      flex-shrink: 0;
      margin-right: 30rpx;
      .orderImag{
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
      }
    }
    .title{
      color: #333;
      font-size: 30rpx;
      line-height: 40rpx;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      overflow: hidden;
      /*! autoprefixer: off */
      -webkit-box-orient: vertical;
      /*! autoprefixer: on */
      word-break: break-all ;
	  .shop-icon{
	    width: 30rpx;
	    height: 30rpx;
	    border-radius: 6rpx;
	    display: inline-block;
	    margin-right: 6rpx;
	    margin-top: -7rpx;
	    vertical-align: middle;//解决图片下边框间隙问题
	  }
    }
    .time{
      margin-top: 16rpx;
      font-size: 24rpx;
      color: #666;
      display: flex;
      align-items: center;
	  text{
		  margin-right: 20rpx;
	  }
    }
    .money{
      font-size: 20rpx;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 8rpx;
      .c-f13641{
        color: #f13641;
      }
      .c-2564e2{
        color: #2564e2;
      }
      .text_line{
        text-decoration:line-through
      }
      .f30{
        font-size: 30rpx;
      }
    }
  }
  .loadinfo{
    text-align: center;
    color: #666;
    font-size: 28rpx;
    margin: 20rpx 0;
  }
}
</style>