shop-applet/pages/admin/order/monitor.vue

<template>
  <view class="pos-order-list" ref="container">
    <view class="top-header">
      <view class="search">
        <view class="search-content acea-row row-middle">
          <text class="iconfont icon-sousuo"></text>
          <input v-model="where.keyword" confirm-type="search" placeholder="请输收货人手机号或订单号搜索" class="input"
            @confirm="handleSearch" />
        </view>
      </view>
    </view>
    <view class="pubilc_footer">
      <view class="footer_bon" v-for="(item,index) in list" :key="index">
        <view class=""  v-for="(val, key) in item.orderProduct">
          <view class="bon_top" :key="key" @click="toDetail(item)">
            <view class="public_img">
              <image class="public_img" :src="val.cart_info.product.image" mode=""></image>
            </view>
            <view>
              <view class="text_top">
                <view class="text">
                  {{ val.cart_info.product.store_name }}
                </view>
                <view class="monry">
                  ￥{{ val.total_price }}
                </view>
              </view>
              <view class="text_order">
                订单号: {{ item.order_sn }}
              </view>
            </view>
          </view>
          <view class="bon_bon" :key="key" @click="toDetail(item)">
            <view class="order">
              采购数量
              <view class="txt">
                {{ val.product_num }}
              </view>
            </view>
            <view class="order" style="border-left: 1px solid #999999;border-right: 1px solid #999999;">
              已售数量
              <view class="txt">
                {{ val.sales_volume }}
              </view>
            </view>
            <view class="order">
              库存数量
              <view class="txt">
                {{ val.product_num - val.sales_volume }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <Loading :loaded="loaded" :loading="loading"></Loading>
    <view v-if="!loading && list.length <= 0" class="nothing">
      <image src="/static/images/no_thing.png" mode="widthFix"></image>
      <view class="nothing_text">暂无订单~</view>
    </view>
  </view>
</template>

<script>
  import {
    purchaseOrder
  } from "@/api/admin";
  import Loading from '@/components/Loading/index'
  export default {
    name: "AdminOrderList",
    components: {
      Loading
    },
    data() {
      return {
        current: "",
        change: false,
        refundMark: false,
        types: 1,
        where: {
          page: 1,
          limit: 10,
          status: 1,
          keyword: '',
          product_type: ''
        },
        list: [],
        loaded: false,
        loading: false,
        refundInfo: {},
        orderInfo: {},
        status: "",
        merId: ''
      };
    },
    watch: {
      "$route.params.types": function(newVal) {
        let that = this;
        if (newVal != undefined) {
          that.where.status = newVal;
          that.init();
        }
      },
      types: function() {
        this.getIndex();
      }
    },
    onLoad(option) {
      this.where.product_type = uni.getStorageSync("PRODUCT_TYPE") ?? ""
      this.current = "";
      this.merId = option.merId;
      this.getIndex();
    },
    methods: {
      handleSearch() {
        this.loaded = false;
        this.where.page = 1;
        this.list = [];
        this.getIndex();
      },
      // 获取数据
      getIndex() {
        let that = this;
        if (that.loading || that.loaded) return;
        that.loading = true;
        purchaseOrder(that.where, that.merId).then(
          res => {
            that.loading = false;
            that.loaded = res.data.length < that.where.limit;
            that.list.push.apply(that.list, res.data);
            that.where.page = that.where.page + 1;
          },
          err => {
            that.$util.Tips({
              title: err
            });
          }
        );
      },
      // 初始化
      init: function() {
        this.list = [];
        this.where.page = 1;
        this.loaded = false;
        this.loading = false;
        this.getIndex();
        this.current = "";
      },
      toDetail(item) {
        uni.navigateTo({
          url: `/pages/admin/orderDetail/index?id=${item.order_id}&mer_id=${item.mer_id}`
        })
      }
    },
    onReachBottom() {
      this.getIndex()
    }
  }
</script>

<style lang="scss">
  .pos-order-list .top-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    background-color: #fff;
  }

  .pos-order-list .nav {
    // width: 100%;
    height: 96upx;
    font-size: 30upx;
    color: #282828;
    width: 690rpx;
    margin: 0 auto;
  }

  .pos-order-list .nav .item {
    display: inline-block;
    text-align: center;
    color: #333333;
    max-width: 160rpx;
    margin-right: 50rpx;
    line-height: 96upx;

    &:last-child {
      margin-right: 0;
    }
  }

  .pos-order-list .nav .item.on {
    color: #2291f8;
  }

  .pos-order-list .list {
    margin-top: 100upx;
  }

  .pos-order-list .list .item {
    background-color: #fff;
    width: 100%;
    position: relative;
  }

  .pos-order-list .list .item .item-status {
    position: absolute;
    top: 14rpx;
    right: 20rpx;

    .iconfont {
      font-size: 98rpx;
      color: #CCCCCC;

      &.on {
        color: #FFE3BC;
      }
    }
  }

  .pos-order-list .list .item~.item {
    margin-top: 24upx;
  }

  .pos-order-list .list .activity_type {
    display: inline-block;
    color: #E93323;
    font-size: 20rpx;
    text-align: center;
    border-radius: 5rpx;
    padding: 0 4rpx;
    line-height: 28rpx;
    margin-right: 8rpx;
    border: 1rpx solid #E93323;
  }

  .pos-order-list .list .item .order-num {
    height: 124upx;
    border-bottom: 1px solid #eee;
    font-size: 30upx;
    font-weight: bold;
    color: #282828;
    padding: 0 30upx;
    position: relative;
  }

  .pos-order-list .list .item .order-status {
    color: #ff9600;
    position: absolute;
    top: 24rpx;
    right: 20rpx;
    text-align: right;
    width: 160rpx;
    font-weight: normal;
    font-size: 26rpx;
  }

  .pos-order-list .list .item .order-num .time {
    font-size: 26upx;
    font-weight: normal;
    color: #999;
    margin-top: -40upx;
  }

  .pos-order-list .list .item .operation {
    padding: 20upx 30upx 20upx 0;
    margin: 30upx 0 0 30upx;
    border-top: 1rpx solid #EEEEEE;
  }

  .pos-order-list .list .item .operation .more {
    position: relative;
  }

  .pos-order-list .list .item .operation .icon-gengduo {
    font-size: 50upx;
    color: #aaa;
  }

  .pos-order-list .list .item .operation .order .arrow {
    width: 0;
    height: 0;
    border-left: 11upx solid transparent;
    border-right: 11upx solid transparent;
    border-top: 20upx solid #e5e5e5;
    position: absolute;
    left: 15upx;
    bottom: -18upx;
  }

  .pos-order-list .list .item .operation .order .arrow:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 7upx solid transparent;
    border-right: 7upx solid transparent;
    border-top: 20upx solid #fff;
    position: absolute;
    left: -7upx;
    bottom: 0;
  }

  .pos-order-list .list .item .operation .order {
    width: 200upx;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10upx;
    position: absolute;
    top: -100upx;
    z-index: 9;
  }

  .pos-order-list .list .item .operation .order .items {
    height: 77upx;
    line-height: 77upx;
    text-align: center;
  }

  .pos-order-list .list .item .operation .order .items~.items {
    border-top: 1px solid #f5f5f5;
  }

  .pos-order-list .list .item .operation .bnt {
    font-size: 28upx;
    color: #5c5c5c;
    width: 170upx;
    height: 60upx;
    border-radius: 30upx;
    border: 1px solid #bbb;
    text-align: center;
    line-height: 60upx;
  }

  .pos-order-list .list .item .operation .bnt_color {
    border: none;
    color: #fff;
    background: linear-gradient(90deg, #2291F8 0%, #1CD1DC 100%);
  }

  .pos-order-list .list .item .operation .bnt~.bnt {
    margin-left: 14upx;
  }

  .pos-order-goods {
    padding: 0 30upx;
    background-color: #fff;
  }

  .pos-order-goods .goods {
    padding-top: 20rpx;
    overflow: hidden;
  }

  .pos-order-goods .goods~.goods {
    border-top: 1px dashed #e5e5e5;
  }

  .pos-order-goods .cancellate {
    font-size: 24rpx;
    float: right;
    margin-top: 10rpx;

    text {
      margin-left: 26rpx;
    }
  }

  .pos-order-goods .cancelled {
    color: #FF9600;
  }

  .pos-order-goods .goods .uncancell {
    color: #999999;
  }

  .pos-order-goods .goods .picTxt {
    width: 515upx;
  }

  .pos-order-goods .goods .picTxt .pictrue {
    width: 130upx;
    height: 130upx;
  }

  .pos-order-goods .goods .picTxt .pictrue image {
    width: 100%;
    height: 100%;
    border-radius: 6upx;
  }

  .pos-order-goods .goods .picTxt .text {
    flex-direction: column;
    width: 365upx;
  }

  .pos-order-goods .goods .picTxt .text .info {
    font-size: 28upx;
    color: #282828;

    &.refund-info {
      width: 460upx;
    }
  }

  .refund-y-money {
    margin-top: 16rpx;
    font-size: 26rpx;
  }

  .pos-order-goods .goods .picTxt .text .attr {
    margin-top: 5rpx;
    font-size: 24upx;
    color: #999;
  }

  .pos-order-goods .goods .money {
    width: 164upx;
    text-align: right;
    font-size: 28upx;

    &.refund-money {
      width: auto;
      position: relative;
      top: -50rpx;

      .num {
        color: #999999;
      }

    }

    .refund-num {
      font-size: 24rpx;
      color: #282828;
    }
  }

  .pos-order-goods .goods .money .x-money {
    color: #282828;
  }

  .pos-order-goods .goods .money .num {
    color: #ff9600;
    margin: 5upx 0;
  }

  .pos-order-goods .goods .money .y-money {
    color: #999;
    text-decoration: line-through;
  }

  .pos-order-goods .goods .refund_num {
    display: inline-block;
    margin-left: 10rpx;
  }

  .public-total {
    font-size: 28upx;
    color: #282828;
    height: 92upx;
    line-height: 92upx;
    text-align: right;
    padding: 0 30upx;
    background-color: #fff;
  }

  .public-total .money {
    color: #ff4c3c;
  }

  .nothing {
    margin-top: 200rpx;
    text-align: center;
  }

  .nothing_text {
    margin-top: 20rpx;
    color: #999999;
  }

  .priceChange {
    position: fixed;
    width: 580upx;
    background-color: #fff;
    border-radius: 10upx;
    top: 50%;
    left: 50%;
    margin-left: -290upx;
    margin-top: -335upx;
    z-index: 666;
    transition: all 0.3s ease-in-out 0s;
    transform: scale(0);
    opacity: 0;
  }

  .priceChange.on {
    opacity: 1;
    transform: scale(1);
  }

  .priceChange .priceTitle {
    background: url("~@/static/images/pricetitle.jpg") no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 160upx;
    border-radius: 10upx 10upx 0 0;
    text-align: center;
    font-size: 40upx;
    color: #fff;
    line-height: 160upx;
    position: relative;
  }

  .priceChange .priceTitle .iconfont {
    position: absolute;
    font-size: 40upx;
    right: 26upx;
    top: 23upx;
    width: 40upx;
    height: 40upx;
    line-height: 40upx;
  }

  .priceChange .listChange {
    padding: 0 40upx;
  }

  .priceChange .listChange textarea {
    box-sizing: border-box;
  }

  .priceChange .listChange .item {
    height: 103upx;
    border-bottom: 1px solid #e3e3e3;
    font-size: 32upx;
    color: #333;
  }

  .priceChange .modify {
    font-size: 32upx;
    color: #fff;
    width: 490upx;
    height: 90upx;
    text-align: center;
    line-height: 90upx;
    border-radius: 45upx;
    background-color: #2291f8;
    margin: 53upx auto;
  }

  .priceChange .listChange textarea {
    border: 1px solid #eee;
    width: 100%;
    height: 200upx;
    margin-top: 50upx;
    border-radius: 10upx;
    color: #333;
    padding: 20upx;
  }

  .search {
    padding: 17rpx 30rpx;

    .search-content {
      width: 100%;
      height: 60rpx;
      padding: 0 30rpx;
      border-radius: 30rpx;
      background-color: #F5F5F5;
      font-size: 26rpx;
    }

    .iconfont {
      margin-right: 10rpx;
      font-size: 26rpx;
      color: #999999;
    }

    .input-placeholder {
      font-size: 26rpx;
      color: #999999;
    }

    .input {
      flex: 1;
    }
  }

  .pubilc_footer {
    margin-top: 50px;

    .footer_bon {
      width: 100%;
      border-radius: 8px;
      background-color: #fff;
      padding-bottom: 10px;
      margin-bottom: 10px;

      .bon_top {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .public_img {
          width: 60px;
          height: 60px;
          margin: 12px;
        }

        .text_top {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin: 3px 0 3px 3px;

          .text {
            width: 180px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .monry {
            margin-left: 20px;
            color: #F84221;
          }
        }

        .text_order {
          width: 200px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-left: 3px;
        }
      }

      .bon_bon {
        width: 90%;
        height: 66px;
        background: #F5F5F5;
        border-radius: 4px 4px 4px 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        margin: auto;
        margin-bottom: 10px;
        margin-top: 5px;

        .order {
          width: 120px;

          .txt {
            margin-top: 5px;
          }
        }
      }
    }
  }
</style>