zhangsiye/mini/pages/share/order.vue

<template>
  <view class="share-order">
    <view
      v-for="(item, index) in order"
      :key="index"
      class="order-box"
    >
      <view class="order-num">
        订单号: {{ item.order_id }}
      </view>
      <view class="child-info main-between cross-center">
        <view class="base main-left cross-center">
          <view class="head-img">
            <image :src="item.order.user.avatar" />
          </view>
          <view class="nickname main-left cross-center">
            <view class="nickname">
              <u-text :text="item.order.user.nickname" :lines="1" color="#ffffff" size="28rpx" />
            </view>
            <view class="level">1级</view>
          </view>
        </view>
        <view class="income-info main-left cross-center">
          <text>已得佣金:{{ item.income }}元</text>
          <u-icon :name="item.showDetail?'arrow-up':'arrow-down'" top="1" @click="handleShow(item)" />
        </view>
      </view>
      <view v-show="item.showDetail" class="detail main-between cross-center">
        <view class="goods-info main-left cross-center">
          <view class="cover-img">
            <image />
          </view>
          <view class="combo dir-top-wrap main-center">
            <text class="type">{{ item.type_name }}</text>
            <text>{{ item.order.combo.name }}</text>
          </view>
        </view>
        <view class="income dir-top-wrap">
          <view class="num">x1</view>
          <view class="price">￥{{ item.order.combo.price }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ShareOrder',
  components: {},

  data() {
    return {
      limit: 10,
      page: 1,
      isMore: true,
      order: []
    }
  },
  computed: {},
  methods: {
    handleShow(item) {
      item.showDetail = !item.showDetail
    },
    getOrder() {
      this.$loading()
      this.$api.share.order.lists({ limit: this.limit, page: this.page }).then(res => {
        this.$hideLoading()
        if (res.data.length) {
          res.data.forEach(obj => {
            obj.showDetail = false
          })
          this.order = this.order.concat(res.data)
        } else {
          this.isMore = false
        }
      })
    }
  },
  onLoad() {
    this.getOrder()
  },
  onReachBottom(e) {
    if (!this.isMore) return
    this.page += 1
    this.getOrder()
  }
}
</script>

<style lang="scss" scoped>
.share-order {
  padding: 40rpx 30rpx;
  font-size: 28rpx;
  .order-box{
    background: $bg-op-color;
    color: #ffffff;
    padding: 30rpx 0;
    border-radius: 20rpx;
    margin-bottom: 30px;
    .order-num{
      padding: 0 30rpx 30rpx;
      border-bottom: 1rpx $border-op-color solid;
    }
    .child-info{
      padding: 30rpx 30rpx;
      .base{
        .head-img{
          width: 70rpx;
          height: 70rpx;
          border-radius: 50%;
          overflow: hidden;
          background: #ccc;
          image{
            width: 100%;
            height: 100%;
          }
        }
        .nickname{
          margin-left: 10rpx;
          flex: 1;
          .level{
            color: #6eebe8;
          }
        }
      }
      .income-info{
        text{
          margin-right: 18rpx;
        }
      }
    }
    .detail{
      padding: 30rpx 30rpx 0;
      border-top: 1rpx $border-op-color solid;
      .goods-info{
        .cover-img{
          width: 80rpx;
          height: 80rpx;
          border-radius: 8rpx;
          overflow: hidden;
          background: #ccc;
          image{
            width: 100%;
            height: 100%;
          }
        }
        .combo{
          margin-left: 20rpx;
          .type{
            margin-bottom: 6rpx;
          }
        }
      }
      .income{
        color: #6eebe8;
        text-align: right;
        .num{
          font-size: 24rpx;
          margin-bottom: 6rpx;
        }
      }
    }
  }
}
</style>