yicangzongtai_app_240321/pages/order/orderList/log.vue

<template>
  <view class="event-details">
    <navbar ref="navbar" :config="config" backColor="#666"></navbar>
    <view class="middle">
      <view v-if="logList.length > 0">
        <view class="item" v-for="(item, index) in logList" :key="index">
          <view class="box">
            <view class="time">
              {{ item.verification_time }}
            </view>
          </view>
          <view class="content">
                 <view class="title"> 操作人： {{ item.admin }} </view>
            <view class="title"> 核销码： {{ item.verification_code }} </view>
         <view class="title"> 备注： {{ item.remark }} </view>
          </view>
 
          
        </view>
        <loadMore v-if="logList.length > 0" :status="status"></loadMore>
      </view>
      <nodata v-else :config="{ top: 20, content: '暂无数据~' }"></nodata>
    </view>
    <ldLoading isFullScreen :active="loading"></ldLoading>
  </view>
</template>

<script>
export default {
  data() {
    return {
      config: {
        back: true, //false是tolbar页面 是则不写
        title: "核销记录",
        color: "#1A1A1A",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, "#FFFFFF"],
        statusBarFontColor: "#1A1A1A",
      },
      status: "more",
      params: {
        //分页
        page: 1,
        limit: 10,
      },
      type: null,
      logList: [],
      loading: true,

      params: {
        order_id: null,
        child_order_id: null,
        page: 1,
        limit: 10,
      },
    };
  },
  onLoad(options) {
    if (options.id && options.childId) {
      this.params.order_id = options.id;
      this.params.child_order_id = options.childId;
    }
    this.getLog();
  },
  //上拉加载
  onReachBottom(e) {
    this.params.page++;
    this.getLog();
  },

  //下拉刷新
  onPullDownRefresh() {
    this.params.page = 1;
    this.logList = [];
    this.getLog();
    uni.stopPullDownRefresh();
  },
  //不知道有哪些消息啊
  methods: {
    //获取数据
    getLog() {
      this.$http.get("/sgoodsverification/list", this.params).then((res) => {
        if (res && res.code == 200) {
          this.loading = false;
       

          this.logList = this.logList.concat(res.page.list);

          if (res.page.totalPage <= res.page.currPage) {
            this.status = "noMore";
          } else {
            this.status = "more";
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
	.event-details{
		min-height: 100vh;
	}
.middle {
  padding: 0 30rpx;
  .item {
    .box {
      display: flex;
      justify-content: center;
      .time {
        font-size: 22rpx;
        color: #666666;
        font-weight: 400;
        background-color: #e3e3e3;
        padding: 10rpx 20rpx;
        border-radius: 24rpx;
        margin: 40rpx 0;
      }
    }
    .content {
      padding: 44rpx 30rpx;
      background-color: #ffffff;
      border-radius: 18rpx;
      .bottom-time {
        font-size: 24rpx;
        color: #999999;
        font-weight: 400;
      }
      .logistics-top {
        font-size: 28rpx;
        color: #1a1a1a;
        font-weight: 400;
      }
      .logistics-box {
        margin-top: 22rpx;
        display: flex;
        .logistics-left {
          image {
            width: 156rpx;
            height: 156rpx;
          }
        }
        .logistics-right {
          margin-left: 32rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .logistics-right-top {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-wrap: break-word;
            word-break: break-all;
            white-space: normal !important;
            font-size: 26rpx;
            color: #1a1a1a;
            font-weight: 400;
            flex: 1;
          }
          .logistics-right-content {
            color: #1a1a1a;
            font-size: 26rpx;
            font-weight: 400;
            margin-bottom: 8rpx;
            text {
              color: #999999;
              margin-left: 16rpx;
            }
          }
          .logistics-right-bottom {
            font-size: 22rpx;
            color: #999999;
            font-weight: 400;
            margin-bottom: 18rpx;
          }
        }
      }

      .bottom-box {
        text-align: right;

        text {
          color: #ff0000;
          font-size: 32rpx;
          font-weight: Bold;
        }
      }

      .title {
        font-size: 28rpx;
        color: #1a1a1a;
        font-weight: 400;
        margin-bottom: 26rpx;
      }

      .small-box {
        margin-bottom: 60rpx;
        display: flex;

        .small-left {
          image {
            width: 200rpx;
            height: 200rpx;
          }
        }

        .small-right {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 30rpx;

          .small-top {
            flex: 1;
          }

          .specifications {
            font-size: 22rpx;
            color: #999999;
            font-weight: 400;
            margin-bottom: 14rpx;
          }

          .price {
            color: #1a1a1a;
            font-size: 26rpx;
            font-weight: 400;

            text {
              margin-left: 13rpx;
              color: #999999;
            }
          }
        }
      }

      .single-data {
        .single-img {
          display: flex;
          flex-wrap: nowrap;
          overflow: hidden;

          image {
            width: 200rpx;
            height: 200rpx;
            padding: 0 5rpx;
          }
        }

        .single-bottom {
          text-align: right;
          margin-right: 10rpx;
          margin-top: 60rpx;

          text {
            color: #ff0000;
            font-size: 32rpx;
            font-weight: bold;
          }
        }
      }

      .image {
        image {
          width: 630rpx;
          height: 250rpx;
        }
      }
    }
  }
}

.event-details {
  background-color: #f5f5f5;
}
</style>